/**
 * Featured Gallery -- Frontend Styles
 *
 * Grid: a full-width row, then a two-column row, repeating. Row/column
 * gaps and both row heights are driven by CSS custom properties so
 * Elementor's responsive slider controls can override them per
 * breakpoint without needing separate desktop/tablet/mobile rule sets
 * here.
 *
 * The lightbox override blocks below deliberately target a per-instance
 * class (fg-lightbox-{widget_id}) rather than {{WRAPPER}}, because
 * Fancybox portals its toolbar onto <body>, outside this widget's own
 * DOM subtree. See the widget class docblock for the full explanation,
 * including why the fullscreen button repositioning uses position:fixed
 * rather than position:absolute, and why the backdrop opacity override
 * is scoped to .fancybox-is-open rather than the bare .fancybox-bg.
 */

/*
 * Defensive: some Elementor flex "container" parents don't stretch a
 * child widget to fill the row by default. Matches the convention used
 * in the Featured Content Carousel widget.
 */
.elementor-widget-featured_gallery_4c8f21ae,
.elementor-widget-featured_gallery_4c8f21ae > .elementor-widget-container {
	width: 100%;
}

.fg-container-4c8f21ae {
	--fg-full-height-4c8f21ae: 520px; /* fallback, overridden per-breakpoint by Elementor */
	--fg-split-height-4c8f21ae: 380px;
	--fg-row-gap-4c8f21ae: 16px;
	--fg-col-gap-4c8f21ae: 16px;
	--fg-overlay-color-4c8f21ae: rgba(0, 0, 0, 0.75);
	--fg-overlay-reach-4c8f21ae: 140px;
	--fg-icon-color-4c8f21ae: #ffffff;
	--fg-icon-size-4c8f21ae: 22px;
	--fg-icon-gap-4c8f21ae: 16px; /* space between the download and magnify icons */

	display: flex;
	flex-direction: column;
	row-gap: var( --fg-row-gap-4c8f21ae );
	width: 100%;
}

.fg-row-4c8f21ae {
	width: 100%;
}

.fg-row-split-4c8f21ae {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var( --fg-col-gap-4c8f21ae );
}

.fg-item-4c8f21ae {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
}

.fg-row-full-4c8f21ae .fg-item-4c8f21ae {
	height: var( --fg-full-height-4c8f21ae );
}

.fg-row-split-4c8f21ae .fg-item-4c8f21ae,
.fg-item-empty-4c8f21ae {
	height: var( --fg-split-height-4c8f21ae );
}

/* Reserves the grid track when a trailing pair only has one image, per the locked spec (no stretch, no pull-up). */
.fg-item-empty-4c8f21ae {
	visibility: hidden;
}

.fg-image-4c8f21ae {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
}

/* ---------- Hover: gradient rise + overlay icons (image 3 reference) ---------- */
.fg-overlay-4c8f21ae {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var( --fg-overlay-reach-4c8f21ae );
	background: linear-gradient( to top, var( --fg-overlay-color-4c8f21ae ) 0%, rgba( 0, 0, 0, 0 ) 100% );
	mix-blend-mode: multiply;
	opacity: 0;
	transform: translateY( 8px );
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}

.fg-zoom-icon-4c8f21ae {
	position: absolute;
	right: 20px;
	bottom: 20px;
	width: var( --fg-icon-size-4c8f21ae );
	height: var( --fg-icon-size-4c8f21ae );
	color: var( --fg-icon-color-4c8f21ae );
	opacity: 0;
	transform: translateY( 8px );
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}

.fg-zoom-icon-4c8f21ae svg {
	width: 100%;
	height: 100%;
}

/*
 * Custom magnify icon: only active when fg-has-magnify-icon-4c8f21ae is
 * present on the container (added conditionally in PHP when the control
 * has a value). Same mask + currentColor technique as the lightbox
 * icons, but scoped to {{WRAPPER}} since this markup is ours, not
 * Fancybox's -- see class docblock.
 */
.fg-container-4c8f21ae.fg-has-magnify-icon-4c8f21ae .fg-zoom-icon-4c8f21ae svg {
	display: none;
}

.fg-container-4c8f21ae.fg-has-magnify-icon-4c8f21ae .fg-zoom-icon-4c8f21ae::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: currentColor;
	mask-image: var( --fg-magnify-icon-4c8f21ae );
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-image: var( --fg-magnify-icon-4c8f21ae );
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

/*
 * Overlay download icon: the element itself only exists in the markup when
 * the control has a value, so no default/empty state is needed here. It
 * shares --fg-icon-size and --fg-icon-color with the magnify icon (one set
 * of global overlay icon settings) and sits to the LEFT of it.
 *
 * Structure: the span is the positioned box. ::before paints the masked
 * icon; ::after is an invisible, larger hit area. They have to be separate
 * pseudo-elements because a mask clips everything on the element it is
 * applied to, which would clip the hit area too if both lived on the span.
 *
 * pointer-events stays none until the item is hovered, so an invisible
 * download button can never swallow a click meant to open the lightbox.
 */
.fg-download-icon-4c8f21ae {
	display: none;
}

.fg-container-4c8f21ae.fg-has-download-icon-4c8f21ae .fg-download-icon-4c8f21ae {
	display: block;
	position: absolute;
	right: calc( 20px + var( --fg-icon-size-4c8f21ae ) + var( --fg-icon-gap-4c8f21ae ) );
	bottom: 20px;
	width: var( --fg-icon-size-4c8f21ae );
	height: var( --fg-icon-size-4c8f21ae );
	color: var( --fg-icon-color-4c8f21ae );
	cursor: pointer;
	opacity: 0;
	transform: translateY( 8px );
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}

.fg-container-4c8f21ae.fg-has-download-icon-4c8f21ae .fg-download-icon-4c8f21ae::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: currentColor;
	mask-image: var( --fg-download-icon-4c8f21ae );
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-image: var( --fg-download-icon-4c8f21ae );
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

/* Invisible larger click target so a small icon is still easy to hit. */
.fg-container-4c8f21ae.fg-has-download-icon-4c8f21ae .fg-download-icon-4c8f21ae::after {
	content: '';
	position: absolute;
	inset: -10px;
}

.fg-item-4c8f21ae:hover .fg-overlay-4c8f21ae,
.fg-item-4c8f21ae:focus-visible .fg-overlay-4c8f21ae,
.fg-item-4c8f21ae:hover .fg-zoom-icon-4c8f21ae,
.fg-item-4c8f21ae:focus-visible .fg-zoom-icon-4c8f21ae,
.fg-item-4c8f21ae:hover .fg-download-icon-4c8f21ae,
.fg-item-4c8f21ae:focus-visible .fg-download-icon-4c8f21ae,
.fg-item-4c8f21ae:focus-within .fg-download-icon-4c8f21ae {
	opacity: 1;
	transform: translateY( 0 );
}

.fg-item-4c8f21ae:hover .fg-download-icon-4c8f21ae,
.fg-item-4c8f21ae:focus-visible .fg-download-icon-4c8f21ae,
.fg-item-4c8f21ae:focus-within .fg-download-icon-4c8f21ae {
	pointer-events: auto;
}

.fg-download-icon-4c8f21ae:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 6px;
}

@media ( prefers-reduced-motion: reduce ) {
	.fg-overlay-4c8f21ae,
	.fg-zoom-icon-4c8f21ae,
	.fg-download-icon-4c8f21ae {
		transition: none;
	}
}

/* ---------- Editor-only placeholder notice ---------- */
.fg-editor-notice-4c8f21ae {
	padding: 40px 20px;
	margin-bottom: 20px;
	background: #fff4e5;
	border: 1px dashed #d9822b;
	color: #7a4a05;
	font-size: 14px;
}

/* ---------- Mobile: single column, both row types stack full width ---------- */
@media ( max-width: 767px ) {
	.fg-row-split-4c8f21ae {
		grid-template-columns: 1fr;
		row-gap: var( --fg-row-gap-4c8f21ae );
	}

	.fg-row-split-4c8f21ae .fg-item-4c8f21ae,
	.fg-item-empty-4c8f21ae {
		height: var( --fg-full-height-4c8f21ae );
	}

	.fg-item-empty-4c8f21ae {
		display: none; /* on a single column there's no adjacent slot left to reserve */
	}
}

/*
 * ---------- Lightbox toolbar background ----------
 * NOT {{WRAPPER}}-scoped: Fancybox appends its markup to <body>, so it
 * lives outside this widget's DOM. The class below (fg-lightbox-{id})
 * is passed into Fancybox's own 'baseClass' option in script.js, and
 * is unique per widget instance, so this rule only ever affects this
 * gallery's own popup, never another instance of this widget or the
 * theme's other Fancybox usages (product gallery, blog, portfolio
 * cards) elsewhere on the site.
 *
 * Only `background` lives here -- `color` is deliberately NOT set in
 * this static rule. It used to be, and that was a bug: this selector
 * and the Toolbar Icon Color control's generated per-instance selector
 * (.fancybox-container.fg-lightbox-{id} .fancybox-button) have IDENTICAL
 * specificity (three class-level selectors either way), so whichever one
 * loaded later in the cascade silently won regardless of what color the
 * control was actually set to. Color must only ever come from that
 * control below.
 */
.fancybox-container[class*="fg-lightbox-"] .fancybox-button {
	background: transparent; /* Fancybox's default translucent dark circle removed per design */
}

/*
 * ---------- Custom lightbox icons ----------
 * Each fg-icon-* modifier class is only present when the matching
 * Elementor MEDIA control has a value (added conditionally in PHP),
 * so an untouched control always falls straight through to Fancybox's
 * own default icon below rather than rendering an empty mask.
 *
 * Technique: hide Fancybox's built-in <svg>, then paint the uploaded
 * icon as a CSS mask on a ::before pseudo-element. background-color
 * is currentColor, which inherits the `color` set by the Toolbar Icon
 * Color control -- so that one control keeps tinting every icon,
 * default or custom. Only correct for single-color silhouette icons.
 *
 * Fullscreen enter (fg-icon-fullscreen-enter -> .fancybox-button--fsenter)
 * and fullscreen exit (fg-icon-fullscreen-exit -> .fancybox-button--fsexit)
 * are two fully independent rule sets, not a shared one -- Fancybox
 * toggles a SINGLE button element between those two classes at runtime
 * (confirmed in its own JS), so scoping each state to its own class
 * already targets the correct moment automatically: no separate
 * fullscreen-state tracking needed here.
 *
 * IMPORTANT re: inset:0 below -- this base rule fills the button's FULL
 * border-box, ignoring any padding on the button. That's correct for
 * close/download/fullscreen (plain 44x44 buttons, no padding tricks
 * applied to them), but it is NOT correct for the arrow buttons, whose
 * padding is deliberately heavy to keep a large tap target with a small
 * visible glyph (see the nav-arrows block further down). Confirmed live
 * that with only this base rule, an uploaded arrow icon rendered at the
 * FULL 84x110 button size regardless of that padding, because an
 * absolutely-positioned inset:0 pseudo-element sizes against the parent's
 * border-box, not its content-box -- padding has no effect on it. The
 * arrow-specific override further down replaces inset:0 with explicit
 * top/right/bottom/left matching that same padding, so the custom icon
 * actually shrinks into the same content-box the native icon would have.
 */
.fancybox-container[class*="fg-lightbox-"].fg-icon-fullscreen-enter .fancybox-button--fsenter svg,
.fancybox-container[class*="fg-lightbox-"].fg-icon-fullscreen-exit .fancybox-button--fsexit svg,
.fancybox-container[class*="fg-lightbox-"].fg-icon-close .fancybox-button--close svg,
.fancybox-container[class*="fg-lightbox-"].fg-icon-download .fancybox-button--download svg,
.fancybox-container[class*="fg-lightbox-"].fg-icon-prev .fancybox-button--arrow_left svg,
.fancybox-container[class*="fg-lightbox-"].fg-icon-next .fancybox-button--arrow_right svg {
	visibility: hidden;
}

.fancybox-container[class*="fg-lightbox-"].fg-icon-fullscreen-enter .fancybox-button--fsenter::before,
.fancybox-container[class*="fg-lightbox-"].fg-icon-fullscreen-exit .fancybox-button--fsexit::before,
.fancybox-container[class*="fg-lightbox-"].fg-icon-close .fancybox-button--close::before,
.fancybox-container[class*="fg-lightbox-"].fg-icon-download .fancybox-button--download::before,
.fancybox-container[class*="fg-lightbox-"].fg-icon-prev .fancybox-button--arrow_left::before,
.fancybox-container[class*="fg-lightbox-"].fg-icon-next .fancybox-button--arrow_right::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: currentColor;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: 55%; /* close/download/fullscreen only -- arrows override this below */
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: 55%;
}

.fancybox-container[class*="fg-lightbox-"].fg-icon-fullscreen-enter .fancybox-button--fsenter::before {
	mask-image: var( --fg-lb-icon-fullscreen-enter );
	-webkit-mask-image: var( --fg-lb-icon-fullscreen-enter );
}

.fancybox-container[class*="fg-lightbox-"].fg-icon-fullscreen-exit .fancybox-button--fsexit::before {
	mask-image: var( --fg-lb-icon-fullscreen-exit );
	-webkit-mask-image: var( --fg-lb-icon-fullscreen-exit );
}

.fancybox-container[class*="fg-lightbox-"].fg-icon-close .fancybox-button--close::before {
	mask-image: var( --fg-lb-icon-close );
	-webkit-mask-image: var( --fg-lb-icon-close );
}

.fancybox-container[class*="fg-lightbox-"].fg-icon-download .fancybox-button--download::before {
	mask-image: var( --fg-lb-icon-download );
	-webkit-mask-image: var( --fg-lb-icon-download );
}

.fancybox-container[class*="fg-lightbox-"].fg-icon-prev .fancybox-button--arrow_left::before {
	mask-image: var( --fg-lb-icon-prev );
	-webkit-mask-image: var( --fg-lb-icon-prev );
	/*
	 * Overrides the shared inset:0 above with the SAME padding numbers
	 * used on .fancybox-button--arrow_left itself (see nav-arrows block),
	 * so the custom icon shrinks into that same ~22x22 content-box instead
	 * of filling the full 84x110 button. mask-size:contain (not 55%) so it
	 * fills that now-correctly-sized box exactly.
	 */
	top: 44px;
	right: 50px;
	bottom: 44px;
	left: 12px;
	mask-size: contain;
	-webkit-mask-size: contain;
}

.fancybox-container[class*="fg-lightbox-"].fg-icon-next .fancybox-button--arrow_right::before {
	mask-image: var( --fg-lb-icon-next );
	-webkit-mask-image: var( --fg-lb-icon-next );
	top: 44px;
	right: 12px;
	bottom: 44px;
	left: 50px;
	mask-size: contain;
	-webkit-mask-size: contain;
}

/*
 * ---------- Toolbar layout: match the mockup ----------
 * Fancybox's default toolbar is a single top-right row holding all
 * three buttons together. Splitting fullscreen out to its own top-left
 * corner means pulling it out of that row's flow independently; download
 * + close stay together in the default top-right position.
 *
 * These two selectors cover both states of the fullscreen button (the
 * class toggles between them, see docblock above), so the repositioning
 * applies regardless of which one Fancybox currently has active.
 *
 * position:fixed, not position:absolute: verified live in the browser
 * that .fancybox-container carries a CSS transform for its open/close
 * animation, which makes it (not .fancybox-toolbar) the containing
 * block for a position:fixed descendant -- and .fancybox-container's
 * box happens to equal the full viewport, so top/left below resolve
 * against the page corner as intended. position:absolute was tried
 * first and does NOT work here: the button's nearest positioned
 * ancestor is the small .fancybox-toolbar box (anchored top-right), so
 * an absolute offset would resolve against that instead of the corner.
 *
 * The base rule below is the mobile/tablet fallback (20px). Desktop
 * gets 88px vertical + a horizontal inset to match the arrows, set in
 * the min-width block further down alongside .fancybox-slide--image
 * and .fancybox-toolbar so all four stay in sync at that breakpoint.
 */
.fancybox-container[class*="fg-lightbox-"] .fancybox-button--fsenter,
.fancybox-container[class*="fg-lightbox-"] .fancybox-button--fsexit {
	position: fixed !important;
	top: 20px;
	left: 20px;
	z-index: 99997;
}

/*
 * ---------- Nav arrows: smaller visible icon, larger tap target ----------
 * Fancybox's own default is a 70x100px hit area. Widened it slightly
 * (84x110) while shrinking the visible glyph down to ~22x22 purely
 * through heavy, asymmetric padding -- the asymmetry (much larger
 * padding on the inward side) keeps the chevron pinned near the outer
 * edge while the extra invisible tap area extends toward the image.
 * This padding drives the native-icon fallback's size automatically
 * (a plain child <svg> naturally respects the parent's content-box);
 * the custom-icon ::before above needed its own explicit override with
 * the SAME numbers, since an absolutely-positioned pseudo-element does
 * not respect padding on its own -- see the note above that rule.
 */
.fancybox-container[class*="fg-lightbox-"] .fancybox-button--arrow_left,
.fancybox-container[class*="fg-lightbox-"] .fancybox-button--arrow_right {
	width: 84px;
	height: 110px;
	top: calc( 50% - 55px );
}

.fancybox-container[class*="fg-lightbox-"] .fancybox-button--arrow_left {
	padding: 44px 50px 44px 12px;
}

.fancybox-container[class*="fg-lightbox-"] .fancybox-button--arrow_right {
	padding: 44px 12px 44px 50px;
}

/*
 * ---------- Desktop: image padding + all four controls moved inward ----------
 * Fancybox's own default is 44px top/bottom on .fancybox-slide--image
 * (its short-viewport media query at max-height:576px is untouched by
 * this override, since it's a separate max-height query, not width).
 * The toolbar, fullscreen button and both nav arrows all move in from
 * the raw viewport edge to the same 40px inset so the whole toolbar +
 * navigation reads as one consistent frame around the image rather than
 * icons scattered at the four corners of the browser window.
 */
@media ( min-width: 768px ) {
	.fancybox-container[class*="fg-lightbox-"] .fancybox-slide--image {
		padding: 88px 0;
	}

	.fancybox-container[class*="fg-lightbox-"] .fancybox-toolbar {
		top: 78px;
		right: 40px;
	}

	.fancybox-container[class*="fg-lightbox-"] .fancybox-button--fsenter,
	.fancybox-container[class*="fg-lightbox-"] .fancybox-button--fsexit {
		top: 78px;
		left: 40px;
	}

	.fancybox-container[class*="fg-lightbox-"] .fancybox-button--arrow_left {
		left: 40px;
	}

	.fancybox-container[class*="fg-lightbox-"] .fancybox-button--arrow_right {
		right: 40px;
	}
}