/**
 * Our Work page — the bits theme.json can't express for the page-specific
 * sections (trust bar dividers, the giant "$100" figure + rule, the boxed stat
 * row, the Zakat split band, the story pull-quote + avatar). Loaded only when a
 * section carrying an "ab-ow-" marker class is on the page (inc/enqueue.php) and
 * mirrored into the editor via add_editor_style (inc/setup.php).
 *
 * Scoped slate tokens for the stat figures come straight from the comp (a neutral
 * grey, not the site's blue-tinted greys), so they live here rather than in the
 * global palette.
 */

/* ── Hero ──────────────────────────────────────────────────────────────── */
/* A slightly wider copy column than the home hero so the three-line statement
   headline ("Restoring Sight In / The Places The World / Has Forgotten.") wraps
   as in the comp. Scoped to the Our Work hero only. */
.ab-hero--ourwork .ab-hero__copy {
	max-width: 600px;
}

/* Figma hero frame is 700px tall (block stays 620 so the shared image-injection
   marker in seed-pages.php still matches; we lift the visual height here). */
.ab-hero.ab-hero--ourwork {
	min-height: 700px !important;
}

/* Section hairlines — the Figma Our Work sections carry a 1px #E9E9E9 bottom
   divider (The Need, What We Do, Global Reach, Human Story). */
.ab-ow-need,
.ab-ow-programs,
.ab-ow-map,
.ab-ow-story {
	border-bottom: 1px solid #e9e9e9;
}

/* ── Trust bar ─────────────────────────────────────────────────────────── */
.ab-ow-trustbar__item {
	display: flex;
	align-items: center;
}

/* Leading check glyph — a visible tick, not an icon font. */
.ab-ow-trustbar__item::before {
	content: "\2713";
	margin-right: 0.55rem;
	font-weight: 600;
}

/* Hairline divider before every item after the first. */
.ab-ow-trustbar__item + .ab-ow-trustbar__item {
	border-left: 1px solid rgba(255, 255, 255, 0.35);
	padding-left: var(--wp--preset--spacing--40);
}

@media (max-width: 600px) {
	.ab-ow-trustbar__item + .ab-ow-trustbar__item {
		border-left: none;
		padding-left: 0;
	}
}

/* ── The need ──────────────────────────────────────────────────────────── */
.ab-ow-need__amount {
	font-size: clamp(3.75rem, 8vw, 6rem);
}

/* Caption sits under the giant figure, capped so it wraps to two lines as in the
   comp rather than stretching the full column width. */
.ab-ow-need__caption {
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
}

/* Short orange rule under the caption (the comp's underline accent). */
.ab-ow-need__caption::after {
	content: "";
	display: block;
	width: 55px;
	height: 1.5px;
	margin: var(--wp--preset--spacing--30) auto 0;
	background: var(--wp--preset--color--ab-orange);
}

/* ── Impact numbers (boxed stat row) ───────────────────────────────────── */
.ab-ow-stats {
	--ab-ow-fig: #52525b;      /* figure + label colour */
	--ab-ow-line: #d4d4d8;     /* hairline rules (Figma) */
}

/* Figma: a top+bottom rule across the row with vertical dividers between cells —
   no left/right outer border. */
.ab-ow-stats__row {
	border-top: 1px solid var(--ab-ow-line);
	border-bottom: 1px solid var(--ab-ow-line);
}

.ab-ow-stats__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	padding: clamp(2.25rem, 4vw, 3.5rem) 1.25rem;
	text-align: center;
}

.ab-ow-stats__cell + .ab-ow-stats__cell {
	border-left: 1px solid var(--ab-ow-line);
}

/* Figure: Jost sans, slate, with an orange unit ("M") and plus. */
.ab-ow-stats__num {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 400;
	line-height: 1;
	color: var(--ab-ow-fig);
	font-size: clamp(2.5rem, 5vw, 4.375rem);
	white-space: nowrap;
}

.ab-ow-stats__unit,
.ab-ow-stats__plus {
	color: var(--wp--preset--color--ab-orange);
}

.ab-ow-stats__label {
	margin: 0;
	color: var(--ab-ow-fig);
	font-size: 1.0625rem;
	line-height: 1.35;
}

/* 4 figures → 2 columns on tablets, re-flowing the hairlines. */
@media (max-width: 900px) {
	.ab-ow-stats__row {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.ab-ow-stats__cell {
		border-left: none;
	}
	.ab-ow-stats__cell:nth-child(even) {
		border-left: 1px solid var(--ab-ow-line);
	}
	.ab-ow-stats__cell:nth-child(n + 3) {
		border-top: 1px solid var(--ab-ow-line);
	}
}

@media (max-width: 480px) {
	.ab-ow-stats__num {
		font-size: clamp(2.25rem, 12vw, 3rem);
	}
}

/* ── Where we work (map) ───────────────────────────────────────────────── */
.ab-ow-map__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Zakat band ────────────────────────────────────────────────────────── */
.ab-ow-zakat__copy {
	max-width: 660px;
}

.ab-ow-zakat__row {
	gap: var(--wp--preset--spacing--40);
}

@media (max-width: 781px) {
	.ab-ow-zakat__action .wp-block-button {
		width: 100%;
	}
	.ab-ow-zakat__action .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* ── Story from the field ──────────────────────────────────────────────── */
.ab-ow-story__quote {
	font-size: clamp(1.6rem, 3vw, 2.25rem);
}

/* Round avatar; crop whatever photo the story carries. */
.ab-ow-story__avatar {
	flex: 0 0 auto;
}
.ab-ow-story__avatar img {
	border-radius: 999px;
}

.ab-ow-story__photo img {
	width: 100%;
	height: auto;
}

/* Attribution meta reads on one line: ROLE | LOCATION. */
.ab-ow-story__meta {
	align-items: center;
}