/* ==========================================================================
   HHB CORE LLC
   responsive.css - breakpoint overrides

   Layout is fluid by default (clamp + minmax), so these are corrections at
   the points where a grid genuinely stops working, not a full second layout.
   ========================================================================== */

/* ---------- large tablet / small laptop ---------- */
@media (max-width: 1080px) {
    .gallery { columns: 2; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .amenities { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer .f-brand { grid-column: 1 / -1; }
}

/* ---------- tablet ---------- */
@media (max-width: 900px) {
    :root { --nav-h: 62px; }

    .nav-links, .has-menu { display: none; }
    .burger { display: inline-flex; }

    .split, .split-wide { grid-template-columns: 1fr; gap: 2.25rem; }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }

    .hero-full { min-height: min(80vh, 640px); }
    .hero h1 { max-width: 100%; }

    .unit-row { grid-template-columns: 1fr auto; row-gap: .9rem; }
    .unit-row .u-go { grid-column: 2; grid-row: 1; }
    .unit-row .u-body { grid-column: 1 / -1; grid-row: 2; }

    .map-embed { height: 340px; }
}

/* ---------- mobile ---------- */
@media (max-width: 620px) {
    .gallery { columns: 1; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .amenities { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }

    .hero-full { min-height: min(78vh, 560px); }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { justify-content: center; }

    /* Hero video controls at narrow widths.
       The CTA buttons go full-width here, so the corner controls need their
       own reserved strip or they sit on top of "Book a showing" -- and the
       full "Pause background video" label simply runs off the right edge. */
    .hero.has-video .hero-body { padding-bottom: 6rem; }

    .hero-video-toggle {
        width: 44px; height: 44px; padding: 0;
        justify-content: center; border-radius: 50%;
    }
    /* Icon-only, but the accessible name is unchanged -- the label is hidden
       visually, not removed. */
    .hero-video-toggle .toggle-text {
        position: absolute; width: 1px; height: 1px;
        padding: 0; margin: -1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }

    /* Credit moves to the opposite corner rather than stacking, so neither
       control has to shrink further. */
    .hero-credit {
        left: 1rem; right: auto; bottom: 1.15rem;
        max-width: calc(100% - 5rem);
    }

    /* The scroll cue would otherwise land between the two. */
    .hero.has-video .scroll-cue { display: none; }

    .topbar .container { justify-content: center; text-align: center; gap: .4rem; }

    .unit-row { grid-template-columns: 1fr; }
    .unit-row .u-go, .unit-row .u-body { grid-column: 1; grid-row: auto; }
    .unit-row .pill { justify-self: start; }

    .contact-big { flex-direction: column; align-items: flex-start; gap: .5rem; }

    .lb-prev { left: -.25rem; } .lb-next { right: -.25rem; }
    .lb-btn { width: 42px; height: 42px; }

    .timeline li { grid-template-columns: 42px 1fr; gap: 1rem; }
    .timeline li::before { width: 38px; height: 38px; font-size: 1rem; }
    .timeline li:not(:last-child)::after { left: 19px; top: 38px; }

    .map-embed { height: 280px; }
}

/* ---------- very small ---------- */
@media (max-width: 400px) {
    .brand-text { display: none; }
    .btn { width: 100%; justify-content: center; }
    .topbar { font-size: .76rem; }
}

/* ---------- coarse pointers: no hover-only affordances ---------- */
@media (hover: none) {
    .gallery figcaption { opacity: 1; transform: none; }
    .gallery button::after { opacity: 1; }
    .card:hover, .amenities li:hover, .unit-row:hover { transform: none; }
}