/* ==========================================================================
   AEO and GEO
   Brand blue, so it stands apart from the light sections either side.
   Stat styles are shared with the results section (.stat in components.css).
   ========================================================================== */

.aeo {
	--focus-color: var(--on-blue);

	padding-block: var(--space-section);
	color: var(--on-blue);
	background-color: var(--brand-blue);
}

/* Phones: copy, then stats. Desktop: copy left, stats stacked on the right. */
.aeo__inner {
	display: grid;
	gap: var(--space-8);
}

/* The default eyebrow is brand blue, which would vanish here. White, not
   yellow: yellow is too low contrast for text this small. */
.aeo .eyebrow {
	color: var(--on-blue);
}

.aeo__title {
	max-width: 18ch;
	margin-top: var(--space-3);
	color: var(--on-blue);
}

/* Same heading-to-body rhythm as the hero. */
.aeo__body {
	max-width: var(--measure);
	margin-top: var(--space-4);
	font-size: var(--text-lg);
}

.aeo__link {
	display: inline-block;
	margin-top: var(--space-6);
	padding-block: var(--space-2);
	color: var(--on-blue);
	font-weight: var(--weight-bold);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.aeo__link:hover {
	color: var(--on-blue);
	text-decoration-color: var(--accent-yellow);
}

.aeo__stats {
	display: grid;
	gap: var(--space-6);
	padding: 0;
	list-style: none;
}

@media (min-width: 36em) {
	.aeo__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 48em) {
	.aeo__body {
		margin-top: var(--space-5);
	}

	.aeo__link {
		margin-top: var(--space-7);
	}
}

@media (min-width: 64em) {
	.aeo__inner {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: center;
		gap: var(--space-9);
	}

	/* Two stats, so they can stay large, stacked in the right column. */
	.aeo__stats {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-7);
	}
}