/* ==========================================================================
   Merzouga Quad — responsive layer (min-width breakpoints)
   576px  large phones      768px  tablets
   1024px small desktops    1280px large desktops
   ========================================================================== */

/* ---- ≥ 576px ---------------------------------------------------------- */
@media (min-width: 576px) {
    :root { --gutter: 24px; }

    .tour-grid, .post-grid, .card-grid, .review-grid { grid-template-columns: repeat(2, 1fr); }
    .form-row { grid-template-columns: 1fr 1fr; }
    .two-col { grid-template-columns: 1fr 1fr; }
    .info-list > div { grid-template-columns: 220px 1fr; gap: 16px; }
    .photo-wall { grid-template-columns: repeat(3, 1fr); }
    .facts-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- ≥ 768px ---------------------------------------------------------- */
@media (min-width: 768px) {
    :root { --gutter: 32px; }

    .section { padding-block: 80px; }
    .hero h1 { font-size: 52px; }
    .trust-list { grid-template-columns: repeat(4, 1fr); padding-block: 28px; }
    .split { grid-template-columns: 1fr 1fr; gap: 56px; }
    .split-reverse .split-media { order: 2; }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .chooser { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; }
    .footer-bottom-inner { flex-direction: row; justify-content: space-between; align-items: center; }
    .facts-grid { grid-template-columns: repeat(5, 1fr); }
    .facts-grid > div { border-left: 1px solid #2a2a2a; padding-inline: 18px; }
    .facts-grid > div:first-child { border-left: 0; padding-left: 0; }
    .filters { grid-template-columns: 1fr 1fr; }
}

/* ---- ≥ 1024px: desktop typography, navigation and sidebar --------------- */
@media (min-width: 1024px) {
    :root { --header-h: 84px; }

    body { font-size: 18px; line-height: 1.7; }
    h1 { font-size: 48px; }
    h2 { font-size: 38px; }
    h3 { font-size: 30px; }
    h4 { font-size: 24px; }
    h5 { font-size: 20px; }
    h6 { font-size: 18px; }
    p  { margin-bottom: 22px; }
    small, .small { font-size: 16px; }
    ul, ol { font-size: 18px; }
    blockquote { font-size: 22px; }
    .lead, .page-hero-lead { font-size: 20px; }
    .btn { padding: 14px 28px; }

    /* Hero */
    .hero { min-height: 92vh; align-items: center; }
    .hero-inner { padding-bottom: 72px; }
    .hero h1 { font-size: 62px; }
    .hero-sub { font-size: 22px; }
    .page-hero-inner { padding-top: calc(var(--header-h) + 48px); padding-bottom: 64px; }


    /* Layout with sticky sidebar */
    .layout-sidebar { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
    .sidebar { position: sticky; top: calc(var(--header-h) + 20px); }

    .tour-grid, .post-grid, .card-grid { grid-template-columns: repeat(3, 1fr); }
    .tour-grid-4 { grid-template-columns: repeat(4, 1fr); }
    .review-grid { grid-template-columns: repeat(3, 1fr); }
    .steps { grid-template-columns: repeat(3, 1fr); }
    .photo-wall { grid-template-columns: repeat(4, 1fr); }
    .photo-wall .wide { grid-column: span 2; grid-row: span 2; }

    .consent { inset: auto 24px 24px auto; }
}

/* ---- ≥ 1180px: desktop navigation (needs room for 7 items + CTAs) ---- */
@media (min-width: 1180px) {
    /* The header CTA and sticky sidebar card replace the mobile booking bar */
    body { padding-bottom: 0; }
    .mobile-bar { display: none; }

    /* Desktop navigation: inline menu with dropdowns */
    .nav-toggle { display: none; }
    .brand img { width: 190px; }

    .main-nav {
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 18px;
        padding: 0;
        background: none;
        overflow: visible;
        visibility: visible;
        opacity: 1;
        transform: none;
    }
    .nav-list { display: flex; align-items: center; gap: 4px; }
    .nav-item { border: 0; flex-wrap: nowrap; }
    .nav-item > a { padding: 10px 8px; font-size: 16px; font-weight: 500; }
    /* Menu labels and header buttons always stay on one line (never wrapped or hyphenated). */
    .site-header { hyphens: manual; -webkit-hyphens: manual; }
    .nav-item > a, .nav-actions .btn { white-space: nowrap; }
    .nav-item > a.is-active { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
    .dropdown-toggle { width: 22px; height: 40px; margin-left: -4px; }
    .dropdown-toggle .icon { width: 16px; height: 16px; }

    .dropdown {
        display: block;
        position: absolute;
        top: calc(100% + 8px);
        left: -12px;
        min-width: 250px;
        margin: 0;
        padding: 10px;
        background: var(--white);
        border: 0;
        border-radius: var(--radius);
        box-shadow: var(--shadow-lg);
        visibility: hidden;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
    }
    .dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
    .has-dropdown:hover .dropdown,
    .has-dropdown:focus-within .dropdown,
    .dropdown.is-open { visibility: visible; opacity: 1; transform: none; }
    .dropdown a { padding: 9px 12px; color: var(--text); border-radius: var(--radius-sm); font-size: 16px; }
    .dropdown a:hover, .dropdown a.is-active { background: var(--sand); color: var(--black); }
    .dropdown strong { color: var(--black); }

    .nav-actions { flex-wrap: nowrap; }
    .nav-actions .btn { min-height: 44px; padding: 10px 20px; }
    .nav-actions .btn-icon { padding-inline: 12px; }
    .visually-hidden-desktop {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
}

/* ---- ≥ 1280px --------------------------------------------------------- */
@media (min-width: 1280px) {
    .hero h1 { font-size: 64px; }
}

/* Very small phones (≤ 360px) */
@media (max-width: 360px) {
    :root { --gutter: 16px; }
    .hero h1 { font-size: 36px; }
    .brand img { width: 140px; }
    .trust-list { grid-template-columns: 1fr; }
}