/* =============================================================================
   Equity commitment page (/web/equity)
   Institutional, not a landing: flat backgrounds only. A CSS gradient makes axe
   return `incomplete` instead of `pass`, so contrast stops being verifiable from
   its summary; every pair below has a ratio measured on the declared colours.
   ============================================================================= */

.eq {
    --eq-ink: #2E2A35;      /* 14.01:1 on #fff, 12.80:1 on --eq-tint */
    --eq-body: #3F3B47;     /* 10.89:1 on #fff,  9.95:1 on --eq-tint */
    --eq-muted: #4E5765;    /*  7.30:1 on #fff,  6.67:1 on --eq-tint */
    --eq-accent: #6E4287;   /*  7.52:1 on #fff,  6.87:1 on --eq-tint. Deeper than the brand
                               #8754A1 (5.51:1) so it also holds as small text. */
    --eq-band: #6E4287;     /* white on it: 7.52:1 */
    --eq-tint: #F5F4F8;
    --eq-rule: #DFDCE6;
    color: var(--eq-body);
    background: #fff;
}

.eq-wrap {
    max-width: 46rem; /* ~72ch of body copy */
}

/* -----------------------------------------------------------------------------
   Masthead
   ----------------------------------------------------------------------------- */
/* The shared public header (#header-main) is position:absolute and overlays the top of the page: 204px
   at 375px wide, 180px at 1440px. The theme clears it with `#header-main + section {padding-top:7rem}`,
   which does not reach us because our first element is <main>, not a section. So the masthead buys the
   room itself, and mobile needs MORE than desktop because the header wraps taller there. */
.eq-masthead {
    background: var(--eq-band);
    color: #fff;
    padding: 15rem 0 2.5rem;
}

.eq-eyebrow {
    margin: 0 0 .75rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    opacity: 1; /* never dim this: opacity would lower the measured ratio */
}

.eq-title {
    margin: 0 0 1.25rem;
    color: #fff;
    font-size: 1.875rem;
    line-height: 1.2;
}

.eq-lead {
    margin: 0 0 1.25rem;
    color: #fff;
    font-size: 1.0625rem;
    line-height: 1.6;
}

/* The stamp lives at the foot of the content, on the light ground, not on the purple masthead: the
   PRD puts publication date, cadence and contact together at the end. White here would be invisible. */
.eq-stamp {
    margin: 1rem 0 0;
    color: var(--eq-muted);  /* 7.30:1 on #fff */
    font-size: .875rem;
}

/* -----------------------------------------------------------------------------
   Body
   ----------------------------------------------------------------------------- */
.eq-body {
    padding: 2.75rem 0 3.5rem;
}

.eq-section + .eq-section {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--eq-rule);
}

.eq-h2 {
    margin: 0 0 .75rem;
    color: var(--eq-ink);
    font-size: 1.3125rem;
    line-height: 1.3;
}

.eq-h3 {
    margin: 0 0 .35rem;
    color: var(--eq-ink);
    font-size: 1rem;
    line-height: 1.35;
}

.eq p {
    margin: 0 0 1rem;
    line-height: 1.7;
}

.eq p:last-child {
    margin-bottom: 0;
}

/* Inline links are NOT distinguished by colour. The theme sets `a { text-decoration: none }`, and the
   accent against body text is 1.45:1, far under the 3:1 a colour-only cue would need. Hence a permanent
   underline, kept on hover, plus a real focus ring. */
.eq-link {
    color: var(--eq-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.eq-link:hover {
    color: var(--eq-ink);
    text-decoration: underline;
}

.eq-link:focus-visible {
    color: var(--eq-ink);
    outline: 2px solid var(--eq-accent);
    outline-offset: 2px;
    text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   Figures. A definition list, not cards: the term/value pair survives without the
   visual order, which is what a screen reader gets.
   ----------------------------------------------------------------------------- */
.eq-figures {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    margin: 1.5rem 0 1rem;
    background: var(--eq-rule);
    border: 1px solid var(--eq-rule);
}

.eq-figure {
    background: var(--eq-tint);
    padding: 1rem 1.125rem;
}

.eq-figure-value {
    margin: 0;
    color: var(--eq-accent);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
}

.eq-figure-label {
    margin: .25rem 0 0;
    color: var(--eq-muted);
    font-size: .9375rem;
    line-height: 1.45;
}

.eq-note {
    color: var(--eq-muted);
    font-size: .875rem;
    line-height: 1.55;
}

/* -----------------------------------------------------------------------------
   English block
   ----------------------------------------------------------------------------- */
.eq-en-list {
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.eq-en-list > li + li {
    margin-top: 1.25rem;
}

/* -----------------------------------------------------------------------------
   Wider viewports
   ----------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .eq-masthead {
        padding: 13rem 0 3.5rem;
    }

    .eq-title {
        font-size: 2.5rem;
    }

    .eq-lead {
        font-size: 1.125rem;
    }

    .eq-body {
        padding: 3.5rem 0 4.5rem;
    }

    .eq-h2 {
        font-size: 1.5rem;
    }

    .eq-figures {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* -----------------------------------------------------------------------------
   Print. The real use case is attaching this page to a certification dossier, so
   the whole text must survive on paper without coloured backgrounds.
   ----------------------------------------------------------------------------- */
@media print {
    .eq-masthead {
        background: #fff;
        color: #000;
        padding: 0 0 1rem;
        border-bottom: 2px solid #000;
    }

    .eq-eyebrow,
    .eq-title,
    .eq-lead {
        color: #000;
    }

    .eq-stamp {
        color: #000;
    }

    .eq-figure {
        background: #fff;
    }

    .eq-figure-value,
    .eq-link {
        color: #000;
    }

    .eq-link {
        text-decoration: underline;
    }

    .eq-section {
        page-break-inside: avoid;
    }
}

/* -----------------------------------------------------------------------------
   English block: it now carries its own eyebrow, and the figures block uses <strong>
   inside prose rather than a definition list.
   ----------------------------------------------------------------------------- */
.eq-eyebrow-en {
    color: var(--eq-accent);  /* 7.52:1 on #fff */
    margin-bottom: .5rem;
}

.eq strong {
    color: var(--eq-ink);     /* 14.01:1 on #fff */
    font-weight: 700;
}

.eq-stamp {
    line-height: 1.6;
}