/* Featured Panels (Figma 11521:33998 head · 11521:34425/34490/34484 panels).

   Head: inside the row's content width (title at x 92, row 1389 wide at x 105 of
   1600, as % of the module box). Panels: full-bleed by measurement — the JS writes
   --tbl-fp-viewport (documentElement.clientWidth) and the list breaks out against
   it; each panel is 1600:1000 (4:5 under 1024) with its text placed as % of the
   panel box. --tbl-fp-s is a unitless scale (box width / 1600) for the head's
   vertical offsets. The section paints nothing behind the head (BB row ground). */

.tbl-featured-panels {
	/* BB owns section spacing — no outer padding/min-height/width on the module root. */
	--tbl-fp-s: 1;
	position: relative;
	margin: 0;
	color: var(--Black);
}

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

/* Two columns, bottom-aligned: title with the sub-line under it, and View all.
   120px of white under them (60 under 1024), carried by the band's own bottom edge
   (not the BB row padding). */
.tbl-featured-panels__head {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	padding: 0 6.625% 120px 5.75%;   /* right 106 / 1600 · left 92 / 1600 */
}

.tbl-featured-panels__head-main {
	min-width: 0;
}

/* 150px is above every heading token: a local clamp, plain units (9.375vw = 150/1600). */
.tbl-featured-panels__title {
	position: relative;
	margin: 0;
	padding: 0;
	font-family: var(--header-font);
	font-weight: var(--header-font-weight);
	font-size: clamp(56px, 9.375vw, 150px);
	line-height: 1;
	letter-spacing: -1px;
	color: inherit;
}

.tbl-featured-panels__title-text {
	display: inline-block;
	vertical-align: top;
}

/* "(N)" 20/24, 40 × scale below the title's top edge. */
.tbl-featured-panels__count {
	position: relative;
	top: calc(40px * var(--tbl-fp-s));
	display: inline-block;
	vertical-align: top;
	margin-left: calc(6px * var(--tbl-fp-s));
	font-family: var(--body-font);
	font-weight: var(--header-font-weight);
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 0;
}

/* H5 24 / 28, under the title, 13 × scale in to meet the title's glyph edge. */
.tbl-featured-panels__subline {
	margin: calc(12px * var(--tbl-fp-s)) 0 0 calc(13px * var(--tbl-fp-s));
	font-family: var(--header-font);
	font-weight: var(--header-font-weight);
	font-size: clamp(18px, 1.5vw, 24px);
	line-height: 1.1667;
	color: inherit;
}

/* 20 / 30, tracking 0.16 — .underline-text draws the line; the color fade is ours. */
.tbl-featured-panels__viewall {
	flex: none;
	font-family: var(--body-font);
	font-weight: var(--header-font-weight);
	font-size: 20px;
	line-height: 30px;
	letter-spacing: 0.16px;
	white-space: nowrap;
	transition: var(--button-easing);
}

/* ---- panels ---- */

/* Full-bleed by measurement (platform technique 2): clientWidth, not 100vw. */
.tbl-featured-panels__panels {
	position: relative;
	margin-inline: calc((100% - var(--tbl-fp-viewport, 100%)) / 2);
	max-width: 100vw;
}

.tbl-featured-panels__panel {
	--tbl-fp-scrim: 0.35;
	position: relative;
	aspect-ratio: 1600 / 1000;
	overflow: hidden;
	color: var(--White);
	background: var(--Black);
	/* Named so the image's parallax hangs off THIS box; 0 inset so the site's
	   scroll-padding-top does not shorten the timeline. */
	view-timeline-name: --tbl-fp-panel;
	view-timeline-inset: 0;
}

.tbl-featured-panels__cover {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
}

/* Overscanned 8% top and bottom; the parallax slides ±6% of its own height
   inside that slack, so no edge is ever exposed. Static (this box, untransformed)
   wherever the scrub does not run. */
.tbl-featured-panels__img {
	position: absolute;
	top: -8%;
	left: 0;
	display: block;
	width: 100%;
	height: 116%;
	object-fit: cover;
}

.tbl-featured-panels__scrim {
	position: absolute;
	inset: 0;
	background: #000;
	opacity: var(--tbl-fp-scrim);
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.tbl-featured-panels__img {
			/* linear is mandatory for a 1:1 scroll scrub (scroll-scrub-pin-needs-linear). */
			animation: tbl-featured-panels-parallax linear both;
			animation-timeline: --tbl-fp-panel;
			animation-duration: 1ms;
			animation-range: cover 0% cover 100%;
		}
	}
}

/* Slides DOWN as the page scrolls down — the direction that reads as depth. */
@keyframes tbl-featured-panels-parallax {
	from { transform: translateY(-6%); }
	to   { transform: translateY(6%); }
}

/* Text layer: passes pointer events through to the cover link except on its own links. */
.tbl-featured-panels__text {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.tbl-featured-panels__text a {
	pointer-events: auto;
}

/* One label for the whole run of panels (Chris, Pastel #206): a rail over all of
   them, with the label sticky inside it, so it rides in with the first panel, holds
   under the header, and leaves with the last. */
.tbl-featured-panels__label-rail {
	position: absolute;
	inset: 0;
	z-index: 2;
	padding-left: 1%;
	color: var(--White);
	pointer-events: none;
}

/* Category-Small, top-left (16, 31 of 1600 × 1000). */
.tbl-featured-panels__label {
	position: sticky;
	top: calc(var(--main-menu-bar-height, 80px) + 20px);
	width: max-content;
	margin: calc(var(--tbl-fp-viewport, 100vw) * 0.019375) 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;
}

/* Counter + title on one center line at y 489 (counter top 474 + half its 30.91),
   "View +" flush right, inset 45. */
.tbl-featured-panels__mid {
	position: absolute;
	top: 48.9%;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	transform: translateY(-50%);
}

/* H6 16 / 30.91, 0.32px tracking, uppercase, tabular; x 37 of 1600. */
.tbl-featured-panels__counter {
	position: absolute;
	left: 2.3125%;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--body-font);
	font-weight: var(--header-font-weight);
	font-size: 16px;
	line-height: 30.91px;
	letter-spacing: 0.32px;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: inherit;
}

/* H3 38 / 44 at x 122. */
.tbl-featured-panels__panel-title {
	margin: 0 0 0 7.625%;
	padding: 0;
	font-family: var(--header-font);
	font-weight: var(--header-font-weight);
	font-size: clamp(26px, 2.375vw, 38px);
	line-height: 1.158;
	color: inherit;
}

/* Links on the photo: white, underline drawn always, color fades on the house easing. */
.tbl-featured-panels__view,
.tbl-featured-panels__panel-viewall {
	color: var(--White);
	text-decoration-line: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: from-font;
	transition: var(--button-easing);
}

.tbl-featured-panels__view:hover,
.tbl-featured-panels__view:focus-visible,
.tbl-featured-panels__panel-viewall:hover,
.tbl-featured-panels__panel-viewall:focus-visible {
	color: var(--link-hover-color-on-dark, #b390e7);
	text-decoration-color: currentColor;
}

/* H5 24 / 28, flush right, inset 45 of 1600. */
.tbl-featured-panels__view {
	position: absolute;
	right: 2.8125%;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--header-font);
	font-weight: var(--header-font-weight);
	font-size: clamp(18px, 1.5vw, 24px);
	line-height: 1.1667;
	white-space: nowrap;
}

/* The theme has no global screen-reader class; the title suffix is clipped here so
   "View +" reads "View +: <title>". */
.tbl-featured-panels__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* 15 / 25, bottom-left (41, 922 of 1600 × 1000 → 53 up from the bottom). */
.tbl-featured-panels__panel-viewall {
	position: absolute;
	left: 2.5625%;
	bottom: 5.3%;
	font-family: var(--body-font);
	font-weight: var(--header-font-weight);
	font-size: 15px;
	line-height: 25px;
	letter-spacing: 0.15px;
	white-space: nowrap;
}

/* Cursor-following video card: 282 × 160 r10, anchored at the panel center; the JS
   moves it onto the cursor, which it replaces. Hidden until the panel is hovered with
   a fine pointer at ≥1024 and motion is allowed, and again while over a text link. */
.tbl-featured-panels__follower {
	position: absolute;
	left: 50%;
	top: 50%;
	display: none;
	width: 17.625%;                  /* 282 / 1600 */
	aspect-ratio: 282 / 160;
	border-radius: 10px;
	overflow: hidden;
	background: var(--Black);
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: opacity 0.3s;
}

.tbl-featured-panels__follower-media {
	position: absolute;
	inset: 0;
	transform: scale(1.1);
}

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

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.tbl-featured-panels__follower {
		display: block;
	}

	.tbl-featured-panels__panel.is-hover .tbl-featured-panels__follower {
		opacity: 1;
	}

	.tbl-featured-panels__panel.is-hover .tbl-featured-panels__cover {
		cursor: none;
	}

	.tbl-featured-panels__panel.is-hover.is-on-link .tbl-featured-panels__follower {
		opacity: 0;
	}
}

/* ---- under 1024: 4:5 panels, stacked text, no hover UI ---- */

@media (max-width: 1023px) {

	.tbl-featured-panels__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding-bottom: 60px;
	}

	.tbl-featured-panels__panel {
		aspect-ratio: 4 / 5;
	}

	.tbl-featured-panels__label-rail {
		padding-left: 20px;
	}

	.tbl-featured-panels__label {
		margin-top: 24px;
	}

	.tbl-featured-panels__mid {
		top: auto;
		bottom: 72px;
		left: 20px;
		right: 20px;
		display: block;
		transform: none;
	}

	.tbl-featured-panels__counter {
		position: static;
		display: block;
		transform: none;
		margin-bottom: 4px;
	}

	.tbl-featured-panels__panel-title {
		margin: 0 0 12px;
	}

	.tbl-featured-panels__view {
		position: static;
		display: inline-block;
		transform: none;
	}

	.tbl-featured-panels__panel-viewall {
		left: 20px;
		bottom: 24px;
	}

	.tbl-featured-panels__follower {
		display: none;
	}
}

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

	.tbl-featured-panels__viewall,
	.tbl-featured-panels__view,
	.tbl-featured-panels__panel-viewall,
	.tbl-featured-panels__follower {
		transition: none;
	}
}

/* Phones: the head's own View all carries the link; the one on each photo goes (Pastel #221). */
@media (max-width: 767px) {
	.tbl-featured-panels__panel-viewall {
		display: none;
	}
}