/* =========================================================================
   Insights list — desktop: Figma "INSGHTS - LIST" (1192:13328, 1728); mobile: 1261:1591 (440).
   Black page (header white until it docks: body.has-dark-top), footer on black.
   Desktop: title x65 y443 96/96 300 (367 wide → "Insights &" / "News"); text x606 y443 475w
     20/30 +2% #BFBFBF. Cards from y752: image 506×653 r4, category +32 (Plex Mono 20/30 -1%
     #808080), title +8 (32/45 +2% white). Columns start x65 / 606 / 1157 (Figma's own uneven
     35/45 gaps, copied); 2 cards a row, the empty cell stepping right each row; rows 168 apart (row 1 → 2: 162, as Figma).
   Mobile: title x20 y239 48/52 300 (194 wide); text y444 16/24 white; cards from y577 in two
     columns (195 / 194, gap 11): image 195×265 r2, category +12 (Plex Mono 14/18 -1% #BCBCBC),
     title +6 (16/24); rows 60 apart, 2 / 1 right / 2 / 1 left.
   ========================================================================= */

.insights-list { background: var(--black); color: var(--white); }

.insights-intro { padding-top: calc(239 * var(--u)); }
.insights-intro__title { max-width: calc(194 * var(--u)); font-weight: 300; font-size: calc(48 * var(--u)); line-height: calc(52 / 48); }
.insights-intro__text { margin-top: calc(101 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(24 / 16); }

.insight-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: calc(11 * var(--u));
	row-gap: calc(60 * var(--u));
	align-items: start;
	margin-top: calc(61 * var(--u));
	padding-bottom: calc(60 * var(--u));
}
.insight-tile { grid-column: var(--mc); grid-row: var(--mr); min-width: 0; }
.insights-pager { display: flex; gap: calc(24 * var(--u)); padding-bottom: calc(60 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(24 / 16); }
.insights-pager__link { color: inherit; }
.insights-list__empty { padding-block: calc(60 * var(--u)); }

@media (min-width: 1200px) {
	.insights-intro {
		display: grid;
		grid-template-columns: calc(541 * var(--u)) calc(475 * var(--u));
		align-items: start;
		padding-top: calc(443 * var(--u));
	}
	.insights-intro__title { max-width: calc(367 * var(--u)); font-size: calc(96 * var(--u)); line-height: 1; }
	.insights-intro__text { margin-top: 0; font-size: calc(20 * var(--u)); line-height: calc(30 / 20); letter-spacing: 0.02em; color: #bfbfbf; }

	.insight-grid {
		grid-template-columns: calc(541 * var(--u)) calc(551 * var(--u)) calc(506 * var(--u));
		column-gap: 0;
		row-gap: calc(168 * var(--u));
		margin-top: calc(117 * var(--u));
		padding-bottom: calc(72 * var(--u)); /* + the footer's own 108 = Figma's 180 from the last card to "Let’s create…" */
	}
	.insight-tile { grid-column: var(--dc); grid-row: var(--dr); width: calc(506 * var(--u)); }
	/* Figma's first row sits 6px tighter to the second (162) than the rows after it (168/169) —
	   copied as is. Row 1 = the first two cards of the page. */
	.insight-tile:nth-child(-n + 2) { margin-bottom: calc(-6 * var(--u)); }

	.insights-pager { padding-bottom: calc(72 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(30 / 20); }
}