/* ==========================================================================
   TVIARA STUDIO — responsive.css
   Breakpoints: 1280 (laptop) · 1024 (tablet) · 768 · 480 (mobile) · 360
   Plus mobile motion policy. Full polish continues in later phases.
   ========================================================================== */

/* --------------------------------------------------------------------------
   LAPTOP — 1280px and down
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  :root { --container: 1140px; }
}

/* --------------------------------------------------------------------------
   TABLET — 1024px and down
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Editorial two-column blocks begin to relax */
  .statement .col-5,
  .statement .col-6 { grid-column: 1 / -1; }
  .statement .col-6.start-7 { grid-column: 1 / -1; }
  .statement .grid { row-gap: var(--sp-5); }

  .work-grid { gap: var(--sp-5); }
}

/* --------------------------------------------------------------------------
   ~860px — header collapses to mobile nav (see components.css fallback)
   This block layers the editorial + spacing adjustments.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  :root {
    --section-y: clamp(4rem, 9vw, 6rem);
    --header-h: 72px;
  }

  /* Mobile menu panel (toggled by main.js) */
  .site-header.nav-open {
    --header-fg: var(--ebony);
    background: var(--parchment);
  }
  .nav.is-open {
    display: flex;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-5);
    background: var(--parchment);
    padding: var(--gutter);
    z-index: 99;
  }
  .nav.is-open a {
    font-size: 1.5rem;
    color: var(--ebony);
    letter-spacing: 0.04em;
  }
}

/* --------------------------------------------------------------------------
   MOBILE — 480px and down (covers 390px target)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root { --gutter: 1.25rem; }

  .hero { min-height: 92svh; }
  .hero__title { max-width: 100%; }
  .hero__actions { gap: var(--sp-4); }

  .index-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    row-gap: 0.5rem;
  }
  .index-row .num { grid-column: 1; }
  .index-row .row-title,
  .index-row .row-desc { grid-column: 1; }

  .tabs__list { gap: var(--sp-4); width: 100%; }

  .footer-bottom { flex-direction: column; gap: 0.5rem; }
}

/* --------------------------------------------------------------------------
   SMALL MOBILE — 360px and down
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  :root { --gutter: 1rem; }
  .brand .brand-word { display: none; }
}

/* --------------------------------------------------------------------------
   MOBILE MOTION POLICY
   Disable heavy motion (parallax, pin, magnetic, custom cursor) on small
   screens and coarse pointers. Keep only light fade/translate reveals.
   JS reads these the same way; CSS enforces the safe baseline.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  [data-parallax] img { transform: none !important; }
}

@media (hover: none), (pointer: coarse) {
  .cursor-dot { display: none !important; }
  .magnetic { transform: none !important; }
}