/* ============================================================
   ai-banner — "Smarter support starts here"
   Full (no image): Windscreen 1407:65573 / tablet 1407:75084 /
     mobile 1407:69163 — a full-width teal panel, 400 tall, content
     left-aligned (centred on mobile).
   Split (with image): Homepage 1407:99201 — a 720px panel beside a
     722px photo, 400 tall. Tablet keeps it (1407:99693: 461 + 283);
     mobile drops the photo.
   Full-bleed: the section has no side padding; the panel pads itself.
   ============================================================ */

.ai-banner {
    background: var(--color-surface);
}

.ai-banner__inner {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    min-height: 400px;
}

/* ── Teal panel ───────────────────────────────────────────────
   Left padding aligns the content with the site's content column
   (118px at the 1440 design width) without hardcoding it.
   ───────────────────────────────────────────────────────────── */
.ai-banner__panel {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--gradient-primary);   /* "Secondary Gradient" */
    padding-top: 57px;
    padding-bottom: 57px;
    padding-left: max(var(--space-gutter), calc((100vw - var(--layout-content-max-w)) / 2));
    padding-right: 40px;
}

/* Full: the panel takes the whole band, 80 above and below */
.ai-banner__panel--full {
    flex-basis: 100%;
    padding: 80px var(--space-gutter);
}

.ai-banner__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 484px;  /* split: 720 - 118 - 118 */
}
.ai-banner__panel--full .ai-banner__content {
    max-width: var(--layout-content-max-w);
    margin: 0 auto;
}

.ai-banner__heading-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-banner__eyebrow { margin: 0; }

/* H2 is Title Case in the Figma; the gold word is a .text-gold span */
.ai-banner__heading {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--color-text-inverse);
    text-transform: capitalize;
}

.ai-banner__body {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-text-inverse);
}

/* ── Search box ───────────────────────────────────────────────
   Figma: 42px tall, 8px/10px padding, fully rounded, a 1px pale grey
   border (not a variable, flagged) and a 12px 9% shadow, built with
   the declared "Action" effect (12px 15%, flagged). 496 wide on the
   full band.
   ───────────────────────────────────────────────────────────── */
/* The search and the compliance notice under it (Coplus, 28 Oct 2026; not in the frames) */
.ai-banner__ask {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.ai-banner__notice {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-body-small);
    line-height: var(--leading-body-small);
    color: var(--color-text-inverse);
}
.ai-banner__panel--full .ai-banner__notice { max-width: 496px; }

.ai-banner__search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 42px;
    padding: 8px 10px;
    background: var(--color-surface);
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    box-shadow: var(--shadow-action);
}
.ai-banner__panel--full .ai-banner__search { max-width: 496px; }
.ai-banner__search:focus-within {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.ai-banner__search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--color-secondary);
    flex-shrink: 0;
}
.ai-banner__search-icon svg { width: 16px; height: 16px; }

.ai-banner__search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font-family: var(--font-info);   /* Figma "Info": Quattrocento Sans Bold 13 */
    font-weight: var(--weight-bold);
    font-size: var(--text-info);
    line-height: var(--leading-info);
    color: var(--color-text);
}
.ai-banner__search-input::placeholder { color: var(--color-text-muted); }
.ai-banner__search-input::-webkit-search-cancel-button { display: none; }

.ai-banner__search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-secondary);
    flex-shrink: 0;
    transition: background-color var(--transition-base);
}
.ai-banner__search-submit:hover { background: var(--color-accent-hover); }
.ai-banner__search-submit:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}
.ai-banner__search-submit svg { width: 10px; height: 10px; }   /* the frame's 7px arrow glyph */

/* Primary icon tone: the Homepage and Ancillary hub, desktop and tablet */
.ai-banner__search--primary .ai-banner__search-icon { background: var(--color-primary); }
.ai-banner__search--primary .ai-banner__search-submit { color: var(--color-secondary); }

/* ── Image (split) ────────────────────────────────────────── */
.ai-banner__media {
    flex: 0 0 50%;
    overflow: hidden;
}
.ai-banner__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 500px;
}

/* ── Tablet ───────────────────────────────────────────────────
   Headings drop to Mobile/H2 (Alex, 30 Sep: the frames' Gill Sans
   and 38px Futura PT Demi aren't styles).
   Full: left-aligned, 48 / 40 padding (1407:75084).
   Split: stays split, as the frames (Homepage 1407:99693, Ancillary
   1407:74889): a 461-of-744 panel, 48 / 40 padding, left-aligned,
   beside the photo. The 767 and down block drops the photo.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .ai-banner__inner { min-height: 0; }

    .ai-banner__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }

    .ai-banner__panel--full { padding: 48px var(--space-gutter); }

    .ai-banner__panel:not(.ai-banner__panel--full) {
        flex: 0 0 62%;
        padding: 48px 40px;
    }
    .ai-banner__panel:not(.ai-banner__panel--full) .ai-banner__content { max-width: 100%; }
    .ai-banner__media { flex: 1 1 0; }
}

/* ── Mobile (1407:69163) ──────────────────────────────────────
   Both layouts: the panel only, centred, 64 / 20 padding, a
   full-width search.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .ai-banner__media { display: none; }

    .ai-banner__panel,
    .ai-banner__panel:not(.ai-banner__panel--full),
    .ai-banner__panel--full {
        flex-basis: 100%;
        align-items: center;
        text-align: center;
        padding: 64px var(--space-gutter);
    }
    /* No gradient on mobile, same colour as desktop (Alex, 2 Oct): the "Secondary Gradient" is a
       teal gradient on all three bands, so they all go flat Primary teal */

    .ai-banner__search--primary .ai-banner__search-icon { background: var(--color-secondary); }
    .ai-banner__content,
    .ai-banner__heading-group { align-items: center; }
    .ai-banner__content { gap: 20px; }
    .ai-banner__panel--full .ai-banner__search,
    .ai-banner__panel--full .ai-banner__notice { max-width: none; }

    .ai-banner__body {   /* 14px Futura in the frame, no text style (flagged) */
        font-family: var(--font-heading);
        font-size: 14px;
        line-height: 20px;
    }
    .ai-banner__search-input { font-size: var(--text-mobile-info); }  /* Figma Mobile/Information */
}