/* ============================================================
   tile-carousel — a heading over a row of link tiles: the Ancillary
   hub's Legal / Motor / Property families and the Claims hub's
   services. Ancillary Figma: desktop 1407:65064 / 65085 / 65198, tablet
   1407:74617 / 74645 / 74696, mobile 1407:74248 / 74275 / 74344. The
   Claims hub has no frame for five cards (its frame 1407:101393 draws
   four across), so it uses this carousel without autoplay. The page owns
   the vertical padding (80 above and below; 48 on tablet and mobile),
   passed as section_class.

   Light is the Primary Accent band; dark (Motor) is gradient 1. Two tiles
   are a grid; three or fewer a static row on desktop; more are a carousel
   of 283px tiles bleeding off the right edge. Desktop (Alex, round 4):
   full bleed to the edge of the viewport, looping when dragged. Tablet
   keeps the bar that fills as you move.
   ============================================================ */

.tile-carousel {
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
    background: var(--color-surface-tint);
    overflow-x: clip;   /* the carousel runs to the viewport edge: never a sideways scroll */
}
.tile-carousel--dark { background: var(--gradient-dark-reverse); }
.tile-carousel__inner {
    max-width: var(--layout-content-max-w);
    margin: 0 auto;
}

/* ── Heading row: the heading left-aligned, Title Case, with the prev / next arrows at the right; 32 above the tiles ── */
.tile-carousel__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}
.tile-carousel__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);   /* the Legal and Property frames' #000000 has no variable: Text is the nearest */
    text-transform: capitalize;
}
.tile-carousel--dark .tile-carousel__heading { color: var(--color-text-inverse); }

.tile-carousel__controls { display: flex; flex: none; gap: 24px; }
.tile-carousel__prev,
.tile-carousel__next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text);
    cursor: pointer;
}
.tile-carousel--dark .tile-carousel__prev,
.tile-carousel--dark .tile-carousel__next { color: var(--color-text-inverse); }
.tile-carousel__prev svg,
.tile-carousel__next svg { width: 20px; height: 20px; }
.tile-carousel__prev svg { transform: rotate(180deg); }
.tile-carousel__prev:hover,
.tile-carousel__next:hover { color: var(--color-primary); }
.tile-carousel--dark .tile-carousel__prev:hover,
.tile-carousel--dark .tile-carousel__next:hover { color: var(--color-accent); }
.tile-carousel__prev:focus-visible,
.tile-carousel__next:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}
.tile-carousel__prev.swiper-button-disabled,
.tile-carousel__next.swiper-button-disabled { opacity: 0.35; cursor: default; }
.tile-carousel__prev.swiper-button-lock,
.tile-carousel__next.swiper-button-lock { display: none; }   /* every tile is in view: nothing to move */

/* ── Grid (Legal): two 590 tiles, 24 apart ────────────────── */
.tile-carousel__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── Carousel: 283px tiles, 24 apart, bleeding off the right ── */
.tile-carousel__carousel { margin-right: calc(-1 * var(--space-gutter)); }
.tile-carousel__track {
    margin: 0;
    padding: 0;
    list-style: none;
}
.tile-carousel__slide {
    width: 283px;
    height: auto;
}

/* Progress bar: 4px, fills from the left as you move (the related-products
   pattern; the frame draws a one-tile thumb). The track is the tile colour:
   navy on dark, pale teal on light. */
.tile-carousel__body .tile-carousel__progress {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 4px;
    margin-top: 32px;
    border-radius: 99px;
    overflow: hidden;
    background: var(--color-surface-tile);
}
.tile-carousel--dark .tile-carousel__progress { background: var(--color-card-navy); }
.tile-carousel__progress .swiper-pagination-progressbar-fill {
    border-radius: 99px;
    background: var(--color-primary);
}
/* With every tile in view there is nothing to scroll: no bar */
.tile-carousel__progress.swiper-pagination-lock { display: none; }
/* A family of three or fewer on desktop is a static row, so its bar has nothing to fill */
.tile-carousel__body--few .tile-carousel__progress { display: none; }
/* The desktop loop's bar is filled by hand (tile-carousel.js): ease it along with the slide */
.tile-carousel__progress .swiper-pagination-progressbar-fill { transition: transform 600ms ease; }
@media (prefers-reduced-motion: reduce) {
    .tile-carousel__progress .swiper-pagination-progressbar-fill { transition: none; }
}

/* ── Tablet (1407:74617 / 74645 / 74696): 323px tiles, 20 apart ── */
@media (max-width: 1024px) {
    .tile-carousel__head { margin-bottom: 20px; }
    .tile-carousel__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }
    .tile-carousel__grid { gap: 20px; }
    .tile-carousel__slide { width: 323px; }
    .tile-carousel__body .tile-carousel__progress { margin-top: 20px; }
}

/* Desktop: the progress bar sits under the row, as on tablet. The tiles run from the content's left edge to
   the right edge of the viewport (the inner is centred, so the overhang is
   half the viewport less half the inner), and loop when dragged. A family
   of three or fewer tiles stays a static row with the gutter margin. */
@media (min-width: 1025px) {
    .tile-carousel__body:not(.tile-carousel__body--few) .tile-carousel__carousel {
        margin-right: calc(50% - 50vw);
    }
    .tile-carousel__body--few .tile-carousel__track { gap: 24px; }
    .tile-carousel__body--few .tile-carousel__controls { display: none; }   /* a static row: nothing to move */
}

/* ── Mobile (1407:74248 / 74275 / 74344): a stacked list, no bar ── */
@media (max-width: 767px) {
    .tile-carousel__grid { grid-template-columns: 1fr; }
    .tile-carousel__carousel { margin-right: 0; }
    .tile-carousel__track {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .tile-carousel__slide { width: 100%; }
    .tile-carousel__body .tile-carousel__progress { display: none; }
    .tile-carousel__controls { display: none; }   /* a stacked list on a phone */
}


/* ============================================================
   tile-carousel__tile — one tile (an Ancillary product, a Claims service)
   Figma: Legal 1407:65064, Motor 1407:65085, Property 1407:65198;
   tablet 1407:74617 / 74645 / 74696; mobile 1407:74248 / 74275 / 74344.
   Light tiles are the pale teal, dark (Motor) the navy. The button is
   pinned to the foot, so tiles in a row line up.
   ============================================================ */

.tile-carousel__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    height: 100%;
    padding: 24px;
    border-radius: 12px;
    background: var(--color-surface-tile);
    color: var(--color-text);
}
.tile-carousel__tile--dark {
    background: var(--color-card-navy);
    color: var(--color-text-inverse);
}

.tile-carousel__tile-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tile-carousel__tile-title {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
    color: inherit;
}
.tile-carousel__tile-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;
}

/* ── The whole tile is the link ───────────────────────────────
   The button's hit area is stretched over the tile (no nested link), so
   hovering anywhere on it triggers the button's own hover: the ring
   expands to the pill and its label. Focus draws the ring on the tile. */
.tile-carousel__tile-action { position: static; }
.tile-carousel__tile-action::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
}
.tile-carousel__tile-action:focus-visible { outline: none; }
.tile-carousel__tile-action:focus-visible::after {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: -2px;
}

/* ── Tablet and mobile: 20 padding, 16 radius, Mobile/H3 and Mobile/Body
   small, and a bare arrow (no ring or shadow) instead of the circle. The
   button keeps its 42px target; the label still expands on hover and
   focus. ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .tile-carousel__tile {
        padding: 20px;
        border-radius: 16px;
    }
    .tile-carousel__tile-action::after { border-radius: 16px; }
    .tile-carousel__tile-title {
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }
    .tile-carousel__tile-body {
        font-size: var(--text-mobile-body-small);
        line-height: 1.4;
    }
    .tile-carousel__tile-action.btn--secondary:not(:hover, :focus-visible, :active, .is-hover, .is-focus, .is-active),
    .tile-carousel__tile-action.btn--secondary-inverse:not(:hover, :focus-visible, :active, .is-hover, .is-focus, .is-active) {
        border-color: transparent;
        box-shadow: none;
    }
    .tile-carousel__tile-action { margin-left: -10px; }
}


/* ============================================================
   Variants and options
   ============================================================ */

/* ── An intro line under the heading row: 8 below the heading, 32 before the
   tiles (20 on tablet). The arrows stay on the heading row. ── */
.tile-carousel__body--intro .tile-carousel__head { margin-bottom: 8px; }
.tile-carousel__intro {
    margin: 0 0 32px;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-text);
}
@media (max-width: 1024px) {
    .tile-carousel__intro { margin-bottom: 20px; }
}

/* ── Claims hub (frame 1407:101393): the titles are the secondary colour, and the descriptions
   are not cut short on a phone (the Responsive card 1084:9149 clamped them to one line) ── */
.tile-carousel--claims .tile-carousel__tile-title { color: var(--color-secondary); }

/* ── The arrows are desktop only (Alex, 23 Oct; he had put them on tablet on 12 Oct): tablet swipes
   by the bar, mobile is a stacked list ── */
@media (max-width: 1024px) {
    .tile-carousel__controls { display: none; }
}