/* ==========================================================================
   RESPONSIVE OVERRIDES
   Fluid clamp() sizing handles most scaling; this file restructures
   grids/layouts at key breakpoints so nothing wraps awkwardly.
   ========================================================================== */

/* ---- Large desktop tighten ---- */
@media (max-width: 1180px) {
  .featured-grid { grid-template-columns: repeat(4, 1fr); }
  .feature-lg { grid-column: span 4; grid-row: span 2; }
  .feature-md { grid-column: span 4; }
  .feature-sm { grid-column: span 2; }

  .footer-top { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-col:last-child { grid-column: span 1; }
}

/* ---- Tablet ---- */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }

  .hero-credential { display: none; }

  .statement-grid,
  .intro,
  .henna-teaser,
  .contact-grid,
  .about-hero,
  .page-hero-grid { grid-template-columns: 1fr; }

  .intro { gap: 3rem; }
  .intro-media .frame { max-width: 460px; margin-inline: auto; }

  .story-pin { grid-template-columns: 1fr; height: auto; padding-block: 4rem 0; }
  .story-media-col { height: 60vh; order: -1; position: relative; }
  .story-media { position: absolute; }
  .story-text-col { padding-block: 2.5rem; }
  .story-panel { position: relative; opacity: 1 !important; display: none; }
  .story-panel.is-active { display: flex; }
  .story-progress { position: static; margin-top: 2rem; }

  .studio-words span { font-size: clamp(2.2rem, 8vw, 4rem); }
  .studio-stage { height: 50vh; }
  .studio-main { width: 72vw; }
  .studio-side { width: 32vw; }

  .checks-grid,
  .occasion-grid { grid-template-columns: 1fr; }

  .addons-grid { grid-template-columns: repeat(2, 1fr); }

  .henna-gallery-grid .g1,
  .henna-gallery-grid .g2,
  .henna-gallery-grid .g3,
  .henna-gallery-grid .g4 { grid-column: span 3; }

  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .footer-brand { grid-column: span 2; }

  .menu-row:not(.no-thumb) { grid-template-columns: 72px 1fr; }
  .menu-row:not(.no-thumb) .thumb { width: 72px; height: 72px; }
  .menu-row:not(.no-thumb) .menu-row-price { grid-column: 2 / -1; text-align: left; align-items: flex-start; }
  .menu-row:not(.no-thumb) .book-link { grid-column: 2 / -1; justify-self: flex-start; margin-top: .5rem; }
  .menu-row.no-thumb { grid-template-columns: 1fr; }
  .menu-row.no-thumb .menu-row-price { text-align: left; align-items: flex-start; margin-top: .5rem; }
  .menu-row.no-thumb .book-link { justify-self: flex-start; margin-top: .5rem; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  :root { --gutter: 1.25rem; }

  .hero { align-items: center; padding-top: clamp(7rem, 6rem + 6vw, 9rem); min-height: 100svh; }
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta-row .btn { justify-content: center; }

  .ticker-track span { font-size: 1.05rem; }

  .featured-head { flex-direction: column; align-items: flex-start; }
  .featured-grid { grid-template-columns: 1fr; }
  .feature-lg, .feature-md, .feature-sm { grid-column: span 1; }
  .feature-lg .media { aspect-ratio: 4/5; }

  .studio-stage { height: 40vh; }
  .studio-main { width: 84vw; }
  .studio-side { display: none; }

  .shout-text { font-size: clamp(2.6rem, 14vw, 4rem); }

  .step { grid-template-columns: 44px 1fr; gap: 1rem; }
  .step-num { width: 44px; height: 44px; font-size: 1rem; }
  .steps-line { left: 22px; }

  .final-cta h2 { font-size: clamp(2.2rem, 12vw, 3.5rem); }

  .footer-top { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .menu-intro { grid-template-columns: 1fr; }
  .addons-grid { grid-template-columns: 1fr; }

  .henna-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .henna-gallery-grid .g1,
  .henna-gallery-grid .g2,
  .henna-gallery-grid .g3,
  .henna-gallery-grid .g4 { grid-column: span 2; aspect-ratio: 4/5; }

  .henna-hero-grid { grid-template-columns: 1fr; }

  .contact-map { min-height: 260px; }

  .sticky-book { padding: .85rem 1.1rem; }
  .sticky-book span { font-size: .75rem; }

  .intro-tag { left: 0; bottom: -1rem; padding: .8rem 1rem; max-width: 180px; font-size: .88rem; }
}

@media (max-width: 380px) {
  .hero-title { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .nav-logo-text { font-size: 1.25rem; }
}