/* ============================================================
   90-mobile-carousel — shared, opt-in swipe row for card grids.
   Add class "m-carousel" to any card grid element. At phone
   widths (<=767px) it becomes a horizontal, snap-scrolling row:
   one full card plus a peek of the next, native touch swipe,
   hidden scrollbar, no auto-advance. Tablet/desktop layouts are
   untouched (every rule sits inside the media query). Prev/next
   arrows are added by js/sections/90-mobile-carousel.js.

   Loaded last (90-) on purpose: equal-specificity rules here
   must win over each section's own grid rules at phone width.
   ============================================================ */

.m-carousel-nav {
  display: none;
}

@media (max-width: 767px) {
  .m-carousel {
    display: flex;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: var(--mcar-gap, 1rem);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* Room for hover lift + shadows inside the scroll box, cancelled
       outside so the section's spacing is unchanged. */
    padding-block: 8px 14px;
    margin-block: -8px -14px;
  }
  .m-carousel::-webkit-scrollbar {
    display: none;
  }

  .m-carousel > * {
    flex: 0 0 86%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* A single card (e.g. a solo team member) just fills the row. */
  .m-carousel > :only-child {
    flex-basis: 100%;
  }

  .m-carousel-nav {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
  }
  .m-carousel-nav[hidden] {
    display: none;
  }

  .m-carousel-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line-bone);
    background: var(--white);
    color: var(--text-on-bone);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: opacity 200ms var(--ease-out), background-color 200ms var(--ease-out);
  }
  .m-carousel-nav__btn:disabled {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
  }
}

html.reduced-motion .m-carousel {
  scroll-behavior: auto;
}