/* ERDI Phase 2 — media layer.
   Loads after erdi-phase1.css. Everything here exists because a tile, a card
   or a band now carries a purpose-made asset instead of a square cutout.
   No rule in this file restates one already made in erdi-phase1.css. */

/* ---------- A3/B1: tile-aspect assets, so the tiles fill ---------- */
.ox-showcase-media>img,
.ox-feature-product>img,
.ox-film-card img,
.ox-story-stage>img{
  object-fit:cover!important/* wp-override: wp-block-library object-fit */;
  padding:0!important/* wp-override: wp-block-library layout/spacing */;
  mix-blend-mode:normal!important/* wp-override: wp-block-library mix-blend-mode */;
}
.ox-showcase-media>img{transform:scale(1.02)}
.ox-showcase-media:hover>img{transform:scale(1.06)}
.ox-feature-product{background:var(--e-ink-2)}
.ox-film-card>div{background:var(--e-ink-2)}
.ox-showcase-media{background:var(--e-ink-2)}

/* ---------- D3/D4: model detail media ---------- */
main.erdi-model .op-hero__visual img{object-fit:cover}
main.erdi-model .op-tab img{object-fit:cover;background:var(--e-olive-100)}
main.erdi-model .op-panel__visual img{object-fit:cover}
main.erdi-model .op-related-card figure img{object-fit:cover}

/* ---------- Shared full-bleed media band (D4, J5) ---------- */
.e2-band{
  margin:72px auto;
  width:var(--e-shell-band);
  max-width:var(--e-w-band);
}
.e2-band img{
  display:block;width:100%;height:540px;object-fit:cover;
  border-radius:4px;background:var(--e-olive-100);
}
.e2-band figcaption{
  margin-top:16px;font:var(--e-fw-400) var(--e-fs-100)/1.5 var(--e-font,inherit);color:var(--e-olive-600);
}
.e2-band--model{margin:64px auto 8px}

/* ---------- F1: article lead media ---------- */
body.single-post main.wp-block-group:has(.e2-lead):before{content:none!important/* wp-override: wp-block-library-inline-css content */}
.e2-lead{
  margin:0 0 48px;width:100%;max-width:var(--e-w-1000);
}
.e2-lead img{
  display:block;width:100%;height:546px;object-fit:cover;
  border-radius:4px;background:var(--e-olive-100);
}

/* ---------- F2/K2: listing and search thumbnails ---------- */
.e2-thumb{
  display:block;width:100%;margin:0 0 16px;border-radius:3px;overflow:hidden;
  background:var(--e-olive-100);aspect-ratio:443/250;
}
.e2-thumb--featured{aspect-ratio:1360/420}
.e2-thumb img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--e-ease,ease);
}
.e2-thumb:hover img{transform:scale(1.04)}
@media(max-width:900px){.e2-thumb--featured{aspect-ratio:1000/546}}
.ox-knowledge-query .wp-block-post>.wp-block-group{border-top-width:0!important/* wp-override: wp-block-library-inline-css layout/spacing */;padding-top:0!important/* wp-override: wp-block-library-inline-css layout/spacing */}

.ox-search-results .wp-block-post:has(.e2-thumb){
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 32px;align-items:start;
}
.ox-search-results .e2-thumb{margin:0;aspect-ratio:200/120}
.ox-search-results .e2-thumb img{height:100%}

/* ---------- H3: contact hero band + CTA list ---------- */
.e2-contact-hero{
  margin:0 0 56px;width:min(var(--e-w-1440),100%);
}
.e2-contact-hero img{
  display:block;width:100%;height:385px;object-fit:cover;border-radius:4px;background:var(--e-olive-100);
}
.e2-cta-list{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  margin:72px 0 0;
}
.e2-cta-card{
  display:flex;flex-direction:column;gap:8px;
  min-height:225px;padding:32px 24px 24px;
  --e-btn-bg:var(--e-slate-50);--e-btn-r:3px;--e-btn-fg:var(--e-ink);text-decoration:none;
  transition:background-color .25s ease-in-out,color .25s ease-in-out;
}
.e2-cta-card:hover{--e-btn-bg:var(--e-ink);--e-btn-fg:var(--e-slate-50)}
.e2-cta-kicker{font-size:var(--e-fs-100);letter-spacing:.06em;color:var(--e-olive-600)}
.e2-cta-card:hover .e2-cta-kicker{color:var(--e-olive-400)}
.e2-cta-card h3{margin:0;font:var(--e-fw-400) var(--e-fs-300)/1.3 var(--e-font,inherit)}
.e2-cta-card p{margin:0;font-size:var(--e-fs-200);line-height:1.5}
.e2-cta-link{margin-top:auto;font-size:var(--e-fs-100);display:inline-flex;gap:8px;align-items:center}
.e2-cta-link i{font-style:normal}

/* ---------- E2/E3: solutions chapters ---------- */
.e2-chapter-media{
  margin:0 0 32px;width:100%;
}
.e2-chapter-media{max-width:var(--e-w-band)}
.e2-chapter-media img{
  display:block;width:100%!important/* wp-override: wp-block-library layout/spacing */;max-width:var(--e-w-band)!important/* wp-override: wp-block-library layout/spacing */;height:auto!important/* wp-override: wp-block-library layout/spacing */;
  border-radius:4px;background:var(--e-olive-100);object-fit:cover!important/* wp-override: wp-block-library object-fit */;
}
main.wp-block-group .ox-application .oa-directory-row.e2-chapter{display:block;padding-bottom:72px}
main.wp-block-group .ox-application .oa-directory-row.e2-chapter .oa-directory-copy{max-width:var(--e-m-900)}
main.wp-block-group .ox-application .oa-directory-row.e2-chapter h2{font-size:var(--e-fs-500);line-height:1.3}
main.wp-block-group .ox-application .oa-directory-row.e2-chapter p{font-size:var(--e-fs-200);line-height:1.5}
main.wp-block-group .ox-application .oa-directory-row.e2-chapter .e2-chapter-media{
  margin:0 auto 40px;width:min(var(--e-w-band),calc(100% - 82px));
}
main.wp-block-group .ox-application .oa-directory-row.e2-chapter .oa-directory-product{
  display:flex;flex-direction:column;gap:16px;
  width:328px;max-width:100%;min-height:0;margin:0 0 0 40px;
  padding:0;background:transparent;border:0;overflow:visible;
}
/* the application stylesheet reaches these with `main.wp-block-group
   .ox-application .oa-directory-product img`, so the override has to match
   that weight to win. */
main.wp-block-group .ox-application .oa-directory-row.e2-chapter .oa-directory-product img{
  display:block;width:100%;height:440px;object-fit:cover;
  padding:0;mix-blend-mode:normal;border-radius:4px;background:var(--e-olive-100);
}
main.wp-block-group .ox-application .oa-directory-row.e2-chapter .oa-directory-model{font-size:var(--e-fs-300)}
main.wp-block-group .ox-application .oa-directory-row.e2-chapter .oa-directory-interface{
  margin-top:0;padding-top:12px;
}
.e2-chapter-media--model{margin:56px 0 24px}
figure.oa-product-stage img{width:100%;height:auto;object-fit:cover}

/* ---------- J4: video poster grid ---------- */
.ox-videos .erdi-videogrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 16px;
  list-style:none;margin:0;padding:0;
}
.ox-videos .erdi-videogrid__card{
  position:relative;margin:0;padding:0;border:0;background:none;min-width:0;
}
.ox-videos .erdi-videogrid__card video{
  display:block;width:100%;height:250px;object-fit:cover;
  background:var(--e-ink-2);border-radius:3px;
}
.ox-videos .erdi-videogrid__body{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-top:12px;
}
.ox-videos .erdi-videogrid__dur{
  position:absolute;right:10px;top:220px;
  background:color-mix(in srgb,var(--e-ink) 80%,transparent);color:var(--e-slate-50);font-size:var(--e-fs-100);line-height:1.25;
  padding:8px 8px;border-radius:2px;
}
.ox-videos .erdi-videogrid__card br{display:none}
.ox-videos .erdi-videogrid__link{flex:1 0 100%;min-height:44px;display:flex;align-items:center}
.ox-videos .ox-video-feature .erdi-page__video video{width:100%;height:auto;max-height:765px}

/* ---------- G2: about documentary band ---------- */
.ed-about-film .e2-film{margin:0;width:100%}
.ed-about-film .e2-film video{
  display:block;width:100%;max-width:var(--e-w-band);height:auto;aspect-ratio:16/9;
  background:var(--e-ink-2);border-radius:4px;
}
.ox-company-hero img,.ox-intro-image img{object-fit:cover}

/* ---------- mobile ---------- */
@media(max-width:900px){
  .e2-band{margin:48px auto;width:calc(100% - 32px)}
  .e2-band img{height:auto;aspect-ratio:1360/540}
  .e2-lead{margin-bottom:32px}
  .e2-lead img{height:auto;aspect-ratio:1000/546}
  .e2-contact-hero{margin-bottom:32px}
  .e2-contact-hero img{height:auto;aspect-ratio:1440/385}
  .e2-cta-list{grid-template-columns:1fr;margin-top:48px}
  .e2-cta-card{min-height:0}
  .ox-search-results .wp-block-post:has(.e2-thumb){grid-template-columns:1fr;gap:16px}
  .ox-search-results .e2-thumb{aspect-ratio:443/250}
  .ox-videos .erdi-videogrid{grid-template-columns:1fr;gap:32px}
  .ox-videos .erdi-videogrid__card video{height:auto;aspect-ratio:886/500}
  .ox-videos .erdi-videogrid__dur{position:static;align-self:center}
  .e2-chapter-media{margin-bottom:24px}
  main.wp-block-group .ox-application .oa-directory-row.e2-chapter{padding-bottom:40px}
  main.wp-block-group .ox-application .oa-directory-row.e2-chapter .e2-chapter-media{
    width:calc(100% - 32px);margin:0 16px 24px;
  }
  main.wp-block-group .ox-application .oa-directory-row.e2-chapter .oa-directory-product{
    width:calc(100% - 32px);margin:0 16px;padding:0;
  }
  main.wp-block-group .ox-application .oa-directory-row.e2-chapter .oa-directory-product img{
    height:auto;aspect-ratio:328/440;max-height:480px;
  }
  .oa-directory-row.e2-chapter h2{font-size:var(--e-fs-300)}
  .oa-directory-row.e2-chapter p{font-size:var(--e-fs-200)}
}

/* 2026-09-21 supervisor: photo-hero image must never exceed viewport (drivers page overflow) */
.ox-photo-hero img{max-width:100%;width:100%;height:auto}

/* ====================================================================
   W4-C  --  type system render, measure, MH-1 caption, MH-2 dark frames,
   brand lockup.  This sheet is enqueued last (erdi-phase2), so these rules
   settle ties without adding a single forced override.
   ==================================================================== */

/* 1. Line-height floors: body >= 1.5, headings >= 1.2 (bar section 3). */
body :is(p, li, dd, blockquote) { line-height: var(--e-lh-body); }
body :is(h1, h2, h3, h4, h5, h6) { line-height: var(--e-lh-head); }

/* 2. Measure. Tokens on prose containers -- never a global ch cap, so
   tables, spec grids and the comparison matrix keep their own widths. */
.erdi-prose,
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol,
.ox-knowledge__body > p,
.ox-knowledge__body > ul,
.ox-knowledge__body > ol,
.ox-article__body > p,
.ox-article__body > ul,
.ox-article__body > ol,
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
	max-width: min(var(--e-measure), var(--e-measure-px));
}

main :is(.op-hero, .oa-intro, .oa-close, .ox-intro, .ox-lede, .ox-section__intro) p {
	max-width: min(var(--e-measure), var(--e-measure-px));
}

@media (max-width: 900px) {
	.erdi-prose,
	.wp-block-post-content > p,
	.wp-block-post-content > ul,
	.wp-block-post-content > ol,
	.ox-knowledge__body > p,
	.ox-article__body > p,
	.entry-content > p {
		max-width: var(--e-measure-narrow);
	}
}

/* tables, spec grids and the compare matrix are explicitly out of the cap */
:is(table, .oc-table, .erdi-spec-table, .erdi-compare-table, .ox-spec, .oa-download-table) :is(p, li) {
	max-width: none;
}

/* 3. MH-2, surface 3 of 4: /models/ comparison-row thumbnail at 390.
   The frame was olive-100 with the plate multiplied onto it, which left a
   ~6 px olive letterbox top and bottom of every row. Dark frame + normal
   blend integrates the plate instead of boxing it. */
main.erdi-model .oc-mobile-value img {
	background: var(--e-ink-2);
	mix-blend-mode: normal;
}
main.erdi-model .oc-mobile-value picture {
	display: block;
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
}
main.erdi-model .oc-mobile-value picture img { width: 100%; height: 100%; }

/* 4. MH-2, surface 4 of 4: the /solutions/ model card. It was a light frame
   (olive-200) with mix-blend-mode:multiply around a dark plate -- the exact
   inversion MH-2 exists to kill. Dark frame, normal blend, light caption.
   Written so it holds for the current <img> and for the <picture> that W12
   will swap in. */
main.wp-block-group .ox-application .oa-dark-product {
	background: var(--e-ink-2);
}
main.wp-block-group .ox-application .oa-dark-product picture {
	display: block;
	width: 100%;
	height: 100%;
}
main.wp-block-group .ox-application .oa-dark-product :is(img, picture > img) {
	mix-blend-mode: normal;
	background: transparent;
}
main.wp-block-group .ox-application .oa-dark-product > span {
	color: var(--e-white);
}

/* 5. MH-1 caption rule, handed back by W2.3. A .op-hero__provenance sibling
   of the plate <picture> renders as a caption below the plate and takes no
   space from it -- the plate keeps the full visual box. Markup lands in W12
   / W2.4; this is the CSS waiting for it. */
main.erdi-model .op-hero__visual:has(.op-hero__provenance) { display: block; }
main.erdi-model .op-hero__visual > picture {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
main.erdi-model .op-hero__provenance {
	position: absolute;
	z-index: 2;
	left: 80px;
	right: 80px;
	bottom: 12px;
	margin: 0;
	font-size: var(--e-fs-100);
	line-height: var(--e-lh-body);
	letter-spacing: 0.01em;
	color: color-mix(in srgb, var(--e-white) 78%, transparent);
	text-wrap: pretty;
}
@media (max-width: 900px) {
	main.erdi-model .op-hero__provenance { left: 16px; right: 16px; bottom: 8px; }
}

/* 6. Brand lockup -- one treatment sitewide. Logo mark + rule + "LRF MODULES".
   Spacing is expressed as tokens (--e-lockup-*), so ERDILASER(R), ERDI|LASER
   and erdilrf.com all resolve to this one lockup. */
.ox-lockup {
	display: flex;
	align-items: center;
	gap: var(--e-lockup-gap);
	min-width: 0;
}
.ox-lockup .ox-logo { display: flex; align-items: center; }
.ox-lockup__rule {
	display: block;
	width: 1px;
	height: var(--e-lockup-rule);
	flex: 0 0 1px;
	background: currentColor;
	opacity: 0.32;
}
.ox-lockup .ox-nav-feature,
.ox-menu-intro,
.erdi-wordmark {
	font-family: var(--e-font, ErdiManrope, sans-serif);
	font-size: var(--e-fs-100);
	font-weight: var(--e-fw-600);
	line-height: var(--e-lh-head);
	letter-spacing: var(--e-lockup-track);
	text-transform: uppercase;
}
.ox-lockup .ox-nav-feature span,
.ox-menu-intro span {
	font-size: var(--e-fs-100);
	font-weight: var(--e-fw-400);
	letter-spacing: var(--e-lockup-track);
}
@media (max-width: 900px) {
	.ox-lockup { gap: 8px; }
	.ox-lockup__rule { height: 16px; }
}

/* ====================================================================
   W4-C.1  --  send-back round. Reviewer Important 1-4 plus the tap-target
   regression W4-C introduced. No forced overrides added.
   ==================================================================== */

/* 1. TAP TARGETS (section 15 / W3). Root cause of 48->96 axe target-size and
   1098->1404 sub-44 taps was this lane's own lockup: .ox-lockup used
   align-items:center, which collapsed .ox-logo and .ox-nav-feature from the
   full nav height to their 21 px content box on all 74 URLs. */
.ox-lockup { align-items: stretch; }
.ox-lockup .ox-logo,
.ox-lockup .ox-nav-feature {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Footer glyph links kept their 44 px height but their width fell to ~14 px
   when the type scale landed. */
.ox-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* A 14 px link on the 1.5 line-height floor renders a 21 px box, 3 px under the
   24x24 pointer target. Vertical padding extends an inline box's hit rect
   without moving a single line, so this is layout-neutral where the link is
   inline, and only grows the row where it is already a block. */
:is(.ox-footer, .ox-footer-map, .ox-footer-main, .ox-footer-legal,
    .ox-footer-brand, .ox-footer-sla, .ox-nav, .ox-mega, .ox-menu,
    .ox-mg-grid, .ox-mg-card, .ox-feature-grid, .erdi-qa, .ox-page,
    .erdi-page, .ox-knowledge) a:not(.erdi-sr-only) {
	padding-block: 4px;
}
.ox-mg-family { padding-block: 4px; }

@media (pointer: coarse) {
	:is(.ox-footer, .ox-footer-map, .ox-footer-main, .ox-footer-legal,
	    .ox-footer-brand, .ox-footer-sla, .ox-nav, .ox-mega, .ox-menu,
	    .ox-mg-grid, .ox-mg-card, .ox-feature-grid, .erdi-qa, .ox-page,
	    .erdi-page, .ox-knowledge) a:not(.erdi-sr-only) {
		padding-block: 12px;
	}
	.ox-mg-family { padding-block: 12px; }
}

/* 2. FAMILIES (reviewer Important 1 + 2). One mono role, self-hosted, declared
   once. The 31 generic `monospace` nodes were the browser UA stylesheet on
   code/kbd/samp/pre, and the single `Menlo` node was WordPress core's
   .wp-block-code stack -- neither had a theme counterpart. Both now resolve to
   the one declared mono face, so a page computes at most 2 families. */
.ox-footer-map summary,
.oa-code-grid pre,
code, kbd, samp, pre,
.wp-block-code, .wp-block-code code, .wp-block-preformatted,
.wp-block-verse {
	font-family: var(--e-font-mono);
}
code, kbd, samp, pre,
.wp-block-code, .wp-block-code code, .wp-block-preformatted {
	font-size: var(--e-fs-100);
}

/* 3. SUB-14 px LEFTOVERS. The 13 px <time> on /knowledge/ (20 nodes) and the
   UA `smaller` on sub/sup (4 nodes at 10.8 px). */
time { font-size: var(--e-fs-100); }
sub, sup { font-size: var(--e-fs-100); line-height: 0; }

/* 4. MEASURE COVERAGE. Two levers, both token-driven: cap the prose blocks that
   run wide, and drop card copy that sits in a 425-480 px column onto the
   caption step, which puts it back inside 60-80 ch without touching the grid. */
.erdi-qa__a,
.erdi-qa__a > p,
.ox-introduction > p,
.ox-dealer-section > p,
.ox-download-section > p,
.ox-editorial-cta > p,
.ed-contact-form > p,
.ox-page > p,
.ox-page > ul > li,
.erdi-page > p,
.ox-knowledge > p,
.ox-story-caption > div > p,
.wp-block-post-excerpt > p {
	max-width: min(var(--e-measure), var(--e-measure-px));
}

.ox-knowledge-query .wp-block-post-template > li,
.ox-knowledge-query .wp-block-post-excerpt,
.ox-knowledge-query .wp-block-post-excerpt p,
.ox-feature p,
.ox-feature > div > p {
	font-size: var(--e-fs-100);
}

/* ====================================================================
   W4-C.2 -- round 3: the reviewer's shortlist. No forced override added.
   ==================================================================== */

/* 1. MEASURE. The caps were losing the cascade, not missing the DOM:
   `main.wp-block-group .ox-page p{max-width:none}` in erdi-pages.css is
   (0,2,2) and beat the (0,1,1) container rules. Matching that specificity in
   the last sheet settles it on source order, so the WP-constrained-layout
   override keeps doing its job for the containers it was written for. */
main.wp-block-group :is(.ox-page, .ox-knowledge, .erdi-page, .ed-contact) :is(p, li) {
	max-width: min(var(--e-measure), var(--e-measure-px));
}
/* tables, spec grids, the compare matrix and card columns stay uncapped */
main.wp-block-group :is(table, .oc-table, .erdi-spec-table, .erdi-compare-table,
    .ox-spec, .oa-download-table, .ox-mg-grid, .erdi-product-card,
    .erdi-steps, .erdi-cases, .ox-feature-grid) :is(p, li) {
	max-width: none;
}
@media (max-width: 900px) {
	main.wp-block-group :is(.ox-page, .ox-knowledge, .erdi-page, .ed-contact) :is(p, li) {
		max-width: var(--e-measure-narrow);
	}
}

/* 2. TARGET SIZE: the model-page spec-panel sub-action links and the
   "full specifications" jump link -- the whole of the remaining axe
   target-size count (2 nodes x 24 model pages x 2 viewports). */
main.erdi-model .op-panel__subactions a,
main.erdi-model a[href$="#full-specifications"],
a[href$="#full-specifications"] {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding-block: 4px;
}
@media (pointer: coarse) {
	main.erdi-model .op-panel__subactions a,
	main.erdi-model a[href$="#full-specifications"],
	a[href$="#full-specifications"] {
		min-height: 44px;
		padding-block: 12px;
	}
	main.erdi-model .op-panel__subactions { gap: 16px; }
}

/* 3. WordPress core's own font-size presets, pinned to the scale.
   Core prints .has-<slug>-font-size with a forced font-size reading the preset var,
   unlayered, and it was still serving a cached 13px for `small` after the
   theme.json slugs were declared -- that 13px was the last sub-14 size on the
   site and the 6th size on the knowledge articles. Redefining the variable in
   the last sheet beats the cache without adding a forced override, because
   core's rule reads the variable. */
:root {
	--wp--preset--font-size--small: var(--e-fs-100);
	--wp--preset--font-size--normal: var(--e-fs-200);
	--wp--preset--font-size--medium: var(--e-fs-200);
	--wp--preset--font-size--large: var(--e-fs-300);
	--wp--preset--font-size--x-large: var(--e-fs-500);
	--wp--preset--font-size--huge: var(--e-fs-700);
	--wp--preset--font-size--larger: var(--e-fs-700);
}


/* ====================================================================
   W4-C.3 -- round 4: measure. Two levers only, both token-driven.
   (a) cap prose that runs wide; (b) move prose sitting in a 425-700 px
   column onto the scale step that puts it back inside 60-80 ch.
   The gate's proxy is width / (font-size x 0.5), so for a column of width W
   the legal sizes are W/40 <= fs <= W/30 -- which is why some blocks need a
   SMALLER step and others a LARGER one. No new literals: every size is a
   scale token, every cap is a measure token.
   ==================================================================== */

/* wide single-column prose -- the lead paragraph ran 820 px (103 ch) */
main.wp-block-group :is(.ox-page, .erdi-page) .erdi-page__lead,
main.wp-block-group :is(.ox-page, .erdi-page) > section > p,
main.wp-block-group .ox-application > section > p,
main.wp-block-group .ed-contact-layout > section > p {
	max-width: min(var(--e-measure), var(--e-measure-px));
}

/* ~600 px columns: 16 px puts them at 75 ch. These had been dropped to the
   14 px caption step in W4-C.1, which pushed them OUT of band at 86 ch. */
main.wp-block-group .ox-knowledge-query .wp-block-post-template > li,
main.wp-block-group .ed-about-certs .ed-about-cert p,
main.wp-block-group .ed-contact-layout .ed-contact-form > p,
main.wp-block-group .ox-page .ox-download-section > p {
	font-size: var(--e-fs-200);
}

/* 425-520 px columns: the 14 px step lands them at 61-74 ch */
main.wp-block-group .erdi-videogrid > li,
main.wp-block-group .ed-about-process .ed-about-steps > li,
main.wp-block-group .ox-application .oa-section-heading > p {
	font-size: var(--e-fs-100);
}

/* 640-700 px columns: cap to the measure token rather than resize */
main.wp-block-group .ox-application .oa-close > p,
main.wp-block-group .ox-application .oa-dark-grid > div > p {
	max-width: min(var(--e-measure), var(--e-measure-px));
	font-size: var(--e-fs-200);
}


/* ====================================================================
   W4-C.3b -- two defects reported by the W12.1 lane on /solutions/.
   ==================================================================== */

/* (a) W12.1 swapped .oa-dark-product to erdi_p2_model_img(), which emits a
   <picture>. The multiply blend was still reaching the plate through
   `.oa-dark-product img`, so the plate rendered as a near-black square with a
   hard edge against the dark section. Neutralise the blend on the <picture>
   AND on the image at any depth, so the old <img> and the new
   <picture> > img both integrate. The light related grid below is a different
   surface and deliberately keeps its multiply. */
main.wp-block-group .ox-application .oa-dark-product picture,
main.wp-block-group .ox-application .oa-dark-product picture img,
main.wp-block-group .ox-application .oa-dark-product :is(picture, img) {
	mix-blend-mode: normal;
	background: transparent;
	isolation: auto;
}
main.wp-block-group .ox-application .oa-dark-product picture {
	display: block;
	width: 100%;
	height: 100%;
}
main.wp-block-group .ox-application .oa-dark-product picture img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* (b) At 390 the related-grid label wrapped one character per line: the flex
   chain had no min-width:0, so the text box collapsed to min-content. */
main.wp-block-group .ox-application .oa-related-grid > a,
main.wp-block-group .ox-application .oa-related-grid > a > span {
	min-width: 0;
}
main.wp-block-group .ox-application .oa-related-grid > a > span {
	word-break: normal;
	overflow-wrap: break-word;
	writing-mode: horizontal-tb;
	white-space: normal;
	flex-wrap: wrap;
	gap: 8px;
}
main.wp-block-group .ox-application .oa-related-grid > a > span > * {
	min-width: 0;
	word-break: normal;
	white-space: normal;
}

/* (b2) W12.1's markup no longer emits the <span> the old rule targeted; the
   label-bearing anchors now render display:inline inside a zero-width flex
   child, which is what wraps them one character per line. Give the whole chain
   a real box and normal wrapping, without assuming any particular element. */
main.wp-block-group .ox-application .oa-related-grid,
main.wp-block-group .ox-application .oa-related-grid > * {
	min-width: 0;
}
main.wp-block-group .ox-application .oa-related-grid > * {
	display: flex;
	flex-direction: column;
}
main.wp-block-group .ox-application .oa-related-grid :is(a, span, div, p) {
	min-width: 0;
	white-space: normal;
	word-break: normal;
	overflow-wrap: break-word;
	writing-mode: horizontal-tb;
}
main.wp-block-group .ox-application .oa-related-grid > * > :is(a, span) {
	display: block;
	width: 100%;
}
@media (max-width: 700px) {
	main.wp-block-group .ox-application .oa-related-grid > * {
		min-width: 82%;
		flex: 0 0 82%;
	}
}


/* ====================================================================
   W4-D -- WCAG 2.2 2.5.8 on the model comparison table.
   The column-header model links are INLINE boxes 22 px tall, so the
   min-height erdi-phase1 already gives them below 781 px has no effect
   on an inline box. The display change is the fix; nothing else moves.
   (The model pages are a classic PHP template, so `main` carries no
   `wp-block-group` class -- the selector must not require it.)
   ==================================================================== */
main table thead th > a {
	display: inline-block;
	min-height: 24px;
}

@media (max-width: 781px) {
	main table thead th > a { min-height: 44px; }
}

/* W4-D -- /support/ path cards below 781 px.
   erdi-phase1's tap-target rule swaps every card anchor to
   `display:inline-flex` below 781 px, but their `flex-direction:column`
   only exists in erdi-applications' desktop block -- so the card laid its
   heading, copy and arrow out in a ROW and shrink-wrapped the copy to
   149-226 px (19-28 characters) at 390. */
@media (max-width: 781px) {
	main.wp-block-group .ox-application .oa-support-paths > a { flex-direction: column; }
}


/* ====================================================================
   W4-D.1 -- the actual +6 axe regression the brief named.
   `.oa-related-grid > p > a` is emitted EMPTY on the six
   /solutions/<slug>/ pages: no text, no children, an 8 px tall block
   443 px / 294 px wide (24 nodes). An empty link is not a tap target to
   enlarge -- it has no accessible name and nothing to click -- so it is
   removed from the box tree rather than padded out to 24/44 px. Same
   treatment erdi-phase1.css already gives `.oa-support-paths>a>p:empty`.
   The markup should stop emitting them: that is W12's to close.
   ==================================================================== */
main .oa-related .oa-related-grid > p > a:empty { display: none; }