/* Insights Latest (Figma 11521:34541 band · 11521:34511 panel · rows 11521:34516/34522/
   34530). CSS only. The module is an inline-size container, so every drawn size is a
   cqw of its own box (1cqw = 16px at the 1600 artboard): 238px band = 14.875cqw. */

.tbl-insights-latest {
	/* BB owns section spacing — no outer padding/min-height/width on the module root. */
	position: relative;
	margin: 0;
	color: var(--Black);
	container-type: inline-size;
}

/* The white panel (1599 × 855): 133 above and below the three rows; content from
   x 79. Columns are % of the content box (1521): intro 720 (rows start at x 799),
   rows 624, 177 trailing. */
.tbl-il__panel {
	display: grid;
	grid-template-columns: 47.337% 41.026%;    /* 720 · 624 of 1521 */
	padding: 8.3125cqw 0 8.3125cqw 4.9375%;    /* 133 · 79 / 1600 */
	background: var(--White);
}

/* ---- left column ---- */

/* 150px title: local clamp, plain units (9.375cqw = 150 / 1600). */
.tbl-il__title {
	margin: 0 0 1.5cqw;
	padding: 0;
	font-family: var(--header-font);
	font-weight: var(--header-font-weight);
	font-size: clamp(56px, 9.375cqw, 150px);
	line-height: 1;
	letter-spacing: -1px;
	white-space: nowrap;             /* one word; wider than the 397 body column below it */
	color: inherit;
}

/* 15 / 25, #737370 (11521:34539 — the nav-cta-subtext hex, written literally), 397 wide. */
.tbl-il__body {
	max-width: 24.8125cqw;           /* 397 / 1600 */
	margin: 0 0 2cqw;
	font-family: var(--body-font);
	font-weight: var(--body-font-weight);
	font-size: 15px;
	line-height: 25px;
	letter-spacing: 0.15px;
	color: #737370;
}

/* 20 / 30, tracking 0.16 — .underline-text draws the line; the color fade is ours. */
.tbl-il__viewall {
	display: inline-block;
	font-family: var(--body-font);
	font-weight: var(--header-font-weight);
	font-size: 20px;
	line-height: 30px;
	letter-spacing: 0.16px;
	transition: var(--button-easing);
}

/* ---- rows ---- */

.tbl-il__rows {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 1.625cqw;                          /* 205 pitch − 179 row */
}

.tbl-il__row {
	display: grid;
	grid-template-columns: 47.276% minmax(0, 1fr);   /* 295 / 624 */
	column-gap: 4.327%;                              /* 27 / 624 */
	align-items: start;
}

.tbl-il__thumb {
	position: relative;
	display: block;
	aspect-ratio: 295 / 179;
	border-radius: 10px;                        /* r10 (11521:34516) */
	overflow: hidden;
	background: rgba(0, 0, 0, 0.06);
	text-decoration: none;
	view-timeline-name: --tbl-il-thumb;
	view-timeline-inset: 0;
}

/* Hover (Pastel #210): the thumbnail's box grows a touch, image and all. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.tbl-il__thumb {
		transition: scale 600ms var(--ease-out-expo);
	}

	.tbl-il__row:hover .tbl-il__thumb,
	.tbl-il__thumb:focus-visible {
		scale: 1.04;
	}
}

/* 12% overscan top and bottom so the parallax never shows an edge. */
.tbl-il__img {
	position: absolute;
	top: -12%;
	left: 0;
	display: block;
	width: 100%;
	height: 124%;
	object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.tbl-il__img {
			animation: tbl-il-parallax linear both;
			animation-timeline: --tbl-il-thumb;
			animation-duration: 1ms;
			animation-range: cover 0% cover 100%;
		}
	}
}

@keyframes tbl-il-parallax {
	from { transform: translateY(-10%); }
	to   { transform: translateY(10%); }
}

/* No featured image: the feed's fallback treatment at the same box. */
.tbl-il__fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	text-align: center;
	background: var(--Primary-90);
}

.tbl-il__fallback-title {
	font-family: var(--header-font);
	font-weight: var(--header-font-weight);
	font-size: 16px;
	line-height: 1.25;
	color: var(--White);
}

.tbl-il__text {
	min-width: 0;
}

/* H5 24 / 28 (module sets the size itself: module CSS loads before theme.css). */
.tbl-il__row-title {
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--header-font);
	font-weight: var(--header-font-weight);
	font-size: clamp(18px, 1.5cqw, 24px);
	line-height: 1.1667;
	color: inherit;
}

.tbl-il__row-link {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: from-font;
	transition: var(--button-easing);
}

.tbl-il__row-link:hover,
.tbl-il__row-link:focus-visible {
	color: inherit;
	text-decoration-color: currentColor;
}

/* Category-Small, uppercase in CSS (title-case in the DOM), 40% black. */
.tbl-il__cats {
	margin: 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: rgba(0, 0, 0, 0.4);
}

/* ---- under 1024: intro on top, rows below ---- */

@media (max-width: 1023px) {

	.tbl-il__panel {
		display: block;
		padding: 64px 0;
	}

	.tbl-il__title {
		white-space: normal;
	}

	.tbl-il__intro {
		margin-bottom: 48px;
	}

	.tbl-il__body {
		max-width: 480px;
	}

	.tbl-il__rows {
		row-gap: 32px;
	}

	.tbl-il__row {
		grid-template-columns: 40% minmax(0, 1fr);
		column-gap: 24px;
	}
}

@media (max-width: 767px) {

	.tbl-il__row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 16px;
	}
}

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

	.tbl-il__viewall,
	.tbl-il__row-link {
		transition: none;
	}
}