/* Studios Callout (SPEC §?, Figma node 10355:3731 = dark panel only; full 9-photo
   composition measured off Ben's reference image). A fixed centered dark card with 9
   photos placed behind it that recede (scroll-scrubbed perspective zoom-out) on
   >=1024 with JS + motion; static reference layout otherwise.

   BB owns the section box (bb-owns-section-spacing convention): NO outer padding/
   min-height/max-width on the module root — BB row settings own spacing (SPEC §10).
   The stage's internal aspect-ratio / max-height (§2) is layout mechanics, not
   section spacing.

   Colors are token-only EXCEPT the single scoped --tbl-studios-pill-bg (SPEC §7,
   documented one-off pink pending Ben's tokenize decision). No other raw hex. */

.tbl-studios-callout {
	/* Motion + layout knobs. --tbl-studios-travel-max / -card-max / -stage-max are
	   overridden inline per-instance by the BB style knobs (frontend.php); the values
	   here are the fallback defaults. VP (vanishing point, 0-1 fraction of the stage)
	   and the pink pill live here only — tunable without touching JS. */
	--tbl-studios-travel-max: 1.0;
	--tbl-studios-start-spread: 2.2;
	--tbl-studios-card-max: 720px;
	--tbl-studios-heading-max: 720px;
	--tbl-studios-stage-max: 1100px;
	--tbl-studios-band-h: 200px; /* r12: height of each <1024 photo band (= the box's top/bottom padding). BB "Mobile Band Height" overrides inline. */
	--tbl-studios-vp-x: 0.5;
	--tbl-studios-vp-y: 0.5;
	--tbl-studios-box-min: 0.5; /* box-grow start scale (Ben r9): the box grows from this to full (1) on scroll */

	/* Depth-cue blur (Pastel #3, retuned at #116). Chris: "I like how the images
	   blur more now, but almost all images are blurry most of the time... maybe
	   when this section first comes into view, all images are in focus, then as
	   you continue to scroll, they blur."

	   -blur-start is the fraction of a slot's recede that passes BEFORE its blur
	   begins, so the section reads sharp on entry and through the first part of the
	   travel, and the softening arrives late instead of being the resting state.
	   -blur-max is unchanged, so the deepest end of the motion is exactly as soft
	   as it was — only the middle is cleared out. Both live here rather than in the
	   JS so the next round of this is a number, not a deploy. */
	--tbl-studios-blur-max: 2.0;
	--tbl-studios-blur-start: 0.4;
	--tbl-studios-pill-bg: #B390E7; /* Pastel #103 (Chris) — was #ec4899; design correction. */
	--tbl-studios-cta-hover: #b390e7; /* Figma text-link hover, On Dark (node 10411:4571) — = --footer-accent. Scoped one-off. */

	position: relative;
	display: block;
	width: 100%;
	max-width: 100vw;
}

/* The black box IS the container (Ben QA r1): full width of the module, dark,
   overflow-hidden — the photos are clipped inside it. 16/9 on desktop, 4/3 on
   tablet+mobile (media query below). Height is intrinsic (images are absolutely
   positioned) → set via aspect-ratio, capped by the stage-max knob so it never gets
   gigantic on ultra-wide. This is the element the JS measures for scroll progress. */
.tbl-studios-callout__viewport {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: var(--tbl-studios-stage-max, 1100px);
	margin-inline: auto;
	overflow: hidden;
	background: var(--Neutral-100);
	border-radius: 24px; /* the dark box; refine/remove at QA */
}

/* Image stage — spans the viewport; z2 (above the panel, below the content). The 9
   figures anchor against this box (= the stage the JS measures). */
.tbl-studios-callout__stage-images {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* Each slot is CSS-anchored (center) at its baked (left,top) via translate(-50%,-50%)
   — this IS the reference resting state (no-JS / reduced-motion / editor). The JS
   augments transform with the recede translate + scale; clearing the inline transform
   returns here.

   --cx/--cy/--cw/--ca come from the per-slot inline style (frontend.php). They are
   custom props rather than inline left/top/width/aspect-ratio so the <1024 band layout
   can override them from the stylesheet — an inline PROPERTY would win on specificity
   and force !important; an inline custom PROP just feeds these rules (r12). */
.tbl-studios-callout__slot {
	position: absolute;
	margin: 0;
	left: var(--cx);
	top: var(--cy);
	width: var(--cw);
	aspect-ratio: var(--ca);
	transform: translate(-50%, -50%);
	overflow: hidden;
	background: var(--Neutral-100);
}

/* will-change only while the recede loop is actually driving this figure. */
.tbl-studios-callout__slot.is-animating {
	will-change: transform;
}

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

/* Text block — centered over the card, z3 (above the images, so photos recede BEHIND
   the headline). Never transforms. */
.tbl-studios-callout__content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	width: min(100%, var(--tbl-studios-card-max, 720px));
	padding-inline: 24px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}

/* Pill — reuses the tbl-client-roster__label small-uppercase style (Sequel Sans,
   10px, weight 405, 2px tracking, uppercase) on the scoped pink. Pill text is dark
   (--Neutral-100) on the pink. SPEC §7 / §8. */
.tbl-studios-callout__pill {
	display: inline-block;
	margin: 0;
	padding: 6px 14px;
	font-family: var(--body-font);
	font-size: 10px;
	line-height: 1.778;
	font-weight: 405;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--Neutral-0); /* white pill text (Ben QA r9) */
	background: var(--tbl-studios-pill-bg);
	border-radius: 999px;
}

/* Heading — reuses the house .h2 display type (family/size/line-height); scoped rules
   override color for the dark card and reset the display margin. --Dark-text-Headline
   (= --Neutral-10-Base cream) per SPEC §7. Scoped selector wins over .h2's color. */
.tbl-studios-callout .tbl-studios-callout__heading {
	margin: 0;
	max-width: var(--tbl-studios-heading-max, 720px); /* Ben QA r9: BB-controlled header max-width */
	margin-inline: auto;
	color: var(--Dark-text-Headline);
	text-wrap: balance;
}

/* CTA "See More" — matches the Figma "Text Link / Medium / On Dark" component
   (nodes 10411:4563 default, 10411:4571 hover): white 20px Sequel Sans, underlined;
   hover shifts to the brand lavender. Scoped so it wins over the theme link color. */
.tbl-studios-callout .tbl-studios-callout__cta {
	color: var(--Neutral-0);
	font-family: var(--body-font);
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: 0.16px;
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-decoration-thickness: from-font;
	transition: color 200ms var(--ease-out-expo, ease);
}

.tbl-studios-callout .tbl-studios-callout__cta:hover,
.tbl-studios-callout .tbl-studios-callout__cta:focus-visible {
	color: var(--tbl-studios-cta-hover);
}

/* Reduced motion (>=1024) — belt-and-suspenders: the JS already bails (never sets a
   transform), so the CSS reference layout stands. Just make sure no figure is left
   promoting a layer. SPEC §6. */
@media (prefers-reduced-motion: reduce) {
	.tbl-studios-callout__slot {
		will-change: auto !important;
	}
}

/* Tablet + mobile (<1024) — BANDS, not a scattered stage (Ben QA r12; supersedes r1's
   4/3 box and r11's two-axis Mobile Spread).

   The problem r12 solves: a fixed aspect-ratio box on a phone is either too short for
   the photos or too tall for the text, and the photos sat BEHIND the heading where the
   box is far too narrow to keep clear of it. Now the box has no aspect-ratio at all —
   it is sized by its own text — with a band of photos above and below.

   How the height works: `.__content` returns to the FLOW here, so the text is what
   gives the box its height; `padding-block` then opens a band above and below it. The
   photos stay absolutely positioned and land in those bands. `.__stage-images` is
   inset:0, which resolves against the PADDING box, so it already spans the bands with
   no change. The box keeps overflow:hidden, so the outer photos crop against its edge
   — intended (Ben: "I'm okay with some of the images are only partially showing").

   The recede JS is gated >=1024 and clears its own clip-path below, so nothing here
   fights it. */
@media (max-width: 1023.98px) {
	.tbl-studios-callout__viewport {
		/* No ratio: the text sizes the box, the bands are padding. */
		aspect-ratio: auto;
		max-height: none;
		padding-block: var(--tbl-studios-band-h, 200px);
	}

	/* Back into the flow — this is what gives the box its height. */
	.tbl-studios-callout__content {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		margin-inline: auto;
	}

	.tbl-studios-callout__slot {
		left: var(--mx);
		/* Sized by HEIGHT against the band, not width against the box: the band is then
		   a hard ceiling and a tall portrait cannot bleed over the text. Width falls out
		   of the slot's own aspect-ratio, which is still --ca from the base rule. */
		width: auto;
		height: calc(var(--tbl-studios-band-h, 200px) * var(--mh));
	}

	/* --mk counts from each band's OUTER edge, so the two rules are mirror images. */
	.tbl-studios-callout__slot--band-top {
		top: calc(var(--tbl-studios-band-h, 200px) * var(--mk));
	}

	.tbl-studios-callout__slot--band-bottom {
		top: calc(100% - var(--tbl-studios-band-h, 200px) * var(--mk));
	}
}