/* ============================================================
   Solutions template - page-level CSS (T8, all three audiences)
   Figma: For Brokers desktop 1407:93506, tablet 1407:94937, mobile
   1407:92157 (Insurers & MGAs 1407:93980 / 1407:92602, Affinity
   1407:94459 / 1407:93054).

   The section classes carry their own look and gutters; this file holds
   the page's vertical rhythm (the neighbouring-background rule: --space-
   section when the neighbour's background matches, --space-section-alt
   when it differs) and the two sections only this template uses: the
   approach band and the integration models (moved from
   classes/capability-grid at B3).
   ============================================================ */

/* ── Section spacing ──────────────────────────────────────── */
/* The approach follows the white hero. The frame fixes its height at 486 with
   the cards centred, so the cards sit 28 below the hero curve and 68 above the
   cream band (tablet 1407:94963 and mobile: 48 either side). */
.solutions__section--approach {
    padding-top: 28px;
    padding-bottom: 66px;
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
}
/* Cream after white: the frame gives 40 above the head and 80 below the grid */
.solutions__section--models {
    padding-top: var(--space-section);
    padding-bottom: var(--space-section-alt);
}
/* The navy steps band: 80 above the head, 64 below the button (the frame's
   section is 637 tall but the AI band overlaps its last 16) */
.solutions__section--steps {
    padding-top: var(--space-section-alt);
    padding-bottom: 64px;
}
/* Full-bleed: the AI panel pads itself */
.solutions__section--ai { padding: 0; }
/* The case studies and the "Trusted by" strip are one white band (80 above, 40
   between the cards and the logos, 80 below) */
.solutions__section--cases {
    padding-top: var(--space-section-alt);
    padding-bottom: var(--space-section-alt);
}
.solutions__section--cases:has(+ .solutions__section--logos) { padding-bottom: 0; }
.solutions__section--logos {
    padding-top: var(--space-section);
    padding-bottom: var(--space-section-alt);
}
/* No case studies: the logos follow the teal AI band, a different background */
.solutions__section--ai + .solutions__section--logos { padding-top: var(--space-section-alt); }
/* The FAQs: the same above and below (80 / 48) */
.solutions__section--faq {
    padding-top: var(--space-section-alt);
    padding-bottom: var(--space-section-alt);
}
@media (max-width: 1024px) {
    .solutions__section--approach,
    .solutions__section--models { padding-top: var(--space-section-alt); padding-bottom: var(--space-section-alt); }
    .solutions__section--logos { padding-top: 20px; }
    /* Tablet (1407:95240) and mobile: 64 above the head and below the button */
    .solutions__section--steps { padding-top: 64px; padding-bottom: 64px; }
}

/* ============================================================
   approach - the heading block and three navy cards
   Figma: desktop 1407:93532, tablet 1407:94963, mobile 1407:92181.
   Text 627 wide on the left, centred on the cards; the cards are 500 wide,
   24 apart. Tablet stacks the text over a row of three cards, mobile a
   column of them.
   ============================================================ */
.approach__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    max-width: var(--layout-content-max-w);
    margin: 0 auto;
}
.approach__text {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.approach__text .eyebrow { margin: 0; }
.approach__heading {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--color-secondary);
    text-transform: capitalize;
}
.approach__body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-secondary);
}

.approach__cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.approach__card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px;
    border-radius: 16px;
    background: var(--gradient-dark-reverse);   /* "gradient 1" */
    color: var(--color-text-inverse);
}
.approach__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--color-accent-tint);
    color: var(--color-accent);
}
.approach__icon svg { width: 24px; height: 24px; fill: currentColor; }
.approach__card-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.approach__card-title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h3);
    line-height: 1.3;   /* the frame's; H3 is 1 */
    color: inherit;
}
.approach__card-body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: inherit;
}

/* ── Tablet (1407:94963): text over a row of three cards ──── */
@media (max-width: 1024px) {
    .approach__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }
    .approach__text { flex: none; }
    .approach__text .eyebrow {
        font-size: var(--text-mobile-overline);
        line-height: var(--leading-mobile-overline);
    }
    .approach__heading {
        margin-bottom: 0;
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }
    .approach__body {
        font-size: var(--text-mobile-body-small);
        line-height: 1.4;
    }
    .approach__cards {
        flex: none;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
    .approach__card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px;
        border-radius: 12px;
    }
    .approach__icon { width: 35px; height: 35px; }
    .approach__icon svg { width: 20px; height: 20px; }
    .approach__card-title {
        font-size: var(--text-mobile-h4);
        line-height: var(--leading-mobile-h4);
    }
    .approach__card-body {
        font-size: var(--text-mobile-body);
        line-height: var(--leading-mobile-body);
    }
}

/* ── Mobile (1407:92181): one column, Mobile/H3 titles ────── */
@media (max-width: 767px) {
    .approach__cards { grid-template-columns: 1fr; }
    .approach__card-title {
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }
}

/* ============================================================
   capability-grid - the integration models (T8 "Solutions for Brokers")
   Figma: Brokers desktop 1407:93568, tablet 1407:94999, mobile
   1407:92217. Three columns, two on tablet, one on mobile.
   ============================================================ */
.capability-grid {
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
    background: var(--color-surface-warm);
}
.capability-grid__inner {
    max-width: var(--layout-content-max-w);
    margin: 0 auto;
}

/* ── Head: centred, 10 apart (and 10 above); 40 before the grid ── */
.capability-grid__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    margin-bottom: 40px;
    text-align: center;
}
.capability-grid__head .eyebrow { margin: 0; }
.capability-grid__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);
    text-transform: capitalize;
}
.capability-grid__intro {
    margin: 0;
    max-width: 720px;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-text);
}

/* ── Grid: three 388 columns, 20 apart both ways ──────────── */
.capability-grid__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The shadow in the frame is 6px at 15%, which isn't the Action effect
   (12px); Action is the nearest declared style. */
.capability-grid__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 32px;
    border-radius: 16px;
    background: var(--color-surface);
    box-shadow: var(--shadow-action);
}
.capability-grid__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Title: the frame's Futura PT Demi 30 isn't a text style, and the Adobe kit
   has no Demi (600 renders as Heavy, 319px wide for "Claims & FNOL Support"
   against the frame's 305). H3, 28px, is the nearest declared size and keeps
   the frame's line breaks. */
.capability-grid__title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    color: var(--color-text);
}
.capability-grid__body {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-body-small);
    line-height: var(--leading-body-small);
    color: var(--color-text);
}

/* ── Tick list: a 23px Primary circle, 12 apart ───────────── */
.capability-grid__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.capability-grid__item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-text);
}
.capability-grid__tick {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 23px;
    height: 23px;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
}
.capability-grid__tick svg { width: 20px; height: 20px; }

/* ── Button: the Secondary arrow, in Primary and Text ─────────
   The frame rings it in Primary with a Text arrow (Secondary's own
   are Secondary): so the resting state is recoloured, and hover and
   focus keep the button's own states. Pinned to the card's foot. */
/* The whole card is the link: the button's hit area is stretched over it
   (no nested link), so hovering anywhere triggers the button's own hover,
   and focus draws the ring on the card. */
.capability-grid__action { position: static; margin-top: auto; }
.capability-grid__action::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
}
.capability-grid__action:focus-visible { outline: none; }
.capability-grid__action:focus-visible::after {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: -2px;
}
.capability-grid__action.btn--secondary:not(:hover, :focus-visible, :active, .is-hover, .is-focus, .is-active) {
    border-color: var(--color-primary);
    color: var(--color-text);
}

/* ── Tablet (1407:94999): two columns, 16 apart, padding 20 ── */
@media (max-width: 1024px) {
    .capability-grid__head { margin-bottom: 20px; }
    .capability-grid__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }
    .capability-grid__head .eyebrow {
        font-size: var(--text-mobile-overline);
        line-height: var(--leading-mobile-overline);
    }
    .capability-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .capability-grid__card { padding: 20px; gap: 12px; }
    /* Tablet and mobile (1407:95008): Mobile/H3 in Futura Medium, a Mobile/
       Information description, 14px items 8 apart and 18px ticks */
    .capability-grid__title {
        font-family: var(--font-heading);
        font-weight: var(--weight-medium);
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }
    .capability-grid__body {
        font-family: var(--font-info);
        font-weight: var(--weight-bold);
        font-size: var(--text-mobile-info);
        line-height: var(--leading-mobile-info);
    }
    .capability-grid__list { gap: 8px; }
    .capability-grid__item {
        gap: 8px;
        font-family: var(--font-heading);
        font-size: var(--text-mobile-body-small);
        line-height: 1.4;
    }
    .capability-grid__tick { width: 18px; height: 18px; }
    .capability-grid__tick svg { width: 16px; height: 16px; }

    /* The tablet and mobile frames draw a bare arrow, not the ring: the
       button keeps its 42px target, with the ring and shadow dropped. */
    .capability-grid__action.btn--secondary:not(:hover, :focus-visible, :active, .is-hover, .is-focus, .is-active) {
        border-color: transparent;
        box-shadow: none;
    }
    .capability-grid__action { margin-left: -10px; }
}

/* ── Mobile (1407:92217): one column ──────────────────────── */
@media (max-width: 767px) {
    .capability-grid__grid { grid-template-columns: 1fr; }
}