/* ==========================================================================
   Mobile carousels

   Three sections that read as grids on a wide screen become swipeable rails
   below 768px: the credit-score frames, the client videos, and the package
   tiers. Stacked one above another those three alone ran to roughly 8,000px
   of scrolling on a phone.

   The scrolling is pure CSS scroll-snap, so the rails work with JavaScript
   off — you can still swipe every card. js/carousel.js only adds what CSS
   cannot express: a depth cue that follows the finger continuously, and the
   dots that make it obvious there is more than one card.

   Loaded last so it can override the grid rules in the section files.
   ========================================================================== */

/* The dots are a mobile affordance only; on desktop every card is visible. */
.rail-dots { display: none; }

@media (max-width: 768px) {

  /* --- The rail ----------------------------------------------------------- */

  [data-carousel] {
    /* Slide width. Rails that want a peek leave this alone; the score frames
       override it below. */
    --slide: 78vw;
    --rail-gap: 12px;
    /* Space between the rail and whatever sits above it. It lives here rather
       than in each section's own margin-top because the vertical padding below
       has to be cancelled out of the same margin — and a section rule setting
       margin-top would silently drop that cancellation along with its own
       spacing. Each rail sets its own value. */
    --rail-lead: 0px;
    /* Centres the first and last slide rather than letting them sit hard
       against the screen edge. */
    --rail-pad: calc((100vw - var(--slide)) / 2);

    /* position: relative makes the rail the offsetParent of its slides, which
       is what js/carousel.js measures against. */
    position: relative;

    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--rail-gap);

    /* Full bleed. The slides have to be able to run to the screen edge, but
       the section's gutter still holds for everything around them. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--rail-pad);
    scroll-padding-inline: var(--rail-pad);

    /* A scroll container clips everything outside its padding box, and this
       one is exactly as tall as its tallest slide — so with no vertical
       padding it would shear off two things that live outside the card:
       --shadow-card, which is 0 26px 52px and therefore entirely below the
       box, and the 38px the reveal animation starts each card down by. The
       negative margin hands the space straight back, so nothing around the
       rail moves. */
    padding-block: 30px 82px;
    margin-block: calc(var(--rail-lead) - 30px) -82px;

    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* Without this an over-swipe at either end triggers the browser's
       back/forward navigation gesture on iOS and Android. */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
  }

  [data-carousel]::-webkit-scrollbar { display: none; }

  [data-carousel] > * {
    flex: 0 0 var(--slide);
    scroll-snap-align: center;

    /* filter, not opacity. The slides in two of these three rails carry
       [data-reveal], whose entrance animation animates `opacity` with a
       `both` fill — an animated property beats any declarative value, so an
       opacity here would be ignored from the moment the section reveals.
       filter: opacity() is a separate property and simply multiplies.

       --near is 1 at the centre of the rail and 0 a slide away, published by
       js/carousel.js. Its fallback of 1 means that with no JavaScript every
       slide sits at full strength and nothing looks broken. */
    filter: opacity(calc(.34 + .66 * var(--near, 1)));
  }

  /* --- Dots --------------------------------------------------------------- */

  .rail-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
  }

  /* 44px of tap target with a 2px bar drawn through the middle of it. */
  .rail-dots__dot {
    position: relative;
    width: 28px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }

  .rail-dots__dot::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: rgba(217, 169, 58, .26);
    transition: background .25s ease;
  }

  .rail-dots__dot.is-active::before { background: var(--gold-figure); }

  /* --- Per-rail ----------------------------------------------------------- */

  /* No peek here, deliberately. The three screenshots are cropped by hand
     against this frame width — the offsets are in pixels while the widths are
     percentages, so narrowing the slide to make room for a peek would slide
     each crop off the part of the report it was set to show. Full-width
     slides keep them pixel-identical to the stacked layout; the dots carry
     the affordance instead. */
  .proof__scores {
    --slide: calc(100vw - var(--gutter) * 2);
    --rail-gap: var(--space-20);
    --rail-lead: var(--space-44);
  }

  /* The 1px grid gap over a gold bed is how this section draws its hairlines
     when it is a grid. At a 12px rail gap that bed becomes a gold band, so the
     cells carry their own edges here. */
  .stories {
    --rail-lead: var(--space-56);

    background: none;
    border-top: 0;
  }

  .stories__cell {
    height: 500px;
    border: 1px solid rgba(217, 169, 58, .26);
  }

  /* The lede above this rail ran straight into the first card. */
  .packages__grid { --rail-lead: var(--space-56); }
}