/* OpenPress About page template (page-templates/about-page.php). Loaded on that template only,
   after home.css, whose hero, section rhythm, tinted band, resource cards and call-to-action panel it reuses.
   Theme tokens only, so light and dark mode follow the rest of the site. No new motion. */

/* The page ends in the dark call-to-action panel, so the footer sits directly below it (as on the homepage). */
.op-about ~ .op-footer { margin-top: 0; }

/* Hero: one column (the homepage hero reserves a second column for its decorative panel). */
.op-about .op-hero__inner { grid-template-columns: minmax(0, 1fr); }
.op-about .op-hero__content { max-width: 46rem; }
.op-about__crumbs { margin-bottom: var(--op-space-4); color: var(--op-text-muted); }
.op-about__crumbs a { text-decoration: none; }
.op-about__crumbs a:hover,
.op-about__crumbs a:focus-visible { color: var(--op-text); text-decoration: underline; }

/* Heading beside content (mission, editorial approach). Stacks on phones and tablets. */
.op-about-split { display: grid; gap: var(--op-space-5); }
.op-about-split__head { min-width: 0; }
.op-about-split__head .op-section-heading { margin-bottom: 0; }
@media (min-width: 1024px) {
	.op-about-split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--op-space-7); align-items: start; }
}

/* Mission text */
.op-about-prose { min-width: 0; max-width: 40rem; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.7; }
.op-about-prose p { margin: 0 0 var(--op-space-4); overflow-wrap: break-word; text-wrap: pretty; }
.op-about-prose p:last-child { margin-bottom: 0; }

/* Editorial principles: icon and text in ruled rows, so any number of items lays out cleanly. */
.op-about-list { min-width: 0; margin: 0; padding: 0; list-style: none; }
.op-about-list__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--op-space-4);
	padding-block: var(--op-space-5);
	border-top: 1px solid var(--op-border);
}
.op-about-list__item:first-child { padding-top: 0; border-top: 0; }
.op-about-list__item:last-child { padding-bottom: 0; }
.op-about-list__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--op-border-strong);
	border-radius: var(--op-radius);
	color: var(--op-link);
}
.op-about-list__body { min-width: 0; }
.op-about-list__title { margin: 0 0 var(--op-space-2); font-size: var(--op-text-h4); letter-spacing: -0.02em; overflow-wrap: break-word; }
.op-about-list__text { margin: 0; max-width: 38rem; color: var(--op-text-muted); line-height: 1.6; overflow-wrap: break-word; }
.op-about-list__link { display: inline-block; margin: var(--op-space-2) var(--op-space-4) 0 0; padding-block: 0.375rem; font-size: var(--op-text-small); }

/* Audiences: ruled list, no cards or pills. */
.op-about-audience { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--op-space-6); margin: 0; padding: 0; list-style: none; }
.op-about-audience__item { min-width: 0; padding-block: var(--op-space-4); border-top: 1px solid var(--op-border-strong); }
.op-about-audience__name { margin: 0 0 var(--op-space-1); font-size: var(--op-text-h4); letter-spacing: -0.02em; }
.op-about-audience__text { margin: 0; color: var(--op-text-muted); font-size: var(--op-text-small); line-height: 1.55; overflow-wrap: break-word; }
@media (min-width: 640px) {
	.op-about-audience { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.op-about-audience { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Text links inside the dark call-to-action panel (--op-link is the light-on-dark blue there). */
.op-about-links { display: flex; flex-wrap: wrap; gap: var(--op-space-1) var(--op-space-5); margin: var(--op-space-4) 0 0; padding: 0; list-style: none; font-size: var(--op-text-small); }
.op-about-links a { display: inline-block; padding-block: 0.375rem; color: var(--op-link); }
.op-about-links a:hover { color: #fff; }