/* ============================================================================
   Nippon Bike World — responsive.css
   Phone / tablet / desktop breakpoints
   ============================================================================ */

/* Global overflow guard */
html, body{ max-width:100%; overflow-x:clip; }
main, .section, .section--paper, .section--tight, .hscroll, .stats, .foot, .top, .drawer{
  max-width:100%;
}
img, svg, video, iframe{ max-width:100%; height:auto; }
.container, .container--wide, .top__inner, .foot__top, .foot__bottom{
  width:min(100% - 2rem, var(--container));
}

@media (min-width:1800px){
  :root{ --container:1440px; }
}

/* ---- Tablet landscape / small laptop ---- */
@media (max-width:1100px){
  .hero__inner{ grid-template-columns:1fr; gap:2.4rem; }
  .hero__canvas{ width:100%; opacity:.4; }
  .collection{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.8rem; }
  .collection .piece:nth-child(n){ margin-top:0; }
  .collection .piece:nth-child(n) .piece__img{ aspect-ratio:4/3; }
  .articles,.values{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .foot__top{ grid-template-columns:1fr; gap:2rem; }
  .foot__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .workshop{ grid-template-columns:1fr; }
  .spread, .spread--rev, .mag{ grid-template-columns:1fr; }
  .spread__img, .mag__img{ min-height:42vh; }
  .spread--rev .spread__img{ order:0; }
  .hslide{ flex:0 0 min(70vw,420px); }
}

/* ---- Tablet portrait / large phone ---- */
@media (max-width:900px){
  .top__nav{ display:none; }
  .top__burger{ display:flex; justify-self:end; }
  .top__inner{
    grid-template-columns:1fr auto;
    width:min(100% - 1.6rem, var(--container));
    height:64px;
  }
  .top__brand{ justify-self:start; align-items:flex-start; text-align:left; }
  .top__brand-jp{ font-size:1.1rem; letter-spacing:.16em; padding-left:.08em; }
  .top__brand-en{ letter-spacing:.18em; font-size:.52rem; }
  .drawer{ inset:64px 0 auto; }

  .sec-head{
    grid-template-columns:auto 1fr;
    gap:.8rem 1rem;
    margin-bottom:2.2rem;
  }
  .sec-head__x{ grid-column:1 / -1; max-width:none; }

  .chapter{
    grid-template-columns:auto 1fr;
    gap:1rem;
    padding:1.5rem 0;
  }
  .chapter__x{ display:none; }
  .chapter__no{ font-size:1rem; }

  .spread,.spread--rev,.mag,.contact-grid{ grid-template-columns:1fr; }
  .contact-grid > *:first-child{ border-right:0; border-bottom:1px solid var(--line); }
  .stats__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .stat:nth-child(3){ border-left:0; }

  .section{ padding-block:var(--sp-6); }
  .section--tight{ padding-block:clamp(2.4rem,6vw,3.6rem); }

  /* Native swipe gallery — no GSAP pin on small screens */
  .hscroll{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    padding:1.2rem 0 2rem;
  }
  .hscroll__track{
    display:flex;
    gap:1rem;
    width:max-content;
    max-width:none;
    padding-inline:1rem;
    transform:none !important;
  }
  .hslide{
    flex:0 0 min(82vw,340px);
    scroll-snap-align:start;
  }
  .hslide__cap{
    flex-wrap:wrap;
    gap:.35rem .8rem;
  }
  .hslide__cap h3{ font-size:1.1rem; }
  .hslide__cap span{ font-size:.85rem; }

  .pull{ padding-inline:.2rem; }
  .pull q{ font-size:clamp(1.25rem,5.2vw,2rem); word-break:normal; overflow-wrap:anywhere; }
  .foot__jp{ font-size:1.5rem; letter-spacing:.12em; }
  .faq__q{ font-size:1rem; gap:.7rem; }
  .tl{ grid-template-columns:auto 1fr; gap:1rem; }
  .wrow{ grid-template-columns:auto 1fr; gap:1rem; }
}

/* ---- Phone ---- */
@media (max-width:640px){
  .container, .container--wide, .top__inner, .foot__top, .foot__bottom{
    width:min(100% - 1.4rem, var(--container));
  }

  .collection,
  .articles,
  .values,
  .form__row,
  .foot__cols{ grid-template-columns:1fr; }

  .stats__grid{ grid-template-columns:1fr 1fr; }
  .stat{ border-left:0 !important; padding:1.2rem .6rem; }
  .stat__n{ font-size:clamp(1.8rem,10vw,2.6rem); }

  .hero-swiper{ min-height:100svh; height:auto; }
  .hero-slide__content{
    padding:5.2rem 0 5rem;
    max-width:100%;
    width:min(100% - 1.4rem, var(--container));
  }
  .hero__title{ font-size:clamp(2rem,9vw,2.8rem); }
  .hero__lede{ font-size:.95rem; margin:1rem 0 1.4rem; }
  .hero__spec{ gap:1.2rem; margin-top:1.6rem; }
  .hero__spec .n{ font-size:1.25rem; }
  .hero__actions{ gap:.9rem; }
  .hero__actions .btn{ width:100%; justify-content:center; }
  .swiper-button-prev.hero-swiper__nav,
  .swiper-button-next.hero-swiper__nav{ display:none; }

  .piece__spec{ gap:.4rem; }
  .piece__jp{ font-size:1.35rem; }
  .display{ font-size:clamp(1.7rem,8vw,2.6rem); }

  .banner h1{ font-size:clamp(1.9rem,9vw,3rem); }
  .kicker{ letter-spacing:.22em; font-size:.68rem; }
  .kicker::before{ width:24px; }

  .foot__cols{ gap:1.6rem; }
  .foot__bottom{ flex-direction:column; align-items:flex-start; }
  .filters{ gap:.9rem 1.2rem; }

  .hslide{ flex:0 0 86vw; }
  .chapter{ padding:1.2rem 0; }
  .chapter__jp{ font-size:1.15rem; }
}

/* ---- Small phone ---- */
@media (max-width:420px){
  .stats__grid{ grid-template-columns:1fr; }
  .stat{ border-bottom:1px solid var(--line); }
  .stat:last-child{ border-bottom:0; }
  .top__brand-jp{ font-size:1rem; letter-spacing:.1em; }
  .hero__spec{ gap:1rem; }
  .btn{ padding:.9rem 1.2rem; letter-spacing:.1em; font-size:.78rem; }
}