/**
 * Meridian Sections — Card Grid
 *
 * Figma 1:1005 (drawn as the Markets section).
 */

/* Two classes so this beats .md-section's own responsive padding. */
.md-section.md-card-grid {
	/* Padding comes from the Padding Top/Bottom controls; the fallback is the
	 * comp's 80px and remains the default when they are untouched. */
	padding-block: var(--md-section-pt, 5rem) var(--md-section-pb, 5rem);
	border-block: var(--md-border-width, 1px) solid var(--md-color-rule, rgba(10, 22, 40, 0.08));
	background-color: var(--md-white, #fff);
}

/*
 * Two ground variants, from two comps that are genuinely opposites.
 *
 * Two classes for the colour, deliberately: `.md-section.md-card-grid` above is
 * (0,2,0) and a one-class variant loses to it, which is why the tint had been
 * rendering as plain white since it shipped. The dots and the wash were
 * unaffected — different properties, no contest — so it looked right and was not.
 */
.md-card-grid.md-card-grid--tint,
.md-card-grid.md-card-grid--tint-light {
	background-color: #fcfdfd;
}

/*
 * Figma 1:1005: the tint deepens toward the top, and the dots stay visible
 * through it — measured off the comp, where they run at a clean 20px pitch to
 * within 40px of the top edge over the full-strength tint.
 *
 * That is why this variant is NOT built on .md-dots: the shared primitive paints
 * the wash over the dots, which is right for 13:8914 below and wrong here. Layer
 * order is one property, so it cannot be a custom property — the two grounds
 * have to be two rules.
 */
.md-card-grid--tint {
	background-image: radial-gradient(
			circle,
			var(--md-color-dot, rgba(10, 22, 40, 0.06)) 1.5px,
			transparent 1.5px
		),
		linear-gradient(
			to top,
			transparent 64%,
			var(--md-color-surface-tint, #f9fafb) 100%
		);
	background-size: var(--md-dot-pitch, 20px) var(--md-dot-pitch, 20px), auto;
}

/*
 * Figma 13:8914: the opposite — the ground washes out to white at the top, and
 * the dots go with it. Those are .md-dots' own semantics, so this variant only
 * names the wash.
 */
.md-card-grid--tint-light {
	--md-dot-wash: 0deg;
	--md-dot-wash-start: 42.428%;
}

/* --- Section heading ---------------------------------------------------- */
.md-card-grid__eyebrow {
	margin: 0;
	color: var(--md-blue, #006bb6);
	font-size: 0.6875rem; /* 11px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.5; /* 16.5px */
	letter-spacing: 0.22em; /* 2.42px on 11px */
	text-transform: uppercase;
}

.md-card-grid__title {
	margin: 0;
	margin-block-start: var(--md-space-xs, 0.75rem); /* 12px */
	color: var(--md-color-heading, #0a1628);
	font-size: 2.25rem; /* 36px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.111; /* 40 / 36 */
	letter-spacing: 0;
}

/* 48px between the heading and the cards, per the comp's pt-48 wrapper. Only
 * when a heading precedes them — with no heading the section's own 80px is
 * already the intended space. */
.md-card-grid__head + .md-card-grid__list {
	padding-block-start: var(--md-space-xl, 3rem); /* 48px */
}

/* --- Grid --------------------------------------------------------------- */
.md-card-grid__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem; /* 20px */
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 36em) {
	.md-card-grid__list[data-cols="2"],
	.md-card-grid__list[data-cols="3"],
	.md-card-grid__list[data-cols="4"],
	.md-card-grid__list[data-cols="3-4"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62em) {
	.md-card-grid__list[data-cols="2"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.md-card-grid__list[data-cols="3"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.md-card-grid__list[data-cols="4"] {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/*
	 * Three across the top, four below.
	 *
	 * Twelve tracks, because twelve is the least common multiple of 3 and 4: a card
	 * spanning four of them gives three per row, and a card spanning three gives
	 * four. Both rows then fill the grid exactly, gaps included, which is the part
	 * worth checking rather than assuming — with c as a track and g as the gap,
	 * three 4-spans plus their two gaps is 3(4c + 3g) + 2g = 12c + 11g, and four
	 * 3-spans plus their three gaps is 4(3c + 2g) + 3g = 12c + 11g. That is the
	 * whole track list either way, so neither row is short and the card edges line
	 * up down the section.
	 *
	 * The alternative — two separate grids — would need a second <ul> and would
	 * break the list semantics for the sake of a layout.
	 */
	.md-card-grid__list[data-cols="3-4"] {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	/*
	 * Four-up is the default span, so anything past the first row keeps going in
	 * fours — seven cards give 3 + 4, eleven give 3 + 4 + 4.
	 */
	.md-card-grid__list[data-cols="3-4"] > .md-card-grid__card {
		grid-column: span 3;
	}

	/*
	 * nth-child counts rendered children, and a card with no title, copy or image is
	 * skipped before it reaches the markup — so this follows what is actually on the
	 * page rather than what is in the repeater.
	 */
	.md-card-grid__list[data-cols="3-4"] > .md-card-grid__card:nth-child(-n + 3) {
		grid-column: span 4;
	}
}

/* --- Card --------------------------------------------------------------- */
.md-card-grid__card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--md-border-width, 1px) solid #e6e6e6;
	border-radius: 0.625rem; /* 10px */
	background-color: var(--md-white, #fff);
	transition: border-color var(--md-transition, 200ms ease),
		box-shadow var(--md-transition, 200ms ease);
}

.md-card-grid__card:has(.md-card-grid__link:hover),
.md-card-grid__card:has(.md-card-grid__link:focus-visible) {
	border-color: var(--md-blue, #006bb6);
	box-shadow: var(--md-shadow-md, 0 4px 16px rgba(10, 22, 40, 0.08));
}

.md-card-grid__media {
	position: relative;
	overflow: hidden;
	border-bottom: var(--md-border-width, 1px) solid #f2f2f2;
	background-color: #e5e7eb;
	aspect-ratio: 16 / 9;
}

.md-card-grid__card .md-card-grid__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--md-duration-slow, 400ms) var(--md-ease, ease);
}

.md-card-grid__card:has(.md-card-grid__link:hover) .md-card-grid__img {
	transform: scale(1.03);
}

.md-card-grid__body {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	padding: var(--md-space-md, 1.5rem); /* 24px */
}

.md-card-grid__card-title {
	margin: 0;
	color: var(--md-color-heading, #0a1628);
	font-size: 0.9375rem; /* 15px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.375; /* 20.625 / 15 */
}

/* The title's link stretches over the whole card, so the entire tile is one
 * hit area and one tab stop. */
.md-card-grid__link {
	color: inherit;
	text-decoration: none;
}

.md-card-grid__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.md-card-grid__link:hover,
.md-card-grid__link:focus-visible {
	color: var(--md-blue, #006bb6);
}

/* The stretched pseudo-element swallows the ring, so move focus to the card. */
.md-card-grid__link:focus-visible {
	outline: none;
}

.md-card-grid__card:has(.md-card-grid__link:focus-visible) {
	outline: 3px solid var(--md-color-focus, #006bb6);
	outline-offset: 2px;
}

.md-card-grid__text {
	margin: 0;
	margin-block-start: var(--md-space-2xs, 0.5rem); /* 8px */
	color: var(--md-color-text-muted, rgba(10, 22, 40, 0.7));
	/*
	 * 16px, not the 13px drawn. Bumped deliberately across every section whose body
	 * copy sat at 13 — Callouts, Card Grid, Leadership Grid, Markets, Mosaic List —
	 * because 13px prose is small to read and 16px is the browser default a reader
	 * expects. The 1.625 leading is unitless, so it follows to 26px.
	 */
	font-size: var(--md-text-small, 1rem); /* 16px */
	line-height: 1.625; /* 26 / 16 */
}

.md-card-grid__cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: var(--md-space-3xs, 0.25rem); /* 4px */
	margin-block-start: auto;
	padding-block-start: 1.25rem; /* 20px */
	color: var(--md-blue, #006bb6);
	font-size: 0.75rem; /* 12px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.5; /* 18px */
	letter-spacing: 0.1em; /* 1.2px on 12px */
	text-transform: uppercase;
}

/*
 * 16px when the CTA follows the title directly, which is what Figma 13:8914
 * draws — no description between them. The 20px above is 1:1005, where a
 * description sits in between. The `margin-block-start: auto` usually hides the
 * difference, but not in a row of equal-height cards with no descriptions, which
 * is exactly 13:8914.
 */
.md-card-grid__card-title + .md-card-grid__cta {
	padding-block-start: var(--md-space-sm, 1rem); /* 16px */
}

.md-card-grid__cta svg {
	width: 0.75rem; /* 12px */
	height: 0.75rem;
	fill: none;
	transition: transform var(--md-transition, 200ms ease);
}

.md-card-grid__card:has(.md-card-grid__link:hover) .md-card-grid__cta svg {
	transform: translateX(2px);
}