/* ============================================================
   RESPONSIVE — All breakpoints: 320px → 2560px
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   HERO — Never gets any padding from anywhere
   ──────────────────────────────────────────────────────────── */
/* ── Hero never gets section padding ── */
#home,
#home.hero,
section.hero,
.hero {
  padding-top: var(--nav-height) !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

/* ────────────────────────────────────────────────────────────
   MOBILE (up to 480px)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  :root {
    --nav-height: var(--nav-height-mobile);
  }

  .container { padding: 0 var(--space-4); }

  /* Section padding — but NOT hero */
  .section:not(.hero)  { padding: var(--space-12) 0; }
  .about, .menu, .testimonials, .contact { padding: var(--space-12) 0; }

  /* Hero BG: switch to mobile image */
  .hero__bg { background-image: var(--hero-bg-mobile-url) !important; }

  /* Navbar */
  .navbar__links    { display: none; }
  .navbar__hamburger { display: flex; }
  .navbar__logo img  { height: 32px; }

  /* About */
  .about__grid           { grid-template-columns: 1fr; gap: var(--space-8); }
  .about__image-wrap     { display: none; }
  .about__highlights     { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .about__highlights:empty { display: none; }

  /* Menu */
  .menu__grid    { grid-template-columns: 1fr; }
  .menu__filters { gap: var(--space-2); }

  /* Contact */
  .contact__grid { grid-template-columns: 1fr; gap: var(--space-8); }

  /* Footer */
  .footer__grid   { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer__bottom { flex-direction: column; gap: var(--space-3); text-align: center; }

  /* Hide floating CTA */
  .floating-cta { display: none !important; }
}

/* ────────────────────────────────────────────────────────────
   SMALL MOBILE (320px – 375px)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 375px) {
  .about__highlights    { grid-template-columns: 1fr; }
  .section__heading     { font-size: var(--text-2xl); }
}

/* ────────────────────────────────────────────────────────────
   LARGE MOBILE / PHABLET (481px – 639px)
   ──────────────────────────────────────────────────────────── */
@media (min-width: 481px) and (max-width: 639px) {
  .navbar__links     { display: none; }
  .navbar__hamburger { display: flex; }

  .section:not(.hero) { padding: var(--space-14) 0; }
  .about, .menu, .testimonials, .contact { padding: var(--space-14) 0; }

  .about__grid   { grid-template-columns: 1fr; gap: var(--space-10); }
  .contact__grid { grid-template-columns: 1fr; }
  .footer__grid  { grid-template-columns: 1fr 1fr; }

  .floating-cta { display: none !important; }
}

/* ────────────────────────────────────────────────────────────
   TABLET (640px – 1023px)
   ──────────────────────────────────────────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {

  /* Hero BG: tablet image */
  .hero__bg { background-image: var(--hero-bg-tablet-url) !important; }

  .navbar__links     { display: none; }
  .navbar__hamburger { display: flex; }

  .section:not(.hero) { padding: var(--space-16) 0; }
  .about, .menu, .testimonials, .contact { padding: var(--space-16) 0; }

  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
    max-width: 560px;
    margin: 0 auto;
  }

  .about__image-frame    { aspect-ratio: 16/9; }
  .about__highlights     { grid-template-columns: repeat(4, 1fr); }
  .contact__grid         { grid-template-columns: 1fr; gap: var(--space-10); }
  .footer__grid          { grid-template-columns: 1fr 1fr; gap: var(--space-10); }

  .floating-cta { display: none !important; }
}

/* ────────────────────────────────────────────────────────────
   LAPTOP (1024px – 1279px)
   ──────────────────────────────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1279px) {
  .about__grid   { gap: var(--space-16); }
  .contact__grid { gap: var(--space-10); }
}

/* ────────────────────────────────────────────────────────────
   DESKTOP (1280px+)
   ──────────────────────────────────────────────────────────── */
@media (min-width: 1280px) {
  /* defaults apply */
}

/* ────────────────────────────────────────────────────────────
   LARGE DESKTOP / 4K (1800px+)
   ──────────────────────────────────────────────────────────── */
@media (min-width: 1800px) {
  :root          { font-size: 18px; }
  .container     { max-width: 1600px; }
}

/* ────────────────────────────────────────────────────────────
   LANDSCAPE PHONES (short height)
   ──────────────────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  #home.hero {
    height: auto !important;
    min-height: 100dvh;
  }
  .hero__content {
    padding-top: calc(var(--nav-height) + 8px) !important;
    padding-bottom: 20px !important;
    gap: 8px !important;
  }
  .hero__scroll          { display: none; }
  .hero__logo-wrap       { width: 80px !important; height: 80px !important; }
  .hero__logo-ring--outer { width: 80px !important; height: 80px !important; }
  .hero__logo-ring--inner { width: 66px !important; height: 66px !important; }
  .hero__logo-img-wrap   { width: 56px !important; height: 56px !important; }
  .hero__headline        { font-size: 1.6rem !important; }
  .hero__subheadline     { display: none; }
}

/* ────────────────────────────────────────────────────────────
   PRINT
   ──────────────────────────────────────────────────────────── */
@media print {
  .navbar, .floating-cta, .hero__scroll,
  .page-loader { display: none !important; }

  .hero         { height: auto; padding: var(--space-8) 0; }
  .hero__bg,
  .hero__overlay { display: none; }
  .hero__headline,
  .hero__subheadline { color: #000 !important; }

  .section      { padding: var(--space-8) 0; break-inside: avoid; }
  body          { background: white; color: black; }
}
/* ────────────────────────────────────────────────────────────
   HERO DESKTOP FIX — button never cut off
   ──────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {

  .hero__content {
    margin-top: calc(var(--nav-height) / 2);
    gap: 16px;
    max-width: 560px;
  }

  #home.hero {
    min-height: 100vh;
    height: auto;
  }
}

/* ────────────────────────────────────────────────────────────
   HERO MOBILE FIX — no empty space above logo
   ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero__content {
    transform: translateY(calc(var(--nav-height) / 2));
    gap: 10px;
    max-width: 360px;
  }

  /* Next section must not peek through */
  #home.hero {
    height: 100dvh;
    min-height: 580px;
    /* Clip anything that overflows */
    overflow: hidden;
  }

  /* Hide scroll indicator on small phones */
  .hero__scroll { display: none; }
}

/* ────────────────────────────────────────────────────────────
   NEXT SECTION — clear separation from hero
   ──────────────────────────────────────────────────────────── */
#about.section.about {
  border-top: none;
  /* Ensure full background covers any gap */
  position: relative;
  z-index: 1;
  background: var(--color-bg);
}

/* Force body background to match hero so no white gap */
body {
  background: #080e09; /* matches hero dark bg */
}

/* After hero, reset to site background */
#about {
  background: var(--color-bg);
}