/**
 * About page — now built from real WordPress blocks (Cover, Columns,
 * Group, List, Details, Quote) stored in the page's own content, so
 * an editor can change copy, swap photos, and reorder sections from
 * the normal block editor. Only three sections stay as dynamic
 * pattern blocks (nashon/about-stats, nashon/about-leadership,
 * nashon/about-members) — their content is already fully
 * admin-editable via Team/Partners, and each pulls in live records
 * (counts, curated members) that a static block can't represent.
 *
 * .section-eyebrow, .page-hero-cover, and .page-cta-card are shared
 * across every content page now (About, Agenda, Resources, Events,
 * Gallery) — defined once in style.css. This file only carries About's
 * own section layouts.
 */

/* Shared split-stroke h2 treatment for every real-block section
   heading on this page (Story, Mission & Vision) — same solid-to-hollow
   split as every other section heading on the site (about-leadership,
   core-values, footer), dark stroke since these sit on light section
   backgrounds. */
.about-story-section h2,
.about-mv-section h2 {
	margin: 0 0 32px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 3.6vw, 2.9rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	text-transform: uppercase;
	text-wrap: balance;
}
.about-story-section h2 span,
.about-mv-section h2 span {
	color: transparent;
	-webkit-text-stroke: 1.5px #000;
}

/* ===== Story ===== */
.about-story-section {
	/* Narrower side padding than the sitewide 8.75vw convention — the
	   two-column card grid + photo reads noticeably more boxed-in
	   with that much inset on wide screens than a plain text column
	   does, so it needs more room to actually use. */
	padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 64px);
	background: rgba(49, 161, 255, 0.06);
	text-align: center;
}
.about-story-section .section-eyebrow {
	margin-left: auto;
	margin-right: auto;
}
/* Two real columns on desktop — a 2-up grid of numbered cards on the
   left (2, 2, then the last one alone), a tall sticky photo/quote on
   the right that reads noticeably taller than any single card next
   to it. Below the tablet breakpoint the photo moves above as a
   full-width banner; the card grid itself stays 2-up until it
   collapses to one column on phones. */
.about-story-layout.wp-block-columns {
	max-width: 1440px;
	margin: 0 auto;
	gap: clamp(32px, 5vw, 64px);
	align-items: stretch;
	text-align: left;
}
.about-story-timeline.wp-block-column {
	flex: 1.2 1.2 0%;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: min-content;
	counter-reset: story-beat;
	gap: 28px;
}
.about-story-beat {
	position: relative;
	counter-increment: story-beat;
	padding: 22px 22px;
	border-radius: 18px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* The 5th beat rides alone in the last row — span both columns
   instead of leaving an empty, unbalanced-looking gap beside it. */
.about-story-beat:nth-child(5) {
	grid-column: 1 / -1;
}
.about-story-beat:hover {
	transform: translateY(-3px);
}
.about-story-beat--blue {
	background: rgba(49, 161, 255, 0.08);
}
.about-story-beat--blue:hover {
	box-shadow: 0 16px 32px rgba(49, 161, 255, 0.18);
}
.about-story-beat--yellow {
	background: rgba(253, 169, 3, 0.1);
}
.about-story-beat--yellow:hover {
	box-shadow: 0 16px 32px rgba(253, 169, 3, 0.2);
}
/* The number sits inline beside the label instead of floating above
   the card — a ::before on the heading itself, still fed by the same
   counter incremented on .about-story-beat. */
.about-story-beat__label.wp-block-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.about-story-beat__label::before {
	content: counter(story-beat, decimal-leading-zero);
	flex: none;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.7rem;
	box-shadow: 0 4px 10px rgba(40, 40, 40, 0.15);
}
.about-story-beat--blue .about-story-beat__label {
	color: var(--wp--preset--color--primary);
}
.about-story-beat--blue .about-story-beat__label::before {
	border: 2px solid var(--wp--preset--color--primary);
}
.about-story-beat--yellow .about-story-beat__label {
	color: #a6690a;
}
.about-story-beat--yellow .about-story-beat__label::before {
	border: 2px solid var(--wp--preset--color--secondary);
}
.about-story-beat p {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
	line-height: 1.65;
}
.about-story-visual.wp-block-column {
	flex: 0.85 0.85 0%;
}
.about-story-visual.wp-block-column .about-story-cover.wp-block-cover {
	position: sticky;
	top: 110px;
}
.about-story-cover.wp-block-cover {
	height: 100%;
	min-height: 420px;
	border-radius: 22px;
	box-shadow: 0 24px 48px rgba(40, 40, 40, 0.18);
}
.about-story-cover__quote.wp-block-quote {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.15rem, 1.8vw, 1.4rem);
	font-style: italic;
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
}
.about-story-cover__quote.wp-block-quote p {
	color: var(--wp--preset--color--base) !important;
}

/* ===== Mission & Vision ===== */
.about-mv-section {
	padding: clamp(48px, 6vw, 80px) 8.75vw;
	background: var(--wp--preset--color--base);
	text-align: center;
}
.about-mv-columns.wp-block-columns {
	max-width: 1320px;
	margin: 0 auto;
	/* core/columns' default block-gap leaves a visible seam of page
	   background between the three panels, breaking what should read
	   as one continuous rounded block. */
	gap: 0;
	align-items: stretch;
	border-radius: 28px;
	overflow: hidden;
	box-shadow: 0 30px 60px rgba(40, 40, 40, 0.16);
	text-align: left;
}
.about-mv-panel.wp-block-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(32px, 4vw, 48px);
}
.about-mv__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
.about-mv-panel.has-paper-background-color .about-mv__icon {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--contrast);
}
.about-mv-panel h3.wp-block-heading {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.4rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}
.about-mv-panel p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
}
.about-mv-panel.has-contrast-background-color p {
	color: rgba(255, 255, 255, 0.8);
}
.about-mv-panel.has-paper-background-color p {
	color: var(--wp--preset--color--muted);
}
.about-mv-photo-column.wp-block-column {
	padding: 0;
}
.about-mv-cover.wp-block-cover {
	min-height: 100%;
	height: 100%;
}
.about-mv-cover__caption {
	margin: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

/* ===== Objectives ===== */
/* Redesigned as a top-to-bottom flow (centered intro → full-width
   photo banner → grid of numbered cards) instead of a text+photo
   column sitting beside an 8-item list — that side-by-side layout
   left the list column far taller than the intro, reading as a big
   dead gap under the photo. Nothing sits beside anything now, so
   there's no mismatch to leave a gap. */
.about-objectives-section {
	padding: clamp(48px, 6vw, 80px) 8.75vw;
	background: rgba(253, 169, 3, 0.08);
	text-align: center;
}
.about-objectives-section .section-eyebrow {
	margin-left: auto;
	margin-right: auto;
}
.about-objectives-section h2.wp-block-heading {
	margin: 0 0 16px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 3.6vw, 2.9rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	text-transform: uppercase;
	text-wrap: balance;
}
.about-objectives-section h2.wp-block-heading span {
	color: transparent;
	-webkit-text-stroke: 1.5px #000;
}
.about-objectives-intro-text {
	margin: 0 auto 36px;
	max-width: 34rem;
	color: var(--wp--preset--color--muted);
	font-size: 1.05rem;
	line-height: 1.7;
}
.about-objectives-photo.wp-block-image {
	max-width: 1320px;
	margin: 0 auto 48px;
	overflow: hidden;
	border-radius: 20px;
	box-shadow: 0 16px 32px rgba(40, 40, 40, 0.12);
}
.about-objectives-photo.wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}
/* An ordered list styled as a 4-column grid of numbered cards — the
   number badge comes from a CSS counter on the <li>, not markup, so
   the list stays a plain, fully block-editable core/list (add, remove,
   reorder items normally) instead of needing hand-written numbering. */
.about-objectives-list.wp-block-list {
	counter-reset: about-objectives;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	text-align: left;
}
.about-objectives-list.wp-block-list li {
	counter-increment: about-objectives;
	position: relative;
	display: flex;
	align-items: center;
	/* A fixed floor height so all 8 cards read as one uniform grid —
	   without it, each card sized to its own text length, so the
	   longest objective towered over the shortest. */
	min-height: 200px;
	margin: 0;
	padding: 50px 18px 18px;
	border-radius: 16px;
	background: var(--wp--preset--color--secondary);
	box-shadow: 0 12px 28px rgba(40, 40, 40, 0.08);
	color: rgba(40, 40, 40, 0.75);
	font-size: 0.88rem;
	line-height: 1.55;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.about-objectives-list.wp-block-list li:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(40, 40, 40, 0.16);
}
.about-objectives-list.wp-block-list li::before {
	content: counter(about-objectives, decimal-leading-zero);
	position: absolute;
	left: 18px;
	top: 18px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8rem;
	font-weight: 800;
	transition: background 0.2s ease, color 0.2s ease;
}
.about-objectives-list.wp-block-list li:hover::before {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ===== Stat strip — dynamic pattern (nashon/about-stats), unchanged.
   Same solid-panel recipe as the homepage Impact Stats section (blue
   panel, amber numbers) so the two pages read as one system, without
   importing that page's stylesheet here. ===== */
.about-stats {
	padding: clamp(24px, 3vw, 32px) 8.75vw;
	background: var(--wp--preset--color--base);
}
.about-stats__grid {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(20px, 4vw, 48px);
	padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 40px);
	border-radius: 20px;
	background: var(--wp--preset--color--primary);
}
.about-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 120px;
	text-align: center;
}
.about-stat__value {
	color: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}
.about-stat__label {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.about-stats__divider {
	width: 1px;
	height: 44px;
	background: rgba(255, 255, 255, 0.3);
}

/* ===== Leadership — dynamic pattern (nashon/about-leadership),
   unchanged. ===== */
.about-leadership {
	padding: clamp(48px, 6vw, 80px) 8.75vw;
	background: rgba(49, 161, 255, 0.06);
	text-align: center;
}
.about-leadership__inner {
	max-width: 1320px;
	margin: 0 auto;
}
.about-leadership .section-label {
	justify-content: center;
	margin: 0 auto 20px;
}
.about-leadership h2 {
	margin: 0 0 40px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	text-transform: uppercase;
	text-wrap: balance;
}
.about-leadership h2 span {
	color: transparent;
	-webkit-text-stroke: 1.5px #000;
}
.about-leadership__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	text-align: left;
}
.about-leadership__more {
	margin-top: 40px;
	text-align: center;
}
.about-leader-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	border-radius: 24px;
	box-shadow: 0 16px 32px rgba(40, 40, 40, 0.12);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.about-leader-card__link {
	display: block;
	width: 100%;
	height: 100%;
}
.about-leader-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 48px rgba(40, 40, 40, 0.2);
}
.about-leader-card__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.about-leader-card:hover .about-leader-card__photo {
	transform: scale(1.05);
}
.about-leader-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, transparent 45%, rgba(20, 20, 20, 0.88));
}
.about-leader-card__social {
	position: absolute;
	z-index: 2;
	top: 16px;
	right: 16px;
	display: flex;
	gap: 8px;
}
.about-leader-card__social-icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--wp--preset--color--primary);
	box-shadow: 0 6px 14px rgba(40, 40, 40, 0.25);
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.about-leader-card__social-icon:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	transform: translateY(-2px);
}
.about-leader-card__info {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px 22px;
	color: var(--wp--preset--color--base);
}
.about-leader-card__info h3 {
	margin: 0 0 4px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 800;
}
.about-leader-card__role {
	margin: 0;
	color: var(--wp--preset--color--secondary);
	font-size: 0.9rem;
	font-weight: 700;
}

/* ===== Member organisations — dynamic pattern
   (nashon/about-members), unchanged. ===== */
/* A bold solid-blue banner (same weight as the homepage's colored
   bands) instead of another plain white section — the logo cards
   stay white/light so they read clearly against it. */
.about-members {
	padding: clamp(48px, 6vw, 80px) 8.75vw;
	background: var(--wp--preset--color--primary);
	text-align: center;
}
.about-members__inner {
	max-width: 1320px;
	margin: 0 auto;
}
.about-members .section-label {
	justify-content: center;
	margin: 0 auto 20px;
}
.about-members h2 {
	margin: 0 0 12px;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	text-transform: uppercase;
	text-wrap: balance;
}
.about-members h2 span {
	color: transparent;
	-webkit-text-stroke: 1.5px #fff;
}
.about-members__intro {
	margin: 0 0 40px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 1rem;
}
.about-members__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 18px;
}
.about-members__item {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	padding: 16px;
	border: 1px solid transparent;
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.about-members__item:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--secondary);
	box-shadow: 0 16px 32px rgba(20, 20, 20, 0.18);
}
.about-members__item img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

@media (max-width: 1100px) {
	.about-members__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.about-objectives-list.wp-block-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 900px) {
	/* !important is required here — WP core ships
	   ".wp-block-columns { flex-wrap: nowrap !important; }" at
	   min-width:782px, which silently beat this rule (and every other
	   plain flex-wrap override on a wp:columns block on this page) at
	   any width from 782px up to this query's own threshold, no matter
	   how the media query or selector specificity was written. */
	.about-mv-columns.wp-block-columns {
		flex-wrap: wrap !important;
	}
	.about-mv-photo-column.wp-block-column {
		min-height: 260px;
		flex-basis: 100% !important;
	}
}
@media (max-width: 1100px) {
	/* Two real side-by-side columns need real width for each — at
	   tablet that squeezes both the timeline cards and the photo too
	   narrow to read well (at exactly 1024px, a common tablet-landscape
	   width, browsers can also land right on this query's boundary
	   inconsistently — the margin above 1024 keeps real tablets safely
	   inside it either way). Stack instead: photo first as a full-width
	   banner, then the timeline below it, full width, sticky removed
	   (nothing left to scroll alongside). */
	.about-story-layout.wp-block-columns {
		flex-wrap: wrap !important;
	}
	.about-story-timeline.wp-block-column,
	.about-story-visual.wp-block-column {
		flex-basis: 100% !important;
	}
	.about-story-visual.wp-block-column {
		order: -1;
		margin-bottom: 44px;
	}
	.about-story-visual.wp-block-column .about-story-cover.wp-block-cover {
		/* Not static — Cover blocks rely on their own position:relative
		   for the absolutely-positioned background image/overlay inside
		   to size against. static removed that containing block, so the
		   image's inset:0 escaped to a much taller ancestor instead of
		   filling this 420px box, blowing the photo up huge. relative
		   still isn't sticky/stuck, just keeps that context intact.
		   top must also reset — the desktop rule's top:110px (for the
		   sticky offset) still applies under plain relative positioning,
		   which shoved the photo 110px down into the cards below it. */
		position: relative;
		top: 0;
	}
	.about-story-cover.wp-block-cover {
		/* Reset the desktop-only height:100% (which stretched to match
		   the timeline column's height there) — stacked, it has no
		   sibling to match, and the leftover 100% resolved against an
		   ancestor's height, blowing the photo up huge and overlapping
		   the cards below it. */
		height: auto;
		min-height: 280px;
	}
}
@media (max-width: 700px) {
	.about-story-timeline.wp-block-column {
		grid-template-columns: 1fr;
	}
	.about-story-beat:nth-child(5) {
		grid-column: auto;
	}
	.about-leadership__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.about-members__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.about-objectives-list.wp-block-list {
		grid-template-columns: 1fr;
	}
	.about-objectives-photo.wp-block-image img {
		aspect-ratio: 4 / 3;
	}
}
@media (max-width: 480px) {
	.about-members__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}