/* ============================================================
   Cafe Codex — Responsive
   ============================================================ */

/* Keep grid children from forcing horizontal overflow */
.section, main, .container, .card, .menu-row, .footer__col { min-width: 0; }

/* ---------- Nav collapses before it can ever clip ---------- */
@media (max-width: 1150px) {
    :root { --header-h: 72px; }
    .nav { display: none; }
    .hamburger { display: block; }
}

@media (max-width: 1100px) {
    .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.4rem; }
    .footer__brand { grid-column: 1 / -1; }
}

/* ---------- Tablet / small laptop: single-column layouts ---------- */
@media (max-width: 1040px) {
    .statement__grid,
    .signature__grid,
    .split,
    .process__layout,
    .contact-grid { grid-template-columns: minmax(0, 1fr); }

    .split--reverse .split__media { order: 0; }
    .split__media { max-width: 560px; width: 100%; }

    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .menu-list { grid-template-columns: minmax(0, 1fr); }
    .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 170px; }
    .food-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .food-tile:first-child { grid-column: span 2; }

    .signature__badge { right: 12px; top: 12px; width: 108px; }

    /* Decorative overlaps now sit inside the container instead of the viewport edge */
    .statement__media img + img { right: 0; bottom: -6%; border-width: 6px; }
    .split__media--stack img:last-child { left: 0; bottom: -6%; border-width: 6px; }

    .hero__side { display: none; }
}

@media (max-width: 680px) {
    body { font-size: 1rem; }
    .hero { min-height: 92svh; }
    .hero__title { font-size: clamp(2.4rem, 12vw, 4rem); }
    .hero__actions .btn { flex: 1 1 100%; }

    .cards { grid-template-columns: minmax(0, 1fr); }
    .form__row { grid-template-columns: minmax(0, 1fr); }
    .stats { gap: 1.6rem; }

    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
    .gallery-item--wide { grid-column: span 2; }

    .food-strip { grid-template-columns: minmax(0, 1fr); }
    .food-tile:first-child { grid-column: span 1; aspect-ratio: 4/3; }

    .menu-row__thumb { width: 54px; height: 54px; }
    .menu-row__name { font-size: 1.15rem; }

    .process__step { grid-template-columns: 54px minmax(0, 1fr); }
    .process__step h3 { font-size: 1.25rem; }

    .flash-stack { left: 1rem; right: 1rem; }
    .footer__top { grid-template-columns: minmax(0, 1fr); }
    .footer__bottom { flex-direction: column; }
    .interior__meta { gap: 1rem; }
    .page-hero { min-height: 46vh; }
}

@media (max-width: 380px) {
    .gallery-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 220px; }
    .gallery-item--wide { grid-column: span 1; }
}

@media (min-width: 1151px) {
    .mobile-nav, .mobile-nav-backdrop { display: none; }
}

/* ---------- Laptop tuning ---------- */
/* Common laptop widths (1280–1600) — keep the layout compact */
@media (min-width: 1151px) and (max-width: 1600px) {
    :root { --container: 1180px; }
}

/* Short laptop viewports (720–900 tall) — stop the hero from clipping */
@media (min-width: 1151px) and (max-height: 900px) {
    :root { --header-h: 76px; }
    .hero { min-height: 100svh; }
    .hero__title { font-size: clamp(2.3rem, 5.2vw, 4.8rem); margin: 1rem 0 1.1rem; }
    .hero__content { padding-top: calc(var(--header-h) + 1.6rem); padding-bottom: 3.4rem; }
    .hero__desc { margin-bottom: 1.6rem; }
    .hero__scroll, .hero__side { bottom: 1.3rem; }
    .section { padding-top: clamp(3.4rem, 7vh, 6rem); padding-bottom: clamp(3.4rem, 7vh, 6rem); }
    .page-hero { min-height: 52vh; }
    .interior { min-height: 70vh; }
}

/* Very short laptops (<= 760 tall) */
@media (min-width: 1151px) and (max-height: 760px) {
    .hero__title { font-size: clamp(2.1rem, 4.6vw, 4rem); }
    .hero__content { padding-bottom: 2.6rem; }
    .hero__desc { font-size: 1rem; margin-bottom: 1.3rem; }
    .hero__label { font-size: .68rem; }
}