/**
 * Featured Content Carousel — Frontend Styles
 *
 * DESKTOP (>1024px) content-column children (top to bottom): nav
 * (fixed at top), panels (margin-top:auto — bottom-anchored, grows
 * upward as content gets longer — with a configurable margin-bottom
 * gapping it from the thumb row), thumb row (flush after panels).
 * Only nav and panels carry the Content Gutter indent; the thumb row
 * deliberately doesn't, so it sits right next to the image column,
 * separated only by Gap Between Slots (the same --fcc-zone-gap-3a9c6e42
 * used between peek and large).
 *
 * TABLET/MOBILE (<=1024px): .fcc-image-col-3a9c6e42 (the desktop
 * peek+large row) and .fcc-thumb-row-3a9c6e42 are both hidden;
 * .fcc-mobile-track-3a9c6e42 (a separate three-zone filmstrip —
 * peek-prev | large | peek-next, see media query below) takes over,
 * gapped from the content block above it by Mobile Content Gap. Nav
 * and panels get a flat Mobile Content Padding percentage instead of
 * Content Gutter; the large zone's width is DERIVED from that same
 * padding (so its edges line up with the text above it — see the
 * media query for the exact calc()), while the peek zones fill the
 * remaining space out to the true screen edge, stopping only Gap
 * Between Slots short of the large zone.
 *
 * BOTH breakpoints use the same mechanism: all zone elements (image
 * column's, thumb row's, and the mobile track's) are purely
 * structural/invisible — they reserve the layout space for each slot
 * but never render anything themselves. The actual .fcc-slide-3a9c6e42
 * elements are separate, absolutely positioned directly on
 * .fcc-container-3a9c6e42 (not nested in any column/track), and
 * script.js's FLIP logic animates each one's left/top/width/height to
 * match whichever zone it's currently assigned to — see that file's
 * header for the full mechanism.
 */

/*
 * Elementor's flex "container" element type does not stretch a child
 * widget to fill the row's WIDTH by default (that axis needs an
 * explicit rule). HEIGHT is usually fine automatically on the widget's
 * own wrapper, since it's the flex cross-axis under Elementor's
 * default row direction with align-items:stretch — but that stretch
 * only gives the WRAPPER a real computed height; .elementor-widget-
 * container is a plain block div inside it, not itself a flex item,
 * so it still needs its own explicit height:100% to inherit that
 * height rather than sizing to content (the default for a block div).
 * Without this, "Section Height: 100%" on .fcc-container-3a9c6e42 has
 * nothing definite to resolve its percentage against.
 * ".elementor-widget-featured_content_carousel_3a9c6e42" is the
 * static per-widget-type class Elementor always adds (from
 * get_name()), safe to target directly here since it's the same for
 * every instance, unlike the per-instance {{WRAPPER}} selector which
 * only exists inside PHP control definitions.
 */
.elementor-widget-featured_content_carousel_3a9c6e42,
.elementor-widget-featured_content_carousel_3a9c6e42 > .elementor-widget-container {
	width: 100%;
	height: 100%;
}

.fcc-container-3a9c6e42 {
	--fcc-container-width-3a9c6e42: 1440px; /* fallback (design reference), overwritten by script.js on load/resize */
	--fcc-container-height-3a9c6e42: 700px; /* fallback, overwritten by script.js on load/resize */
	--fcc-peek-pct-3a9c6e42: 6.46;
	--fcc-large-pct-3a9c6e42: 50;
	--fcc-thumb-width-pct-3a9c6e42: 29;
	--fcc-gutter-pct-3a9c6e42: 7.99;
	--fcc-gutter-3a9c6e42: calc( var( --fcc-container-width-3a9c6e42 ) * var( --fcc-gutter-pct-3a9c6e42 ) / 100 );
	--fcc-mobile-content-padding-3a9c6e42: 10%;
	--fcc-mobile-content-padding-num-3a9c6e42: 10; /* unitless twin of the var above, for calc() math — set by the same control */
	--fcc-mobile-content-gap-3a9c6e42: 45px;
	--fcc-panels-margin-bottom-3a9c6e42: 75px;
	--fcc-thumb-height-pct-3a9c6e42: 30;
	--fcc-thumb-height-3a9c6e42: calc( var( --fcc-container-height-3a9c6e42 ) * var( --fcc-thumb-height-pct-3a9c6e42 ) / 100 ); /* desktop: % of the widget's own rendered height, so thumbnails stay in proportion to the large slide as Section Height changes */
	--fcc-mobile-thumb-height-3a9c6e42: 160px; /* tablet/mobile only: the two PEEK zones' height */
	--fcc-mobile-large-height-3a9c6e42: 260px; /* tablet/mobile only: the LARGE zone's height (taller than the peeks) and the filmstrip row's own height */
	--fcc-zone-gap-3a9c6e42: 12px;
	--fcc-duration-3a9c6e42: 600ms;
	position: relative;
	display: flex;
	align-items: stretch;
	column-gap: var( --fcc-zone-gap-3a9c6e42 ); /* the only spacing between the image column and content column — Content Gutter is purely an internal indent on nav/panels */
	width: 100%;
	height: 100%; /* fallback — the actual behavior is set by the Section Height control (default 100%, inheriting from the chain above; px is also selectable) */
}

/* ---------- Image column (desktop only, hidden on tablet/mobile below): pure-CSS edge bleed, see file header ---------- */
.fcc-image-col-3a9c6e42 {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: var( --fcc-zone-gap-3a9c6e42 );
	flex: 0 0 auto;
	width: calc( var( --fcc-container-width-3a9c6e42 ) * ( var( --fcc-peek-pct-3a9c6e42 ) + var( --fcc-large-pct-3a9c6e42 ) ) / 100 + var( --fcc-zone-gap-3a9c6e42 ) );
	margin-left: calc( -1 * ( var( --fcc-container-width-3a9c6e42 ) * var( --fcc-peek-pct-3a9c6e42 ) / 100 + var( --fcc-zone-gap-3a9c6e42 ) ) );
	min-width: 0;
	overflow: hidden;
}

/* Structural/invisible at every breakpoint — all zones (desktop's image column + thumb row, and the mobile track's three) are pure rect-reference markers for script.js's FLIP system; the real slide content lives in the separate, absolutely positioned .fcc-slide-3a9c6e42 elements. */
.fcc-zone-3a9c6e42 {
	visibility: hidden;
	pointer-events: none;
}

.fcc-image-col-3a9c6e42 .fcc-zone-3a9c6e42[data-zone="peek"] {
	flex: 0 0 auto;
	width: calc( var( --fcc-container-width-3a9c6e42 ) * var( --fcc-peek-pct-3a9c6e42 ) / 100 );
	height: var( --fcc-thumb-height-3a9c6e42 );
}

.fcc-image-col-3a9c6e42 .fcc-zone-3a9c6e42[data-zone="large"] {
	flex: 0 0 auto;
	width: calc( var( --fcc-container-width-3a9c6e42 ) * var( --fcc-large-pct-3a9c6e42 ) / 100 );
	height: 100%;
}

/* ---------- Tablet/mobile filmstrip: hidden by default, shown and laid out in the breakpoint media query below ---------- */
.fcc-mobile-track-3a9c6e42 {
	display: none;
}

/* ---------- Content column ---------- */
.fcc-content-3a9c6e42 {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.fcc-nav-3a9c6e42 {
	flex: 0 0 auto;
	padding-left: var( --fcc-gutter-3a9c6e42 );
	display: flex;
	gap: 12px;
	margin-bottom: 24px;
}

.fcc-arrow-3a9c6e42 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.fcc-arrow-3a9c6e42 svg {
	width: 40%;
	height: 40%;
}

/* Custom-uploaded icon (mask-image technique): background-color:currentColor lets it inherit Arrow Color's tint, same as an inline SVG's stroke=currentColor would, but works for any single-color silhouette image, not just SVG. */
.fcc-arrow-icon-3a9c6e42 {
	display: inline-block;
	width: 40%;
	height: 40%;
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* A custom-uploaded icon already bakes in its own circle/border artwork, so the button's own border would double up with it — drop the border and let the icon fill the button instead of the 40% sizing meant for the plain chevron. */
.fcc-arrow-3a9c6e42.fcc-arrow-has-icon-3a9c6e42 {
	border: none;
}

.fcc-arrow-has-icon-3a9c6e42 .fcc-arrow-icon-3a9c6e42 {
	width: 100%;
	height: 100%;
}

/*
 * Panels: bottom-anchored as a block (margin-top:auto absorbs all
 * free space above it, so it sits right above the thumb row — offset
 * by Content Bottom Spacing — and grows upward, not downward, as its
 * content gets longer).
 */
.fcc-panels-3a9c6e42 {
	flex: 0 0 auto;
	padding-left: var( --fcc-gutter-3a9c6e42 );
	margin-top: auto;
	margin-bottom: var( --fcc-panels-margin-bottom-3a9c6e42 );
}

/*
 * panels-inner's height is normally just "auto" (sized by whichever
 * panel is active), but a min-height is applied by script.js (the
 * tallest of all panels' natural heights, recomputed on resize) so
 * switching to a shorter-content slide doesn't shrink this block and
 * shift the carousel below it — see script.js header. Separately,
 * script.js also locks an explicit px height during the transition
 * itself and animates to the new value, in sync with the opacity
 * cross-fade; with every panel now the same height via min-height,
 * that animation is normally a no-op, kept only as a safety net.
 * overflow:hidden keeps the panel that's fading out (still visible
 * via opacity) from spilling past the box. This is also the
 * positioning context for the cross-faded .fcc-panel-3a9c6e42 items —
 * kept separate from the padded/margined outer element on purpose: an
 * absolutely positioned child's "left: 0" resolves against its
 * containing block's padding box, so padding on the SAME element
 * that's the positioning context wouldn't visually indent it.
 */
.fcc-panels-inner-3a9c6e42 {
	position: relative;
	overflow: hidden;
	transition: height var( --fcc-duration-3a9c6e42 ) ease;
}

.fcc-panel-3a9c6e42 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var( --fcc-duration-3a9c6e42 ) ease,
		visibility 0s linear var( --fcc-duration-3a9c6e42 );
}

.fcc-panel-active-3a9c6e42 {
	position: relative;
	opacity: 1;
	visibility: visible;
	transition:
		opacity var( --fcc-duration-3a9c6e42 ) ease,
		visibility 0s linear 0s;
}

.fcc-title-3a9c6e42 {
	margin: 0 0 16px;
}

.fcc-description-3a9c6e42 {
	margin: 0 0 24px;
}

.fcc-link-3a9c6e42 {
	display: inline-block;
	text-decoration: underline;
	text-decoration: underline !important;
	padding-bottom: 3px !important;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	text-decoration-color: currentColor;
}

/* ---------- Thumb row (desktop only): flush against the image column, no gutter indent ---------- */
.fcc-thumb-row-3a9c6e42 {
	flex: 0 0 auto;
	display: flex;
	gap: var( --fcc-zone-gap-3a9c6e42 );
}

/* Width and height are independent percentages — not forced square. */
.fcc-thumb-row-3a9c6e42 .fcc-zone-3a9c6e42 {
	flex: 0 0 auto;
	width: calc( var( --fcc-container-width-3a9c6e42 ) * var( --fcc-thumb-width-pct-3a9c6e42 ) / 100 );
	height: var( --fcc-thumb-height-3a9c6e42 );
}

/* ---------- Slides: absolutely positioned on the container at every breakpoint, geometry set inline by JS ---------- */
.fcc-slide-3a9c6e42 {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: 1;
	transition:
		left var( --fcc-duration-3a9c6e42 ) ease,
		top var( --fcc-duration-3a9c6e42 ) ease,
		width var( --fcc-duration-3a9c6e42 ) ease,
		height var( --fcc-duration-3a9c6e42 ) ease;
}

.fcc-container-3a9c6e42.fcc-no-transition-3a9c6e42 .fcc-slide-3a9c6e42 {
	transition: none !important;
}

/* Hidden slides are parked just off-screen/zero-width by script.js's hiddenRect() (see that file), so they're already visually imperceptible without needing opacity — that's deliberate: an un-transitioned opacity switch here would make the slide snap invisible the instant it enters the hidden slot, masking its left/width shrink-and-move animation (this previously made the "next" direction's outgoing slide vanish instantly while "prev"'s incoming slide animated normally, since opacity:0→1 is imperceptible but 1→0 isn't). pointer-events still needs disabling explicitly since the slide remains hit-testable while animating off. */
.fcc-slide-3a9c6e42.fcc-slot-hidden {
	pointer-events: none;
}

.fcc-image-3a9c6e42 {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
}

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

/* ---------- Respect reduced-motion preference ---------- */
@media ( prefers-reduced-motion: reduce ) {
	.fcc-slide-3a9c6e42,
	.fcc-panel-3a9c6e42,
	.fcc-panel-active-3a9c6e42,
	.fcc-panels-inner-3a9c6e42 {
		transition: none;
	}
}

/* ---------- Tablet/mobile (<=1024px): content on top (padded, see Mobile Content Padding), three-zone filmstrip below — zone geometry only, see file header for why the actual slides live elsewhere and are absolutely positioned ---------- */
@media ( max-width: 1024px ) {
	.fcc-container-3a9c6e42 {
		height: auto !important;
		flex-direction: column;
		row-gap: var( --fcc-mobile-content-gap-3a9c6e42 );
	}

	.fcc-content-3a9c6e42 {
		order: 1;
	}

	.fcc-nav-3a9c6e42,
	.fcc-panels-3a9c6e42 {
		padding-left: var( --fcc-mobile-content-padding-3a9c6e42 );
		padding-right: var( --fcc-mobile-content-padding-3a9c6e42 );
	}

	.fcc-panels-3a9c6e42 {
		margin-top: 0;
		margin-bottom: 0;
	}

	/* Desktop's peek+large row and thumb row are replaced entirely by .fcc-mobile-track-3a9c6e42 below. */
	.fcc-image-col-3a9c6e42,
	.fcc-thumb-row-3a9c6e42 {
		display: none !important;
	}

	/* Row height = the LARGE zone's height (the tallest element in the row); align-items:flex-end bottom-aligns the shorter peeks flush with its base, matching the peek/thumbnail convention used on desktop. */
	.fcc-mobile-track-3a9c6e42 {
		order: 2;
		display: flex;
		align-items: flex-end;
		gap: var( --fcc-zone-gap-3a9c6e42 );
		width: 100%;
		height: var( --fcc-mobile-large-height-3a9c6e42 );
		overflow: hidden;
	}

	/*
	 * Peek slivers: each one's OUTER edge (the screen edge) is fixed;
	 * its INNER edge sits Gap Between Slots short of where the large
	 * zone begins — i.e. width = Mobile Content Padding's inset minus
	 * the gap. That inset is the same distance the large zone itself
	 * sits in from the edge (see below), so the peek's inner edge lines
	 * up with Gap Between Slots of clearance from the large image, and
	 * its outer edge simply continues on to the true screen edge,
	 * un-padded — unlike the text content above, which respects the
	 * padding on both sides.
	 */
	.fcc-mobile-track-3a9c6e42 .fcc-zone-3a9c6e42[data-zone="mobile-peek-prev"],
	.fcc-mobile-track-3a9c6e42 .fcc-zone-3a9c6e42[data-zone="mobile-peek-next"] {
		flex: 0 0 auto;
		width: calc( var( --fcc-container-width-3a9c6e42 ) * var( --fcc-mobile-content-padding-num-3a9c6e42 ) / 100 - var( --fcc-zone-gap-3a9c6e42 ) );
		height: var( --fcc-mobile-thumb-height-3a9c6e42 );
	}

	/* Large zone: width matches the text content's own measure — inset by Mobile Content Padding on both sides, same as the title/description/link above it — and the tallest element in the row (its own control, not Mobile Thumbnail Height). */
	.fcc-mobile-track-3a9c6e42 .fcc-zone-3a9c6e42[data-zone="mobile-large"] {
		flex: 0 0 auto;
		width: calc( var( --fcc-container-width-3a9c6e42 ) * ( 100 - 2 * var( --fcc-mobile-content-padding-num-3a9c6e42 ) ) / 100 );
		height: 100%;
	}
}