/* ============================================================
   highlight-cards: a centred heading over image cards with a gradient
   text panel. Figma: T2 1407:65028 (tablet 1407:74566, mobile
   1407:74197), T4 1407:101357, T6 1331:136728, T7 1331:138362 and
   the AncillaryHUB skin 1331:137987.

   Desktop: never a carousel. Three cards in a row, the middle one enlarged
   (426 against 361); three or fewer otherwise one row; more than three a
   grid of rows of three, all one size.
   Tablet and mobile (no separate tablet frame beyond the mobile
   layout): a looping Swiper row at any count, 322px cards 20 apart, the
   active card centred and enlarged, its neighbours peeking in from the
   screen edges. Every card is laid out at the enlarged size and the
   neighbours are scaled down with a transform, so a swipe never re-lays
   anything out (animating height and padding did, every frame).
   The section's template owns the vertical padding.
   ============================================================ */

.highlight-cards {
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
}
.highlight-cards__inner {
    max-width: var(--layout-content-max-w);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ── Heading block: centred, eyebrow to H2 10 ─────────────── */
.highlight-cards__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.highlight-cards__head .eyebrow { margin: 0; }
.highlight-cards__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-text);
    text-transform: capitalize;   /* Title Case in the frame */
}
.highlight-cards__intro {
    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-text);
}

/* ── Cards ────────────────────────────────────────────────── */
.highlight-cards__carousel { overflow: hidden; }
.highlight-cards__track {
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: center;
}
.highlight-cards__card {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: hidden;
    border-radius: 16.6px;
}
.highlight-cards__media {
    height: 200px;
    background: var(--color-surface);
    overflow: hidden;
}
.highlight-cards__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.highlight-cards__panel {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 24px;
    background: var(--gradient-1);
    color: var(--color-text-inverse);
    text-align: center;
}
.highlight-cards__body--hub .highlight-cards__panel {
    padding: 24px;
    background: var(--gradient-hub);
}
.highlight-cards__title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    color: inherit;
}
.highlight-cards__text {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: inherit;
}

/* ── Desktop: never a carousel ────────────────────────────── */
@media (min-width: 1025px) {
    /* The track is a grid, three columns, centred. Three or fewer: one row
       (auto-fit); more than three: rows of three, every card one size. */
    .highlight-cards__body .highlight-cards__track {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 361fr));
        gap: 22.16px;
        max-width: 1192px;
        margin: 0 auto;
        align-items: stretch;
    }
    .highlight-cards__body--few .highlight-cards__track {
        grid-template-columns: repeat(auto-fit, minmax(0, 361fr));
        align-items: center;
    }
    .highlight-cards__body .highlight-cards__card { width: auto; }

    /* More than three: rows of three, a short last row centred */
    .highlight-cards__body--many .highlight-cards__track {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .highlight-cards__body--many .highlight-cards__card { flex: 0 0 calc((100% - 44.32px) / 3); }
    .highlight-cards__card .highlight-cards__text { max-width: 305px; }   /* the side cards' text box in the frames */

    /* Three: the middle card enlarged (426 / 233 image / 19.65 radius), its
       type scaled the way the T2, T4 and T6 frames draw it (H3 and Body at
       about 1.157). */
    .highlight-cards__body--three .highlight-cards__track { grid-template-columns: 361fr 426fr 361fr; }
    .highlight-cards__body--three .highlight-cards__card:nth-child(2) .highlight-cards__text { max-width: none; }

    /* The side cards are one height, the taller of the two (the frames draw
       them level; highlight-cards.js measures them), centred beside the
       middle card. */
    .highlight-cards__body--three .highlight-cards__card:nth-child(odd) { min-height: var(--hc-side-h, 0); }

    .highlight-cards__body--three .highlight-cards__card:nth-child(2) { border-radius: 19.65px; }
    .highlight-cards__body--three .highlight-cards__card:nth-child(2) .highlight-cards__media { height: 233px; }
    .highlight-cards__body--three .highlight-cards__card:nth-child(2) .highlight-cards__panel { gap: 13.07px; }
    .highlight-cards__body--three .highlight-cards__card:nth-child(2) .highlight-cards__title { font-size: 32.39px; }
    .highlight-cards__body--three .highlight-cards__card:nth-child(2) .highlight-cards__text { font-size: 18.51px; }

    /* AncillaryHUB: the frame scales the title only (33.89), the body stays Body */
    .highlight-cards__body--hub.highlight-cards__body--three .highlight-cards__card:nth-child(2) .highlight-cards__panel { padding: 24px 39px 39px 26px; gap: 12px; }
    .highlight-cards__body--hub.highlight-cards__body--three .highlight-cards__card:nth-child(2) .highlight-cards__title { font-size: 33.89px; }
    .highlight-cards__body--hub.highlight-cards__body--three .highlight-cards__card:nth-child(2) .highlight-cards__text { font-size: var(--text-body); }
}

/* ── Tablet and mobile: the swipe row ─────────────────────────
   Bleeds to the screen edges so the neighbours peek in. Every card is laid
   out at the active size (image 200, radius 19.65, panel 32 / 36; Mobile/H3
   and Mobile/Body throughout) and the resting cards are scaled down to
   --hc-rest-scale. The frames draw them 322 wide and 326 tall against the
   active card's 356, so this trades a slightly narrower neighbour
   (about 303) for a swipe that only moves and scales on the compositor:
   no layout, no repaint of the images or gradients. The scale is the one
   number to change if the neighbours should be larger or smaller.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .highlight-cards__body { --hc-rest-scale: 0.94; }
    .highlight-cards__inner { gap: 20px; }
    .highlight-cards__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
        color: var(--color-secondary);
        text-wrap: balance;
    }
    .highlight-cards__carousel {
        margin-left: calc(-1 * var(--space-gutter));
        margin-right: calc(-1 * var(--space-gutter));
    }
    .highlight-cards__card {
        width: min(322px, calc(100% - 56px));
        border-radius: 19.65px;
        /* all one height (highlight-cards.js measures the tallest card) */
        min-height: var(--hc-card-h, 0);
    }
    /* The slide is the card, and Swiper's own `.swiper-backface-hidden
       .swiper-slide { transform: translateZ(0) }` is two classes, so the
       transform needs three to win */
    .highlight-cards__body .highlight-cards__carousel .highlight-cards__card {
        transform: scale(var(--hc-rest-scale));
        will-change: transform;
    }
    .highlight-cards__body .highlight-cards__carousel .highlight-cards__card.swiper-slide-active { transform: none; }
    /* Not before Swiper has started: the first card would otherwise ease up
       from its resting size on load */
    .highlight-cards__body.is-ready .highlight-cards__carousel .highlight-cards__card { transition: transform 300ms ease; }
    .highlight-cards__media { height: 200px; }
    .highlight-cards__panel {
        flex: 1 1 auto;
        padding: 32px 36px;
    }
    .highlight-cards__title {
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }
    .highlight-cards__text {
        font-size: var(--text-mobile-body);
        line-height: var(--leading-mobile-body);
    }
    /* At each move of the row the text of every card fades out and back in
       (Alex, 2 Oct); opacity only, so nothing shifts. highlight-cards.js sets
       .is-fading from the start of the slide change to its end. */
    .highlight-cards__title,
    .highlight-cards__text { transition: opacity 200ms ease; }
    .highlight-cards__body.is-fading .highlight-cards__title,
    .highlight-cards__body.is-fading .highlight-cards__text { opacity: 0; }
    /* The row's height is fixed (highlight-cards.js: the tallest card), so
       what follows it never moves; the cards sit centred in it. Not set
       before the script has measured. */
    .highlight-cards__carousel { height: var(--hc-h, auto); }
    /* While the script measures, the cards drop their shared minimum height, at once */
    .highlight-cards__body.is-measuring .highlight-cards__carousel .highlight-cards__card { min-height: 0; transition: none; }   /* a height ignores the scale, so it stays: taking it off made every re-measure ease the resting cards up and back */
    .highlight-cards__body--hub .highlight-cards__panel { padding: 32px 24px; }
}

/* Before Swiper starts (tablet and mobile), the list still lays out sideways */
@media (max-width: 1024px) {
    .highlight-cards__carousel:not(.swiper-initialized) .highlight-cards__track { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .highlight-cards__body.is-ready .highlight-cards__carousel .highlight-cards__card,
    .highlight-cards__title,
    .highlight-cards__text { transition: none; }
}