/* Approach (Figma 11521:33827 — head 11521:34479/34480/34482, cards 11521:34439 /
   11531:34693 / 11531:34703). Head over three numbered cards that stack as you scroll.

   The CSS default is the plain list (no-JS / <1200 / reduced motion / editor).
   tbl-approach.js adds `.is-stacked` at ≥1200 with motion, inside the same gate the
   CSS repeats, and writes the sizes: --tbl-ap-total (wrapper), --tbl-ap-box (card),
   --tbl-ap-h (sheet), --tbl-ap-squeeze / --tbl-ap-progress / --tbl-ap-final.

   Geometry at the 1600 artboard: content 1390 wide at x 81; horizontal values are %
   of that box, vertical values multiply --tbl-ap-s (row content box / 1600). */

.tbl-approach {
	/* BB owns section spacing — no outer padding/min-height/width on the module root. */
	--tbl-ap-s: 1;
	--tbl-ap-base: 84px;             /* first card's pinned top */
	--tbl-ap-step: 92px;             /* stagger per card; 80 clipped the g/y descenders */
	--tbl-ap-step-sm: 64px;          /* stagger per card, phone stack */
	--tbl-ap-num-fs: clamp(26px, 2.375vw, 38px);
	--tbl-ap-num-w: max(calc(73px * var(--tbl-ap-s)), calc(var(--tbl-ap-num-fs) * 1.25));
	--tbl-ap-indent: calc(var(--tbl-ap-num-w) + 10px * var(--tbl-ap-s));
	position: relative;
	margin: 0;
	color: var(--Black);
}

.tbl-approach__inner {
	width: 86.875%;                  /* 1390 / 1600 */
	margin: 0 0 0 5.0625%;           /* 81 / 1600 */
}

/* ---- head ---- */

.tbl-approach__head {
	position: relative;
	padding: 0 0 50px;
}

/* Category-Small, 5 right of the column edge (x 86). */
.tbl-approach__eyebrow {
	margin: 0 0 calc(13px * var(--tbl-ap-s)) calc(5px * var(--tbl-ap-s));
	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;
}

/* H1 tokens (60 / 62 at the artboard), −1 tracking, 891 wide. */
.tbl-approach__heading {
	max-width: 64.1%;                /* 891 / 1390 */
	margin: 0;
	padding: 0;
	font-family: var(--header-font);
	font-weight: var(--header-font-weight);
	font-size: var(--h1-font-size);
	line-height: var(--h1-line-height);
	letter-spacing: -1px;
	color: inherit;
}

/* Primary pill, flush right (right edge 1469 = 2 in from the column), on the
   heading's baseline band. `.btn` forces color: inherit on children; the arrow is a
   currentColor mask, so it follows the label on hover by itself. */
/* Doubled selector: theme.css's `.btn { position: relative }` loads after this file
   and would beat a single class. */
.tbl-approach__head .tbl-approach__button {
	position: absolute;
	right: calc(2px * var(--tbl-ap-s));
	bottom: 50px;
}

/* Head reveal: eyebrow, heading and pill blur-fade up as the head scrolls in (the
   theme's `blur-up-in`, same gates as the Studios intro band). */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
	@supports (animation-timeline: view()) {
		body:not(.fl-builder-edit) .tbl-approach__head > * {
			--start-tween: clamp(80px, 20vh, 200px);
			--tween-length: 30vh;

			animation: blur-up-in both;
			animation-timeline: view();
			animation-range: entry var(--start-tween) entry calc(var(--start-tween) + var(--tween-length));
		}
	}
}

/* ---- cards ---- */

.tbl-approach__stack {
	position: relative;
}

.tbl-approach__card {
	position: relative;
}

.tbl-approach__card + .tbl-approach__card {
	margin-top: calc(80px * var(--tbl-ap-s));
}

/* The sheet: hairline on top, opaque white, bleeding 21.5 past the column each side.
   The bleed is a pseudo so the sheet's own box stays the 1390 column and the
   absolute children keep the frame's x. z-index: 0 makes a stacking context, so the
   pseudo paints under this sheet's content but over the previous card. */
.tbl-approach__sheet {
	position: relative;
	z-index: 0;
	min-height: calc(608px * var(--tbl-ap-s));
	padding-top: calc(32px * var(--tbl-ap-s));
}

.tbl-approach__sheet::before {
	content: "";
	position: absolute;
	inset: 0 calc(-21.5px * var(--tbl-ap-s));
	z-index: -1;
	background: var(--White);
	border-top: 1px solid var(--Neutral-20, #e0e0e0);
}

.tbl-approach__row {
	display: flex;
	align-items: baseline;
	gap: calc(10px * var(--tbl-ap-s));
	margin: 0;
}

/* H3 38 / 44 on both; the numeral in the light purple token, in a fixed 73 column so
   01 / 02 / 03 never shift the title. */
.tbl-approach__num,
.tbl-approach__title {
	margin: 0;
	padding: 0;
	font-family: var(--header-font);
	font-weight: var(--header-font-weight);
	font-size: var(--tbl-ap-num-fs);
	line-height: 1.158;
	color: inherit;
}

.tbl-approach__num {
	flex: 0 0 var(--tbl-ap-num-w);
	color: var(--Primary-Alt-50-Base);
}

/* 15 / 25, tracking 0.15, half-tone, 440 wide, 3px under the title row. */
.tbl-approach__body {
	width: 31.655%;                  /* 440 / 1390 */
	margin: 3px 0 0 var(--tbl-ap-indent);
	font-family: var(--body-font);
	font-weight: var(--body-font-weight);
	font-size: 15px;
	line-height: 25px;
	letter-spacing: 0.15px;
	color: rgba(0, 0, 0, 0.5);
}

/* 200px ghost numeral on the soft ground, 263 below the hairline. */
.tbl-approach__ghost {
	position: absolute;
	left: 0;
	top: calc(263px * var(--tbl-ap-s));
	font-family: var(--header-font);
	font-weight: var(--header-font-weight);
	font-size: calc(200px * var(--tbl-ap-s));
	line-height: 1;
	color: var(--tbl-ground-soft, #fafafa);
	pointer-events: none;
	user-select: none;
}

/* 700 × 424 r10 at x 764 (683 into the column), 32 below the hairline. Absolute,
   above the ghost by DOM order. reset.css sizes figures to their content, hence the
   explicit inline-size. */
.tbl-approach__media {
	position: absolute;
	left: 49.137%;                   /* 683 / 1390 */
	top: calc(32px * var(--tbl-ap-s));
	width: 50.36%;                   /* 700 / 1390 */
	inline-size: 50.36%;
	aspect-ratio: 700 / 424;
	margin: 0;
	border-radius: 10px;             /* r10 — off the --Corner-Radius scale (11521:34439) */
	overflow: hidden;
	background: rgba(0, 0, 0, 0.06);
}

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

/* Glass pill (11531:34726): 25 in from the image's right edge, 24 above its bottom.
   A plain <a>, not .btn. */
.tbl-approach__glass {
	position: absolute;
	right: calc(25px * var(--tbl-ap-s));
	bottom: calc(24px * var(--tbl-ap-s));
	padding: 9px 12px 9px 15px;
	border-radius: 20px;
	background: rgba(63, 63, 63, 0.4);
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	font-family: var(--body-font);
	font-weight: var(--body-font-weight);
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	color: var(--White);
	text-decoration: none;
	transition: var(--button-easing);
}

.tbl-approach__glass:hover,
.tbl-approach__glass:focus-visible {
	color: var(--White);
	background: rgba(63, 63, 63, 0.6);
}

@supports not (backdrop-filter: blur(1px)) {
	@supports not (-webkit-backdrop-filter: blur(1px)) {
		.tbl-approach__glass {
			background: rgba(63, 63, 63, 0.9);
		}
	}
}

/* ---- stacked (≥1200, motion allowed; the JS adds the class inside the same gate) ---- */

@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {

	.tbl-approach__stack.is-stacked {
		height: var(--tbl-ap-total);
	}

	.tbl-approach__stack.is-stacked .tbl-approach__card {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: var(--tbl-ap-box);
		margin: 0;
	}

	/* Sticky, never fixed (.tb-reveal-content is a transformed ancestor sitewide). The
	   pinned top staggers by index; the squeeze drifts the deck up on short viewports;
	   the exit offset moves all three out together; the cover offset cancels the row's
	   hold so the finished stack stays put while the next row rolls over it. */
	.tbl-approach__stack.is-stacked .tbl-approach__sheet {
		position: sticky;
		top: calc(var(--tbl-ap-base) + var(--tbl-ap-step) * var(--tbl-ap-i, 0) + var(--tbl-ap-squeeze, 0px) * var(--tbl-ap-progress, 0) - var(--tbl-ap-final, 0px) - var(--tbl-ap-cover, 0px));
		height: var(--tbl-ap-h);
	}
}

/* A covered card keeps only its title row: the JS fades the rest out as the next
   card lands on it (1 → 0 in --tbl-ap-fade, per sheet). */
.tbl-approach__stack:is(.is-stacked, .is-stacked-sm) :is(.tbl-approach__body, .tbl-approach__media, .tbl-approach__ghost) {
	opacity: var(--tbl-ap-fade, 1);
}

/* Phone stack (<1200, motion allowed; the JS adds the class only when every card
   fits the screen): each card pins under the header, one title row below the last. */
@media (max-width: 1199px) and (prefers-reduced-motion: no-preference) {

	.tbl-approach__stack.is-stacked-sm .tbl-approach__card {
		position: sticky;
		top: calc(var(--main-menu-bar-height, 80px) + 16px + var(--tbl-ap-step-sm) * var(--tbl-ap-i, 0) - var(--tbl-ap-cover, 0px));
	}
}

/* The roll-over into the next row (both stacks; the JS adds the classes and
   drives the transform, blur and shade). The next row paints over this one, so it
   needs its own ground while it does. */
.tbl-ap-cover-row {
	position: relative;
}

.tbl-ap-cover-shade {
	position: absolute;
	inset: 0;
	z-index: 5;
	background: #000;
	opacity: 0;
	pointer-events: none;
}

.tbl-ap-cover-next {
	position: relative;
	z-index: 1;
	background-color: var(--White);
}

/* ---- plain list: image in flow under the text ---- */

@media (max-width: 1199px), (prefers-reduced-motion: reduce) {

	.tbl-approach__sheet {
		min-height: 0;
		padding-top: 24px;
	}

	.tbl-approach__body {
		width: auto;
		max-width: 560px;
	}

	.tbl-approach__ghost {
		display: none;
	}

	.tbl-approach__media {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		inline-size: 100%;
		margin-top: 24px;
	}
}

@media (max-width: 1023px) {

	/* The column fills about 80% of the screen (Pastel #222). */
	.tbl-approach__inner {
		width: min(100%, 80vw);
		margin: 0 auto;
	}

	.tbl-approach__heading {
		max-width: none;
	}

	.tbl-approach__head {
		padding-bottom: 80px;
	}

	.tbl-approach__head .tbl-approach__button {
		position: static;
		display: inline-block;
		margin-top: 24px;
	}

	.tbl-approach__card + .tbl-approach__card {
		margin-top: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.tbl-approach__glass {
		transition: none;
	}
}