/**
 * 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;
}

/* Hero photo framing. The subjects (the boy and his mother) sit in the middle
   of a 16:9 photo, so a full-bleed photo behind a left text column and wash
   hides the boy behind the headline. Instead the photo gets its own space:
   - Desktop (>=1240px, where the copy column ends at exactly 50%): the photo
     fills the right half, its left edge feathered into the surface, and the
     focal point keeps both faces in frame from 1240px up.
   - Below that, a stacked layout: copy on the plain surface, then the photo
     as a full-width band under it, top edge feathered.
   The inline object-position and side wash come from the block, hence the
   !important overrides. */
@media (min-width: 1240px) {
	.ab-hero.ab-hero--ourwork .wp-block-cover__image-background {
		left: 50% !important;
		right: 0 !important;
		width: 50% !important;
		object-position: 52% 50% !important;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%);
		mask-image: linear-gradient(90deg, transparent 0, #000 12%);
	}
}

@media (max-width: 1239px) {
	.ab-hero.ab-hero--ourwork {
		--ab-ow-photo-h: min(56.25vw, 460px); /* the photo's own 16:9, capped */
		min-height: 0 !important;
		align-items: flex-start !important;
		padding-bottom: calc(var(--ab-ow-photo-h) + 24px) !important;
	}

	.ab-hero.ab-hero--ourwork .wp-block-cover__image-background {
		top: auto !important;
		bottom: 0 !important;
		height: var(--ab-ow-photo-h) !important;
		object-position: 50% 25% !important;
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%);
		mask-image: linear-gradient(180deg, transparent 0, #000 16%);
	}
}

/* Phones: a taller band, cropped in on the two faces. */
@media (max-width: 781px) {
	.ab-hero.ab-hero--ourwork {
		--ab-ow-photo-h: 72vw;
	}

	.ab-hero.ab-hero--ourwork .wp-block-cover__image-background {
		object-position: 48% 20% !important;
	}
}

/* The text no longer sits on the photo at any width, so the wash goes. */
.ab-hero.ab-hero--ourwork .wp-block-cover__background {
	background: none !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) ───────────────────────────────────────────────── */
/* Live albasar/map-points block: pins, legend and base styles come from
   blocks/map-points/style.css. Here only the framing. */
.ab-ow-map__map .ab-home-proof__mapwrap {
	background: #fff;
	border: 1px solid var(--wp--preset--color--ab-line);
	border-radius: 12px;
	padding: 20px;
}
.ab-ow-map__map .ab-home-proof__legend {
	background: #fff;
}

/* ── 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;
}