/*
 * eoa-credibility-band.css — patterns/credibility-band.php's styling (EOA-HERO-FULL-REPLACEMENT
 * §9, 2026-07-13). Light-section tokens (paper background, ink text) — the opposite surface from
 * the dark eoa-wave-hero band directly above it. Enqueued on the homepage (functions.php ::
 * alexdesigns_eoa_enqueue()) and on /results/ (same function, since the band also renders there).
 */

.eoa-cred-band {
	background: var( --wp--preset--color--paper );
}

.eoa-cred-band__h2 {
	color: var( --wp--preset--color--ink );
	text-align: center;
}

@media ( max-width: 480px ) {
	/* 2026-07-13 (Alex): match .eoa-wave-hero__h1's mobile size (1.375rem) as the CAP, but never
	   let "Accelerate Your Online Success" wrap to a second line — clamp() shrinks it fluidly as
	   the viewport narrows toward 360px instead of a single fixed size that might still wrap on
	   the smallest supported width (ui-standards.md §4 requires zero horizontal scroll at
	   360/390px, so shrink-to-fit is required here, not nowrap-and-overflow). */
	.eoa-cred-band__h2 {
		font-size: clamp( 1.05rem, 6.2vw, 1.375rem );
		line-height: 1.15;
		white-space: nowrap;
	}
}

.eoa-cred-band__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 2rem;
}

.eoa-cred-band__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.4rem;
	background: var( --wp--preset--color--card, #fff );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--card, 4px );
	padding: 1.5rem 1.25rem;
}

.eoa-cred-band__value {
	font-weight: 700;
	font-size: 1.75rem;
	color: var( --wp--preset--color--primary, #2353D4 );
	line-height: 1.1;
}

.eoa-cred-band__label {
	color: var( --wp--preset--color--slate );
	font-size: 0.95rem;
	line-height: 1.4;
}

@media ( max-width: 781px ) {
	.eoa-cred-band__grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}