/**
 * EMMGS — Design system
 *
 * Typographic roles, layout primitives, and grids. Everything here is a
 * utility class usable from the block editor's Advanced → Additional CSS
 * class field, so the system stays available to editors, not just to code.
 */

/* -------------------------------------------------------------------------
 * 1. Typographic roles
 * ---------------------------------------------------------------------- */

/* Eyebrow / metadata label. The system's smallest voice. */
.emmgs-label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--surface-muted);
}

/* Label with a leading rule — used to open sections. */
.emmgs-label--ruled {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.emmgs-label--ruled::before {
	content: "";
	inline-size: 1.75rem;
	block-size: 1px;
	flex: none;
	background-color: currentColor;
	opacity: 0.5;
}

/* Numbered index label, e.g. 01 / BUILD */
.emmgs-index {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--wp--custom--tracking--label);
	color: var(--surface-muted);
}

/* Hero-scale display headline. */
.emmgs-display {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 600;
	line-height: 0.96;
	letter-spacing: var(--wp--custom--tracking--display);
}

/* The largest voice in the system. Use once per page at most. */
.emmgs-colossal {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--colossal);
	font-weight: 600;
	line-height: 0.9;
	letter-spacing: -0.04em;
}

/* Standing lede beneath a headline. */
.emmgs-lede {
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.42;
	letter-spacing: -0.011em;
	color: var(--surface-muted);
	max-width: var(--wp--custom--measure--lede);
}

/* Editorial serif moment — pull quotes, venture manifesto lines. */
.emmgs-editorial {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1.34;
	letter-spacing: -0.01em;
}

/* The pillar transform line: "Ideas → working systems." */
.emmgs-transform {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
	color: var(--surface-muted);
}

.emmgs-muted {
	color: var(--surface-muted);
}

/* -------------------------------------------------------------------------
 * 2. Measure
 * ---------------------------------------------------------------------- */

.emmgs-measure {
	max-width: var(--wp--custom--measure--prose);
}

.emmgs-measure-lede {
	max-width: var(--wp--custom--measure--lede);
}

.emmgs-measure-narrow {
	max-width: var(--wp--custom--measure--narrow);
}

/* -------------------------------------------------------------------------
 * 3. Sections & rhythm
 * ---------------------------------------------------------------------- */

.emmgs-section {
	padding-block: var(--wp--preset--spacing--70);
}

.emmgs-section--tight {
	padding-block: var(--wp--preset--spacing--60);
}

.emmgs-section--chapter {
	padding-block: var(--wp--preset--spacing--80);
}

.emmgs-section--flush-top {
	padding-block-start: 0;
}

.emmgs-section--flush-bottom {
	padding-block-end: 0;
}

/* Hairline divider that respects the current surface. */
.emmgs-rule {
	border: 0;
	border-top: 1px solid var(--surface-line);
	margin: 0;
	opacity: 1;
}

/* Section header: label on the left, headline block on the right at desktop,
   stacked on mobile. The asymmetry is the point. */
.emmgs-sectionhead {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
	.emmgs-sectionhead {
		grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
		align-items: start;
	}
}

/* A section head is a left-aligned column. WordPress's constrained layout
   centres a group's children inside whatever width it is given, which reads as
   centred text in the wide right-hand column. Three classes of specificity
   beats the layout support's container rule without !important. */
.emmgs-sectionhead.emmgs-sectionhead .wp-block-group > *,
.emmgs-sectionhead.emmgs-sectionhead > .wp-block-group {
	margin-inline-start: 0;
	margin-inline-end: 0;
}

/* core/template-part always wraps its content in an element, and does not
   emit an align class server-side. When the part contains a full-bleed section
   — the shared CTA — that wrapper traps it at content width. Match the wrapper
   on what it contains and give it the same treatment .alignfull would get.
   The section inside carries its own global padding, so no inset is lost. */
.is-layout-constrained > .wp-block-template-part:has(> .alignfull) {
	max-width: none;
	margin-inline-start: calc(var(--wp--style--root--padding-left) * -1);
	margin-inline-end: calc(var(--wp--style--root--padding-right) * -1);
}

/* -------------------------------------------------------------------------
 * 4. Grids
 *
 * All grids are intrinsically responsive — they reflow by available width
 * rather than by breakpoint, so they behave correctly inside any container.
 * ---------------------------------------------------------------------- */

/* WordPress's flow layout adds margin-block-start between a group's children.
   Inside a grid that fights the gap. The doubled class raises specificity just
   enough to win against the layout support's container rule without !important. */
.emmgs-grid.emmgs-grid > *,
.emmgs-split.emmgs-split > *,
.emmgs-pillar.emmgs-pillar > *,
.emmgs-pillars.emmgs-pillars > *,
.emmgs-process.emmgs-process > *,
.emmgs-rows.emmgs-rows > *,
.emmgs-capability.emmgs-capability > *,
.emmgs-sectionhead.emmgs-sectionhead > * {
	margin-block: 0;
}

.emmgs-grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.emmgs-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}

.emmgs-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.emmgs-grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--40);
}

.emmgs-grid--tight {
	gap: var(--wp--preset--spacing--30);
}

/* Editorial split: text column and a wider media column. */
.emmgs-split {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 56rem) {
	.emmgs-split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: var(--wp--preset--spacing--60);
	}

	/* `order` moves the item but not the track, so the ratio has to flip too,
	   or the primary content ends up in the narrow column. */
	.emmgs-split--reverse {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.emmgs-split--reverse > :first-child {
		order: 2;
	}
}

/* Stacked definition rows — capabilities, process steps, results. */
.emmgs-rows {
	display: grid;
	gap: 0;
}

.emmgs-rows > * {
	border-top: 1px solid var(--surface-line);
	padding-block: var(--wp--preset--spacing--40);
}

.emmgs-rows > *:last-child {
	border-bottom: 1px solid var(--surface-line);
}

/* -------------------------------------------------------------------------
 * 5. Bleed & alignment helpers
 * ---------------------------------------------------------------------- */

/* Break a block out to the full viewport width from inside a padded parent. */
.emmgs-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* Prevent the bleed from causing overflow when a scrollbar is present. */
@supports (width: 100dvw) {
	.emmgs-bleed {
		width: 100dvw;
		max-width: 100dvw;
		margin-inline: calc(50% - 50dvw);
	}
}

/* -------------------------------------------------------------------------
 * 6. Aspect ratios for media
 * ---------------------------------------------------------------------- */

.emmgs-ratio-wide > img,
.emmgs-ratio-wide .wp-block-post-featured-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}

.emmgs-ratio-editorial > img,
.emmgs-ratio-editorial .wp-block-post-featured-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.emmgs-ratio-portrait > img,
.emmgs-ratio-portrait .wp-block-post-featured-image img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
}

/* On narrow screens, tall crops waste the fold. Relax them. */
@media (max-width: 47.99rem) {
	.emmgs-ratio-portrait > img,
	.emmgs-ratio-portrait .wp-block-post-featured-image img {
		aspect-ratio: 4 / 3;
	}
}