/**
 * Responsive — The Way Barbershop
 * All media queries for global/structural elements.
 *
 * Breakpoints:
 *   <= 1024px  — Tablet
 *   <= 767px   — Mobile
 *   >= 768px   — Desktop (default styles)
 *
 * NOTE: Page-specific responsive rules live in their own CSS files
 *       (e.g. homepage.css). This file is for navbar, grids, footer, etc.
 */


/* ═══════════════════════════════════════════════════════════════════════════
   MAX 1024px — Tablet
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* Navbar: hide desktop nav and CTA, show hamburger */
    .navbar-nav-wrap {
        display: none;
    }

    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: flex !important;
    }

    /* Show hamburger toggle */
    .navbar-toggle {
        display: flex;
    }

    /* Mobile menu toggled by JS via .mobile-menu--open class */

    /* Show sticky mobile booking */
    .mobile-booking {
        display: block;
    }

    /* Grids collapse */
    .grid--5 {
        grid-template-columns: repeat(3, 1fr);
    }

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

    /* Footer grid: 2 columns */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2xl);
    }

    /* Section padding reduce */
    .section {
        padding-top: var(--space-3xl);
        padding-bottom: var(--space-3xl);
    }

    /* Add bottom padding for sticky mobile CTA */
    body {
        padding-bottom: 72px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MAX 767px — Mobile
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Container tighter padding */
    .container {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    /* Grids to single column */
    .grid--5,
    .grid--4,
    .grid--3,
    .grid--2 {
        grid-template-columns: 1fr;
    }

    /* Footer grid: single column */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    /* Footer bottom stack */
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    /* Section spacing reduce more */
    .section {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }
}