/* ARRAY.GO — one-card-at-a-time carousel, MOBILE ONLY (≤640px). The scroll
   lock itself lives in carousel.js (wheel/touch capture); this just lays
   out one full-width slide at a time and clips the rest.
   On tablet and desktop (>640px) this reverts to a plain grid — same
   column count the section used before it had a mobile carousel. */

.hscroll-outer { position: relative; }

/* ---------- Mobile (≤640px): one card, scroll-locked ---------- */
@media (max-width: 640px) {
  .hscroll-outer { overflow: hidden; padding-bottom: 6px; }

  .hscroll-track {
    display: flex;
    will-change: transform;
  }

  .hscroll-slide {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0 8px;
    box-sizing: border-box;
  }

  .hscroll-slide-team > .team-card { max-width: 290px; width: 100%; margin: 0 auto; }
  .hscroll-slide-tech { padding: 6px 4px 8px; }
  .hscroll-slide-tech > .tech-card { max-width: 100%; width: 100%; margin: 0 auto; }

  .hscroll-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
  }

  .hscroll-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(31, 29, 26, .2);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background 240ms ease-out, transform 240ms ease-out;
  }
  .hscroll-dot.active { background: var(--poppy-pink); transform: scale(1.4); }

  /* free-scrolling row — no locked/mandatory scroll capture: a plain,
     native horizontally-swipeable row (also reused as the fallback when
     reduced-motion disables a locked carousel elsewhere). */
  .hscroll-outer.hscroll-static { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .hscroll-outer.hscroll-static .hscroll-track { will-change: auto; }
  .hscroll-outer.hscroll-static .hscroll-slide { scroll-snap-align: start; }
  .hscroll-outer.hscroll-static .hscroll-dots { display: none; }

  .hscroll-arrows { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
  .hscroll-arrow {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    background: #fff;
    color: var(--poppy-pink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity .2s ease-out, background .2s ease-out;
  }
  .hscroll-arrow:hover { background: var(--pink-050); }
  .hscroll-arrow:disabled { opacity: .3; cursor: default; pointer-events: none; }
}

/* ---------- Tablet & desktop (>640px): plain grid, as before ---------- */
@media (min-width: 641px) {
  .hscroll-track-tech {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    transform: none !important;
  }
  .hscroll-track-team {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 26px 16px;
    transform: none !important;
  }
  .hscroll-dots { display: none !important; }
  .hscroll-arrows { display: none !important; }
  .hscroll-slide { flex: none; width: auto; display: block; padding: 0; }
  .hscroll-slide-tech > .tech-card,
  .hscroll-slide-team > .team-card { max-width: none; margin: 0; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .hscroll-track-team { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 641px) and (max-width: 820px) {
  .hscroll-track-tech { grid-template-columns: 1fr; }
  .hscroll-track-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}