/* ==========================================================================
   HOZANA Dance Studio — responsive.css
   Media queries ONLY. Everything here is mobile-first: style.css holds the
   360px-and-up baseline, these blocks progressively enhance it.

   Breakpoints: 480 · 768 · 1024 · 1280
   ========================================================================== */


/* ==========================================================================
   ≥ 480px — small phones landscape / large phones
   ========================================================================== */

@media (min-width: 480px) {

  :root { --gutter: 1.5rem; }

  .hero__actions .btn { min-width: 0; }

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

  .gallery { columns: 2; }

  .fashion-grid--looks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acting-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

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

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

}

@media (min-width: 640px) {
  .grid--2,
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Below 480px, serve the lighter cropped hero photo instead of the desktop crop. */
@media (max-width: 479.98px) {
  .hero {
    background-image:
      linear-gradient(180deg, rgba(21, 14, 43, 0.90) 0%, rgba(21, 14, 43, 0.93) 45%, rgba(21, 14, 43, 0.985) 100%),
      url("../assets/images/hero-mobile.jpg");
  }
}


/* ==========================================================================
   ≥ 768px — tablets. Desktop nav appears, drawer retires.
   ========================================================================== */

@media (min-width: 768px) {

  :root { --gutter: 2rem; }

  /* --- Nav --------------------------------------------------------------- */
  .nav { display: block; }
  .nav-toggle { display: none; }
  .drawer, .scrim { display: none; }

  /* --- Layout ------------------------------------------------------------ */
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .location-layout { grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.2fr); }
  .review-panel { grid-template-columns: minmax(0, 1fr) auto; }

  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat { padding: 2rem 1.5rem; }

  /* --- Timeline ---------------------------------------------------------- */
  .timeline { padding-left: 8.5rem; }
  .timeline::before { left: 6.25rem; }
  .tl-item__dot { left: -2.5rem; }
  .timeline-foot { padding-left: 8.5rem; }
  .tl-now::before { left: -2.5rem; }

  /* Time gutter to the left of the rail — the day reads as a clock */
  .tl-item__clock {
    position: absolute;
    left: -8.5rem;
    top: 1.35rem;
    width: 5.25rem;
    text-align: right;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--brass);
  }
  .tl-card { padding: 1.4rem 1.6rem; }
  .tl-gap { margin-left: 0; }

  /* --- Cards ------------------------------------------------------------- */
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--portrait { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }

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

  /* --- Gallery ----------------------------------------------------------- */
  .gallery { columns: 2; column-gap: 1.25rem; }
  .fashion-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fashion-grid--looks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .acting-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* --- Forms ------------------------------------------------------------- */
  .form { grid-template-columns: repeat(2, 1fr); }
  .field--full { grid-column: 1 / -1; }

  /* --- Footer ------------------------------------------------------------ */
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }

  /* --- Floating WhatsApp gains its label ---------------------------------- */
  .wa-float { right: 1.5rem; bottom: 1.5rem; }
  .wa-float span { display: inline; }

}


/* ==========================================================================
   ≥ 1024px — laptops. Header CTA appears, three-up grids.
   ========================================================================== */

@media (min-width: 1024px) {

  :root { --gutter: 2.5rem; }

  html { scroll-padding-top: 96px; }

  .header__cta { display: inline-flex; }

  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--auto { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

  .hero { padding-block: clamp(4rem, 8vw, 8rem) clamp(3.5rem, 6vw, 6rem); }
  .hero__inner { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 3rem; align-items: end; }
  .hero__sub { font-size: 1.3rem; }

  /* Two-column timeline for the class detail cards on classes.html */
  .split--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; }

  .included__list { grid-template-columns: repeat(3, 1fr); }

  .gallery { columns: 3; }
  .fashion-grid--looks { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }

}


/* ==========================================================================
   ≥ 1280px — large desktops. Only breathing room changes.
   ========================================================================== */

@media (min-width: 1280px) {

  :root { --maxw: 1240px; }

  .section { padding-block: clamp(5rem, 7vw, 8rem); }

  .timeline { padding-left: 10rem; }
  .timeline::before { left: 7.75rem; }
  .timeline-foot { padding-left: 10rem; }
  .tl-item__clock { left: -10rem; width: 6.75rem; font-size: 0.8125rem; }

  .gallery { columns: 3; column-gap: 1.5rem; }

}


/* ==========================================================================
   Print — the schedule and prices are the parts anyone would print
   ========================================================================== */

@media print {
  .header, .drawer, .scrim, .wa-float, .footer,
  .chips, .skip-link, .hero__wash { display: none !important; }

  body { background: #fff; color: #000; }
  .section, .section--light, .section--raised { background: #fff !important; color: #000 !important; }
  .card, .tl-card { border: 1px solid #999 !important; background: #fff !important; }
  .img-frame { display: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75rem; }
}