/* Hero Expand (Figma 11521:33827) — headline over a strip of seven tiles; tile 4
   expands on scroll into a centered card and then a full-width panel (300svh pin).

   Modes, set as classes on the root by tbl-hero-expand.js:
     (none)      static — headline, strip, panel block. The no-JS / reduced-motion /
                 editor state, and `hover: none` at ≥1024 (a new convention for this
                 module: a touch device at desktop width skips the pinned sequence).
     .is-pinned  ≥1024: sticky 100svh stage inside a 300svh section, scrubbed by scroll.
     .is-drift   <1024 (default): no pin; the strip loops sideways and can be dragged,
                 the panel is a static card below it.
     .is-simple  <1024 (--tbl-hx-mobile: simple): 150svh pin, tile → panel, tiles fade.
   Pinned and simple also carry .is-motion.

   --tbl-hx-s is a UNITLESS scale (box width / 1600) written by the JS; every drawn
   size is `calc(<artboard px> * var(--tbl-hx-s))`. Type uses plain-unit clamps so it
   holds in Firefox and without JS. */

.tbl-hero-expand {
	/* BB owns section spacing — no outer padding/min-height/width on the module root. */
	--tbl-hx-s: 1;
	--tbl-hx-sy: 1;
	--tbl-hx-sp: 1;
	--tbl-hx-pin: 300;
	--tbl-hx-mobile: drift; /* `drift` | `simple` | `off` — read by the JS; `off` = static below 1024 */
	--tbl-hx-scrim: 0.5;
	position: relative;
	margin: 0;
	color: var(--Black);
	background: var(--White);
}

/* Sitewide contract: sticky-cta.js reveals the floating pill once this marker is
   above the viewport — the end of the first screen, not of the whole pin. */
.tbl-hero-expand > [data-fold-marker] {
	position: absolute;
	top: 100svh;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.tbl-hero-expand__stage {
	position: relative;
}

/* ---- headline ---- */

.tbl-hero-expand__text {
	position: relative;
	z-index: 1;
	padding-top: calc(166px * var(--tbl-hx-sy));
	text-align: center;
}

.tbl-hero-expand__lead {
	margin: 0;
	font-family: var(--header-font);
	font-weight: var(--header-font-weight);
	font-size: clamp(22px, 2vw, 32px);
	line-height: 1.1;
	color: inherit;
}

/* 160px is above every heading token (--h0-max-font-size is 90px): a local clamp,
   plain units only. 10vw = 160 / 1600. */
.tbl-hero-expand__display {
	margin: 0;
	padding: 0;
	font-family: var(--header-font);
	font-weight: var(--header-font-weight);
	font-size: clamp(52px, 10vw, 160px);
	line-height: 0.8125;
	letter-spacing: -1px;
	color: inherit;
	text-wrap: balance;
}

/* Category-Small — 10 / 17.78, 2px tracking, uppercase (no theme class). */
.tbl-hero-expand__sub {
	margin: calc(23px * var(--tbl-hx-s)) 0 0;
	font-family: var(--body-font);
	font-weight: var(--header-font-weight);
	font-size: 10px;
	line-height: 17.78px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: inherit;
}

.tbl-hero-expand__cue {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	width: max-content;
	margin: calc(24px * var(--tbl-hx-s)) 0 0 calc(39px * var(--tbl-hx-s));
	font-family: var(--body-font);
	font-size: 16px;
	line-height: 17.5px;
	letter-spacing: -0.16px;
	color: inherit;
}

.tbl-hero-expand__cue-icon {
	display: block;
	flex: none;
	width: 24px;
	height: 24px;
}

.tbl-hero-expand__cue-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---- strip ---- */

.tbl-hero-expand__rail {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: safe center;
	margin: calc(13px * var(--tbl-hx-s)) 0 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.tbl-hero-expand__rail::-webkit-scrollbar {
	display: none;
}

.tbl-hero-expand__strip {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	gap: calc(20px * var(--tbl-hx-s));
}

.tbl-hero-expand__tile {
	position: relative;
	flex: none;
	width: calc(259px * var(--tbl-hx-s));
	height: calc(var(--tbl-hx-h, 315) * 1px * var(--tbl-hx-s));
	margin: 0;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.06);
}

/* Static layout: the spacer draws the panel image so seven tiles show. Motion
   modes clear it (the panel <img> is revealed through this rect instead). */
.tbl-hero-expand__tile--grow {
	width: calc(258px * var(--tbl-hx-s));
	background: var(--tbl-hx-spacer-src, rgba(0, 0, 0, 0.06)) center / cover no-repeat;
}

.tbl-hero-expand__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- panel ---- */

.tbl-hero-expand__panel {
	position: relative;
	z-index: 3;
	margin: 40px 11px 0;
	aspect-ratio: 1578 / 888;
	border-radius: 20px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.06);
}

.tbl-hero-expand__panel-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tbl-hero-expand__scrim {
	position: absolute;
	inset: 0;
	background: #000;
	opacity: var(--tbl-hx-scrim);
	pointer-events: none;
}

.tbl-hero-expand__copy {
	position: absolute;
	inset: 0;
	color: var(--White);
}

/* H3 (38 / 44), the two phrases side by side across the panel's center line. */
.tbl-hero-expand__line {
	position: absolute;
	top: 50%;
	margin: 0;
	transform: translateY(-50%);
	font-family: var(--header-font);
	font-weight: var(--header-font-weight);
	font-size: clamp(26px, 2.375vw, 38px);
	line-height: 1.158;
	white-space: nowrap;
	color: inherit;
}

.tbl-hero-expand__line--1 {
	right: calc(50% + 0.375em);
}

.tbl-hero-expand__line--2 {
	left: calc(50% + 0.375em);
}

.tbl-hero-expand__link {
	position: absolute;
	right: calc(139px * var(--tbl-hx-s));
	bottom: calc(55px * var(--tbl-hx-sp));
	font-family: var(--body-font);
	font-size: 15px;
	line-height: 25px;
	letter-spacing: 0.15px;
	color: var(--White);
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-underline-offset: 3px;
	transition: var(--button-easing);
}

.tbl-hero-expand__link:hover,
.tbl-hero-expand__link:focus-visible {
	color: var(--White);
	text-decoration-color: transparent;
}

/* ---- motion modes ---- */

.tbl-hero-expand.is-motion {
	height: calc(var(--tbl-hx-pin) * 1svh);
}

.tbl-hero-expand.is-simple {
	--tbl-hx-pin: 150;
}

/* Sticky, never fixed: header.php's .tb-reveal-content is a transformed ancestor
   sitewide. Its `overflow: clip` keeps this sticky alive. `clip` here too so pushed
   tiles never grow a horizontal scrollbar. */
.tbl-hero-expand.is-motion .tbl-hero-expand__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: clip;
}

.tbl-hero-expand.is-motion .tbl-hero-expand__text,
.tbl-hero-expand.is-motion .tbl-hero-expand__cue,
.tbl-hero-expand.is-motion .tbl-hero-expand__tile {
	will-change: transform, opacity;
}

.tbl-hero-expand.is-motion .tbl-hero-expand__tile--grow {
	background: none;
}

/* The JS sizes the image to the final panel rect, so the clip reveals it at full size. */
.tbl-hero-expand.is-motion .tbl-hero-expand__panel-img {
	inset: auto;
	will-change: top, left, width, height;
}

.tbl-hero-expand.is-motion .tbl-hero-expand__panel {
	position: absolute;
	inset: 0;
	margin: 0;
	aspect-ratio: auto;
	border-radius: 0;
	overflow: visible;
	background: none;
	will-change: clip-path;
}

/* The copy is pinned to the panel's FINAL rect (written by the JS), not to the
   stage, so the lines and link land where the frame puts them. */
.tbl-hero-expand.is-motion .tbl-hero-expand__copy {
	inset: auto;
	top: var(--tbl-hx-panel-top, 0px);
	left: 11px;
	right: 11px;
	height: var(--tbl-hx-panel-h, 100%);
}

.tbl-hero-expand.is-motion .tbl-hero-expand__line,
.tbl-hero-expand.is-motion .tbl-hero-expand__link {
	opacity: 0;
	will-change: transform, filter, opacity;
}

/* Pinned (≥1024): the frame's absolute placement inside the 100svh stage. */
.tbl-hero-expand.is-pinned .tbl-hero-expand__text {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(166px * var(--tbl-hx-sy));
	padding-top: 0;
}

.tbl-hero-expand.is-pinned .tbl-hero-expand__cue {
	position: absolute;
	left: calc(39px * var(--tbl-hx-s));
	top: calc(510px * var(--tbl-hx-sy));
	margin: 0;
}

.tbl-hero-expand.is-pinned .tbl-hero-expand__rail {
	/* The strip scales with the height-capped scale, so a short window never pushes
	   the tiles past the stage. */
	--tbl-hx-s: var(--tbl-hx-sy);
	position: absolute;
	left: 0;
	right: 0;
	top: calc(723.5px * var(--tbl-hx-sy));
	margin: 0;
	transform: translateY(-50%);
	justify-content: center;
	overflow: visible;
}

/* ---- under 1024 ---- */

@media (max-width: 1023px) {

	/* Clears the 80px fixed header at every narrow width. */
	.tbl-hero-expand__text {
		padding-top: 120px;
	}

	.tbl-hero-expand__cue {
		margin-inline: auto;
	}

	.tbl-hero-expand__rail {
		margin-top: 32px;
	}

	.tbl-hero-expand:not(.is-motion) .tbl-hero-expand__panel {
		aspect-ratio: auto;
		height: min(125vw, 78svh);
	}

	.tbl-hero-expand.is-drift .tbl-hero-expand__rail {
		justify-content: flex-start;
		overflow: hidden;
		touch-action: pan-y;
		cursor: grab;
		user-select: none;
		-webkit-user-select: none;
	}

	.tbl-hero-expand.is-drift .tbl-hero-expand__strip {
		will-change: transform;
	}

	.tbl-hero-expand.is-drift .tbl-hero-expand__img {
		pointer-events: none;
		-webkit-user-drag: none;
	}

	/* The two lines stack; the link sits in the corner. */
	.tbl-hero-expand__copy {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		padding: 24px;
	}

	.tbl-hero-expand__line {
		position: static;
		transform: none;
		white-space: normal;
	}

	.tbl-hero-expand__link {
		right: 24px;
		bottom: 20px;
	}
}