/* ============ About page ============ */

/* Reuses .cb-showcase (image + content, already responsive) from
   components.css; this variant just swaps which side the image sits on
   at desktop width for visual rhythm between the hero and "How We Got
   Here" sections. */
@media (min-width: 1024px) {
	.cb-showcase--reverse .cb-showcase__visual { order: 2; }
	.cb-showcase--reverse .cb-showcase__content { order: 1; }
}

/* Timeline: single column on phones (each step needs room to breathe),
   two columns from tablet width up. */
.cb-timeline-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cb-space-lg); margin-top: var(--cb-space-lg); }
@media (min-width: 640px) { .cb-timeline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Pillars: single column on phones, three across from tablet width —
   the old inline "repeat(3,1fr)" forced three cramped columns even on
   small phones. Flex column + align-items:center (not text-align) so
   the icon itself — a block-level svg — centers correctly too. */
.cb-pillars-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cb-space-xl); margin-top: var(--cb-space-xl); }
@media (min-width: 640px) { .cb-pillars-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cb-pillars-grid__item { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* Quote band and closing CTA band — flat pale-pink wash matching the
   homepage "Stay in the Loop" newsletter band, not a photo background. */
.cb-about-quote, .cb-about-cta {
	background: color-mix(in srgb, var(--cb-color-primary) 18%, var(--cb-color-background));
	border-radius: var(--cb-radius); padding: var(--cb-space-xl) var(--cb-gutter-mobile); text-align: center;
}
.cb-about-quote__text { color: var(--cb-color-text); font-style: italic; }
.cb-about-quote__cite { color: var(--cb-color-text-muted); margin-top: var(--cb-space-md); }
.cb-about-cta h2 { color: var(--cb-color-text); }