/* ==========================================================================
   Scroll Hero Slider — Frontend Styles

   Every visual value here is a CSS custom property with a fallback. The
   per-instance <style> block emitted by SHS_Design::css() overrides the
   properties; this file never needs to change when a control is added.

   Defensive resets are scoped deliberately: the reset must never touch
   background-size / background-repeat, because a `background` shorthand in a
   `.shs-slider div` rule (specificity 0,1,1) out-specifies `.shs-slide-bg`
   (0,1,0) and silently tiles every slide image. That was a real bug.
   ========================================================================== */

/* ---- Scroll runway -------------------------------------------------------
   The wrap is taller than the sticky slider; that surplus height is the
   scroll distance translated into slide progress. --shs-height and
   --shs-runway are set on the wrap AND the slider by the generated CSS, so
   the two can never disagree. */
.shs-scroll-wrap {
	position: relative;
	width: 100%;
	height: calc( var( --shs-height, 90vh ) + ( var( --shs-slide-count, 1 ) - 1 ) * var( --shs-runway, 90vh ) );
}

.shs-scroll-wrap .shs-slider {
	position: sticky;
	top: 0;
}

/* ---- Full-bleed breakout -------------------------------------------------
   The CSS fallback assumes a centred parent and ignores the scrollbar. JS
   replaces both values with measured ones (--shs-bleed-*) as soon as it runs,
   which also handles off-centre containers and avoids horizontal overflow. */
.shs-width-full {
	width: var( --shs-bleed-width, 100vw );
	max-width: var( --shs-bleed-width, 100vw );
	margin-left: var( --shs-bleed-left, calc( 50% - 50vw ) );
	margin-right: 0;
}

.shs-width-container {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.shs-slider {
	position: relative;
	width: 100%;
	height: var( --shs-height, 90vh );
	overflow: hidden;
	background-color: #0a0a0a;
	box-sizing: border-box;
	isolation: isolate; /* own stacking context, keeps theme z-index out */
	font-family: var( --shs-font, inherit );
	text-align: var( --shs-text-align, left );
}

/* ---- Scoped reset ------------------------------------------------------
   Note: background-color only, never the `background` shorthand. */
.shs-slider h1,
.shs-slider h2,
.shs-slider h3,
.shs-slider h4,
.shs-slider p,
.shs-slider a,
.shs-slider button,
.shs-slider span,
.shs-slider div {
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	text-shadow: none;
	list-style: none;
	text-decoration: none;
	font-family: inherit;
}

.shs-slider *,
.shs-slider *::before,
.shs-slider *::after {
	box-sizing: border-box;
}

.shs-slides {
	position: relative;
	width: 100%;
	height: 100%;
}

/* ---- Slides ------------------------------------------------------------
   --shs-o (opacity) and --shs-d (signed distance from the current slide) are
   written by JS on every frame. No CSS transition: the easing lives in JS so
   scroll-linked motion tracks the finger exactly and never fights a
   transition timer. */
.shs-slide {
	position: absolute;
	inset: 0;
	opacity: var( --shs-o, 0 );
	pointer-events: none;
	will-change: opacity;
}
.shs-slide.is-active {
	pointer-events: auto;
	z-index: 2;
}

/* No-JS / pre-init: show the first slide rather than a black box. */
.shs-slider:not( .shs-ready ) .shs-slide:first-child,
.shs-slider:not( .shs-ready ) .shs-slide:first-child .shs-slide-content {
	--shs-o: 1;
	--shs-co: 1;
	opacity: 1;
}

/* Horizontal carousel variant: keep every slide opaque and translate instead. */
.shs-transition-slide .shs-slide {
	opacity: 1;
	transform: translate3d( calc( var( --shs-d, 1 ) * 100% ), 0, 0 );
	will-change: transform;
}
.shs-transition-slide .shs-slide:not( .is-active ) {
	visibility: hidden;
}
.shs-transition-slide .shs-slide.is-active,
.shs-transition-slide .shs-slide.is-neighbour {
	visibility: visible;
}

.shs-slide-bg {
	position: absolute;
	inset: 0;
	/* !important guards against theme/builder rules that target generic divs
	   and would otherwise tile the image at its natural size. */
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	/* --shs-ad is abs(--shs-d); doing the zoom maths in CSS keeps the JS frame
	   loop down to four custom-property writes per slide. */
	transform: translate3d( 0, calc( var( --shs-d, 0 ) * var( --shs-parallax, 12% ) ), 0 )
		scale( calc( 1 + ( var( --shs-kb, 1.08 ) - 1 ) * var( --shs-ad, 1 ) ) );
	will-change: transform;
	backface-visibility: hidden;
}

/* ---- Overlay ---------------------------------------------------------- */
.shs-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.shs-overlay-gradient .shs-overlay {
	background-image: linear-gradient(
			to top,
			rgba( var( --shs-overlay-rgb, 0,0,0 ), calc( var( --shs-overlay-opacity, .45 ) * 1.9 ) ) 0%,
			rgba( var( --shs-overlay-rgb, 0,0,0 ), var( --shs-overlay-opacity, .45 ) ) 34%,
			rgba( var( --shs-overlay-rgb, 0,0,0 ), calc( var( --shs-overlay-opacity, .45 ) * .28 ) ) 62%,
			rgba( var( --shs-overlay-rgb, 0,0,0 ), calc( var( --shs-overlay-opacity, .45 ) * .12 ) ) 100%
		),
		linear-gradient( to right, rgba( var( --shs-overlay-rgb, 0,0,0 ), calc( var( --shs-overlay-opacity, .45 ) * .7 ) ) 0%, rgba( var( --shs-overlay-rgb, 0,0,0 ), 0 ) 55% );
}

.shs-overlay-solid .shs-overlay {
	background-color: rgba( var( --shs-overlay-rgb, 0,0,0 ), var( --shs-overlay-opacity, .45 ) );
}

.shs-overlay-vignette .shs-overlay {
	background-image: radial-gradient(
		ellipse at center,
		rgba( var( --shs-overlay-rgb, 0,0,0 ), calc( var( --shs-overlay-opacity, .45 ) * .25 ) ) 0%,
		rgba( var( --shs-overlay-rgb, 0,0,0 ), var( --shs-overlay-opacity, .45 ) ) 60%,
		rgba( var( --shs-overlay-rgb, 0,0,0 ), calc( var( --shs-overlay-opacity, .45 ) * 1.7 ) ) 100%
	);
}

/* ---- Slide content ---------------------------------------------------- */
.shs-slide-content {
	position: absolute;
	left: var( --shs-pad-x, 5% );
	right: var( --shs-pad-x, 5% );
	max-width: var( --shs-content-max, 620px );
	z-index: 3;
	opacity: var( --shs-co, 0 );
	transform: translate3d( 0, calc( var( --shs-cd, 0 ) * var( --shs-shift, 40px ) ), 0 );
	will-change: opacity, transform;
}

.shs-valign-bottom .shs-slide-content {
	bottom: var( --shs-pad-y, 9% );
}
.shs-valign-top .shs-slide-content {
	top: var( --shs-pad-y, 9% );
}
.shs-valign-center .shs-slide-content {
	top: 50%;
	transform: translate3d( 0, calc( -50% + ( var( --shs-cd, 0 ) * var( --shs-shift, 40px ) ) ), 0 );
}

/* Centre / right alignment also needs the block itself repositioned. */
.shs-align-center .shs-slide-content {
	margin-left: auto;
	margin-right: auto;
}
.shs-align-right .shs-slide-content {
	margin-left: auto;
}

.shs-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var( --shs-eyebrow-color, #f4dd8a );
	font-family: var( --shs-eyebrow-font, var( --shs-font, inherit ) );
	font-size: var( --shs-eyebrow-size, 13px );
	font-weight: var( --shs-eyebrow-weight, 600 );
	line-height: var( --shs-eyebrow-lh, 1.4 );
	letter-spacing: var( --shs-eyebrow-ls, .18em );
	text-transform: var( --shs-eyebrow-transform, uppercase );
	margin-bottom: var( --shs-eyebrow-mb, 16px );
}
.shs-align-center .shs-eyebrow {
	justify-content: center;
}
.shs-align-right .shs-eyebrow {
	justify-content: flex-end;
}

.shs-eyebrow-dash::before {
	content: '';
	display: inline-block;
	width: 28px;
	height: 2px;
	flex: 0 0 auto;
	background-color: var( --shs-accent, #e8c245 );
	border-radius: 2px;
}

.shs-heading {
	color: var( --shs-heading-color, #ffffff );
	font-family: var( --shs-heading-font, var( --shs-font, inherit ) );
	font-size: var( --shs-heading-size, 56px );
	font-weight: var( --shs-heading-weight, 800 );
	line-height: var( --shs-heading-lh, 1.08 );
	letter-spacing: var( --shs-heading-ls, -.01em );
	text-transform: var( --shs-heading-transform, none );
	margin-bottom: var( --shs-heading-mb, 16px );
	text-shadow: var( --shs-heading-shadow, 0 4px 24px rgba(0,0,0,.45) );
}

.shs-description {
	color: var( --shs-desc-color, #e6e6e6 );
	font-family: var( --shs-desc-font, var( --shs-font, inherit ) );
	font-size: var( --shs-desc-size, 16px );
	font-weight: var( --shs-desc-weight, 400 );
	line-height: var( --shs-desc-lh, 1.65 );
	letter-spacing: var( --shs-desc-ls, 0 );
	margin-bottom: var( --shs-desc-mb, 26px );
	max-width: var( --shs-desc-max, 480px );
}
.shs-align-center .shs-description {
	margin-left: auto;
	margin-right: auto;
}
.shs-align-right .shs-description {
	margin-left: auto;
}

.shs-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var( --shs-btn-color, #111111 );
	background-color: var( --shs-btn-bg, #ffffff );
	font-family: var( --shs-btn-font, var( --shs-font, inherit ) );
	font-size: var( --shs-btn-size, 14px );
	font-weight: var( --shs-btn-weight, 700 );
	text-transform: var( --shs-btn-transform, none );
	padding: var( --shs-btn-pad-y, 14px ) var( --shs-btn-pad-x, 28px );
	border-radius: var( --shs-btn-radius, 999px );
	border: var( --shs-btn-bw, 0 ) solid var( --shs-btn-bc, #ffffff );
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .35 );
	transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, background-color .3s ease, color .3s ease;
}
.shs-button-icon::after {
	content: '\2192';
	transition: transform .3s ease;
}
.shs-button:hover,
.shs-button:focus-visible {
	color: var( --shs-btn-hover-color, #16130a );
	background-color: var( --shs-btn-hover-bg, #e8c245 );
	transform: translateY( -3px );
	box-shadow: 0 14px 34px rgba( 0, 0, 0, .4 );
}
.shs-button-icon:hover::after,
.shs-button-icon:focus-visible::after {
	transform: translateX( 4px );
}

/* ---- Peek preview cards ----------------------------------------------- */
.shs-preview-cards {
	position: absolute;
	right: var( --shs-pad-x, 5% );
	bottom: var( --shs-pad-y, 9% );
	display: flex;
	gap: var( --shs-card-gap, 14px );
	z-index: 4;
}

.shs-preview-card {
	position: relative;
	width: var( --shs-card-w, 110px );
	height: var( --shs-card-h, 154px );
	border-radius: var( --shs-card-radius, 14px );
	overflow: hidden;
	border: 0;
	padding: 0;
	background-color: transparent;
	cursor: pointer;
	flex-shrink: 0;
	box-shadow: 0 12px 28px rgba( 0, 0, 0, .35 ), 0 0 0 1px rgba( 255, 255, 255, .14 ) inset;
	transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.shs-preview-card:hover,
.shs-preview-card:focus-visible {
	transform: translateY( -8px ) scale( 1.03 );
	box-shadow: 0 18px 36px rgba( 0, 0, 0, .45 ), 0 0 0 1px rgba( 255, 255, 255, .35 ) inset;
}

.shs-preview-thumb {
	position: absolute;
	inset: 0;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	transition: transform .5s ease;
}
.shs-preview-card:hover .shs-preview-thumb {
	transform: scale( 1.08 );
}
.shs-preview-thumb::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient( to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 75% );
}

.shs-preview-label {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	z-index: 1;
	color: var( --shs-card-label-color, #ffffff );
	font-family: var( --shs-font, inherit );
	font-size: var( --shs-card-label-size, 11px );
	font-weight: var( --shs-card-label-weight, 700 );
	letter-spacing: .04em;
	line-height: 1.3;
	text-transform: uppercase;
	text-align: left;
}

/* ---- Arrows ------------------------------------------------------------ */
.shs-arrows {
	position: absolute;
	left: var( --shs-pad-x, 5% );
	bottom: 3.4%;
	display: flex;
	gap: 12px;
	z-index: 5;
}
.shs-align-center .shs-arrows {
	left: 50%;
	transform: translateX( -50% );
}
.shs-align-right .shs-arrows {
	left: auto;
	right: var( --shs-pad-x, 5% );
}

.shs-arrow {
	width: var( --shs-arrow-size, 44px );
	height: var( --shs-arrow-size, 44px );
	border-radius: 50%;
	border: 1px solid rgba( var( --shs-arrow-bc-rgb, 255,255,255 ), .28 );
	background-color: rgba( var( --shs-arrow-rgb, 255,255,255 ), var( --shs-arrow-bg-op, .08 ) );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
	color: var( --shs-arrow-color, #ffffff );
	font-size: calc( var( --shs-arrow-size, 44px ) * .45 );
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .3s ease, transform .3s ease, border-color .3s ease;
}
.shs-arrow:hover,
.shs-arrow:focus-visible {
	background-color: rgba( var( --shs-arrow-rgb, 255,255,255 ), calc( var( --shs-arrow-bg-op, .08 ) + .16 ) );
	border-color: rgba( var( --shs-arrow-bc-rgb, 255,255,255 ), .6 );
	transform: translateY( -2px );
}
.shs-arrow[disabled] {
	opacity: .35;
	cursor: default;
	transform: none;
}

/* ---- Progress --------------------------------------------------------- */
.shs-progress {
	position: absolute;
	left: var( --shs-pad-x, 5% );
	right: var( --shs-pad-x, 5% );
	bottom: 6.5%;
	display: flex;
	gap: 8px;
	z-index: 5;
	max-width: var( --shs-content-max, 620px );
}
.shs-align-center .shs-progress {
	left: 50%;
	right: auto;
	transform: translateX( -50% );
	width: 90%;
	justify-content: center;
}
.shs-align-right .shs-progress {
	left: auto;
	justify-content: flex-end;
}

.shs-progress-segment {
	flex: 1;
	height: var( --shs-progress-h, 3px );
	background-color: rgba( var( --shs-track-rgb, 255,255,255 ), .25 );
	border-radius: 99px;
	overflow: hidden;
}
.shs-progress-fill {
	display: block;
	height: 100%;
	width: 0%;
	background-color: var( --shs-progress-color, #e8c245 );
	transition: width .35s ease;
}

/* Dots variant */
.shs-progress-dots {
	gap: 10px;
	max-width: none;
}
.shs-progress-dots .shs-progress-segment {
	flex: 0 0 auto;
	width: calc( var( --shs-progress-h, 3px ) * 3 );
	height: calc( var( --shs-progress-h, 3px ) * 3 );
	border-radius: 50%;
}

/* Numbers variant */
.shs-progress-numbers {
	max-width: none;
	align-items: baseline;
	gap: 6px;
	color: var( --shs-progress-color, #e8c245 );
	font-family: var( --shs-font, inherit );
	font-size: var( --shs-desc-size, 16px );
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.shs-progress-numbers .shs-progress-total {
	color: rgba( var( --shs-track-rgb, 255,255,255 ), .55 );
}

/* ---- Accessibility ---------------------------------------------------- */
.shs-slider :focus-visible {
	outline: 2px solid var( --shs-accent, #e8c245 );
	outline-offset: 3px;
}

.shs-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

@media ( prefers-reduced-motion: reduce ) {
	.shs-slide-bg,
	.shs-preview-card,
	.shs-preview-thumb,
	.shs-button,
	.shs-arrow,
	.shs-progress-fill {
		transition: none !important;
	}
	.shs-slide-bg {
		transform: none !important;
	}
}