/**
 * Metalumina Flagship — Responsive, motion & print
 *
 * Breakpoints, in order of appearance:
 *   1180  five-stage pipeline folds to a 3+2 grid
 *   1024  splits collapse, three-up grids become two-up
 *    900  navigation becomes a drawer
 *    640  everything single column
 */

/* ── ≤ 1180 ─────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
	/* The pipeline can no longer hold five columns legibly. Drop the
	   connectors and lay the stages out as a wrapping grid. */
	.ml-pipeline {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--ml-s-4);
	}

	.ml-pipeline__link {
		display: none;
	}

	.ml-stage-cell__figure {
		min-height: 92px;
	}

	.ml-note {
		border-radius: var(--ml-r-lg);
		padding: var(--ml-s-5) var(--ml-s-6);
	}
}

/* ── ≤ 1024 ─────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.ml-split,
	.ml-split--even,
	.ml-split--reverse,
	.ml-contact-cta__inner,
	.ml-contact-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ml-s-8);
	}

	/* Keep the reading order sensible when a visual sits first in source. */
	.ml-split--flip-mobile > :first-child {
		order: 2;
	}

	.ml-grid--3,
	.ml-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ml-highlights,
	.ml-stages {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The three phase panels stay side by side as long as possible — the
	   loop only reads as a sequence when they are on one line. */
	.ml-phaseloop {
		gap: var(--ml-s-4);
	}

	.ml-phase {
		padding: var(--ml-s-5);
	}

	.ml-phaseloop__arrow {
		right: calc(var(--ml-s-4) / -2 - 6px);
		width: 12px;
		height: 12px;
	}

	.ml-head {
		margin-bottom: var(--ml-s-9);
	}

	.ml-hero__content {
		max-width: 100%;
	}
}

/* ── ≤ 900 : navigation ─────────────────────────────────────────────── */

@media (max-width: 900px) {
	.ml-nav {
		display: none;
	}

	.ml-header__actions .ml-btn {
		display: none;
	}

	.ml-burger {
		display: block;
	}

	.ml-footer__main {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		row-gap: var(--ml-s-8);
	}

	.ml-footer__brand {
		grid-column: 1 / -1;
	}

	.ml-footer__tagline {
		max-width: 340px;
	}
}

/* ── ≤ 780 ──────────────────────────────────────────────────────────── */

@media (max-width: 780px) {
	.ml-pipeline {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ml-grid--2,
	.ml-grid--3,
	.ml-grid--4,
	.ml-highlights,
	.ml-stages {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Below this width the three-panel loop stacks; the arrows become
	   meaningless horizontally so they are removed rather than rotated. */
	.ml-phaseloop {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ml-s-5);
	}

	.ml-phaseloop__arrow {
		display: none;
	}

	.ml-phase__stage {
		aspect-ratio: 16 / 10;
	}

	.ml-figure__label-row {
		padding-inline: var(--ml-s-4);
	}

	.ml-figure__label {
		font-size: 10px;
		letter-spacing: 0.04em;
	}

	.ml-challenge .ml-card {
		padding-block: var(--ml-s-7);
	}
}

/* ── ≤ 640 ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	.ml-hero {
		min-height: 92svh;
		padding-top: calc(var(--ml-header-h) + var(--ml-s-7));
	}

	.ml-hero--page {
		min-height: auto;
		padding-block: calc(var(--ml-header-h) + var(--ml-s-8)) var(--ml-s-8);
	}

	.ml-hero__cue {
		display: none;
	}

	.ml-btn-row {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	.ml-btn-row .ml-btn {
		width: 100%;
	}

	.ml-card,
	.ml-highlight,
	.ml-statuscard,
	.ml-stage-cell {
		padding: var(--ml-s-6) var(--ml-s-5);
	}

	.ml-note {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ml-s-4);
	}

	.ml-footer__main {
		grid-template-columns: minmax(0, 1fr);
	}

	.ml-footer__legal {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ml-s-3);
	}

	.ml-stage-cell__figure .ml-glyph {
		width: 72px;
		height: 72px;
	}

	.ml-card__figure .ml-glyph,
	.ml-highlight__figure .ml-glyph,
	.ml-statuscard__figure .ml-glyph {
		width: 96px;
		height: 96px;
	}

	.ml-statuscard__figure,
	.ml-highlight__figure {
		min-height: 100px;
	}
}

/* ── Coarse pointers ────────────────────────────────────────────────── */

/* Hover-only affordances are pointless on touch and cost a paint, so the
   lift/glow signature is disabled rather than left to fire on tap. */
@media (hover: none) {
	.ml-card:hover,
	.ml-highlight:hover,
	.ml-statuscard:hover,
	.ml-stage-cell:hover {
		transform: none;
		box-shadow: none;
	}

	.ml-card:hover::after {
		opacity: 0;
	}
}

/* ── Reduced motion ─────────────────────────────────────────────────── */

/* Everything that moves has a still state that still communicates. The
   phase loop settles on its first panel; progress tracks render full;
   diagram strokes render drawn. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.ml-js [data-reveal],
	.ml-js .ml-hero__content > *,
	.ml-js .ml-hero__cue,
	.ml-js .ml-pipeline .ml-stage-cell,
	.ml-js .ml-drawer__list a {
		opacity: 1 !important;
		transform: none !important;
	}

	.ml-hero__canvas {
		opacity: 1;
	}

	.ml-track__fill {
		transform: scaleX(1) !important;
	}

	.ml-triad__spoke {
		stroke-dashoffset: 0 !important;
	}

	.ml-triad__glowline,
	.ml-triad__pulse {
		opacity: 0.28 !important;
	}

	.ml-pipeline__link::before {
		opacity: 0.85 !important;
	}

	.ml-cue__track::after {
		opacity: 0.6 !important;
		top: 25%;
	}
}

/* ── Print ──────────────────────────────────────────────────────────── */

@media print {
	.ml-header,
	.ml-drawer,
	.ml-progress,
	.ml-hero__canvas,
	.ml-hero__cue,
	.ml-grid-field,
	.ml-skip-link {
		display: none !important;
	}

	body {
		background: #fff;
		color: #111;
	}

	.ml-display,
	.ml-h1, .ml-h2, .ml-h3, .ml-h4 {
		color: #000;
	}

	.ml-section {
		padding-block: 2rem;
		break-inside: avoid;
	}

	.ml-card,
	.ml-highlight,
	.ml-statuscard,
	.ml-stage-cell,
	.ml-figure {
		border-color: #ccc;
		background: none;
		break-inside: avoid;
	}
}

/* ── Forced colours ─────────────────────────────────────────────────── */

@media (forced-colors: active) {
	.ml-card,
	.ml-highlight,
	.ml-statuscard,
	.ml-stage-cell,
	.ml-figure,
	.ml-formcard,
	.ml-mailcard {
		border: 1px solid CanvasText;
	}

	.ml-btn {
		border: 1px solid ButtonText;
	}

	.ml-rule,
	.ml-progress__bar {
		forced-color-adjust: none;
		background: Highlight;
	}
}