/**
 * Homepage hero -- horizontal product scroller (production).
 *
 * Plugin-Alliance-style browsing: one dominant centred slide, the neighbours
 * peeking at both edges on desktop/tablet, near-full-width slides on mobile.
 * Layout and interaction live here; Elementor keeps owning the content.
 * Replaces hero.css (retired 2026-09-13, kept on disk for rollback).
 *
 * ELEMENTOR CONTRACT (page ID 56) -- class names are typed into each
 * element's Advanced -> CSS Classes field, exactly like the old hero:
 *
 *   .tsc-hero                (existing top container 60fb885; background image
 *                             cleared, min-height none, Full Width; it must NOT
 *                             carry tsc-hero__slide any more)
 *     .tsc-hero__track       (child container: this is the scroller)
 *       .tsc-hero__slide     (one child container per product / feature)
 *         .tsc-hero__media   (image widget: full-bleed photo, alt empty)
 *         .tsc-hero__product (optional image widget: product visual over the photo)
 *         .tsc-hero__content (container + heading/button widgets:
 *                             __eyebrow / __statement / __supporting / __cta)
 *
 * INTERACTION MODEL
 *   - The track is a native horizontal scroller with CSS scroll-snap. Touch,
 *     trackpad and keyboard scrolling work with NO JavaScript; the first
 *     slide is the resting state, so a no-JS/pre-JS render still shows
 *     slide 1 centred.
 *   - hero-scroller.js only ADDS prev/next buttons, an "n / N" readout,
 *     arrow-key support and end-state disabling, and flags the hero with
 *     `.is-enhanced` / the centred slide with `.is-active`. No autoplay.
 *   - Slides snap to CENTER. The track's inline padding equals the peek, so
 *     the first and last slides can rest centred instead of edge-pinned.
 *
 * GEOMETRY (approved refinement study, 2026-09-13)
 *   peek per side = (viewport - slide) / 2 - gap
 *   1440px : slide 1124px  gap 24px  ->  peek 134px
 *   1024px : slide  840px  gap 20px  ->  peek  72px
 *    768px : slide  645px  gap 20px  ->  peek  41px
 *    390px : slide  90vw = 351px  gap 12px  ->  peek 7.5px (edge hint only)
 *   radius 3px (panel, not card); inactive slides 0.74 opacity when enhanced.
 *
 * ELEMENTOR DEFAULTS DEFENSIVELY NEUTRALISED (verified against
 * elementor/assets/css/frontend.min.css 4.2.4 and uploads/elementor/css/post-56.css):
 *   .e-con applies min-height / width / overflow / padding (10px all sides) /
 *   gap (20px) / border-radius / position through CSS variables at (0,1,0);
 *   .e-con.e-flex sets `flex: 0 1 auto` and column direction at (0,2,0); a
 *   boxed container wraps its children in .e-con-inner capped at the kit's
 *   content width (1340px). Every structural rule below therefore uses a
 *   3-class selector (0,3,0) and sets those properties explicitly. The only
 *   per-element rule the theme cannot beat is the hero's own background
 *   image (post-56.css, (0,4,0)) -- that is cleared in the editor, on purpose.
 *
 * Scoped to body.home like the rest of the homepage system; enqueued on
 * is_front_page() only. Breakpoints are Elementor's own (tablet <=1024,
 * mobile <=767).
 */

/* ---- Stage ---- */

body.home .tsc-hero {
	--tsc-hero-slide-w: min(1124px, 82vw);
	--tsc-hero-gap: 24px;
	--tsc-hero-peek: calc((100% - var(--tsc-hero-slide-w)) / 2);
	/* Spacing polish (2026-09-13): the header is Astra's transparent header, absolutely positioned
	   over the page (live-measured 85px tall on desktop/tablet, 82px on the mobile header). The
	   stage's top padding equals that height so the track starts flush under the header, matching
	   the other pages where content begins at the header's bottom edge. Bottom: nav margin (16px) +
	   stage padding (24px) = 40px on desktop (the counter row is hidden and the desktop arrows are
	   absolutely positioned, so the nav row has no height of its own). */
	--tsc-hero-top: 85px;

	position: relative;
	display: block;
	width: 100%;
	max-width: none;
	min-height: 0;                      /* Elementor: the old hero's 100vh min-height must not survive */
	padding: var(--tsc-hero-top) 0 var(--tsc-space-5);
	background: var(--tsc-bg);
	overflow: visible;
	isolation: isolate;
}

/* Boxed-container safety: if the hero is left "Boxed" in Elementor, its
   .e-con-inner would cap the track at the kit content width (1340px). */
body.home .tsc-hero > .e-con-inner {
	display: block;
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
	gap: 0;
}

@media (max-width: 1024px) {
	body.home .tsc-hero {
		--tsc-hero-slide-w: min(840px, 84vw);
		--tsc-hero-gap: 20px;
	}
}

@media (max-width: 767px) {
	body.home .tsc-hero {
		--tsc-hero-slide-w: 90vw;
		--tsc-hero-gap: 12px;
		--tsc-hero-top: 82px;             /* Astra mobile header height */
		padding-bottom: var(--tsc-space-4); /* + 16px nav margin + 44px arrow row = 76px breathing space */
	}
}

/* ---- Track: the native scroller ---- */

body.home .tsc-hero .tsc-hero__track {
	box-sizing: border-box;             /* padding-inline is the peek; must not widen the track */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	gap: var(--tsc-hero-gap);
	width: 100%;
	max-width: none;
	min-height: 0;
	margin: 0;
	padding-block: 0;
	padding-inline: var(--tsc-hero-peek);
	border-radius: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--tsc-hero-peek);
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;              /* browsing is by swipe/arrows; no visible bar */
}

body.home .tsc-hero .tsc-hero__track::-webkit-scrollbar {
	display: none;
}

body.home .tsc-hero .tsc-hero__track:focus-visible {
	outline: 2px solid var(--tsc-accent);
	outline-offset: -2px;
}

@media (prefers-reduced-motion: no-preference) {
	body.home .tsc-hero .tsc-hero__track {
		scroll-behavior: smooth;
	}
}

/* ---- Slide ---- */

body.home .tsc-hero__track > .tsc-hero__slide {
	position: relative;
	box-sizing: border-box;
	flex: 0 0 var(--tsc-hero-slide-w);  /* Elementor's .e-con.e-flex `flex: 0 1 auto` would let slides shrink */
	width: var(--tsc-hero-slide-w);
	max-width: none;
	min-height: 440px;
	aspect-ratio: 2 / 1;
	margin: 0;
	padding: 0;
	scroll-snap-align: center;
	scroll-snap-stop: always;           /* one slide per swipe, never skip past */
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: stretch;
	gap: 0;
	overflow: hidden;
	border-radius: 3px;
	background: var(--tsc-surface);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--tsc-text) 8%, transparent);
}

@media (max-width: 1024px) {
	body.home .tsc-hero__track > .tsc-hero__slide {
		aspect-ratio: 16 / 10;
		min-height: 400px;
	}
}

@media (max-width: 767px) {
	body.home .tsc-hero__track > .tsc-hero__slide {
		aspect-ratio: 2 / 3;
		min-height: 580px;              /* room for the product visual above the copy */
	}
}

/* With JS present the neighbours are dimmed so the centred slide dominates and
   the peek reads as "more this way"; without JS every slide stays fully visible. */
@media (prefers-reduced-motion: no-preference) {
	body.home .tsc-hero.is-enhanced .tsc-hero__slide {
		transition: opacity 240ms ease;
	}
}

body.home .tsc-hero.is-enhanced .tsc-hero__slide:not(.is-active) {
	opacity: 0.74;
}

/* Full-bleed slide photo (Elementor image widget; the class lands on the
   widget wrapper, the <img> sits inside .elementor-widget-container). */
body.home .tsc-hero__slide > .tsc-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	text-align: initial;
}

body.home .tsc-hero__media .elementor-widget-container,
body.home .tsc-hero__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

body.home .tsc-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--tsc-hero-media-pos, center);
}

/* Optional product visual layered over the photo (the TSC Rack 2 UI). */
body.home .tsc-hero__slide > .tsc-hero__product {
	position: absolute;
	z-index: 1;
	right: 4%;
	top: 50%;
	width: 54%;
	max-width: none;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	text-align: initial;
}

body.home .tsc-hero__product .elementor-widget-container {
	display: block;
}

body.home .tsc-hero__product img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	border-radius: 10px;
	box-shadow:
		0 1px 0 color-mix(in srgb, var(--tsc-text) 10%, transparent),
		0 30px 70px -20px color-mix(in srgb, #000 78%, transparent),
		0 0 0 1px color-mix(in srgb, var(--tsc-text) 8%, transparent);
}

@media (max-width: 767px) {
	body.home .tsc-hero__slide > .tsc-hero__product {
		right: 10%;
		left: 10%;
		top: 7%;
		width: auto;
		transform: none;
	}
}

/* Readability scrim: left-anchored on wide slides, bottom-anchored on mobile.
   (Elementor's own .e-con:before only carries transitions, so this is safe.) */
body.home .tsc-hero__track > .tsc-hero__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 1;
	background:
		linear-gradient(90deg,
			color-mix(in srgb, var(--tsc-bg) 82%, transparent) 0%,
			color-mix(in srgb, var(--tsc-bg) 55%, transparent) 38%,
			color-mix(in srgb, var(--tsc-bg) 0%, transparent) 64%),
		linear-gradient(180deg,
			transparent 0%,
			transparent 60%,
			color-mix(in srgb, var(--tsc-bg) 70%, transparent) 100%);
}

@media (max-width: 767px) {
	body.home .tsc-hero__track > .tsc-hero__slide::before {
		background: linear-gradient(180deg,
			color-mix(in srgb, var(--tsc-bg) 10%, transparent) 0%,
			color-mix(in srgb, var(--tsc-bg) 20%, transparent) 40%,
			color-mix(in srgb, var(--tsc-bg) 88%, transparent) 78%,
			var(--tsc-bg) 100%);
	}
}

/* ---- Slide content (container + widgets) ---- */

body.home .tsc-hero__slide > .tsc-hero__content {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	flex: 0 1 auto;
	width: min(46%, 520px);
	max-width: none;
	min-height: 0;
	margin: 0;
	padding: clamp(24px, 4vw, 56px);
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0;
	overflow: visible;
	border-radius: 0;
	background: transparent;
}

@media (max-width: 1024px) {
	body.home .tsc-hero__slide > .tsc-hero__content {
		width: min(60%, 520px);
	}
}

@media (max-width: 767px) {
	body.home .tsc-hero__slide > .tsc-hero__content {
		width: 100%;
		padding: 20px 20px 24px;
	}
}

/* Typography = the voice hero.css established (Inter kicker, Inter Display
   statement, flat CTA), applied to Elementor's heading/button wrappers.
   SPECIFICITY NOTE (live-verified 2026-09-13): the original NAM hero widgets
   carry per-widget Elementor styles in post-56.css at (0,4,1) -- colour,
   letter-spacing and text-shadow on `.elementor-56 .elementor-element.
   elementor-element-<id> .elementor-heading-title`, plus wrapper padding on
   `.elementor-element.elementor-element-<id> > .elementor-widget-container`
   at (0,3,0). Every rule below is therefore written at (0,5,x) with the
   `.tsc-hero .tsc-hero__slide` ancestors so both slides render identically
   without editing those widgets. Wrapper margins replace Elementor's 20px
   widget spacing; wrapper-container padding is zeroed (the old hero's
   15px/20px per-widget insets are retired). */

/* Elementor widget-container insets inside slide content: none. */
body.home .tsc-hero .tsc-hero__slide .tsc-hero__content > .elementor-widget > .elementor-widget-container {
	margin: 0;
	padding: 0;
}

/* Eyebrow always reads first, whatever the widget order in Elementor. */
body.home .tsc-hero .tsc-hero__slide .tsc-hero__content > .tsc-hero__eyebrow {
	order: -1;
	margin: 0 0 var(--tsc-space-3);
}

body.home .tsc-hero .tsc-hero__slide .tsc-hero__eyebrow .elementor-heading-title {
	margin: 0;
	font-family: var(--tsc-font-body);
	font-size: var(--tsc-fs-caption);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-shadow: none;
	-webkit-text-stroke: 0;
	color: var(--tsc-accent);
}

body.home .tsc-hero .tsc-hero__slide .tsc-hero__content > .tsc-hero__statement {
	margin: 0 0 var(--tsc-space-3);
}

body.home .tsc-hero .tsc-hero__slide .tsc-hero__statement .elementor-heading-title {
	margin: 0;
	width: auto;
	font-family: var(--tsc-font-display);
	font-size: clamp(1.9rem, 3.6vw, 3.5rem);
	font-weight: 700;
	line-height: var(--tsc-lh-tight);
	letter-spacing: normal;
	text-transform: uppercase;
	text-shadow: none;
	-webkit-text-stroke: 0;
	color: var(--tsc-text);
}

body.home .tsc-hero .tsc-hero__slide .tsc-hero__content > .tsc-hero__supporting {
	margin: 0 0 var(--tsc-space-5);
}

body.home .tsc-hero .tsc-hero__slide .tsc-hero__supporting .elementor-heading-title {
	margin: 0;
	font-family: var(--tsc-font-body);
	font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
	font-weight: 400;
	line-height: var(--tsc-lh-body);
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	color: var(--tsc-text);
}

body.home .tsc-hero .tsc-hero__slide .tsc-hero__content > .tsc-hero__cta {
	margin: 0;
}

body.home .tsc-hero .tsc-hero__slide .tsc-hero__cta .elementor-button-wrapper {
	margin: 0;
	padding: 0;
}

body.home .tsc-hero .tsc-hero__slide .tsc-hero__cta .elementor-button {
	display: inline-block;
	margin: 0;
	padding: var(--tsc-space-4) var(--tsc-space-5);
	border: 0;
	border-radius: var(--tsc-radius-sm);
	font-family: var(--tsc-font-body);
	font-size: var(--tsc-fs-body);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	color: var(--tsc-text-on-accent);
	background-color: var(--tsc-accent);
}

@media (prefers-reduced-motion: no-preference) {
	body.home .tsc-hero .tsc-hero__slide .tsc-hero__cta .elementor-button {
		transition: background-color 160ms ease, color 160ms ease;
	}
}

body.home .tsc-hero .tsc-hero__slide .tsc-hero__cta .elementor-button:hover,
body.home .tsc-hero .tsc-hero__slide .tsc-hero__cta .elementor-button:focus-visible {
	background-color: var(--tsc-accent-hover);
	color: var(--tsc-text-on-accent);
}

body.home .tsc-hero .tsc-hero__slide .tsc-hero__cta .elementor-button:focus-visible {
	outline: 2px solid var(--tsc-text);
	outline-offset: 2px;
}

/* ---- Controls (injected by hero-scroller.js; absent without JS) ---- */

body.home .tsc-hero__nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--tsc-space-3);
	width: var(--tsc-hero-slide-w);
	margin: var(--tsc-space-4) auto 0;
}

body.home .tsc-hero__count {
	display: none;                      /* spacing polish: the "n / N" readout is not shown (slides keep their aria-labels) */
	margin-right: auto;
	font-family: var(--tsc-font-body);
	font-size: var(--tsc-fs-caption);
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--tsc-text-muted);
	font-variant-numeric: tabular-nums;
}

body.home .tsc-hero__btn {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--tsc-text) 22%, transparent);
	border-radius: 999px;
	background: transparent;
	color: var(--tsc-text);
	cursor: pointer;
}

body.home .tsc-hero__btn svg {
	width: 18px;
	height: 18px;
	display: block;
}

body.home .tsc-hero__btn:hover,
body.home .tsc-hero__btn:focus-visible {
	border-color: var(--tsc-accent);
	color: var(--tsc-accent);
}

body.home .tsc-hero__btn:focus-visible {
	outline: 2px solid var(--tsc-accent);
	outline-offset: 2px;
}

body.home .tsc-hero__btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

@media (prefers-reduced-motion: no-preference) {
	body.home .tsc-hero__btn {
		transition: border-color 160ms ease, color 160ms ease, opacity 160ms ease;
	}
}

/* Desktop: float the arrows into the peek zones beside the active slide, so
   "there is more to the side" is obvious; the readout stays under the slide. */
@media (min-width: 1025px) {
	body.home .tsc-hero__btn {
		position: absolute;
		top: 50%;
		z-index: 3;
		transform: translateY(-50%);
		width: 52px;
		height: 52px;
		background: color-mix(in srgb, var(--tsc-bg) 55%, transparent);
		backdrop-filter: blur(6px);
	}

	body.home .tsc-hero__btn--prev {
		left: calc(var(--tsc-hero-peek) - 26px - var(--tsc-hero-gap) / 2);
	}

	body.home .tsc-hero__btn--next {
		right: calc(var(--tsc-hero-peek) - 26px - var(--tsc-hero-gap) / 2);
	}
}