/* Kroma Living — pinned horizontal-scroll carousel, MOBILE ONLY (≤640px).
   Vertical scroll drives horizontal progress while the section is pinned
   (see carousel.js): one slide fully visible at a time, and the pin only
   releases once the last slide is fully centred.
   On tablet and desktop (>640px) this reverts to the plain responsive grid
   it had before — same column logic as the other .grid-sym-N blocks. */

.hscroll-outer { position: relative; }

/* ---------- Mobile (≤640px): pinned carousel ---------- */
@media (max-width: 640px) {
  .hscroll-sticky {
    position: sticky;
    top: var(--header-h, 76px);
    height: 70vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* promotes this to its own compositor layer — without it, some mobile
       browsers visibly judder a sticky element while a descendant's
       transform is being updated every scroll frame */
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
  }

  .hscroll-track {
    display: flex;
    height: 100%;
    will-change: transform;
    backface-visibility: hidden;
  }

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

  .hscroll-slide > * { width: 100%; }
  .hscroll-slide-tech { padding: 0 10px; }
  .hscroll-slide-tech > .k-tech { max-width: 100%; margin: 0 auto; }
  .hscroll-slide-team > .k-flip { max-width: 240px; margin: 0 auto; }

  .hscroll-dots {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
  }

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

  /* fallback when JS/reduced-motion disables the pin: a plain swipeable row */
  .hscroll-outer.hscroll-static .hscroll-sticky {
    position: static;
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 18px;
  }
  .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; }
}

/* ---------- Tablet & desktop (>640px): plain responsive grid, as before ---------- */
@media (min-width: 641px) {
  .hscroll-outer { height: auto !important; }
  .hscroll-sticky {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
  }
  .hscroll-dots { display: none !important; }

  .hscroll-track-tech {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    transform: none !important;
    height: auto !important;
  }
  .hscroll-track-team {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr);
    gap: 20px 16px;
    transform: none !important;
    height: auto !important;
  }
  .hscroll-slide {
    flex: none;
    width: auto;
    height: auto;
    display: block;
  }
  .hscroll-slide-tech > .k-tech,
  .hscroll-slide-team > .k-flip {
    max-width: none;
    margin: 0;
  }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .hscroll-track-tech { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 641px) and (max-width: 1500px) {
  .hscroll-track-team { grid-template-columns: 1fr !important; }
}