/* ==========================================================================
   INSIGHTS   body.page-insights
   ==========================================================================
   The list and reader are article-cards.css. This file: #subscribe, the
   newsletter band — a Contao form (tl_form "insights-subscribe") laid out as
   one centred row: email field beside a white button. The field's label is
   for screen readers only (`.ins-sr-label`, the field's CSS class).
   ========================================================================== */

body.page-insights .hero__frame { --hero-frame-max: 72.2%; }   /* the board's 1300 of 1800 */

#subscribe {
    text-align: center;

    h2 {
        margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
        color: var(--white);
    }

    /* The label is for screen readers only — the design shows the placeholder. */
    .ins-sr-label label,
    & label.ins-sr-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .confirmation p { margin: 0; color: var(--white); }

    .formbody {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
        gap: 16px;
        margin: 0;

        /* Contao wraps each field in .widget; the email field takes the
           design's 560px and the submit sits beside it. These have to be
           `flex`, not `width` — forms.css gives every widget
           `flex-basis: 100%`, which beats a width on a flex item. */
        > .widget { margin: 0; }

        /* Spam protection, FLOATING (John, 8 Oct): no checkbox on the page —
           the check runs when the email field is focused, and altcha only
           pops up over the button if someone submits before it has finished.
           The widget's wrapper takes no room in the row. */
        .ins-altcha {
            flex: 0 0 0;
            min-width: 0;
            height: 0;
            margin: 0;
        }
        /* Floating altcha still pops its box (a ticked "I'm human") under the
           button once the focus check has run. Nothing shows: the check and
           its token work the same, and a submit before it finishes waits. */
        .ins-altcha altcha-widget .altcha { display: none !important; }
        .widget-text   { flex: 0 1 min(560px, 100%); }
        .widget-submit { flex: 0 0 auto; }

        /* The hidden token inputs are display:none, but be explicit so they can
           never become flex items and earn a gap (as Contao's post-form
           <script> once did). */
        > input[type="hidden"] { display: none; }

        input:not([type="submit"]) {
            width: 100%;
            text-align: left;
        }
        input:focus-visible {
            outline: 2px solid var(--white);
            outline-offset: 2px;
            border-color: var(--white);
        }

        button {
            min-height: 48px;
            padding: 0 1.5rem;
            border: 0;
            border-radius: 5px;
            background: var(--white);
            color: var(--ink);
            font-family: var(--type-body);
            font-size: 0.9375rem;
            font-weight: 600;
            cursor: pointer;

            &:hover { background: var(--cream); }
        }

        /* Validation reads on the dark band. */
        p.error, .error { color: #FFD9DA; }
        span.mandatory { display: none; }
    }
}