/* =====================================================================
   Dooars Adventure — responsive overrides
   Verified layout targets: 320, 375, 425, 768, 1024, 1280, 1440+
   The base stylesheet is mobile-first; these blocks adapt upward and
   patch the few places that need help on very narrow screens.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Container-driven rules (not viewport-driven)
   --------------------------------------------------------------------- */

/* The package-page sidebar is a fixed ~350px column, so the enquiry form
   inside it is always single-column — a two-up grid there left the email and
   date fields too narrow to read their own placeholder text. */
.sidebar .form-grid--2 { grid-template-columns: minmax(0, 1fr); }
.sidebar .enquiry-form .btn { white-space: normal; }

/* ---------------------------------------------------------------------
   Desktop-down: below 1024px the nav collapses into the drawer
   --------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
    .nav-toggle { display: flex; }

    .nav-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 120;
        width: min(340px, 86vw);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 5.25rem 1.5rem 2rem;
        background: #fff;
        box-shadow: -18px 0 50px rgba(6, 37, 22, .18);
        transform: translateX(105%);
        transition: transform 260ms cubic-bezier(.4, 0, .2, 1);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .nav-panel.is-open { transform: translateX(0); }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-bottom: 1.5rem;
    }
    .nav-list li + li { border-top: 1px solid var(--line-soft); }
    .nav-link { display: block; padding: .95rem .25rem; font-size: 1rem; }
    .nav-link::after { display: none; }
    .nav-link.is-active { color: var(--green-700); }

    .nav-actions { flex-direction: column; align-items: stretch; gap: .6rem; }
    .nav-actions .btn { width: 100%; padding-block: .8rem; font-size: var(--fs-sm); }

    /* Backdrop behind the open drawer.
       It must sit BELOW .site-header (z-index 100). The header is a sticky
       positioned element, so it creates its own stacking context and the
       drawer inside it cannot escape that context — a backdrop above 100
       therefore paints over the drawer, dimming it and swallowing every tap.
       Keeping the backdrop under the header leaves the drawer interactive. */
    body.nav-open { overflow: hidden; }
    body.nav-open::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 95;
        background: rgba(6, 37, 22, .45);
        backdrop-filter: blur(2px);
    }

    /* The quick-contact buttons and the back-to-top control live at z-index 90,
       so they would sit under the dimmed backdrop and read as artefacts. */
    body.nav-open .floating-actions,
    body.nav-open .to-top { display: none; }

    /* Keep the close button reachable above the panel */
    .nav-toggle { position: relative; z-index: 130; }

    .detail-layout { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .contact-layout { grid-template-columns: minmax(0, 1fr); }

    .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-col--brand { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------
   Tablet and below
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .experience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .hero__inner { grid-template-columns: minmax(0, 1fr); }
    .enquiry-card { order: 2; }
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Content splits stack. */
    .split,
    .split--narrow-first,
    .split--even { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    :root { --gutter: 1rem; }

    .topbar__note { display: none; }
    .topbar__inner { justify-content: center; }
    .topbar__links { gap: 1rem; }

    .navbar__inner { min-height: 64px; }
    .brand__mark { width: 40px; height: 40px; border-radius: 12px; }
    .brand__mark-img { width: 40px; height: 40px; }
    .brand__name { font-size: 1rem; }
    .brand__tag { font-size: .58rem; letter-spacing: .07em; }

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

    .hero__actions .btn { flex: 1 1 auto; }
    .hero__points { gap: .45rem 1rem; font-size: var(--fs-xs); }

    .form-grid--2 { grid-template-columns: minmax(0, 1fr); }

    .two-col-list { columns: 1; }
    .quick-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .experience-grid { grid-template-columns: minmax(0, 1fr); }
    .destination-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
    .footer-cta__inner { flex-direction: column; align-items: flex-start; }
    .footer-cta__actions { width: 100%; }
    .footer-cta__actions .btn { flex: 1 1 auto; }
    .footer-bottom__inner { justify-content: center; text-align: center; }

    .filter-bar__foot { flex-direction: column; align-items: stretch; }

    .itinerary::before { left: 17px; }
    .itin-day { padding-left: 50px; }
    .itin-day__marker { width: 36px; height: 36px; font-size: .62rem; }
    .itin-day__toggle { padding: .8rem .9rem; }
    .itin-day__title { font-size: .96rem; }

    .fab__label { display: none; }
    .fab { padding: .8rem; font-size: 1rem; }
    .floating-actions { right: .75rem; bottom: .75rem; }
    .to-top { left: .75rem; bottom: .75rem; }

    .package-hero { min-height: 300px; }
    .package-card__actions { flex-direction: column; align-items: stretch; }
    .package-card__foot { flex-direction: column; align-items: flex-start; }
    .package-card__actions .btn { width: 100%; }
}

/* ---------------------------------------------------------------------
   Small phones — 425px and down
   --------------------------------------------------------------------- */
@media (max-width: 425px) {
    :root { --fs-body: .97rem; }

    .btn { padding: .75rem 1.15rem; }
    .btn--lg { padding: .9rem 1.4rem; font-size: var(--fs-sm); }
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__badge { font-size: .7rem; }

    .quick-details { grid-template-columns: minmax(0, 1fr); }
    .destination-grid { grid-template-columns: minmax(0, 1fr); }
    .footer-grid { grid-template-columns: minmax(0, 1fr); }
    .footer-legal { justify-content: center; gap: .9rem; }

    .rating-summary { width: 100%; justify-content: center; }
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pagination a, .pagination span { min-width: 36px; height: 36px; font-size: var(--fs-xs); }
}

/* ---------------------------------------------------------------------
   The narrowest supported width — 320px
   --------------------------------------------------------------------- */
@media (max-width: 360px) {
    :root { --gutter: .85rem; }
    .topbar__links { flex-direction: column; gap: .1rem; align-items: center; padding-block: .2rem; }
    .brand__tag { display: none; }
    .brand__mark-img { width: 36px; height: 36px; }
    .package-card__badges { top: .55rem; left: .55rem; }
    .enquiry-card { padding: 1.1rem; }
    .contact-tile { flex-direction: column; }
    .itin-day__facts { flex-direction: column; gap: .2rem; }
}

/* ---------------------------------------------------------------------
   Large screens — 1280px and 1440px+
   --------------------------------------------------------------------- */
@media (min-width: 1280px) {
    :root { --container: 1220px; --gutter: 1.5rem; }
    .hero__inner { padding-block: 6rem; }
}

@media (min-width: 1440px) {
    :root { --container: 1300px; }
    .destination-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 1680px) {
    :root { --container: 1360px; }
}

/* ---------------------------------------------------------------------
   Landscape phones — keep the hero from overflowing
   --------------------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
    .hero__inner { padding-block: 2.25rem; }
    .package-hero { min-height: 260px; }
    .nav-panel { padding-top: 4.5rem; }
}