/* ==========================================================================
   SPIRAL CAFE — RESPONSIVE OVERRIDES
   Mobile-first base lives in style.css/components.css.
   Tested at 320 / 375 / 430 / 768 / 1024 / 1440.
   ========================================================================== */

/* Small phones: tighten a few oversized defaults */
@media (max-width: 374px) {
  .hero__title {
    font-size: clamp(2.25rem, 9vw, 2.75rem);
  }

  .btn {
    padding: 0.85em 1.3em;
    font-size: 0.92rem;
  }
}

/* ≥600px: gallery gets breathing room */
@media (min-width: 600px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ≥768px (tablet+): reveal desktop nav, richer grids */
@media (min-width: 768px) {
  .nav-desktop {
    display: block;
  }

  .nav-toggle {
    display: none;
  }

  .media-duo {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: stretch;
  }

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

  .quick-facts {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ≥1024px (laptop+): wider editorial layouts */
@media (min-width: 1024px) {
  .philosophy .wrap {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
  }

  .philosophy blockquote {
    font-size: var(--step-display-lg);
    max-width: 18ch;
  }

  .page-header .wrap {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
    align-items: end;
  }

  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .gallery-item:nth-child(3n + 1) {
    grid-row: span 2;
  }

  .gallery-item:nth-child(3n + 1).is-tall {
    aspect-ratio: auto;
  }
}

/* ≥1440px (large desktop): cap runaway line lengths, add air */
@media (min-width: 1440px) {
  :root {
    --gutter: max(4rem, calc((100vw - 1400px) / 2));
  }

  .hero__inner {
    padding-block: 8rem 5rem;
  }
}

/* Landscape phones with limited height: keep hero from over-extending */
@media (max-height: 480px) and (orientation: landscape) {
  .hero {
    min-height: 100vh;
  }

  .hero__inner {
    padding-block: 3rem 2rem;
  }

  .nav-mobile {
    padding-top: 4.5rem;
    overflow-y: auto;
  }
}

/* Print: strip chrome, keep content legible */
@media print {
  .site-header,
  .nav-mobile,
  .scroll-cue,
  .review-controls,
  .lightbox,
  .spiral-mark {
    display: none !important;
  }

  body {
    background: var(--color-white);
    color: var(--color-black);
  }
}