/* Studios Hero — Figma 11739:2679 (strip 11846:3224).

   BB owns section spacing (bb-owns-section-spacing): no padding, min-height or
   width on the section. Figma at 1600: title 114 below the nav (row padding),
   subline 13 below the title, cue line 26 below that, strip 50 below the line.

   Strip geometry lives here, not in the builder: tile width is the viewport over
   the tiles-in-view count (5 / 3.25 / 2.5), the strip is tile width x 426/311, and
   each tile's height is its authored ratio of the strip. The default state is the
   JS-off state: a static, bottom-aligned row clipped at the viewport. The JS adds
   `is-live` and takes over tile placement with per-tile transforms. */

.tbl-studios-hero {
	--tbl-sh-n: 5;
	--tbl-sh-w: calc(var(--tbl-sh-viewport, 100vw) / var(--tbl-sh-n));
	--tbl-sh-h: calc(var(--tbl-sh-w) * 426 / 311);

	position: relative;
}

/* ---- text ---- */

.tbl-studios-hero__text {
	text-align: center;
}

/* Same size and scaling as the homepage display (tbl-hero-expand__display): 160 at
   1600, 10vw between, floor 52 — Ben, QA round 1. */
.tbl-studios-hero__title {
	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: var(--Black, #000);
	text-wrap: balance;
}

/* The subline is the theme's .h4 (size, face, line height); only the box and the
   colour are set here, at (0,3,0) so they beat the theme's own .h4 rule. */
.tbl-studios-hero .tbl-studios-hero__sub.h4 {
	max-width: 620px;
	margin: 13px auto 0;
	padding: 0;
	color: var(--Black, #000);
	text-wrap: balance;
}

/* ---- cue / label line ---- */

.tbl-studios-hero__line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 26px;
	padding: 0 39px;
	font-family: var(--body-font);
	font-size: 16px;
	line-height: 17.5px;
	letter-spacing: -0.16px;
	color: var(--Black, #000);
}

.tbl-studios-hero__cue,
.tbl-studios-hero__label {
	margin: 0;
}

.tbl-studios-hero__cue {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Category-Small (Figma 11834:2681, Pastel #233). */
.tbl-studios-hero__label {
	margin-left: auto;
	text-align: right;
	font-size: 10px;
	line-height: 17.78px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* Ben's 24px blob (QA round 1), left of the label; its fill is the asset's own. */
.tbl-studios-hero__cue-icon {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 24px;
	height: 24px;
}

.tbl-studios-hero__cue-icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

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

.tbl-studios-hero__strip {
	position: relative;
	/*
	 * Full-bleed technique 3 (platform.md): a DEFINITE, non-percentage width stops
	 * the track's width propagating up through BB's shrink-to-fit column, and the
	 * bleed is a JS-measured shift, not a percentage. 100vw is the pre-JS fallback
	 * only (it includes the scrollbar). Both margins on purpose — the right one
	 * shrinks the shrink-to-fit ancestors so scrollWidth stays at the viewport.
	 */
	width: var(--tbl-sh-viewport, 100vw);
	height: var(--tbl-sh-h);
	margin: 50px calc(-1 * var(--tbl-sh-shift, 0px)) 0;
	overflow: hidden;
	touch-action: pan-y;
}

/* [tabindex] + :focus lifts both past BB's global (0,3,0) focus outline */
.tbl-studios-hero__strip[tabindex]:focus:not(:focus-visible) {
	outline: none;
}

.tbl-studios-hero__strip[tabindex]:focus:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -3px;
}

.tbl-studios-hero__strip.is-live {
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}

.tbl-studios-hero__strip.is-live.is-dragging {
	cursor: grabbing;
}

.tbl-studios-hero__track {
	display: flex;
	align-items: flex-end;
	width: max-content;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tbl-studios-hero__tile {
	position: relative;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: var(--tbl-sh-w);
	height: calc(var(--tbl-sh-r, 1) * 100%);
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: var(--Neutral-10, #f2f2f2);
}

.tbl-studios-hero__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
}

/* 1px overscan: the video layer rounds apart from the tile's clip, so its edge
   would otherwise let the tile background flicker through while moving */
.tbl-studios-hero__photo--video {
	position: absolute;
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	max-width: none;
	height: calc(100% + 2px);
}

/* Live: the JS owns every tile's position. Clones fill the loop; tiles start
   hidden until the first frame places them, so nothing flashes at x=0. */
.is-live .tbl-studios-hero__track {
	position: absolute;
	inset: 0;
	display: block;
	width: auto;
}

.is-live .tbl-studios-hero__tile {
	position: absolute;
	left: 0;
	bottom: 0;
	visibility: hidden;
	transform-origin: 0 100%;
	will-change: transform;
}

/* Entrance (Ben, QA round 1: "cascade up and in" like the old stats cards): once the
   first frame has placed the tiles, each photo on screen rises into its tile and
   fades in, left to right, --tbl-sh-delay apart (set by the JS). The tile itself is
   the JS's; only the media inside animates. Off under reduced motion. */
@keyframes tbl-sh-rise {
	from {
		opacity: 0;
		transform: translate3d(0, 40%, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.is-live.is-entering .tbl-studios-hero__tile {
		background-color: transparent;
	}

	.is-live.is-entering .tbl-studios-hero__photo {
		animation: tbl-sh-rise 1000ms var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)) both;
		animation-delay: var(--tbl-sh-delay, 0ms);
	}
}

/* ---- breakpoints: tiles in view ---- */

@media (max-width: 1024px) {
	.tbl-studios-hero {
		--tbl-sh-n: 3.25;
	}

	.tbl-studios-hero__line {
		padding: 0 20px;
	}
}

@media (max-width: 767px) {
	.tbl-studios-hero {
		--tbl-sh-n: 1.6667;
	}

	.tbl-studios-hero__sub {
		font-size: 18px;
		padding: 0 20px;
	}

	.tbl-studios-hero__line {
		flex-wrap: wrap;
		margin-top: 20px;
	}

	.tbl-studios-hero__strip {
		margin-top: 32px;
	}
}