/* ==========================================================================
   Mobile card slider — the Figma "mobile screens" (YmLzL45Qaw4FJRduYrQQM1,
   canvas 213:4040) treatment for every multi-card grid on a phone: one
   372px card in view, the row swipes with scroll-snap, and a dot rail sits
   under it. Added 2026-09-22.

   Sources, measured off the frames rather than eyeballed:
     223:6725  Shopify services (dark)   card 372, gap 24, 20px to the dots
     215:5599  "Six things" (light)      card 372, gap 15, 24px to the dots
     223:6884  Shopify team (light)      card 372, gap 15, 24px to the dots
     215:6316  AI in Business "improve"  same component
     213:4647  home testimonials (dark)  card 373, gap 24, 20px to the dots
     Frame 1948756049 (the dots, exported): active 32x10 pill #50338B, idle
     10px circles — #50338B at 30% on dark sections, #E2D4FF on light — with
     8px between them.

   js/mobile-slider.js owns the selector list, adds .tbi-mslider to each
   container it manages, measures the container's natural left inset into
   --tbi-mslider-gutter, and toggles .is-on below 768px. Above that nothing
   here applies and the container's own grid CSS is untouched.

   Specificity is deliberately (0,2,2). The family stylesheets scope their
   grids as `body.tbi-figma-page .hrf-svc__grid` (0,2,0) and the legacy
   templates as `.shopify-services__grid` (0,1,0); this file is enqueued
   late (priority 99) but must not depend on that, so it wins on weight.
   ========================================================================== */

.tbi-mslider__dots {
  display: none;
}

@media (max-width: 767px) {
  html body .tbi-mslider.is-on {
    --tbi-mslider-gutter: 15px;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--tbi-mslider-gap, 15px);
    /* Explicit, not auto: several of these grids sit in a centred flex
       column (.process__container, .hrf-svc__container, ...), where an
       auto-width flex row shrink-wraps to the sum of its cards and overflowed
       the page by up to 2,700px. The width is the parent plus the two bleeds
       the negative margins below take back. */
    width: calc(100% + var(--tbi-mslider-gutter) * 2);
    max-width: none;
    align-self: auto;
    /* Bleed to the viewport edge and pad back in by the same amount, so the
       first card starts flush with the section's own gutter and the next one
       peeks past the right edge. The gutter is measured per container by the
       script; 15px is Figma's and the fallback. */
    margin-inline: calc(var(--tbi-mslider-gutter) * -1);
    padding-inline: var(--tbi-mslider-gutter);
    /* Room for card shadows and the hover sheen: overflow-x: auto forces
       overflow-y to auto as well, which would clip anything painted outside
       the card box. */
    padding-block: 8px;
    margin-block: -8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--tbi-mslider-gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  html body .tbi-mslider.is-on::-webkit-scrollbar {
    display: none;
  }

  /* One card per view: 100% of the track's content box, which after the
     bleed-and-pad above is exactly the section's content width (372 at
     402px). Grid placement, fixed widths and margins from the desktop rules
     are reset so the card can be sized by the flex basis alone. */
  html body .tbi-mslider.is-on > * {
    flex: 0 0 100%;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    grid-column: auto;
    grid-row: auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-sizing: border-box;
  }

  html body .tbi-mslider.is-on > template {
    display: none;
  }

  /* ---- Dot rail (Frame 1948756049) ---- */
  .tbi-mslider__dots.is-on {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .tbi-mslider__dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background-color: rgba(80, 51, 139, 0.3);
    cursor: pointer;
    transition: width 0.2s ease, background-color 0.2s ease;
  }

  .tbi-mslider__dots--light button {
    background-color: #e2d4ff;
  }

  .tbi-mslider__dots button.is-active {
    width: 32px;
    background-color: #50338b;
  }

  .tbi-mslider__dots button:focus-visible {
    outline: 2px solid #9b66ff;
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .tbi-mslider.is-on {
    scroll-behavior: auto;
  }

  .tbi-mslider__dots button {
    transition: none;
  }
}