/* ==========================================================================
   CALLOUT — a dark navy feature card   (visual only)
   ==========================================================================
   A self-contained dark card for a highlighted message: eyebrow, optional oversized numeral, heading, body, and links.

   Build: element_group `callout` (usually a `col-1-2` inside a `row`) → a
   `text` element:
        <p class="eyebrow on-dark">SECURE 2.0</p>
        <h2 class="numeral">2.0</h2>
        <h3>The small-plan market is booming…</h3>
        <p>SECURE 2.0 incentives and state mandates…</p>
        <p><a href="…">Download the flyer (PDF)</a></p>

   Colours come from --prime-deep; text/heading are forced white here.
   ========================================================================== */
.callout {
    background: var(--prime-deep);
    color: var(--text-on-dark-dim);
    padding: clamp(24px, 3vw, 44px);
    border-radius: 8px;
    height: 100%;

    .eyebrow.on-dark { margin-bottom: 0.6em; }

    /* Oversized brand numeral (echoes the eyebrow). `.numeral` is authored on the
       heading, so it survives the editor; falls back to a plain h2 if stripped. */
    .numeral, h2 {
        font-family: var(--type-display);
        font-size: clamp(2.5rem, 6vw, 4rem);
        line-height: 0.95;
        color: var(--white);
        margin: 0 0 0.15em;
    }
    h3 {
        color: var(--white);
        font-size: clamp(1.25rem, 2.2vw, 1.6rem);
        line-height: 1.2;
        margin: 0 0 0.6em;
    }
    p { color: var(--text-on-dark-dim); }

    a {
        color: var(--white);
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    a:hover { text-decoration-thickness: 2px; }
}

/* ---- Outline variant — a light bordered "deliverable" card -------------- */
/* White fill, 1px prime border, square corners: a quiet card for a short
   promise. Display-face heading + body copy. Stack two or more and they space themselves. */
.callout--outline {
    background: var(--white);
    color: var(--text-body);
    border: 1px solid var(--prime);
    border-radius: 0;
    height: auto;
    padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 30px);
    + .callout--outline { margin-top: clamp(16px, 1.8vw, 20px); }
    h3 {
        font-family: var(--type-display);
        font-weight: 700;
        color: var(--heading);
        font-size: clamp(1.3rem, 1.9vw, 1.6875rem);   /* ~27px */
        line-height: 1.2;
        margin: 0 0 0.4em;
    }
    p {
        color: var(--text-body);
        font-size: clamp(0.9rem, 1.05vw, 0.9375rem);   /* ~15px */
        line-height: 1.5;
        margin: 0;
    }
}