/* =========================================================================
   Salient Feature Carousel v2
   Centered "peeking-edges" carousel with ghosted neighbours, header +
   subtext, pagination counter, dots, progress bar and pause control.
   All selectors namespaced .sfc- so they never collide with Salient.
   ========================================================================= */

.sfc-section {
	margin: 0 auto;
	padding: var(--sfc-gap-section, 40px) 0;
	box-sizing: border-box;
	background: transparent;
	/* Open Sans, applied to all carousel text. Falls back to system sans
	   if Google Fonts hasn't loaded yet. */
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--sfc-peek: 78%;
	--sfc-accent: #1a1a1a;
	--sfc-contained-max: 1400px;
	--sfc-gap-slides: 10px;
	--sfc-gap-section: 40px;
	--sfc-gap-heading: 30px;
	/* Per-block weight overrides (settable via WPBakery / shortcode). */
	--sfc-title-weight: 700;
	--sfc-intro-weight: 400;
	--sfc-sh-weight: 700;
	--sfc-sd-weight: 400;
	--sfc-btn-weight: 600;
}
.sfc-section,
.sfc-section h1, .sfc-section h2, .sfc-section h3, .sfc-section h4, .sfc-section h5, .sfc-section h6,
.sfc-section p, .sfc-section span, .sfc-section a, .sfc-section button, .sfc-section input,
.sfc-section .sfc-section-title,
.sfc-section .sfc-section-intro,
.sfc-section .sfc-slide-heading,
.sfc-section .sfc-slide-desc,
.sfc-section .sfc-slide-desc p,
.sfc-section .sfc-slide-btn {
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.sfc-inner {
	box-sizing: border-box;
	padding-left: 20px;
	padding-right: 20px;
}

/* All width modes break out of Salient's column so they aren't capped by
   the narrower content column. We do this in two steps:
   1) A full-width breakout to the viewport edges via margin calc (this is
      robust to parent padding, unlike `left:50%`+`-50vw`).
   2) The target width is then applied to an inner constraint so the visible
      carousel is centered in the viewport. */
/* ---- width modes -------------------------------------------------------
   The 50/75/90/100 tiers BREAK OUT of any parent column and re-center on
   the viewport. The inner wrapper holds the actual target width, computed
   from --sfc-contained-max (default 1440px).

   "inherit" is different: it does NOT break out. The carousel sits inside
   whatever parent column it's placed in and fills 100% of that parent.
   This is the right mode when the carousel needs to align exactly with
   other content rows on the same page.

   Legacy aliases:
     contained (old) → sfc-width-75
     wide      (old) → sfc-width-100
     full      (old) → sfc-width-100
   These are mapped by PHP — the CSS classes here are only the new ones. */

.sfc-section.sfc-width-50,
.sfc-section.sfc-width-75,
.sfc-section.sfc-width-90,
.sfc-section.sfc-width-100 {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Inherit mode: no breakout. Section sits naturally inside its parent. */
.sfc-section.sfc-width-inherit {
	position: relative;
	width: 100%;
}

.sfc-section.sfc-width-50 > .sfc-inner,
.sfc-section.sfc-width-75 > .sfc-inner,
.sfc-section.sfc-width-90 > .sfc-inner,
.sfc-section.sfc-width-100 > .sfc-inner,
.sfc-section.sfc-width-inherit > .sfc-inner {
	margin: 0 auto;
	box-sizing: border-box;
}

/* 100% — full viewport bleed, edge to edge. */
.sfc-section.sfc-width-100 > .sfc-inner {
	width: 100%;
}

/* 90% — 90% of the container max (default 1296px). */
.sfc-section.sfc-width-90 > .sfc-inner {
	width: min( calc( var(--sfc-contained-max) * 0.9 ), 100% );
}

/* 75% — 75% of the container max (default 1080px). */
.sfc-section.sfc-width-75 > .sfc-inner {
	width: min( calc( var(--sfc-contained-max) * 0.75 ), 100% );
}

/* 50% — 50% of the container max (default 720px). */
.sfc-section.sfc-width-50 > .sfc-inner {
	width: min( calc( var(--sfc-contained-max) * 0.5 ), 100% );
}

/* Inherit — fills parent's content area exactly, no max-width. */
.sfc-section.sfc-width-inherit > .sfc-inner {
	width: 100%;
}

/* Mobile: 50%, 75% and 90% would be too cramped on a phone, so below
   768px every full-viewport-breakout mode goes to 100% width.
   Inherit mode is unaffected — it already follows the parent. */
@media (max-width: 768px) {
	.sfc-section.sfc-width-50  > .sfc-inner,
	.sfc-section.sfc-width-75  > .sfc-inner,
	.sfc-section.sfc-width-90  > .sfc-inner,
	.sfc-section.sfc-width-100 > .sfc-inner {
		width: 100%;
	}
}

.sfc-section-title {
	font-weight: var(--sfc-title-weight, 700);
	text-transform: uppercase;
	font-size: clamp(1.6rem, 4vw, 2.6rem);
	line-height: 1.15;
	margin: 0 0 10px;
	color: var(--sfc-accent);
	text-align: left;
}

.sfc-section-intro {
	font-size: 1.05rem;
	line-height: 1.6;
	color: #666;
	margin: 0;
	text-align: left;
	font-weight: var(--sfc-intro-weight, 400);
}
.sfc-theme-dark .sfc-section-intro { color: #cfcfcf; }

/* The gap between the heading block and the carousel below is controlled
   by the carousel's margin-top. If there's no title and no intro, this
   margin still applies but there's nothing visually above it to gap from. */
.sfc-inner > .sfc-carousel { margin-top: var(--sfc-gap-heading, 30px); }
.sfc-inner > .sfc-carousel:first-child { margin-top: 0; }

/* Heading alignment — applies identically in BOTH styles.
   Set on .sfc-section via the "Heading alignment" option. */
.sfc-head-left  .sfc-section-title,
.sfc-head-left  .sfc-section-intro  { text-align: left; }
.sfc-head-center .sfc-section-title,
.sfc-head-center .sfc-section-intro { text-align: center; }
.sfc-head-right .sfc-section-title,
.sfc-head-right .sfc-section-intro  { text-align: right; }

/* Heading alignment also flows down to every slide's caption (heading,
   subtext, and button). Higher specificity here is intentional — it has
   to beat the multi-slide CSS that defaults to left, and Style 2's left
   column layout. */
.sfc-section.sfc-head-left .sfc-carousel .sfc-slide-caption,
.sfc-section.sfc-head-left .sfc-carousel .sfc-slide-heading,
.sfc-section.sfc-head-left .sfc-carousel .sfc-slide-desc { text-align: left; }
.sfc-section.sfc-head-center .sfc-carousel .sfc-slide-caption,
.sfc-section.sfc-head-center .sfc-carousel .sfc-slide-heading,
.sfc-section.sfc-head-center .sfc-carousel .sfc-slide-desc { text-align: center; }
.sfc-section.sfc-head-right .sfc-carousel .sfc-slide-caption,
.sfc-section.sfc-head-right .sfc-carousel .sfc-slide-heading,
.sfc-section.sfc-head-right .sfc-carousel .sfc-slide-desc { text-align: right; }



/* ---- shell ------------------------------------------------------------- */
.sfc-carousel { position: relative; }
.sfc-viewport {
	overflow: hidden;
	touch-action: pan-y;  /* allow vertical page scroll; we own horizontal drag */
	user-select: none;     /* no text selection during desktop mouse drag */
	-webkit-user-select: none;
	cursor: grab;
}
.sfc-viewport:active { cursor: grabbing; }

/* Visible focus ring for keyboard users (accessibility). */
.sfc-carousel:focus-visible {
	outline: 2px solid var(--sfc-accent);
	outline-offset: 4px;
}
.sfc-arrow:focus-visible,
.sfc-playpause:focus-visible,
.sfc-dot:focus-visible,
.sfc-scrubber-arrows button:focus-visible,
.sfc-controls button:focus-visible {
	outline: 2px solid var(--sfc-accent);
	outline-offset: 2px;
}

.sfc-track {
	display: flex;
	transition: transform var(--sfc-speed, 0.65s) cubic-bezier(0.4, 0.0, 0.1, 1);
	will-change: transform;
}

/* Active slide width is driven by --sfc-peek (set inline per instance).
   Neighbours sit either side and are dimmed + greyscaled = "ghosted". */
.sfc-slide {
	flex: 0 0 var(--sfc-peek);
	box-sizing: border-box;
	padding: 0 calc(var(--sfc-gap-slides, 10px) / 2);
	cursor: pointer;
}

/* ----- Slides-to-show overrides (N = 2, 3, 4) --------------------------
   When the user explicitly chooses a count via [data-show="N"], slides fill
   the viewport equally with no peeking neighbour. This overrides both
   styles' default widths. */
.sfc-carousel[data-show="2"] .sfc-slide { flex: 0 0 50%; }
.sfc-carousel[data-show="3"] .sfc-slide { flex: 0 0 calc(100% / 3); }
.sfc-carousel[data-show="4"] .sfc-slide { flex: 0 0 25%; }

/* With an explicit count, all visible slides are full-colour (no right-peek
   ghosting in style 2, no greyscale neighbours in style 1). */
.sfc-carousel[data-show="2"] .sfc-slide .sfc-slide-img,
.sfc-carousel[data-show="3"] .sfc-slide .sfc-slide-img,
.sfc-carousel[data-show="4"] .sfc-slide .sfc-slide-img {
	opacity: 1;
}
.sfc-carousel[data-show="2"] .sfc-slide.sfc-peek-right .sfc-slide-img,
.sfc-carousel[data-show="3"] .sfc-slide.sfc-peek-right .sfc-slide-img,
.sfc-carousel[data-show="4"] .sfc-slide.sfc-peek-right .sfc-slide-img {
	opacity: 1;
}
.sfc-carousel[data-show="2"] .sfc-slide.sfc-peek-right .sfc-slide-caption,
.sfc-carousel[data-show="3"] .sfc-slide.sfc-peek-right .sfc-slide-caption,
.sfc-carousel[data-show="4"] .sfc-slide.sfc-peek-right .sfc-slide-caption {
	opacity: 1;
}

/* All visible slides in N>1 should show their captions (like Style 2 does). */
.sfc-carousel[data-show="2"] .sfc-slide-caption,
.sfc-carousel[data-show="3"] .sfc-slide-caption,
.sfc-carousel[data-show="4"] .sfc-slide-caption {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	margin-top: 22px;
	padding: 0;
	text-align: left;
}
.sfc-carousel[data-show="2"] .sfc-slide-heading,
.sfc-carousel[data-show="3"] .sfc-slide-heading,
.sfc-carousel[data-show="4"] .sfc-slide-heading {
	font-size: clamp(0.9rem, 1.4vw, 1.1rem);
}
.sfc-carousel[data-show="2"] .sfc-slide-desc,
.sfc-carousel[data-show="3"] .sfc-slide-desc,
.sfc-carousel[data-show="4"] .sfc-slide-desc {
	font-size: 0.9rem;
	max-width: none;
}

/* Show the play button on all visible slides when count is set. */
.sfc-carousel[data-show="2"] .sfc-slide .sfc-play-btn,
.sfc-carousel[data-show="3"] .sfc-slide .sfc-play-btn,
.sfc-carousel[data-show="4"] .sfc-slide .sfc-play-btn {
	opacity: 1;
	pointer-events: auto;
}
.sfc-carousel[data-show="2"] .sfc-slide.sfc-clone .sfc-play-btn,
.sfc-carousel[data-show="3"] .sfc-slide.sfc-clone .sfc-play-btn,
.sfc-carousel[data-show="4"] .sfc-slide.sfc-clone .sfc-play-btn {
	opacity: 0;
	pointer-events: none;
}

.sfc-slide-media {
	position: relative;
	width: 100%;
	aspect-ratio: var(--sfc-aspect, 16 / 9);
	overflow: hidden;
	background-color: transparent;
}

/* aspect=auto lets the image's natural aspect drive the height (no crop).
   In this mode the image is NOT positioned absolutely. */
.sfc-aspect-auto .sfc-slide-media { aspect-ratio: auto; }
.sfc-aspect-auto .sfc-slide-img {
	position: relative !important;
	height: auto !important;
}

/* Fallback for older browsers / themes where aspect-ratio is overridden:
   reserve 56.25% (9/16) height via padding so the box never collapses. */
@supports not (aspect-ratio: 16 / 9) {
	.sfc-aspect-fixed .sfc-slide-media { height: 0; padding-bottom: 56.25%; }
}

.sfc-slide-img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;   /* beat theme img { max-width:100% } that can shrink it */
	object-fit: cover !important; /* crop to fill — no distortion, no letterboxing */
	object-position: center !important;
	display: block;
}

/* Ghosting (both styles): non-active slides fade in FULL COLOUR — no
   greyscale. The active slide is full opacity. */
.sfc-ghost { display: none; } /* legacy greyscale overlay no longer used */

.sfc-slide .sfc-slide-img {
	opacity: 0.45;
	transition: opacity 0.5s ease;
}
.sfc-slide.is-active .sfc-slide-img { opacity: 1; }

.sfc-slide.is-active { cursor: default; }

.sfc-slide-overlay-link { position: absolute; inset: 0; z-index: 2; }

/* ---- caption (header + subtext) — only active slide shows it ----------- */
.sfc-slide-caption {
	width: 100%;
	margin: 26px 0 0;
	padding: 0 calc(var(--sfc-gap-slides, 10px) / 2);  /* matches slide gap */
	box-sizing: border-box;
	text-align: left;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	pointer-events: none;
}

.sfc-slide.is-active .sfc-slide-caption {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.sfc-slide-heading {
	font-weight: var(--sfc-sh-weight, 700);
	text-transform: uppercase;
	font-size: clamp(1.1rem, 2.4vw, 1.5rem);
	margin: 0 0 14px;
	color: var(--sfc-accent);
	line-height: 1.2;
}

.sfc-slide-desc { font-size: 1rem; line-height: 1.7; color: #555; max-width: 760px; font-weight: var(--sfc-sd-weight, 400); }
.sfc-slide-desc p { margin: 0 0 0.8em; }
.sfc-slide-desc p:last-child { margin-bottom: 0; }

.sfc-slide-btn {
	display: inline-block;
	margin-top: 14px;
	padding: 10px 22px;
	border: 1px solid var(--sfc-accent);
	color: var(--sfc-accent);
	text-decoration: none;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: var(--sfc-btn-weight, 600);
	transition: background 0.2s ease, color 0.2s ease;
}
.sfc-slide-btn:hover { background: var(--sfc-accent); color: #fff; }

/* ---- dark caption theme ------------------------------------------------ */
.sfc-theme-dark { --sfc-accent: #f5f5f5; }
.sfc-theme-dark .sfc-slide-desc { color: #cfcfcf; }
.sfc-theme-dark .sfc-section-title { color: #f5f5f5; }

/* ---- large side arrows ------------------------------------------------- */
.sfc-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.55);
	border: none;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.sfc-arrow:hover {
	background: rgba(0, 0, 0, 0.78);
	transform: translateY(-50%) scale(1.06);
	opacity: 1;
}
.sfc-arrow-prev { left: 12px; }
.sfc-arrow-next { right: 12px; }

/* ---- toolbar: counter (bottom-left) + play/pause (bottom-right) --------
   Pinned to the bottom EDGE OF THE IMAGE, not below the caption.
   The active media is `--sfc-peek` wide at 16:9, so its height is
   peek * 9/16. We anchor the toolbar just inside that bottom edge. ------- */
.sfc-toolbar {
	position: absolute;
	left: 0; right: 0;
	top: var(--sfc-toolbar-top, 50%);
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 calc((100% - var(--sfc-peek)) / 2 + 18px);
	box-sizing: border-box;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
.sfc-toolbar > * { pointer-events: auto; }

/* On a video slide, hide the autoplay timer toolbar AND the big side
   navigation arrows. The play button is the only on-image control, and
   pagination is handled by the scrubber bar below (mimics Style 2).
   Using display:none so they're fully removed, not just transparent. */
.sfc-carousel.sfc-current-video .sfc-toolbar,
.sfc-carousel.sfc-current-video .sfc-arrow { display: none; }

.sfc-controls {
	display: flex; align-items: center; gap: 10px;
	color: #fff; font-size: 0.85rem; letter-spacing: 0.05em;
	background: rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(2px);
	padding: 8px 14px; border-radius: 4px;
}
/* Admin turned pagination off for desktop — hide the counter pill there.
   Mobile media queries re-show it as the pagination control. */
.sfc-controls-desktop-off { display: none; }

.sfc-controls button {
	background: none; border: none; color: #fff;
	display: flex; align-items: center; cursor: pointer;
	padding: 2px; opacity: 0.85; transition: opacity 0.2s ease;
}
.sfc-controls button:hover { opacity: 1; }
.sfc-counter { min-width: 38px; text-align: center; }

/* ---- play / pause with countdown ring ---------------------------------- */
.sfc-playpause {
	position: relative;
	width: 48px; height: 48px; border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.18); color: #fff;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; transition: background 0.2s ease;
}
.sfc-playpause:hover { background: rgba(0, 0, 0, 0.4); }

/* The countdown ring sits on top of the button, rotated so it starts at 12 o'clock */
.sfc-ring {
	position: absolute;
	inset: 0;
	transform: rotate(-90deg);
	pointer-events: none;
}
.sfc-ring-track {
	stroke: rgba(255, 255, 255, 0.35);
}
.sfc-ring-bar {
	stroke: rgba(255, 255, 255, 0.95);
	stroke-linecap: round;
	/* circumference of r=22 -> 2*pi*22 ≈ 138.23 */
	stroke-dasharray: 138.23;
	stroke-dashoffset: 138.23;   /* fully "empty"; JS animates this down to 0 */
}
.sfc-icon-pause, .sfc-icon-play { position: relative; z-index: 1; }

/* ---- dot navigation ---------------------------------------------------- */
.sfc-dots {
	display: flex; justify-content: center; gap: 10px;
	margin-top: 20px;
}
/* User chose to hide dots on desktop — but we still want them on mobile
   so visitors can navigate when the layout collapses to one slide. */
.sfc-dots-desktop-off { display: none; }

.sfc-dot {
	width: 9px; height: 9px; padding: 0;
	border-radius: 50%; border: none; cursor: pointer;
	background: rgba(0, 0, 0, 0.22);
	transition: background 0.2s ease, transform 0.2s ease;
}
.sfc-dot:hover { background: rgba(0, 0, 0, 0.4); }
.sfc-dot.is-active { background: var(--sfc-accent); transform: scale(1.25); }
.sfc-theme-dark .sfc-dot { background: rgba(255, 255, 255, 0.3); }
.sfc-theme-dark .sfc-dot.is-active { background: #fff; }

/* =========================================================================
   STYLE 2 — two slides side by side, growing scrubber bar, column captions.
   Matches the Range Rover-style reference. Keyed off .sfc-style-2.
   ========================================================================= */

/* Two full slides at the left + the third partially shows on the right
   (ghosted). 38% leaves ~24% of viewport for the third slide to peek. */
.sfc-style-2 .sfc-slide {
	flex: 0 0 38%;
	padding: 0 var(--sfc-gap-slides, 10px) 0 0;   /* gap to the right of each slide */
	cursor: pointer;
}

.sfc-style-2 .sfc-viewport { overflow: hidden; }

/* Captions live in a column under each slide, left-aligned, always visible. */
.sfc-style-2 .sfc-slide-caption {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	margin-top: 22px;
	padding: 0;
}
.sfc-style-2 .sfc-slide-heading {
	font-size: clamp(0.95rem, 1.6vw, 1.15rem);
	letter-spacing: 0.06em;
	margin-bottom: 10px;
}
.sfc-style-2 .sfc-slide-desc { font-size: 0.95rem; max-width: none; }

/* No grey overlay or greyscale in style 2 by default — slides are full colour. */
.sfc-style-2 .sfc-ghost { display: none; }
.sfc-style-2 .sfc-slide-img { filter: none; opacity: 1; }

/* The single right-peeking slide (marked by JS) is the only ghosted one. */
.sfc-style-2 .sfc-slide.sfc-peek-right .sfc-slide-img { opacity: 0.45; }
.sfc-style-2 .sfc-slide.sfc-peek-right .sfc-slide-caption { opacity: 0; }

/* Style 2 clones are visible (they fill the right side during the loop). */
.sfc-style-2 .sfc-slide.sfc-clone { display: block; }
.sfc-style-2 .sfc-slide.sfc-clone .sfc-slide-caption { visibility: hidden; }

/* Hide Style-1-only controls in Style 2. */
.sfc-style-2 .sfc-arrow,
.sfc-style-2 .sfc-toolbar { display: none; }

/* The scrubber: a full-width thin track with a dark fill that grows
   left-to-right as you advance, plus prev/next arrows on the right. */
.sfc-scrubber {
	display: none; /* shown for style 2, or on a video slide in any style */
	align-items: center;
	gap: 24px;
	margin-top: 22px;
}
.sfc-style-2 .sfc-scrubber,
.sfc-carousel.sfc-current-video .sfc-scrubber { display: flex; }

.sfc-scrubber-track {
	position: relative;
	flex: 1 1 auto;
	height: 3px;
	background: rgba(0, 0, 0, 0.14);
	overflow: hidden;
}
.sfc-theme-dark .sfc-scrubber-track { background: rgba(255, 255, 255, 0.22); }

.sfc-scrubber-fill {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 0%;
	background: var(--sfc-accent);
	transition: width 0.45s ease;
}

.sfc-scrubber-arrows {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 18px;
}
.sfc-scrubber-arrows button {
	background: none;
	border: none;
	color: var(--sfc-accent);
	cursor: pointer;
	padding: 4px;
	display: flex;
	opacity: 0.8;
	transition: opacity 0.2s ease;
}
.sfc-scrubber-arrows button:hover { opacity: 1; }

/* Slides-to-show responsive scaling:
   - 768–992px tablet: 3 or 4 → 2 slides.
   - below 768px phone: any multi → 1 slide.
   These use the same opacity/caption overrides we already set for show >=2. */
@media (max-width: 992px) {
	.sfc-carousel[data-show="3"] .sfc-slide,
	.sfc-carousel[data-show="4"] .sfc-slide {
		flex-basis: 50%;
	}
}

@media (max-width: 768px) {
	.sfc-carousel[data-show="2"] .sfc-slide,
	.sfc-carousel[data-show="3"] .sfc-slide,
	.sfc-carousel[data-show="4"] .sfc-slide {
		flex-basis: 100%;
	}
}

/* Style 2 responsive: drop to one slide on small screens. */
@media (max-width: 768px) {
	.sfc-style-2 .sfc-slide { flex-basis: 86%; }
	.sfc-style-2 .sfc-slide-desc { font-size: 0.9rem; }
}

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 900px) {
	.sfc-slide { flex-basis: 78%; }
	.sfc-arrow-prev { left: 2%; }
	.sfc-arrow-next { right: 2%; }
	.sfc-toolbar { padding: 0 14%; }
	.sfc-playpause { width: 42px; height: 42px; }
}

@media (max-width: 600px) {
	/* More breathing room on phones so headers/subtext don't touch edges. */
	.sfc-inner { padding-left: 24px; padding-right: 24px; }
	.sfc-slide { flex-basis: 90%; }
	/* Only override aspect ratio on mobile when the user picked "Auto" —
	   otherwise their chosen ratio applies on every screen size, which is
	   what "all images the same size" means. */
	.sfc-aspect-auto .sfc-slide-media { aspect-ratio: 4 / 3; }
	.sfc-arrow { display: none; }
	.sfc-toolbar { padding: 0 6%; }
	.sfc-slide-caption { text-align: center; }

	/* MOBILE PAGINATION: the over-image counter pill is the single
	   pagination control. Hide the dots and the autoplay play/pause
	   button so the pill stands alone. */
	.sfc-dots,
	.sfc-dots-desktop-off { display: none !important; }
	.sfc-playpause { display: none; }

	/* Show the counter pill on mobile, even if the admin turned
	   pagination off for desktop. */
	.sfc-controls-desktop-off { display: flex; }

	/* On a video slide we hide the toolbar on desktop, but on mobile we
	   want the pill to remain visible — re-show the toolbar (the play/
	   pause is already hidden above, so only the pill is left). */
	.sfc-carousel.sfc-current-video .sfc-toolbar { display: flex; }

	/* Style 2 keeps left-aligned captions even on mobile (column look). */
	.sfc-style-2 .sfc-slide-caption { text-align: left; }
	.sfc-section-intro { font-size: 0.98rem; }
}

/* Between 600 and 768 (small tablets), the multi-slide layouts collapse to
   one slide — apply the same mobile pagination model. */
@media (max-width: 768px) {
	.sfc-dots,
	.sfc-dots-desktop-off { display: none !important; }
	.sfc-playpause { display: none; }
	.sfc-controls-desktop-off { display: flex; }
	.sfc-carousel.sfc-current-video .sfc-toolbar { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
	.sfc-track, .sfc-slide-img { transition: none; }
}

/* ---- video play button + lightbox -------------------------------------- */
.sfc-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 56px;
	padding: 0;
	border: none;
	background: rgba(0, 0, 0, 0.55);    /* darker for stronger contrast */
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.sfc-play-btn:hover {
	background: rgba(0, 0, 0, 0.75);
	transform: translate(-50%, -50%) scale(1.08);
}
.sfc-play-btn svg {
	width: 56px;
	height: 56px;
	display: block;
}
/* Only show the play button on the active (or full) slides, hide on ghosts. */
.sfc-slide:not(.is-active) .sfc-play-btn { opacity: 0; pointer-events: none; }
.sfc-style-2 .sfc-slide .sfc-play-btn { opacity: 1; pointer-events: auto; }
.sfc-style-2 .sfc-slide.sfc-peek-right .sfc-play-btn,
.sfc-style-2 .sfc-slide.sfc-clone .sfc-play-btn { opacity: 0; pointer-events: none; }

.sfc-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh; /* dynamic viewport height — accounts for mobile address bar */
	z-index: 2147483000;  /* near max int — beats virtually any theme element */
	background: rgba(0, 0, 0, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
	padding: 4vw;
	box-sizing: border-box;
	/* Reset any inherited transform that could create a stacking context. */
	transform: none !important;
}
.sfc-lightbox.is-open { opacity: 1; visibility: visible; }

.sfc-lightbox-inner {
	position: relative;
	width: min(1100px, 92vw);
	max-height: 90vh;
	/* Cap by available viewport height too — a 16:9 box at 92vw could
	   become very tall on portrait phones, so this width-by-height clamp
	   keeps the player from over-running the screen. */
	max-width: min( 1100px, calc( 90vh * 16 / 9 ), 92vw );
}
.sfc-lightbox-media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}
.sfc-lightbox-media iframe,
.sfc-lightbox-media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.sfc-lightbox-close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 40px;
	height: 40px;
	font-size: 30px;
	line-height: 1;
	color: #fff;
	background: none;
	border: none;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}
.sfc-lightbox-close:hover { opacity: 1; }

@media (max-width: 600px) {
	.sfc-play-btn { width: 44px; height: 44px; }
	.sfc-play-btn svg { width: 44px; height: 44px; }
}

/* =========================================================================
   Batch 1 additions (3.13.0)
   ========================================================================= */

/* ---- hover zoom on active slide --------------------------------------- */
.sfc-hover-zoom .sfc-slide-img {
	transition: transform 0.6s ease, opacity 0.5s ease;
	will-change: transform;
}
.sfc-hover-zoom .sfc-slide.is-active:hover .sfc-slide-img,
.sfc-hover-zoom.sfc-style-2 .sfc-slide:hover .sfc-slide-img {
	transform: scale(1.04);
}
/* Don't zoom on the right-peek ghost or clones */
.sfc-hover-zoom .sfc-slide.sfc-peek-right:hover .sfc-slide-img,
.sfc-hover-zoom .sfc-slide.sfc-clone:hover .sfc-slide-img { transform: none; }

/* ---- caption position: OVER the image with gradient overlay ----------- */
.sfc-cap-over .sfc-slide-media { display: block; }
.sfc-cap-over .sfc-slide-media .sfc-slide-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 60px 28px 24px;
	box-sizing: border-box;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0) 100%);
	color: #fff;
	z-index: 3;
	opacity: 1;
	transform: none;
	pointer-events: auto;
	text-align: left;
}
.sfc-cap-over .sfc-slide-media .sfc-slide-heading,
.sfc-cap-over .sfc-slide-media .sfc-slide-desc,
.sfc-cap-over .sfc-slide-media .sfc-slide-desc p { color: #fff; }
.sfc-cap-over .sfc-slide-media .sfc-slide-heading {
	margin: 0 0 8px;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.sfc-cap-over .sfc-slide-media .sfc-slide-desc {
	max-width: none;
	font-size: 0.98rem;
	line-height: 1.55;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.sfc-cap-over .sfc-slide-media .sfc-slide-btn {
	background: #fff;
	color: #111;
	border-color: #fff;
	margin-top: 14px;
}
.sfc-cap-over .sfc-slide-media .sfc-slide-btn:hover {
	background: rgba(255, 255, 255, 0.85);
	color: #111;
}

@media (max-width: 600px) {
	.sfc-cap-over .sfc-slide-media .sfc-slide-caption {
		padding: 40px 18px 16px;
	}
	.sfc-cap-over .sfc-slide-media .sfc-slide-desc { font-size: 0.9rem; }
}

/* ---- CTA style: button-only (no full-image overlay link) -------------- */
/* When admin chose "Visible button only", the slide image isn't clickable
   as a whole — only the .sfc-slide-btn navigates. The renderer already
   suppresses the overlay link in this mode; nothing else needed in CSS. */

/* ---- section background image: a subtle dim for legibility ----------- */
.sfc-section[style*="background-image"] {
	/* If a bg image is set we want a slight inset so content has breathing
	   room from the section edges. */
}

/* ---- thumbnail pagination ----------------------------------------------- */
.sfc-pagi-thumbnails {
	gap: 8px;
}
.sfc-pagi-thumbnails .sfc-dot {
	width: 56px;
	height: 36px;
	border-radius: 4px;
	background-size: cover;
	background-position: center;
	background-color: rgba(0, 0, 0, 0.1);
	opacity: 0.55;
	transition: opacity 0.2s ease, transform 0.2s ease;
	flex: 0 0 auto;
}
.sfc-pagi-thumbnails .sfc-dot:hover { opacity: 0.85; transform: none; }
.sfc-pagi-thumbnails .sfc-dot.is-active {
	opacity: 1;
	transform: none;
	box-shadow: 0 0 0 2px var(--sfc-accent);
	background-color: transparent;
}
.sfc-theme-dark .sfc-pagi-thumbnails .sfc-dot.is-active {
	box-shadow: 0 0 0 2px #fff;
}
@media (max-width: 600px) {
	.sfc-pagi-thumbnails .sfc-dot {
		width: 44px;
		height: 28px;
	}
}