/**
 * Pattern: Local Help — 3-Card Static Row (patterns/local-help.php)
 *
 * Figma node 6:72 (Join). White section, centered eyebrow/H2, 3 neutral-100
 * (#F4F6F8) cards — heading + body only, no icon/image — + a centered muted
 * note line below. New pattern, 2026-08-21 Home/Join page-assembly session.
 *
 * Card math reuses the shared --blg-card-w/--blg-space-md tokens (same 392px
 * card / 24px gap / 1224px composition as values-row's 3-up row — Figma ships
 * an identical 3-card measure here) but does NOT reuse `.blg-values-row` /
 * `.blg-values-row__card` — that class hardcodes a Cloud-surface card bg for
 * its 3-up variant which would collide with this card's neutral-100 fill.
 * Own class namespace, own partial — one pattern = one CSS partial.
 */

.blg-local-help__header {
	text-align: center;
	max-width: var(--blg-measure-grid);
	margin: 0 auto var(--blg-gap-section);
}

/* morning-r6: font-family/weight unified to .kd-split__eyebrow's exact spec
   site-wide (Raleway 900 — Alain's picked "Why B Local" weight). Was
   Inter/600. */
.blg-local-help__header .kd-eyebrow {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: var(--blg-size-eyebrow);
	line-height: 1.43;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--blg-color-primary);
	margin: 0 0 0.5rem;
}

.blg-local-help__heading {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: var(--blg-size-h2-section) !important; /* shared section scale */
	line-height: var(--blg-lh-h2-section);
	color: var(--blg-color-contrast);
	margin: 0;
}

.blg-local-help {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, var(--blg-card-w)));
	gap: var(--blg-space-md); /* 24px */
	justify-content: center;
	margin: 0 auto;
}

/* Grid owns spacing — zero the is-layout-flow block-gap margin on the cards
   (same fix as values-row.css / card-grid.css). */
.blg-local-help > * {
	margin-block: 0 !important;
}

.blg-local-help__card {
	background-color: var(--blg-color-neutral-100);
	border-radius: var(--blg-radius-card); /* 16px */
	padding: 2rem 1.75rem; /* Figma: px-28 py-32 */
	align-items: flex-start;
}

/* Icon circle (morning-r1 addition, not in Figma 6:72 — see this pattern's
   PHP docblock). Same 56px Sky Cyan circle as values-row.php's `.blg-icon`;
   the glyph color/size rule (`.blg-icon i`) is the shared, unscoped one
   already defined in values-row.css — deliberately not repeated here. */
.blg-local-help__card .blg-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent); /* Sky Cyan */
	margin: 0 0 1.25rem;
}

.blg-local-help__card .blg-local-help__title {
	font-family: var(--blg-font-heading);
	font-weight: 700; /* Raleway Bold — Figma Heading/H3 */
	font-size: 1.5rem; /* 24px */
	line-height: 1.33;
	color: var(--blg-color-contrast);
	margin: 0 0 var(--blg-gap-tight);
}

.blg-local-help__card .blg-local-help__text {
	font-family: var(--blg-font-body);
	font-weight: 400;
	font-size: var(
		--blg-size-body
	); /* 16px, Figma renders 14px Body/Small but
		the site's other card bodies (values-row, steps-row) all use Body/Default
		for consistency — kept aligned rather than one-off 14px. */
	line-height: 1.6;
	color: var(--blg-color-body);
	margin: 0;
}

.blg-local-help__note {
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-xs); /* 14px, Body/Small */
	color: var(--blg-color-neutral-700);
	margin: var(--blg-space-md) 0 0;
}

/* ── Tablet (≤1024px) — 2 columns ────────────────────────────────────────── */
@media (max-width: 1024px) {
	.blg-local-help {
		grid-template-columns: repeat(2, minmax(0, 18rem)) !important;
	}
}

/* ── Mobile (≤767.98px) — 1 column ───────────────────────────────────────── */
@media (max-width: 767.98px) {
	.blg-local-help {
		grid-template-columns: minmax(0, 22rem) !important;
		justify-content: center;
	}

	.blg-local-help__card {
		padding: 1.5rem;
	}
}