/* ==========================================================================
   Haven Stays & Hospitality — 03. RESPONSIVE
   Breakpoints: 1200 · 1100 · 992 · 900 · 768 · 640 · 480
   Everything below is an override of the desktop-first component layer.
   ========================================================================== */

/* ------------------------------------------------------------- ≤ 1200px -- */
@media (max-width: 1200px) {
    :root { --header-h: 78px; }

    .nav__list { gap: .35rem; }
    .nav__link { font-size: .875rem; }

    .footer-main { grid-template-columns: 1.5fr 1fr 1.3fr; }
    .footer-main > *:nth-child(3) { display: none; }

    .detail-layout { grid-template-columns: minmax(0, 1fr) 330px; }
}

/* ---------------------------------------- ≤ 1100px — switch to drawer nav -- */
@media (max-width: 1100px) {
    .nav { display: none; }
    .nav-toggle { display: grid; }
    .header-actions .btn--phone { display: none; }

    .process { grid-template-columns: repeat(3, 1fr); row-gap: 2.25rem; }
    .process__item:nth-child(3)::before { display: none; }
}

/* -------------------------------------------------------------- ≤ 992px -- */
@media (max-width: 992px) {
    :root { --header-h: 72px; }

    .topbar__group--secondary { display: none; }

    .hero__stage { min-height: clamp(520px, 72vh, 680px); }

    .detail-layout { grid-template-columns: 1fr; }
    .sticky-card { position: static; }
    .booking-card, .advisor-card { max-width: 520px; margin-inline: auto; }

    .t-slide { flex-basis: 50%; }

    .g-4 { grid-template-columns: repeat(2, 1fr); }
    .pillar-row { grid-template-columns: repeat(2, 1fr); }
    .contact-strip { grid-template-columns: repeat(1, 1fr); }

    .searchbar__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .searchbar__form .sb-submit { grid-column: 1 / -1; }
    .searchbar__form .sb-submit .btn { width: 100%; }

    .blog-layout { grid-template-columns: 1fr !important; }
    .sidebar { grid-template-columns: repeat(2, 1fr); }
    .widget--full { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------- ≤ 900px -- */
@media (max-width: 900px) {
    .split, .split--wide-text { grid-template-columns: 1fr; gap: 2.5rem; }
    .split--flip > *:first-child { order: 2; }

    .media-stack { padding-right: 2rem; padding-bottom: 2.5rem; max-width: 560px; margin-inline: auto; }
    .media-stack__main { aspect-ratio: 4 / 3.4; }
    .media-badge { left: 0; }

    .g-3 { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .gal-item--tall { grid-row: span 1; aspect-ratio: 4 / 3; }

    .footer-main { grid-template-columns: 1fr 1fr; }
    .footer-main > *:nth-child(3) { display: block; }
    .footer-brand { grid-column: 1 / -1; }

    .cta-band__inner { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------------- ≤ 768px -- */
@media (max-width: 768px) {
    :root { --header-h: 66px; }

    body { padding-bottom: 68px; }          /* room for the mobile action bar */
    .mobile-bar { display: block; }
    .floaters { bottom: 84px; }

    .topbar { display: none; }

    .brand__mark { width: 38px; height: 38px; }
    .brand__name { font-size: .95rem; letter-spacing: .08em; }
    .brand__tag { display: none; }

    /* Hero reads over a vertical scrim on narrow screens */
    .hero__stage { min-height: 600px; }
    .hero__stage::after {
        background:
            linear-gradient(180deg,
                rgba(253, 251, 247, .96) 0%,
                rgba(253, 251, 247, .9) 45%,
                rgba(253, 251, 247, .6) 72%,
                rgba(253, 251, 247, .25) 100%);
    }
    .hero__inner { align-items: flex-start; padding-top: 2.5rem; }
    .hero__arrows { display: none; }
    .hero__dots { bottom: 4.5rem; }
    .hero__actions .btn { flex: 1 1 auto; }

    /* Stop the floating bar sitting on top of the hero buttons on phones */
    .searchbar--float { margin-top: 1.25rem; }

    .stats-row { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
    .stats-row .stat + .stat { border-left: 0; }
    .stats-row .stat:nth-child(even) { border-left: 1px solid var(--line); }
    .on-dark .stats-row .stat:nth-child(even) { border-left-color: rgba(255, 255, 255, .16); }

    .process { grid-template-columns: repeat(2, 1fr); }
    .process__item::before { display: none; }

    .t-slide { flex-basis: 100%; }

    .detail-head { flex-direction: column; }
    .detail-gallery__thumbs { grid-template-columns: repeat(4, 1fr); gap: .5rem; }

    .section-head-row { flex-direction: column; align-items: flex-start; }

    /* The tab strip scrolls sideways inside itself; min-width:0 is what lets a
       flex child shrink below its content width so that can actually happen. */
    .filter-bar { flex-direction: column; align-items: stretch; min-width: 0; }
    .filter-bar > * { min-width: 0; max-width: 100%; }
    .filter-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: .35rem;
        scrollbar-width: none;
        min-width: 0;
        max-width: 100%;
    }
    .filter-tabs::-webkit-scrollbar { display: none; }
    .filter-tab { white-space: nowrap; flex: none; }

    .article-body { font-size: 1rem; }
    .pull-quote { font-size: 1.08rem; padding: 1.25rem 1.35rem; }

    .map-embed iframe { height: 320px; }

    .lightbox__prev { left: .75rem; }
    .lightbox__next { right: .75rem; }
    .lightbox__btn { width: 42px; height: 42px; }
}

/* -------------------------------------------------------------- ≤ 640px -- */
@media (max-width: 640px) {
    .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
    .g-auto-260, .g-auto-300, .g-auto-340 { grid-template-columns: 1fr; }

    .form-grid { grid-template-columns: 1fr; }
    .check-list--2col { grid-template-columns: 1fr; }

    .searchbar { padding: 1rem; border-radius: var(--r); }
    .searchbar__form { grid-template-columns: 1fr; }
    .searchbar__tabs { gap: .3rem; }
    .searchbar__tab { padding: .45rem .85rem; font-size: .7rem; }

    .sidebar { grid-template-columns: 1fr; }

    .pillar-row { grid-template-columns: 1fr; }

    .gallery-grid { grid-template-columns: 1fr; gap: .75rem; }

    .tile { aspect-ratio: 4 / 3; }

    .quote-card { padding: 1.6rem 1.35rem; }
    .quote-card__mark { font-size: 3.25rem; }

    .cta-band { border-radius: var(--r-lg); }
    .cta-band__actions { width: 100%; }
    .cta-band__actions .btn { flex: 1 1 100%; }

    .footer-main { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-bottom nav { justify-content: center; gap: 1rem; }

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

    .detail-gallery__thumbs { grid-template-columns: repeat(3, 1fr); }
    .detail-gallery__thumb:nth-child(4) { display: none; }

    .price-card { padding: 1.6rem 1.35rem; }

    .share-row { justify-content: center; }
}

/* -------------------------------------------------------------- ≤ 480px -- */
@media (max-width: 480px) {
    :root { --container-pad: 1rem; }

    .hero__points li { font-size: .7rem; padding: .35rem .75rem; }
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .btn { width: 100%; }

    .btn { padding: .85rem 1.5rem; }
    .btn--lg { padding: .95rem 1.75rem; font-size: var(--t-sm); }

    .process { grid-template-columns: 1fr; }

    .trust-item { flex-direction: column; gap: .85rem; }

    .spec-grid { grid-template-columns: 1fr; }

    .p-card__body, .svc-card__body { padding: 1.15rem 1.1rem 1.35rem; }

    .form-card { padding: 1.25rem 1.1rem; }

    .media-stack { padding-right: 0; padding-bottom: 0; }
    .media-stack__sub { position: relative; width: 100%; margin-top: 1rem; border-width: 0; }
    .media-badge { position: relative; top: auto; left: auto; margin-bottom: 1rem; }

    .mini-post img { width: 64px; height: 54px; }

    .fab { width: 48px; height: 48px; }
    .fab svg { width: 21px; height: 21px; }
}

/* ------------------------------------------------- Landscape phone fix --- */
@media (max-height: 520px) and (orientation: landscape) {
    .hero__stage { min-height: 480px; }
    .drawer__body { padding-block: .5rem 1rem; }
}

/* --------------------------------------------------- Large desktop up ---- */
@media (min-width: 1600px) {
    :root { --container: 1320px; }
    .hero__stage { min-height: 820px; }
}