/* ============================================================
   GUCCHI — Responsive
   ============================================================ */

/* ---------- ≤ 1100px : tablet landscape ---------- */
@media (max-width: 1100px) {
  .pillars__grid { grid-template-columns: repeat(2, 1fr); }
  .prods__grid   { grid-template-columns: repeat(2, 1fr); }
  .ftr__grid     { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .ftr__brand    { grid-column: 1 / -1; }
  .origin__grid  { grid-template-columns: 1fr; gap: 3rem; }
  .contact__grid { grid-template-columns: 1fr; }
  .trust__grid   { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- ≤ 900px : tablet portrait ---------- */
@media (max-width: 900px) {
  :root { --sec: clamp(4rem, 9vh, 6rem); }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    background: rgba(26,7,8,.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    clip-path: circle(0% at calc(100% - 42px) 42px);
    transition: clip-path .78s cubic-bezier(.76,0,.24,1);
    pointer-events: none;
  }
  .nav.is-open {
    clip-path: circle(150% at calc(100% - 42px) 42px);
    pointer-events: auto;
  }
  .nav a {
    font-family: var(--display);
    font-size: 2rem;
    font-weight: 300;
    color: var(--cream-100);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
  }
  .nav.is-open a { opacity: 1; transform: none; }
  .nav.is-open a:nth-child(1) { transition-delay: .16s; }
  .nav.is-open a:nth-child(2) { transition-delay: .24s; }
  .nav.is-open a:nth-child(3) { transition-delay: .32s; }
  .nav.is-open a:nth-child(4) { transition-delay: .40s; }
  .nav.is-open .btn { transition-delay: .48s; font-family: var(--body); font-size: var(--t-sm); }
  .nav a::after { display: none; }

  .burger { display: block; }
  body.nav-open { overflow: hidden; }

  .pdp__grid { grid-template-columns: 1fr; }
  .pdp:nth-child(even) .pdp__media { order: 0; }

  .chap__grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .chap__num { position: static; font-size: 2.4rem; display: flex; align-items: baseline; gap: 1rem; }
  .chap__num small { margin-top: 0; }

  .values { grid-template-columns: 1fr; }
  .pack-strip { grid-template-columns: repeat(2, 1fr); }
  .region__stats { grid-template-columns: 1fr 1fr; }
  .journey__spacer { height: 260vh; }
}

/* ---------- ≤ 640px : phone ---------- */
@media (max-width: 640px) {
  :root {
    --gut: 1.15rem;
    --sec: 3.6rem;
    --t-hero: clamp(2.5rem, 12vw, 3.6rem);
  }

  .stage { height: 100svh; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
  .hero__sub { font-size: 1rem; }

  .pillars__grid,
  .prods__grid,
  .trust__grid,
  .ftr__grid,
  .uses,
  .field--2,
  .pack-strip { grid-template-columns: 1fr; }

  .ftr__base { flex-direction: column; text-align: center; align-items: center; }
  .quote { flex-basis: 86vw; padding: 1.7rem 1.4rem; }
  .quote p { font-size: 1.1rem; }

  .spec__row { grid-template-columns: 1fr; gap: .25rem; padding: .8rem 0; }
  .region { padding-left: 1.1rem; }
  .region__stats { grid-template-columns: 1fr; }

  .journey__spacer { height: 200vh; }
  .scenecap { bottom: 9vh; }
  .brand__txt { font-size: 1.32rem; }

  .faq__q { font-size: 1.05rem; padding: 1.2rem 0; }
  .btn { padding: .9rem 1.5rem; }
}

/* ---------- Landscape phones: shorten the pinned journey ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .journey__spacer { height: 180vh; }
  .hero__title { font-size: 2.4rem; }
  .hero__sub { display: none; }
  .cue { display: none; }
}

/* ---------- Fine pointer only: enable hover-heavy affordances ---------- */
@media (hover: none) {
  .card:hover { transform: none; }
  .pillar:hover { background: transparent; }
}

/* ---------- Print ---------- */
@media print {
  .hdr, .pre, .noise, .cue, #gl, .stage, .journey { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1rem; }
  a::after { content: " (" attr(href) ")"; font-size: .8em; }
}