/* ============================================================
   solution-gallery: the persona cards.
   Figma: Home 1407:99068 (tablet 1407:99569, mobile 1407:99312);
   the same on About, Claims hub, Tech hub and Careers/Teams.

   Desktop: a 662 gallery and a 578 copy column, 48 apart, centred
   vertically. Three cards (centre 237, sides 0.8 of it) in a looping row
   that rotates by itself (the active slide is the enlarged one).
   The gallery's sizes are all multiples of --u, so the row scales down
   with its column (--u is 1px at 662 and a container-width fraction below).
   Tablet and mobile: stacked, the cards a Swiper row (centre 216, sides
   180) bleeding to the screen edges so the neighbours peek in.

   Every card's photo has a cut-out copy over it that is not clipped, so the
   head breaks out above the card top: the row clips sideways only, so the
   heads show whole.
   Tablet (768 to 1024, 1251:31148): a 600 window with exactly three cards,
   the centre one and a side card either side, 12 apart. Mobile keeps the
   neighbours peeking in.
   Every card is laid out at the enlarged size; a side card is that card
   scaled down (--sg-scale) and dimmed. When the active card changes only
   transform and opacity ease, over --sg-speed in step with the row's slide,
   so the compositor does the work (animating width, padding and font-size
   re-laid the row every frame and juddered on a phone).
   ============================================================ */

.solution-gallery {
    background: var(--color-surface-tint);   /* "Primary Accent" */
    padding-left: min(var(--space-gutter), 76px);   /* the frame's row is 1288 wide, 76 in */
    padding-right: min(var(--space-gutter), 76px);
}
.solution-gallery__inner {
    max-width: 1288px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 48px;
}

/* ── Copy ─────────────────────────────────────────────────── */
.solution-gallery__content {
    order: 2;
    flex: 1 1 0;
    max-width: 578px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.solution-gallery__content .eyebrow { margin: 0; }
.solution-gallery__heading {
    margin: 0;
    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;   /* Title Case in the frame */
}
.solution-gallery__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);
}

/* ── Gallery ──────────────────────────────────────────────── */
.solution-gallery__gallery {
    order: 1;
    flex: 1 1 0;
    max-width: 662px;
    min-width: 0;
    container-type: inline-size;
}
.solution-gallery__carousel {
    --u: calc(100cqw / 662);           /* 1px at the frame's 662 */
    min-height: calc(423 * var(--u));
    display: flex;
    align-items: center;
    overflow-x: clip;       /* sideways only: the cut-out heads rise above the row */
    overflow-y: visible;
}
.solution-gallery__track {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: center;
}

/* A slide is the slot a card sits in: a swipe row spaces the slots, the
   card inside is centred (224.6 on desktop, 210 below 1025 = 12 between the
   emphasised and a side card). */
.solution-gallery__slide {
    display: flex;
    justify-content: center;
    width: calc(224.6 * var(--u));
    height: auto;
}

/* A card: laid out at the enlarged size, every figure a multiple of --u.
   Desktop figures (px at 662): width, radius, panel padding, panel gap,
   title, chip, arrow, pop-out. A side card is the same card at --sg-scale
   (188.27 / 237 on desktop, 180 / 216 below 1025) and a lower opacity. */
.solution-gallery__card {
    --sg-w: 237;  --sg-r: 12;  --sg-pad: 24;  --sg-gap: 8;
    --sg-title: 28;  --sg-chip: 18;  --sg-arrow: 20;  --sg-pop: 36.2;
    --sg-scale: 0.7944;
    --sg-opacity: 0.4;
    --sg-speed: 1000ms;   /* the row's slide is 1000ms too (solution-gallery.js) */
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: calc(var(--sg-w) * var(--u));
    opacity: var(--sg-opacity);
    transform: scale(var(--sg-scale));
    will-change: transform, opacity;
    transition: opacity var(--sg-speed) ease, transform var(--sg-speed) ease;
}
.solution-gallery__gallery:not(.is-ready) .solution-gallery__card { transition: none; }   /* no ease-in on load (solution-gallery.js) */
.solution-gallery__card:focus-within { opacity: 1; }   /* a focused chip must be seen */

/* The emphasised card: the active slide of a swipe row (on desktop, the middle of three) */
.swiper-slide-active .solution-gallery__card {
    --sg-opacity: 1;
    transform: none;
}

/* Photo: the frame's 235 x 243 / 188 x 194.4, the cut-out beyond its top */
.solution-gallery__photo {
    position: relative;
    aspect-ratio: 188 / 194.4;
}
.solution-gallery__crop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: calc(var(--sg-r) * var(--u)) calc(var(--sg-r) * var(--u)) 0 0;
    background: var(--color-surface);
}
.solution-gallery__image,
.solution-gallery__cutout {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.solution-gallery__cutout {
    position: absolute;
    left: 0;
    top: calc(var(--sg-pop) * -1%);   /* the frame's 88 above the large card (243), 64 above a side card (194) */
    pointer-events: none;
}

/* PNG mode (Home personas): one transparent PNG per card instead of a photo and
   a cut-out. The photo box keeps its size so the panel sits where it did; the
   PNG stands on the panel's top edge, as tall as the box plus the pop-out, so the
   head rises above the card top. No crop, no white box, nothing behind it. */
.solution-gallery__gallery--png .solution-gallery__photo { overflow: visible; }
.solution-gallery__png {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: calc(100% + var(--sg-pop) * 1%);
    object-fit: contain;
    object-position: center bottom;
    pointer-events: none;
}

/* Panel: gradient 1 */
.solution-gallery__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--sg-gap) * var(--u));
    padding: calc(var(--sg-pad) * var(--u));
    border-radius: 0 0 calc(var(--sg-r) * var(--u)) calc(var(--sg-r) * var(--u));
    background: var(--gradient-1);
    color: var(--color-text-inverse);
    text-align: center;
}
.solution-gallery__label {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: calc(var(--sg-title) * var(--u));
    line-height: 1;
    color: inherit;
}
/* H3, capped to the card's scale on narrow desktop columns */
.solution-gallery__label {
    font-size: min(var(--text-h3), calc(var(--sg-title) * var(--u)));
}

/* The chip is the tertiary button, scaled with its card. The emphasised
   card's is Action (18 Heavy, 20 arrow). */
.solution-gallery__chip {
    font-size: calc(var(--sg-chip) * var(--u));
    letter-spacing: var(--tracking-action);
    gap: calc(var(--sg-chip) * 0.22 * var(--u));
    white-space: nowrap;
}
.solution-gallery__chip .btn__icon {
    width: calc(var(--sg-arrow) * var(--u));
    height: calc(var(--sg-arrow) * var(--u));
}
.solution-gallery__chip {
    font-family: var(--font-action);
    font-weight: var(--weight-heavy);
}

/* ── Tablet and mobile (1407:99569, 1407:99312) ───────────────
   Stacked: the copy centred over the gallery, 32 apart. The cards are
   216 / 180 wide in 210 slots, so a swipe row spaces them 12 apart.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .solution-gallery__inner {
        flex-direction: column;
        gap: 32px;
    }
    .solution-gallery__content,
    .solution-gallery__gallery {
        order: 0;
        flex: none;
        align-self: stretch;   /* the gallery has no intrinsic width (container query) */
        max-width: none;
    }
    .solution-gallery__content { align-items: center; text-align: center; }
    .solution-gallery__content .eyebrow { text-align: center; }
    .solution-gallery__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }
    .solution-gallery__body {
        font-size: 14px;   /* no text style in the frame */
        line-height: var(--leading-body);
    }

    .solution-gallery__gallery {
        margin-left: calc(-1 * min(var(--space-gutter), 76px));   /* bleed to the screen edges */
        margin-right: calc(-1 * min(var(--space-gutter), 76px));
        /* Below 1025 --u is a fixed 1px, so the box needs no container query.
           On an iPhone (WebKit) the row rendered as a blank gap while Chrome
           was fine; containment on this stretched flex item is the suspect. */
        container-type: normal;
    }
    .solution-gallery__carousel {
        --u: 1px;
        min-height: 443px;
    }
    .solution-gallery__slide { width: 210px; }
    .solution-gallery__card {
        --sg-w: 216;  --sg-r: 14.4;  --sg-pad: 28.8;  --sg-gap: 9.6;
        --sg-title: 24;  --sg-chip: 16;  --sg-arrow: 24;  --sg-pop: 36.2;
        --sg-scale: 0.8333;
        --sg-opacity: 0.6;
    }
    .solution-gallery__label { font-size: var(--text-mobile-h3); }
    .solution-gallery__chip {
        font-family: var(--font-heading);      /* Mobile/Action: Futura Medium 16 */
        font-weight: var(--weight-medium);
        font-size: var(--text-mobile-action);
    }
}

/* Tablet: exactly three cards (1251:31148): a 600 window (two 210 slots and a
   180 card), centred, with the neighbours beyond it clipped away */
@media (min-width: 768px) and (max-width: 1024px) {
    .solution-gallery__carousel {
        width: 600px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .solution-gallery__card { transition: none; }
}