/* =============================================================
   Spartan Agency — Credentials band ("Why Spartan Agency")

   Styles the `spartan-traxx/credentials-band` block pattern: a
   centered H2 over four `[spartan_kpi]` cards (big gold stat, small
   uppercase label, one-line description). The pattern is embedded in
   the `home-ledger` homepage AND dropped standalone into Management
   Services / About, so it loads site-wide rather than from the
   front-page-only blocks-home.css.

   Layout note: the group is `alignwide` but uses a constrained
   layout, which caps its children (the columns) at theme.json's
   contentSize (760px). Four KPI cards in 760px is ~190px each, which
   forced "Personal" and "Pierce County" to wrap. The columns block is
   released to the full wide width below and stats never wrap.
   ============================================================= */

.wp-block-group.credentials-band {
	padding-block: clamp(2.5rem, 5vw, 5rem);
	text-align: center;
}

.wp-block-group.credentials-band > h2.wp-block-heading {
	font-family: var(--font-display, "Oswald", sans-serif);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2rem);
	color: var(--slate, #49545c);
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* Release the KPI grid from the 760px content column so the four
   cards share the 1200px wide width. On the homepage the band sits in
   an unconstrained <main>, so cap + center + gutter it ourselves
   instead of letting the cards run edge to edge. */
.wp-block-group.credentials-band > .wp-block-columns {
	max-width: var(--max-w, 1200px);
	width: 100%;
	margin-inline: auto;
	gap: var(--s-4, 1.5rem);
}

.site-main--front .wp-block-group.credentials-band {
	padding-inline: var(--gutter);
}

.wp-block-group.credentials-band .wp-block-column.safety-cred {
	padding: 1rem;
	text-align: center;
	min-width: 0;
}

.wp-block-group.credentials-band .wp-block-column.safety-cred p:first-child {
	font-family: var(--font-display, "Oswald", sans-serif);
	font-weight: 500;
	font-size: clamp(1.75rem, 2.4vw + 0.5rem, 2.75rem);
	line-height: 1;
	color: var(--gold-2, #a88320); /* >=3:1 on bone/white for large text; base gold fails */
	margin: 0 0 0.5rem;
	white-space: nowrap;
}

/* KPI label sits under the band's H2, so it is an H3 (heading order);
   `h4` kept for pages seeded before the p4 accessibility pass. */
.wp-block-group.credentials-band .wp-block-column.safety-cred h3,
.wp-block-group.credentials-band .wp-block-column.safety-cred h4 {
	font-family: var(--font-body, "Titillium Web", sans-serif);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.9rem;
	color: var(--slate, #49545c);
	margin: 0 0 0.5rem;
}

.wp-block-group.credentials-band .wp-block-column.safety-cred p:last-child {
	font-size: 0.95rem;
	line-height: 1.4;
	color: var(--text-muted, #464646);
	margin: 0;
}

/* Tablet: four cards no longer fit without the uppercase labels
   breaking, so go 2x2 before WP core stacks columns at 781px. Core
   forces `flex-wrap: nowrap !important` above 782px, hence the
   matching !important here. */
@media (min-width: 782px) and (max-width: 1099px) {
	.wp-block-group.credentials-band > .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.wp-block-group.credentials-band > .wp-block-columns > .wp-block-column.safety-cred {
		flex-basis: calc(50% - (var(--s-4, 1.5rem) / 2)) !important;
		flex-grow: 0 !important;
	}
}