/**
 * Filterable Gallery for Divi 5 — Frontend Styles
 *
 * Filter bar styling and gallery item show/hide transitions.
 * Mirrors .et_pb_portfolio_filters conventions for visual consistency
 * with Divi's native filterable portfolio module.
 *
 * @package Divi5_Filterable_Gallery
 */


/* =============================================================================
   Filter Bar
   ============================================================================= */

.dfg-gallery-filters {
	margin-bottom: 30px;
	text-align: center;
}

.dfg-gallery-filters ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.dfg-gallery-filters li {
	margin: 0;
}

.dfg-gallery-filters a {
	display: inline-block;
	padding: 10px 20px;
	text-decoration: none;
	color: #333;
	background-color: #f5f5f5;
	border-radius: 4px;
	font-family: inherit;
	font-weight: 600;
	font-size: 0.875rem;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dfg-gallery-filters a:hover {
	background-color: #e8e8e8;
}

.dfg-gallery-filters a:focus-visible {
	outline: 2px solid var(--dfg-active-bg, #2271b1);
	outline-offset: 2px;
}

.dfg-gallery-filters .active a,
.dfg-gallery-filters a.active {
	background-color: var(--dfg-active-bg, #2271b1);
	color: #fff;
}

.dfg-count {
	margin-left: 4px;
	opacity: 0.7;
	font-weight: 400;
}


/* =============================================================================
   Gallery Item Show/Hide
   =============================================================================
   Use display:none rather than opacity+collapse. Divi 5 gallery items use
   float/inline-block widths, so collapsing height alone leaves the item's
   width slot in the grid — visible items don't reflow up to fill gaps.
   display:none removes the element from layout entirely, letting visible
   items pack tightly. !important is required because Divi sets display
   inline on each item via style="display: block;".
   ============================================================================= */

.et_pb_gallery_item.dfg-hidden {
	display: none !important;
}


/* =============================================================================
   Mobile: Wrap Filter Buttons
   =============================================================================
   On narrow viewports the filters wrap onto multiple centered rows so every
   button stays visible and tappable. (Through 1.2.5 this used a hidden
   horizontal-scroll bar, which pushed filters off-screen with no scroll
   affordance — buttons simply got clipped at the edge.)
   ============================================================================= */

@media (max-width: 600px) {
	.dfg-gallery-filters {
		margin-bottom: 24px;
	}

	.dfg-gallery-filters a {
		white-space: nowrap;
		padding: 9px 16px;
		font-size: 0.8125rem;
	}
}


/* =============================================================================
   Reduced Motion Support
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
	.dfg-gallery-filters a {
		transition: none;
	}
}