/* Capabilities — Figma 11839:2728, madewithgsap 105. Approved prototype values:
   curve x = 7.5vw + 28vw × (1 − t²) · pitch 18vh · font 5.6vw · dim floor 20% (Ben, QA
   round 1; the prototype's 8%; authored per instance as Dim Level) ·
   photo 20vw at 304:194 at x 7.5vw · window fade over 19vh · 40vh of scroll per item.

   Three layouts, one DOM:
   - default (no JS, BB editor, reduced motion ≥768): a plain list, full opacity, a
     small photo beside each word;
   - under 768: a horizontal scroll-snap rail of 4:5 photo cards, 72vw wide, the word
     under each card;
   - `is-pinned` (JS, ≥768, motion allowed): the section grows to item count × 40vh,
     the pin sticks for 100vh, and the JS places every word on the curve.

   No ground here — the row's `tbl-bg-dark` class (ticket 04) paints it. No padding,
   min-height or width beyond the full-bleed: BB rows own spacing. */

.tbl-capabilities {
	--tbl-cap-dim: 0.2; /* the editor's Dim Level overrides this inline */
	--tbl-cap-toggle: 100ms;

	position: relative;
	/* Full-bleed technique 3 (platform.md): definite width + measured shift. */
	width: var(--tbl-cap-viewport, 100vw);
	margin-left: calc(-1 * var(--tbl-cap-shift, 0px));
	margin-right: calc(-1 * var(--tbl-cap-shift, 0px));
	color: var(--White, #fff);
}

.tbl-capabilities__pin {
	position: relative;
	padding: 40px 7.5vw;
}

.tbl-capabilities__eyebrow {
	margin: 0 0 32px;
}

/* The eyebrow is the theme's .h6, white on the dark ground (Ben, QA round 1). The
   page-flip palette in theme.css paints `p` inside a dark row from `#tb-main` rules
   at (1,2,2)+, so this needs the id too; while the ground is still light it follows
   the words and reads black. */
#tb-main .fl-row.tbl-bg-dark .tbl-capabilities__eyebrow.h6,
body.tbl-bg-text-dark #tb-main .fl-row-bg-none .tbl-capabilities__eyebrow.h6 {
	color: var(--White, #fff);
}

body.tbl-bg-flip:not(.tbl-bg-text-dark) #tb-main .fl-row.tbl-bg-dark .tbl-capabilities__eyebrow.h6 {
	color: var(--Black, #000);
}

/* The desktop photo window: only the pinned layout shows it. */
.tbl-capabilities__window {
	display: none;
}

.tbl-capabilities__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tbl-capabilities__item {
	margin: 0;
	padding: 0;
}

.tbl-capabilities__card {
	display: flex;
	align-items: center;
	gap: 24px;
	width: 100%;
	margin: 0 0 24px;
}

.tbl-capabilities__thumb {
	display: block;
	flex: none;
	width: 160px;
	aspect-ratio: 304 / 194;
	object-fit: cover;
	border-radius: 4px;
	-webkit-user-drag: none;
}

.tbl-capabilities__word {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-family: var(--header-font);
	font-weight: var(--header-font-weight);
	font-size: clamp(28px, 3.2vw, 52px);
	line-height: 1;
	letter-spacing: -0.015em;
	color: var(--White, #fff);
}

/* Ticket 04's palette: on the light ground a dark row's own text reads dark until
   the page flips; the li rule in theme.css does this for list text, the word sets
   its own colour so it follows the same class hooks. */
body.tbl-bg-flip:not(.tbl-bg-text-dark) .tbl-capabilities__word {
	color: var(--Black, #000);
}

.tbl-capabilities__link {
	color: inherit;
	text-decoration: none;
}

.tbl-capabilities__link:hover {
	text-decoration: underline;
}

/* ---- pinned curve (JS, ≥768, motion) ---- */

.tbl-capabilities.is-pinned .tbl-capabilities__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	padding: 0;
	overflow: hidden; /* words leaving the top never draw over the row above */
	pointer-events: none; /* the next row is pulled up under its empty lower half */
}

.tbl-capabilities.is-pinned .tbl-capabilities__eyebrow {
	position: absolute;
	left: 7.5vw;
	top: max(100px, 11vh); /* under the fixed nav bar; Figma y100 */
	margin: 0;
}

.tbl-capabilities.is-pinned .tbl-capabilities__window {
	display: block;
	position: absolute;
	left: 7.5vw;
	top: 50%;
	width: 20vw;
	height: calc(20vw * 194 / 304);
	margin-top: calc(-10vw * 194 / 304);
	overflow: hidden;
	border-radius: 4px;
	opacity: 0;
	pointer-events: none;
}

.tbl-capabilities.is-pinned .tbl-capabilities__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}

.tbl-capabilities.is-pinned.is-ready .tbl-capabilities__photo {
	transition: opacity var(--tbl-cap-toggle) linear;
}

.tbl-capabilities.is-pinned .tbl-capabilities__photo.is-shown {
	opacity: 1;
}

.tbl-capabilities.is-pinned .tbl-capabilities__list {
	position: absolute;
	inset: 0;
}

.tbl-capabilities.is-pinned .tbl-capabilities__item {
	pointer-events: auto;
	position: absolute;
	left: 0;
	top: 50%;
	white-space: nowrap;
	opacity: var(--tbl-cap-dim);
	will-change: transform, opacity;
}

.tbl-capabilities.is-pinned.is-ready .tbl-capabilities__item {
	transition: opacity var(--tbl-cap-toggle) linear;
}

.tbl-capabilities.is-pinned .tbl-capabilities__item.is-lit {
	opacity: 1;
}

.tbl-capabilities.is-pinned .tbl-capabilities__card {
	display: block;
	width: max-content;
	margin: 0;
}

.tbl-capabilities.is-pinned .tbl-capabilities__thumb {
	display: none;
}

.tbl-capabilities.is-pinned .tbl-capabilities__word {
	font-size: 5.6vw;
}

/* ---- swipe cards (under 768) ---- */

@media (max-width: 767px) {
	.tbl-capabilities__pin {
		padding: 40px 0 40px 6vw;
	}

	.tbl-capabilities__eyebrow {
		margin-bottom: 24px;
	}

	.tbl-capabilities__list {
		display: flex;
		gap: 4vw;
		padding-right: 6vw;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.tbl-capabilities__list::-webkit-scrollbar {
		display: none;
	}

	.tbl-capabilities__item {
		flex: 0 0 72vw;
		scroll-snap-align: start;
	}

	.tbl-capabilities__card {
		display: block;
		width: 100%;
		margin: 0;
	}

	.tbl-capabilities__thumb {
		width: 100%;
		aspect-ratio: 4 / 5;
		border-radius: 6px;
		margin-bottom: 4vw;
	}

	/* An item with no photo is a plain dark card with the word. */
	.tbl-capabilities__item--no-photo .tbl-capabilities__card::before {
		content: '';
		display: block;
		width: 100%;
		aspect-ratio: 4 / 5;
		border-radius: 6px;
		margin-bottom: 4vw;
		background: rgba(255, 255, 255, 0.08);
	}

	.tbl-capabilities__word {
		font-size: 7vw;
		line-height: 1.15;
	}
}