/* Services Cards (Figma 11521:34176) — sticky "What we do" statement beside a
   scrolling column of service cards. The BB row owns the #fafafa ground
   (--tbl-ground-soft) and the section spacing; this module paints nothing behind.

   Geometry at the 1600 artboard: text 935 wide from x 121, cards 324 wide from
   x 1146, card column 115 above the text block, card pitch 422 (362 + 60).
   Horizontal values are % of the module box; vertical values multiply
   --tbl-sc-s, a unitless scale (box width / 1600) written by the JS. */

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

.tbl-services-cards__inner {
	display: grid;
	grid-template-columns: 935fr 324fr;
	column-gap: 6.6716%;             /* 90 / 1349 (the content box between the paddings) */
	align-items: start;
	padding: 0 8.125% 0 7.5625%;     /* 130 / 1600 · 121 / 1600 */
}

/* ---- text block ---- */

/* Named __textcol, not __col-text: grid.css matches any class containing `col-`
   and would span it across 12 implicit tracks. */

.tbl-services-cards__textcol {
	align-self: stretch;
	padding-top: calc(115px * var(--tbl-sc-s));
}

/* Sticky, never fixed: .tb-reveal-content is a transformed ancestor sitewide.
   Holds at the viewport's vertical center (--tbl-sc-text-h is written by the JS),
   never higher than the nav. */
.tbl-services-cards__text {
	position: sticky;
	top: max(var(--main-menu-bar-height, 80px), calc((100svh - var(--tbl-sc-text-h, 0px)) / 2));
}

/* Category-Small — 10 / 17.78, 2px tracking, uppercase. */
.tbl-services-cards__eyebrow {
	margin: 0 0 calc(14px * var(--tbl-sc-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;
}

.tbl-services-cards__statement {
	margin: 0;
	padding: 0;
	font-family: var(--header-font);
	font-weight: var(--header-font-weight);
	font-size: var(--h2-font-size);
	line-height: var(--h2-line-height);
	letter-spacing: var(--header-letter-spacing);
	color: inherit;
}

.tbl-services-cards__statement-text {
	display: block;
}

/* Underlined text link at statement scale (the tb-intro__cta convention): its own
   line, underline stays, color fades on the house easing. */
.tbl-services-cards__cta {
	display: block;
	width: max-content;
	max-width: 100%;
	color: inherit;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
	text-decoration-color: #0f0f0f;
	transition: var(--button-easing);
}

.tbl-services-cards__cta:hover,
.tbl-services-cards__cta:focus-visible {
	color: var(--Primary-Alt-50-Base);
	text-decoration-line: underline;
	text-decoration-color: currentColor;
}

/* H6 eyebrow — 16 / 30.91, 0.32px tracking (design-system sweep), uppercase. */
.tbl-services-cards__footline {
	margin: calc(201px * var(--tbl-sc-s)) 0 0;
	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;
	color: inherit;
}

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

/* Divs, not ul/li: theme.css underlines every `li a:not(.btn)` inside .body-inner
   at (0,5,3), which a module class cannot cancel. */
.tbl-services-cards__cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: calc(60px * var(--tbl-sc-s));
	margin: 0;
	padding: 0;
}

.tbl-services-cards__card {
	display: block;
	padding-bottom: 3px;             /* 318 media + 13 + 28 name + 3 = 362 */
	color: inherit;
	text-decoration: none;
}

.tbl-services-cards__card:focus-visible {
	outline: 2px solid var(--Primary-Alt-50-Base);
	outline-offset: 4px;
}

.tbl-services-cards__media {
	position: relative;
	display: block;
	aspect-ratio: 324 / 318;
	border-radius: 5px;              /* r5, off the --Corner-Radius scale (11521:34176) */
	overflow: hidden;
	background: rgba(0, 0, 0, 0.06);
}

.tbl-services-cards__img,
.tbl-services-cards__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 800ms var(--ease-out-expo), opacity 200ms linear;
}

.tbl-services-cards__card:hover .tbl-services-cards__img,
.tbl-services-cards__card:hover .tbl-services-cards__video,
.tbl-services-cards__card:focus-visible .tbl-services-cards__img,
.tbl-services-cards__card:focus-visible .tbl-services-cards__video {
	transform: scale(1.15);
}

.tbl-services-cards__video {
	opacity: 0;
}

.tbl-services-cards__card.is-playing .tbl-services-cards__video {
	opacity: 1;
}

/* Parallax (Pastel #205): the media is overscanned 8% top and bottom and slides
   ±6% through its own view — on `translate`, so the hover's `transform` zoom still
   composes with it. Same gates and range as the featured panels. */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
	@supports (animation-timeline: view()) {
		.tbl-services-cards__media {
			view-timeline: --tbl-sc-media block;
		}

		.tbl-services-cards__img,
		.tbl-services-cards__video {
			top: -8%;
			bottom: auto;
			height: 116%;
			/* linear is mandatory for a 1:1 scroll scrub (scroll-scrub-pin-needs-linear). */
			animation: tbl-services-cards-parallax linear both;
			animation-timeline: --tbl-sc-media;
			animation-duration: 1ms;
			animation-range: cover 0% cover 100%;
		}
	}
}

@keyframes tbl-services-cards-parallax {
	from { translate: 0 -6%; }
	to   { translate: 0 6%; }
}

/* 30px glass disc with a white "+" (11521:34196), 12px in from the media's corner;
   white with a black "+" while the card is hovered. */
.tbl-services-cards__disc {
	position: absolute;
	z-index: 1;
	right: 12px;
	bottom: 12px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.2);
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
	color: var(--White);
	transition: var(--button-easing);
}

.tbl-services-cards__card:hover .tbl-services-cards__disc,
.tbl-services-cards__card:focus-visible .tbl-services-cards__disc {
	background: var(--White);
	color: var(--Black);
}

.tbl-services-cards__disc svg {
	display: block;
	width: 17.14px;
	height: 17.14px;
}

.tbl-services-cards__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 13px;
}

.tbl-services-cards__name {
	font-family: var(--header-font);
	font-weight: var(--header-font-weight);
	font-size: clamp(16px, 1.25vw, 20px); /* 20 at 1600; shrinks so names stay on one line beside the label */
	line-height: 28px;
	color: inherit;
}

.tbl-services-cards__view {
	flex: none;
	font-family: var(--body-font);
	font-weight: var(--header-font-weight);
	font-size: 10px;
	line-height: 17.78px;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: right;
	color: inherit;
}

/* ---- under 1024: text on top, cards in a grid ---- */

@media (max-width: 1023px) {

	.tbl-services-cards__inner {
		display: block;
		padding: 0;
	}

	.tbl-services-cards__textcol {
		padding-top: 0;
	}

	.tbl-services-cards__text {
		position: static;
		margin-bottom: 48px;
	}

	.tbl-services-cards__footline {
		margin-top: 48px;
	}

	.tbl-services-cards__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 30px;
		row-gap: 40px;
	}
}

@media (max-width: 767px) {

	.tbl-services-cards__cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

	.tbl-services-cards__cta,
	.tbl-services-cards__disc,
	.tbl-services-cards__img,
	.tbl-services-cards__video {
		transition: none;
	}
}