.zerodigital-about {
	padding: clamp(var(--wp--preset--spacing--lg, 2rem), 4vw, var(--wp--preset--spacing--2-xl, 4rem)) var(--zd-section-gutter, var(--wp--preset--spacing--md, 1.5rem));
}

/* A painted About reads as a card, and takes the card radius — from the theme's
 * shared `.zd-has-ground` rule, which every block with a background now uses.
 * The render adds that class for a colour or for media.
 *
 * This block used to do it alone, and differently: it also pulled itself in by a
 * gutter from 783px up, which made the card but moved its copy one gutter inside
 * the edge every other section sits on. The section is already wider than its
 * own content column by its inline padding, which is the overhang that makes it
 * read as a card; the alignment is worth more than the extra gutter. */

.zerodigital-about__inner {
	display: grid;
	gap: clamp(var(--wp--preset--spacing--md, 1.5rem), 4vw, var(--wp--preset--spacing--xl, 3rem));
	align-items: center;
	max-width: var(--zd-content-max, calc(var(--wp--style--global--wide-size, 1600px) - 2 * var(--wp--preset--spacing--md, 1.5rem)));
	margin-inline: auto;
	grid-template-columns: 1fr;
}

.zerodigital-about--image-left,
.zerodigital-about--image-right {
	grid-template-columns: 1fr 1fr;
}

.zerodigital-about--image-left .zerodigital-about__inner {
	direction: rtl;
}

.zerodigital-about--image-left .zerodigital-about__copy,
.zerodigital-about--image-left .zerodigital-about__media {
	direction: ltr;
}

.zerodigital-about--image-left .zerodigital-about__inner,
.zerodigital-about--image-right .zerodigital-about__inner {
	grid-template-columns: 1fr 1fr;
}

.zerodigital-about--copy-only .zerodigital-about__inner {
	max-width: 46rem;
}

/* Copy width follows the block's alignment — the one width control, set in the
 * editor toolbar or over MCP. None is the reading measure above; Wide and Full
 * widen the copy to match the section. This replaced a separate Content Width
 * field that reused the same three words for a second, independent setting,
 * and data migration 3 mapped every stored value onto the equivalent alignment.
 *
 * Two caps still have to move together, and the second is the one that matters:
 * the container is 46rem, but `.zerodigital-about__body` further down is capped
 * at 60ch — roughly 34rem — so the COPY is already well inside the container.
 * Widening only the container moves the heading and leaves the text exactly
 * where it was, which reads as a setting that does nothing.
 *
 * Specificity is (0,3,0), which beats both the (0,2,0) rule above and the
 * (0,1,0) body rule below on its own, so neither source order nor !important is
 * doing any work. */
.zerodigital-about--copy-only.alignwide .zerodigital-about__inner {
	max-width: 64rem;
}

.zerodigital-about--copy-only.alignfull .zerodigital-about__inner {
	max-width: var(--zd-content-max, calc(var(--wp--style--global--wide-size, 1600px) - 2 * var(--wp--preset--spacing--md, 1.5rem)));
}

.zerodigital-about--copy-only.alignwide .zerodigital-about__body,
.zerodigital-about--copy-only.alignfull .zerodigital-about__body {
	max-width: none;
}

.zerodigital-about__heading {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--zd-step-h2, clamp(1.9rem, 1.35rem + 2.2vw, 2.9rem));
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: balance;
	margin: 0 0 var(--wp--preset--spacing--sm, 1rem);
}

/* The accent lead-in bar is retired. Every section carrying the same bar is
 * exactly what made the pages read as one template, and the accent is now
 * reserved for the spec tick and genuine state. The heading carries itself. */

.zerodigital-about__body {
	line-height: 1.65;
}

.zerodigital-about__stats {
	list-style: none;
	margin: var(--wp--preset--spacing--lg, 2rem) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--lg, 2rem);
}

/* Stats are the clearest "trust signal as spec" on the page — a measured
 * figure and its unit. Set in the utility face with tabular figures so a row
 * of them lines up on the decimal rather than drifting. */
.zerodigital-about__stat-number {
	display: block;
	font-family: var(--zd-mono);
	font-variant-numeric: tabular-nums;
	font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--foreground, #16181b);
}

.zerodigital-about__stat-label {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--zd-mono);
	font-size: var(--zd-spec-size, 0.72rem);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--zd-spec-tracking, 0.14em);
}

.zerodigital-about__media {
	height: 100%;
}

/* Feature media (both heroes and About) shares one treatment: the large radius
 * and a hairline, no shadow. One device, not two — the hairline is what holds
 * the edge where a bright photo meets a near-white page, and a drop shadow on
 * top of it was belt-and-braces that read as dated. */
.zerodigital-about__media img {
	width: 100%;
	height: auto;
	border-radius: var(--zd-media-radius, var(--wp--custom--radius--lg, 0.75rem));
	border: var(--zd-border, 1px solid #e4e6e9);
	display: block;
}

/* On desktop the image stretches to the full height of the section so it reads
 * as a solid panel beside the copy rather than a floating thumbnail. The grid
 * row is sized by the taller column (usually the copy); align-items:stretch
 * lets the media cell fill it, and object-fit:cover crops without distortion. */
@media (min-width: 783px) {
	.zerodigital-about--image-left .zerodigital-about__inner,
	.zerodigital-about--image-right .zerodigital-about__inner {
		align-items: stretch;
	}

	.zerodigital-about--image-left .zerodigital-about__media img,
	.zerodigital-about--image-right .zerodigital-about__media img {
		height: 100%;
		object-fit: cover;
	}
}

/* Heading beside the text. The lede takes the left column; body and stats share
 * the right. The section widens to the content column, since a two-column spread
 * inside the 46rem or 64rem reading measure would squeeze both. (0,3,0) and after
 * the alignment rules above, so it wins at every alignment. */
@media (min-width: 783px) {
	.zerodigital-about.zerodigital-about--split .zerodigital-about__inner {
		max-width: var(--zd-content-max, calc(var(--wp--style--global--wide-size, 1600px) - 2 * var(--wp--preset--spacing--md, 1.5rem)));
	}

	.zerodigital-about--split .zerodigital-about__copy {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
		column-gap: clamp(var(--wp--preset--spacing--lg, 2rem), 5vw, 5rem);
		align-items: start;
	}

	.zerodigital-about--split .zerodigital-about__lede {
		grid-column: 1;
		/* Body, buttons and stats: up to three rows in the text column. */
		grid-row: 1 / span 3;
	}

	.zerodigital-about--split .zerodigital-about__body,
	.zerodigital-about--split .zerodigital-about__stats {
		grid-column: 2;
	}

	.zerodigital-about--split .zerodigital-about__body {
		max-width: 68ch;
	}

	.zerodigital-about--split .zerodigital-about__body > :first-child,
	.zerodigital-about--split .zerodigital-about__heading {
		margin-top: 0;
	}
}

@media (max-width: 782px) {
	.zerodigital-about--image-left .zerodigital-about__inner,
	.zerodigital-about--image-right .zerodigital-about__inner {
		grid-template-columns: 1fr;
	}
}

/* --- default skin --- */
.zerodigital-about__body {
	max-width: 60ch;
}


.zerodigital-about__stats li {
	padding-left: 1rem;
	border-left: var(--zd-border, 1px solid #e4e6e9);
}

.zerodigital-about__stat-label {
	color: var(--wp--preset--color--muted, #5b6572);
}

/* Section background media (image/video). Sits behind the content with a scrim
 * so the copy stays legible over any upload; the copy itself is flipped to light
 * by `zd-bg-dark`, which the render adds alongside `--has-bg-media`. */
.zerodigital-about--has-bg-media {
	position: relative;
	/* `clip`, not `hidden`. Both crop the bleed identically, but `hidden`
	 * makes this a scroll container — it gains a scrollable overflow region,
	 * it simply is not user-scrollable — and that has a habit of quietly
	 * changing how descendants behave. It broke the scroll-driven version of
	 * the section entrance outright (see LESSONS); the entrance no longer
	 * works that way, but `clip` remains the honest property for "crop this,
	 * do not make it scrollable" and there is no reason to go back. */
	overflow: clip;
}

.zerodigital-about__bg-image,
.zerodigital-about__bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.zerodigital-about--has-bg-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(16, 24, 40, 0.55), rgba(16, 24, 40, 0.7));
}

.zerodigital-about--has-bg-media .zerodigital-about__inner {
	position: relative;
	z-index: 2;
}

/* Background video pause control — the Home Hero's, rule for rule (see its
 * style.css), so the two read as one control wherever they appear. Above the
 * scrim (1) and the copy (2); the section is the positioning context.
 *
 * One difference. The hero is tall and its copy is vertically centred, so its
 * corner is empty; About's copy runs to its bottom padding (2-4rem), which is
 * shallower than the button, so the corner would land on the last stat, the
 * image or — image-left and copy-only on a phone — the text. The button sits a
 * smaller step in, and a section that has one keeps at least enough bottom
 * padding to hold it clear of everything above. */
.zerodigital-about--has-bg-media:has(> .zerodigital-about__video-toggle) {
	padding-bottom: max(
		clamp(var(--wp--preset--spacing--lg, 2rem), 4vw, var(--wp--preset--spacing--2-xl, 4rem)),
		calc(2.75rem + 2 * var(--wp--preset--spacing--sm, 1rem))
	);
}

.zerodigital-about__video-toggle {
	position: absolute;
	bottom: var(--wp--preset--spacing--sm, 1rem);
	inset-inline-end: var(--wp--preset--spacing--sm, 1rem);
	z-index: 3;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	border-radius: var(--zd-chip-radius, var(--wp--custom--radius--full, 999px));
	border: 2px solid rgba(255, 255, 255, 0.9);
	background: rgba(9, 14, 20, 0.5);
	color: var(--wp--preset--color--background, #fff);
	cursor: pointer;
	transition: background-color var(--zd-ease, 180ms ease);
}

.zerodigital-about__video-toggle:hover {
	background: var(--zd-accent, var(--wp--preset--color--accent, #c4263c));
	border-color: var(--zd-accent, var(--wp--preset--color--accent, #c4263c));
}

.zerodigital-about__video-toggle::before {
	content: "\275A\275A";
	font-size: 0.75rem;
}

.zerodigital-about__video-toggle[aria-pressed="true"]::before {
	content: "\25B6";
}

/* Printed `hidden` and shown by view.js once it can work; `display: grid` would
 * otherwise outrank the browser's [hidden] rule. */
.zerodigital-about__video-toggle[hidden] {
	display: none;
}

/* ---- Buttons ------------------------------------------------------------ */
/* The Home Hero's pair: a filled primary and a text link with an arrow, each
 * shown when its own text and URL are set. Side by side whenever both fit, on
 * any screen; the link wraps under the button only when the row has no room. */
.zerodigital-about__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--xs, 0.75rem) var(--wp--preset--spacing--md, 1.5rem);
	margin-top: var(--wp--preset--spacing--lg, 2rem);
}

.zerodigital-about__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	min-height: var(--zd-btn-min-h, 2.875rem);
	padding: 0.9rem 1.6rem;
	border-radius: var(--zd-btn-radius, var(--wp--custom--radius--md, 0.5rem));
	background: var(--wp--preset--color--primary, #0e4b52);
	color: var(--wp--preset--color--background, #fff);
	text-decoration: none;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: var(--zd-shadow-sm, 0 1px 3px rgba(16, 24, 40, 0.1));
	transition: background-color var(--zd-ease, 180ms ease), box-shadow var(--zd-ease, 180ms ease), transform var(--zd-ease, 180ms ease);
}

.zerodigital-about__cta:not(.zerodigital-about__cta--secondary):hover {
	background: var(--wp--preset--color--secondary, #0a3339);
	color: var(--wp--preset--color--background, #fff);
	box-shadow: var(--zd-shadow-md, 0 4px 8px -2px rgba(16, 24, 40, 0.1));
	transform: translateY(-1px);
}

/* inline-block, not the inherited inline-flex, so the arrow stays beside the
 * label (see the Home Hero's secondary). No inline padding, so a link that
 * wraps under the button starts on the button's edge. */
.zerodigital-about__cta--secondary {
	display: inline-block;
	min-height: 0;
	padding: 0.9rem 0;
	background: transparent;
	color: var(--wp--preset--color--primary, #0e4b52);
	box-shadow: none;
	border-radius: 0;
}

.zerodigital-about__cta--secondary:hover {
	background: transparent;
	color: var(--wp--preset--color--primary, #0e4b52);
}

/* Heading beside the text: the buttons sit in the text column. */
@media (min-width: 783px) {
	.zerodigital-about--split .zerodigital-about__ctas {
		grid-column: 2;
	}
}

/* On a dark colour or a media background, a light button with a primary label
 * and a light link, as on the Home Hero over a dark ground. */
.zerodigital-about.zd-bg-dark .zerodigital-about__cta:not(.zerodigital-about__cta--secondary) {
	background: var(--wp--preset--color--background, #fff);
	color: var(--wp--preset--color--primary, #0e4b52);
}

.zerodigital-about.zd-bg-dark .zerodigital-about__cta:not(.zerodigital-about__cta--secondary):hover {
	background: color-mix(in srgb, var(--wp--preset--color--background, #fff) 88%, var(--wp--preset--color--foreground, #16181b));
	color: var(--wp--preset--color--primary, #0e4b52);
}

.zerodigital-about.zd-bg-dark .zerodigital-about__cta--secondary,
.zerodigital-about.zd-bg-dark .zerodigital-about__cta--secondary:hover {
	color: var(--wp--preset--color--background, #fff);
}

/* The editor's prompt for an empty block (zerodigital_editor_placeholder()).
   Printed only in the editor preview, never on the live page. */
.zerodigital-about__empty {
	margin: 0;
	opacity: 0.7;
	font-style: italic;
}