/* ==========================================================================
   Editor-content icon system + About page blocks

   Icons are driven by a data-icon attribute so the copy stays editable in the
   block editor — no raw SVG for the client to break.

   Two pseudo-elements per item: ::before paints the tinted badge, ::after
   paints the glyph via mask-image. They can't be combined, because a mask
   clips the element's own background along with everything else.
   ========================================================================== */

[data-icon]::before,
[data-icon]::after {
	content: "";
	grid-area: icon;
	width: 54px;
	height: 54px;
	flex: none;
}

/* Badge */
[data-icon]::before {
	background: var(--accent-soft);
	border: 1px solid var(--border-gold);
	border-radius: 14px;
}

/* Glyph */
[data-icon]::after {
	background-color: var(--gold-600);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 26px 26px;
	mask-size: 26px 26px;
}

[data-icon="flask"]::after {
	-webkit-mask-image: var(--i-flask);
	mask-image: var(--i-flask);
}

[data-icon="shield"]::after {
	-webkit-mask-image: var(--i-shield);
	mask-image: var(--i-shield);
}

[data-icon="medal"]::after {
	-webkit-mask-image: var(--i-medal);
	mask-image: var(--i-medal);
}

[data-icon="doc"]::after {
	-webkit-mask-image: var(--i-doc);
	mask-image: var(--i-doc);
}

[data-icon="molecule"]::after {
	-webkit-mask-image: var(--i-molecule);
	mask-image: var(--i-molecule);
}

[data-icon="globe"]::after {
	-webkit-mask-image: var(--i-globe);
	mask-image: var(--i-globe);
}

[data-icon="mail"]::after {
	-webkit-mask-image: var(--i-mail);
	mask-image: var(--i-mail);
}

[data-icon="phone"]::after {
	-webkit-mask-image: var(--i-phone);
	mask-image: var(--i-phone);
}

[data-icon="clock"]::after {
	-webkit-mask-image: var(--i-clock);
	mask-image: var(--i-clock);
}

[data-icon="truck"]::after {
	-webkit-mask-image: var(--i-truck);
	mask-image: var(--i-truck);
}

/* wpautop turns newlines between inline tags into <br>. Inside a grid that
   becomes a stray auto-placed item in its own row, which breaks the row model
   and the vertical centring. Neutralise it. */
.about-checks br,
.about-reasons br {
	display: none;
}

/* --------------------------------------------------------------------------
   Quality assurance — badge left, copy right
   -------------------------------------------------------------------------- */

.about-checks {
	display: grid;
	gap: var(--space-xs);
	align-content: start;
	list-style: none;
	margin: 0;
	padding: 0;
}

.about-checks li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"icon title"
		"icon desc";
	align-content: center;
	gap: 4px var(--space-m);
	padding: var(--space-m);
	background: var(--surface);
	border: 1px solid var(--border);
	border-left: 3px solid var(--gold-500);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-s);
	transition: transform 0.22s var(--ease-out), box-shadow 0.22s ease;
}

.about-checks li:hover {
	transform: translateX(3px);
	box-shadow: var(--shadow-m);
}

.about-checks li::before,
.about-checks li::after {
	align-self: center;
}

/* Collapse the wrapper so label and description become grid items. */
.about-checks li > span {
	display: contents;
}

.about-checks strong {
	grid-area: title;
	align-self: end;
	font-size: var(--step-1);
	font-weight: 700;
	line-height: 1.25;
	color: var(--text);
}

.about-checks li > span > span {
	grid-area: desc;
	align-self: start;
	color: var(--text-muted);
	font-size: var(--step-0);
	line-height: 1.5;
}

/* Copy column tracks the checkpoint list on tall screens. */
@media (min-width: 900px) {
	.about-split__copy {
		position: sticky;
		top: calc(var(--header-h) + var(--space-l));
	}
}

.about-split__copy .eyebrow {
	margin-block-end: var(--space-s);
}

/* The page's lead statement, so it carries a little more weight. */
.about-split__copy h2 {
	max-width: 20ch;
	font-size: var(--step-3);
	line-height: 1.1;
	margin-block-end: var(--space-s);
}

.about-split__copy p:not(.eyebrow) {
	max-width: 54ch;
	font-size: var(--step-1);
	line-height: 1.55;
	color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Reason cards — badge stacked above the label
   -------------------------------------------------------------------------- */

.about-reasons li {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"icon"
		"title"
		"desc";
	grid-template-rows: auto auto auto;
	align-content: center;
	justify-items: start;
	gap: var(--space-xs);
	min-height: 260px;
	padding: var(--space-l) var(--space-m);
}

.about-reasons li::before,
.about-reasons li::after {
	margin: 0;
}

.about-reasons strong {
	grid-area: title;
	font-size: var(--step-1);
	line-height: 1.25;
}

.about-reasons span {
	grid-area: desc;
	font-size: var(--step-0);
	line-height: 1.5;
}