/* Featured Case Studies (§4, Figma nodes 10355:3690 / 10355:4066 / hover-video 10357:4351).
   Behavior source of truth: rejouice.com .featured-works, reverse-engineered live 2026-07-10.
   See .planning/phases/03-home/assets/featured-case-studies-SPEC.md for all measured values.

   BB owns the section box (bb-owns-section-spacing convention): NO outer padding/
   min-height/width on the module root. Recommended BB row settings (SPEC): ~40px sides
   desktop, 0 sides below 1024 (carousel bleeds to the viewport edge). */

.tb-fcs {
	position: relative;
	display: block;
	max-width: 100vw;

	/* Heading row — label + view-all link, list sits 10px below it. */
	& .tb-fcs__heading {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		overflow: hidden;
		margin-bottom: 10px;

		@media (max-width: 768px) {
			padding: 0 12px;
		}
	}

	& .tb-fcs__label {
		margin: 0;
		font-family: var(--body-font);
		font-size: 20px;
		line-height: 24px;
		font-weight: 300;
		letter-spacing: -0.02rem;
		color: var(--Neutral-100);
	}

	/* View-all — design-system text link (Ben QA round 1, fix 3; Figma
	   10411:4437): the anchor carries the theme's `underline-text` class
	   (theme.css ~L187-219), which owns underline + hover -> var(--primary-color).
	   Module CSS keeps ONLY the heading-row type sizing (shared with the label
	   so the row stays optically balanced) — no color/decoration/hover here. */
	& .tb-fcs__viewall {
		font-family: var(--body-font);
		font-size: 20px;
		line-height: 24px;
		font-weight: 300;
		letter-spacing: -0.02rem;
	}

	& .tb-fcs__list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Card internals — shared at every breakpoint. */
	& .tb-fcs__item {
		position: relative;
		overflow: hidden;
		/* Something upstream lands 6px of padding-bottom on the non-last cards; with
		 * aspect-ratio sizing the border box, that shortened their artwork against the
		 * last card in the swipe row (Pastel #34). Zero it here so every card fills. */
		padding: 0;
	}

	& .tb-fcs__link {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}

	& .tb-fcs__thumb {
		position: absolute;
		inset: 0;
	}

	& .tb-fcs__bg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Logo — pinned bottom-LEFT (Ben QA round 1, fix 2; supersedes the SPEC's
	   rejouice centered-x placement — matches Figma 10355:4066 per Ben's
	   description). Each logo renders at its natural aspect ratio; the
	   per-card card_logo_max_width setting (default 180px) emits an inline
	   max-width on this div. Insets: 40px desktop (>=1024 override below),
	   20px under 1024. */
	& .tb-fcs__logo {
		position: absolute;
		left: 20px;
		bottom: 20px;
		/* Default cap — the per-card inline max-width (when set > 0) overrides
		   this; keeps cards saved before the field existed at the same 180px. */
		max-width: 180px;
		transition: opacity 0.5s;

		& img {
			display: block;
			max-width: 100%;
			height: auto;
		}
	}

	& .tb-fcs__link:hover .tb-fcs__logo {
		opacity: 0;
	}

	/* Hover-video block — hidden entirely until the desktop hover gate below
	   enables it. Rest state has no visible footprint on touch/reduced-motion. */
	& .tb-fcs__hover {
		position: absolute;
		inset: 0;
		pointer-events: none;

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			background: rgb(from var(--Black) r g b / 0.486);
			opacity: 0;
			transition: opacity 0.3s;
		}
	}

	& .tb-fcs__follower {
		position: absolute;
		left: 50%;
		top: 50%;
		pointer-events: none;
		/* Default centered state (keyboard :focus-visible reveal, or before the
		   module JS has attached a pointermove-driven offset) — the JS follower
		   loop overrides this transform inline while a card is actively hovered. */
		transform: translate(-50%, -50%);
	}

	& .tb-fcs__label-track {
		display: block;
		overflow: hidden;
		margin-bottom: 5px;
		width: 100%;
	}

	& .tb-fcs__label-text {
		display: inline-block;
		white-space: nowrap;
		font-family: var(--body-font);
		font-size: 14px;
		line-height: 24px;
		color: var(--White);
		opacity: 0;
		transition: opacity 0.2s;
	}

	& .tb-fcs__preview {
		position: relative;
		aspect-ratio: 303 / 389;
		clip-path: inset(40%);
		opacity: 0;
		transition: opacity 0.3s, clip-path 1.2s cubic-bezier(0.19, 1, 0.22, 1);
	}

	& .tb-fcs__preview-media {
		position: absolute;
		inset: 0;
		overflow: hidden;
		/* Static overscan default (matches the JS parallax loop's base scale so
		   there's no visible jump on the first hovered frame; the module JS sets
		   this element's inline transform to `scale(1.1) translateX(n%)` each
		   rAF tick while hovered and clears it on pointerleave). */
		transform: scale(1.1);
	}

	& .tb-fcs__preview-media video {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transform: scale(1.2);
		transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
	}
}

/* Below 1024px — horizontal scroll-snap carousel (rejouice mobile behavior;
   NOT a stacked column). All cards render at the same size here; card_size
   is a desktop-only distinction. */
@media (max-width:1023px) {
	.tb-fcs .tb-fcs__label,
	.tb-fcs .tb-fcs__viewall {
		font-size: 16px;
		line-height: 17.5px;
	}

	.tb-fcs .tb-fcs__works {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 10px;
		scrollbar-width: none;
	}

	.tb-fcs .tb-fcs__works::-webkit-scrollbar {
		display: none;
	}

	.tb-fcs .tb-fcs__list {
		display: flex;
		flex: 1 0 auto;
		gap: 10px;
		padding: 10px 10px 0;
	}

	.tb-fcs .tb-fcs__item,
	.tb-fcs .tb-fcs__item--full,
	.tb-fcs .tb-fcs__item--half {
		flex: 0 0 auto;
		width: min(72vw, 320px);
		aspect-ratio: 17.6 / 22.59;
		border-radius: var(--Corner-Radius-XXS, 3px);
		scroll-snap-align: start;
	}

	/* No hover UI below 1024 — cards are plain links; logo always visible. */
	.tb-fcs .tb-fcs__hover {
		display: none;
	}
}

/* Desktop >=1024 — 12-col grid. */
@media (min-width: 1024px) {
	.tb-fcs .tb-fcs__works {
		width: 100%;
	}

	.tb-fcs .tb-fcs__list {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		column-gap: 20px;
		row-gap: 20px;
	}

	.tb-fcs .tb-fcs__item {
		border-radius: 0;
	}

	.tb-fcs .tb-fcs__item--full {
		grid-column: 1 / span 12;
		aspect-ratio: 136 / 87.3;
	}

	.tb-fcs .tb-fcs__item--half {
		grid-column: span 6;
		aspect-ratio: 67 / 87;
	}

	.tb-fcs .tb-fcs__logo {
		left: 40px;
		bottom: 40px;
	}

	.tb-fcs .tb-fcs__item--full .tb-fcs__preview {
		width: min(21.042vw, 404px);
	}

	.tb-fcs .tb-fcs__item--half .tb-fcs__preview {
		width: min(18.056vw, 346.667px);
	}
}

/* Hover treatment — desktop pointer devices only. Everything here is gated
   behind hover:hover + pointer:fine (rejouice has no hover UI on touch/coarse
   pointers even above 1024, e.g. touch laptops) AND the module JS additionally
   matchMedia-guards the follower/parallax/text-slide + skips in .fl-builder-edit. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
	.tb-fcs .tb-fcs__link:hover .tb-fcs__hover::before {
		opacity: 1;
	}

	.tb-fcs .tb-fcs__link:hover .tb-fcs__label-text {
		opacity: 1;
		transition: opacity 0.5s 0.35s;
	}

	.tb-fcs .tb-fcs__link:hover .tb-fcs__preview {
		clip-path: inset(0);
		opacity: 1;
	}

	.tb-fcs .tb-fcs__link:hover .tb-fcs__preview-media video {
		transform: scale(1);
	}

	/* Keyboard parity (SPEC "Touch / mobile / keyboard"): :focus-visible gets
	   the darken overlay + static label reveal, no follower math. */
	.tb-fcs .tb-fcs__link:focus-visible .tb-fcs__hover::before {
		opacity: 1;
	}

	.tb-fcs .tb-fcs__link:focus-visible .tb-fcs__label-text {
		opacity: 1;
	}

	.tb-fcs .tb-fcs__link:focus-visible .tb-fcs__preview {
		clip-path: inset(0);
		opacity: 1;
	}
}

/* Reduced motion: darken + label fade only, no follower/no clip-path reveal
   motion, no autoplaying video (module JS never calls video.play() under
   reduced-motion — see tbl-featured-case-studies.js). */
@media (prefers-reduced-motion: reduce) {
	.tb-fcs .tb-fcs__hover::before,
	.tb-fcs .tb-fcs__label-text,
	.tb-fcs .tb-fcs__preview,
	.tb-fcs .tb-fcs__preview-media video {
		transition: none !important;
	}
}