/* ==========================================================================
   C7 — carousel
   --------------------------------------------------------------------------
   Native scroll-snap, so touch flicking, trackpad gestures and keyboard
   scrolling all behave the way the device expects without any JavaScript.

   Two client rules are enforced here in CSS rather than left to the script:

   1. No cut-off cards. `scroll-snap-align: start` plus `scroll-padding-inline`
      guarantees a card always comes to rest flush against the start edge, never
      sliced by it.
   2. No empty space. When there are too few cards to fill the row, `is-static`
      turns the track back into a plain centred grid instead of leaving a gap
      where the rest of a row should be.
   ========================================================================== */

/* A named grid, so the arrows can sit beside the heading on a wide screen and
   below the track on a phone without being duplicated in the markup. The buttons
   are a single set; only their placement changes. */
.c7-carousel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head     controls"
    "track    track"
    "dots     dots"
    "viewall  viewall";
  align-items: end;
  column-gap: var(--c7-space-6);
}

.c7-carousel__head {
  grid-area: head;
  /* Only the heading block lives here now, so this no longer needs to space two
     children apart. */
  min-width: 0;
  margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
}

.c7-carousel__track { grid-area: track; }
.c7-carousel__dots { grid-area: dots; }
.c7-carousel__viewall { grid-area: viewall; margin-block-start: var(--c7-space-8); text-align: center; }

.c7-carousel__track {
  /* Contains any absolutely positioned child (a visually-hidden label), which
     would otherwise escape the scroller and widen the page. */
  position: relative;

  /* Exact-fit columns.
     A `1fr` track sizes cards to share the space, which almost never divides
     evenly — so the last card in view ends up sliced by the container edge. The
     client rejected that outright. Deriving the card width from the column count
     instead means N cards plus their gaps always add up to exactly 100% of the
     track, so a card is either fully visible or fully off-screen. Never half.

     The track therefore carries no horizontal padding or negative margin: 100%
     has to mean the container's content width for this arithmetic to hold. */
  --carousel-gap: clamp(1rem, 2vw, 1.5rem);
  --carousel-cols: 4;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(
    (100% - (var(--carousel-cols) - 1) * var(--carousel-gap)) / var(--carousel-cols)
  );
  gap: var(--carousel-gap);

  overflow-x: auto;
  scroll-snap-type: x mandatory;

  /* Room for the card hover lift, which would otherwise be clipped by the
     scroll container. */
  padding-block: 0.5rem 1.25rem;

  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

/* Column counts per breakpoint. These are the only place the number of visible
   cards is decided; the width arithmetic above follows from them. */
@media (max-width: 78rem) {
  .c7-carousel__track {
    --carousel-cols: 3;
  }
}

@media (max-width: 56rem) {
  .c7-carousel__track {
    --carousel-cols: 2;
  }
}

@media (max-width: 38rem) {
  .c7-carousel__track {
    --carousel-cols: 1;
  }
}

.c7-carousel__track::-webkit-scrollbar {
  display: none;
}

.c7-carousel__track > * {
  scroll-snap-align: start;
  /* A grid child will not shrink past its content without this, which is what
     makes a long card title widen the whole track. */
  min-width: 0;
}

/* Everything already fits: drop the scroller and lay the cards out normally, so
   a two-card row does not sit against a wide empty gap. */
.c7-carousel.is-static .c7-carousel__track {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(var(--c7-card-min, 17rem), 1fr));
  grid-auto-columns: auto;
  overflow-x: visible;
  scroll-snap-type: none;
  padding-inline: 0;
  margin-inline: 0;
}

.c7-carousel.is-static .c7-carousel__controls,
.c7-carousel.is-static .c7-carousel__dots {
  display: none;
}

/* --- Controls ------------------------------------------------------------- */
.c7-carousel__controls {
  grid-area: controls;
  display: flex;
  gap: var(--c7-space-2);
  flex: none;
  /* Matches the heading row's bottom margin so the arrows align with the
     heading's baseline block rather than floating above the track. */
  margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
}

.c7-carousel__btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--c7-border-strong);
  border-radius: 50%;
  background: var(--c7-surface);
  color: var(--c7-text-strong);
  transition: background-color var(--c7-duration-fast) var(--c7-ease),
    border-color var(--c7-duration-fast) var(--c7-ease),
    color var(--c7-duration-fast) var(--c7-ease),
    opacity var(--c7-duration-fast) var(--c7-ease);
}

.c7-carousel__btn svg {
  width: 1.15rem;
  height: 1.15rem;
}

.c7-carousel__btn:hover:not(:disabled) {
  border-color: var(--c7-meridian-700);
  background: var(--c7-meridian-800);
  color: var(--c7-white);
}

.c7-carousel__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.c7-section--inverse .c7-carousel__btn {
  border-color: var(--c7-border-inverse);
  background: rgb(255 255 255 / 0.08);
  color: var(--c7-white);
}

.c7-section--inverse .c7-carousel__btn:hover:not(:disabled) {
  background: var(--c7-gold-500);
  border-color: var(--c7-gold-500);
  color: var(--c7-meridian-950);
}

/* --- Dots ----------------------------------------------------------------- */
.c7-carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--c7-space-2);
  margin-block-start: var(--c7-space-6);
}

.c7-carousel__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--c7-radius-pill);
  background: var(--c7-border-strong);
  /* Only the width animates — a dot that grew taller would nudge the row. */
  transition: width var(--c7-duration-base) var(--c7-ease),
    background-color var(--c7-duration-base) var(--c7-ease);
}

.c7-carousel__dot.is-active {
  width: 1.75rem;
  background: var(--c7-gold-500);
}

.c7-section--inverse .c7-carousel__dot {
  background: rgb(255 255 255 / 0.28);
}

.c7-section--inverse .c7-carousel__dot.is-active {
  background: var(--c7-gold-400);
}

/* On a phone the arrows move below the track and centre themselves, rather than
   being hidden.

   They used to be hidden here, on the reasoning that a phone user swipes. The
   client asked for them back, and the reasoning was weak anyway: a swipe is only
   discoverable if you already know to try it, so a carousel with no visible
   control looks like a row of cards that happens to be cut off. Below the track
   they are obvious and easy to reach with a thumb, and they no longer compete
   with the heading for width — which was the real objection. */
@media (max-width: 40rem) {
  .c7-carousel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "track"
      "dots"
      "controls"
      "viewall";
  }

  .c7-carousel__controls {
    justify-content: center;
    margin-block: var(--c7-space-5) 0;
  }

  /* Comfortably tappable — 2.75rem is fine with a mouse and tight for a thumb. */
  .c7-carousel__btn {
    width: 3rem;
    height: 3rem;
  }

  .c7-carousel__viewall {
    margin-block-start: var(--c7-space-6);
  }
}