/**
 * Pattern: Support Cards — Tall Photo Trio  (patterns/support-cards.php)
 *
 * Figma 2112:3881 — "Support Our Work" section. A 3-up trio of 392×557 photo
 * cards: cover image + a bottom→top dark gradient → centered white heading +
 * paragraph + "Learn More" underlined link. Distinct from .kd-card (the white
 * event/team cards) — this is a photo-overlay card, so it's its own pattern.
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php glob).
 */

/* ── Section band ──────────────────────────────────────────────────────────── */
.kd-support-section {
	text-align: center;
	padding-block: var(--blg-band-pad-y); /* band-internal breathing room */
}

.kd-support-section__heading {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: var(--blg-size-h2-section) !important; /* shared section scale */
	color: var(--blg-color-contrast) !important;
	text-transform: capitalize;
	line-height: 1.15 !important;
	margin: 0 0 var(--blg-space-lg); /* 40px to the grid */
}

/* ── 3-column grid ─────────────────────────────────────────────────────────────
   The group is type:default (is-layout-flow) but rendered as a grid. Two lessons
   carried from card-grid: margin:0 auto keeps the grid centered (WP caps it at
   contentSize — `margin:0` would left-pin it past 1512px); margin-block:0 on the
   grid items kills WP's :where(.is-layout-flow) > * block-gap offset. */
.kd-tall-card-grid {
	display: grid !important;
	/* Cards cap at 25rem (400px ≈ the Figma 392px card) and the trio centers;
	   below ~1248px the columns shrink to fit. Was repeat(3,1fr) → cards grew
	   far past the design width on wide screens. */
	grid-template-columns: repeat(3, minmax(0, 25rem));
	justify-content: center;
	gap: var(--blg-space-md) !important; /* 24px */
	margin: 0 auto !important;
	width: 100% !important;
}

.kd-tall-card-grid > * {
	margin-block: 0 !important;
}

/* ── Tall card — photo cover + gradient ────────────────────────────────────── */
.kd-tall-card {
	min-height: 557px !important;
	border-radius: var(--blg-radius-lg) !important; /* 24px */
	overflow: hidden;
	/* Brand gradient default — shows on any card without a cover photo. A set
	   cover image renders as position:absolute object-fit:cover and paints on top,
	   so the gradient is naturally hidden when a photo is present. */
	background: var(--blg-color-contrast) url("../images/cta-gradient.svg")
		center / cover no-repeat;
}

.kd-tall-card .wp-block-cover__image-background,
.kd-tall-card img {
	border-radius: var(--blg-radius-lg);
}

/* ── Content — centered white stack ────────────────────────────────────────── */
.kd-tall-card__content {
	gap: 0 !important; /* spacing via explicit margins: heading→text 8px, text→link 24px (--blg-space-md, closest token to the Figma 21px) */
	padding: var(--blg-space-lg) var(--blg-space-md); /* 40px / 24px */
	align-items: center;
	max-width: 340px;
	margin-inline: auto;
}

.kd-tall-card__heading {
	font-family: var(--blg-font-heading) !important;
	font-weight: var(--blg-fw-heading) !important;
	font-size: 1.625rem !important; /* 26px — Figma */
	line-height: 1.46 !important; /* 38/26 */
	color: var(--blg-color-base) !important;
	margin: 0 0 var(--blg-gap-tight) !important; /* 8px heading→text (beats WP flex child-margin reset) */
}

.kd-tall-card__text {
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body); /* 16px */
	font-weight: 500; /* Inter Medium */
	line-height: 1.625; /* 26/16 */
	color: var(--blg-color-base);
	margin: 0 0 var(--blg-space-md) !important; /* 24px text→link (--blg-space-md, closest token to Figma 21px; beats WP flex reset) */
}

/* "Learn More" — uppercase white label with a 3px white underline (Figma 258:2579). */
.kd-tall-card__link {
	margin: 0;
}

.kd-tall-card__link a {
	display: inline-block;
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: var(--blg-size-btn); /* 18px */
	line-height: 1.1;
	color: var(--blg-color-base);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
	padding-bottom: 4px;
	border-bottom: 3px solid var(--blg-color-base);
	transition: opacity 0.2s ease;
}

.kd-tall-card__link a:hover,
.kd-tall-card__link a:focus-visible {
	opacity: 0.85;
	color: var(--blg-color-base);
}

/* ── Tablet (≤1024px) — 2 columns ──────────────────────────────────────────── */
@media (max-width: 1024px) {
	.kd-tall-card-grid {
		grid-template-columns: repeat(2, minmax(0, 25rem)) !important;
	}
}

/* ── Mobile (≤768px) — 1 column ────────────────────────────────────────────── */
@media (max-width: 768px) {
	.kd-tall-card-grid {
		grid-template-columns: 1fr !important;
		max-width: 392px;
	}

	.kd-support-section__heading {
		font-size: clamp(1.5rem, 6vw, 2rem) !important;
	}
}