, so it anchors to the initial containing block instead — which is what puts it over the card without being clipped by this element's overflow:hidden. See .idia-header--over-hero in assets/css/header.css. */ position: relative; } /* No .has-global-padding zeroing rule here, unlike page-hero.css and hero-card.css. Nothing to zero: the outer section has no `layout` attribute (see the pattern file's own comment for why that is load-bearing), so WordPress never adds .has-global-padding to it and the rail is granted natively to .idia-contact-hero__container alone. Adding a compensating padding-inline here would be the bug AGENTS.md §8.1a warns about, not the fix. KNOWN AUDIT FAILURE, not weakened: invariant 1 reports the container at "left edge 16.0px; expected 32px". Its BORDER box does start at the card edge; its CONTENT starts at 48px (16 inset + 32 rail), which is correct. The check compares border-box left edges, so every element that carries the rail as padding inside a card surface reads as off-rail — the home hero card's own inner section fails identically on the front page and did so before this work. Systemic to the check, not to this section. Left failing rather than papered over. */ /* ---- Row: bottom-aligned two-column, column at <=991 ---- Row children default to min-width:auto and refuse to shrink below their content width; both columns need min-width:0 or long unbroken text (an email address, a long headline) overflows the row instead of wrapping — which matters more now that the row is nowrap. layout:flex on the block attribute renders `display:flex` and the nowrap; this file supplies what block attributes cannot express (align-items, the responsive direction switch, and shrink behaviour). align-items lives ONLY here — the pattern's verticalAlignment attribute was removed so one property has one mechanism. */ .idia-contact-hero__row { justify-content: space-between; align-items: flex-end; } .idia-contact-hero__title-column, .idia-contact-hero__meta-column { min-width: 0; } .idia-contact-hero__meta-column { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--32); } /* Row collapses at 991, not 767 — the reference's own breakpoint, and the reason an earlier build broke on tablet (it only handled 767). Gap 28px flat: the reference sets grid-column-gap:28px once at <=991 and never overrides it again down to 479px, which does not match spacing preset 28's own built-in step (28 -> 24 -> 18, AGENTS.md §8.4) — a per-section override, matching how contact.css/work.css already override a preset's curve for the same reason, not a new token. */ @media (max-width: 991px) { .idia-contact-hero__row { flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--28); } } /* Badge shrinks at <=479, matching the reference's .tag-wrapper override (font-size 12px, padding 4px 10px). The vertical padding needs !important, and that is not a shortcut. The badge's padding is a BLOCK ATTRIBUTE, so WordPress renders it as an inline style attribute on the element — and an inline style beats any selector in any stylesheet regardless of specificity. Keeping it a block attribute is deliberate (it is what makes the padding editable from the block's Dimensions panel, AGENTS.md §0), so the only way a breakpoint override can reach it is !important. Measured: without it the 479 padding stayed 8px 12px. Ruled out first: (a) dropping the attribute and setting padding in CSS — would take the control out of Appearance → Editor; (b) putting the override on the .idia-hero-card__badge chassis in footer-cta.css — same inline-style problem, and it would hit the home hero and footer CTA badges too, which have no such breakpoint in the reference. This is an override of an inline style, not a compensating offset — the thing AGENTS.md §8.1a warns about is adding padding to push misplaced content back into place, which is not what this is. Tokens only: `x-small` is 12px, spacing 4 is 4px. The reference's 10px horizontal has NO token (spacing 8 and 12 bracket it), so the horizontal padding is deliberately left at the inherited 12px rather than inlining a raw 10px — a 2px deviation, reported not resolved. */ @media (max-width: 479px) { .idia-contact-hero .idia-hero-card__badge { font-size: var(--wp--preset--font-size--x-small); padding-top: var(--wp--preset--spacing--4) !important; padding-bottom: var(--wp--preset--spacing--4) !important; } } /* ============================================================ Nav — moved out ============================================================ This page's nav is no longer nested inside the hero. The header unification step replaced it with the one global header template part, applied by templates/page-contact.html at its .idia-header--over-hero variant; every rule that used to live here — the 12px+rail offset, the 38px row gap, the light colour treatment and the responsive padding — now lives in assets/css/header.css. The premise this section used to state was wrong and is corrected here for the record: it claimed the reference nests .navbar inside .header-block as a layout child, and that we had to nest ours to match. The reference's own CSS says otherwise — .navbar { z-index:3; position:absolute; inset:0% 0% auto; ... } position:absolute with inset:0 0 auto makes it an OVERLAY, not a layout child. Webflow nests it in each page's DOM only because it has no template-part concept; stodio ships exactly one navbar markup across every page, varying only by a colour variant class. We have template parts, so we use one. */