/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Mobile & tablet breakpoints
   ═══════════════════════════════════════════════════════════ */

/* ── Safe Area for Notched Devices ── */
@supports (padding-top: env(safe-area-inset-top)) {
    .un-nav { padding-top: env(safe-area-inset-top); }
    .un-toast-container { bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ── Tablet & Small Desktop (≤ 900px) ── */
@media (max-width: 900px) {
    .un-nav-links { display: none; }
    .un-hamburger { display: flex; }

    .un-about-grid,
    .un-contact-grid,
    .un-footer-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .un-section { padding: 80px 20px; }
    .un-cards { grid-template-columns: 1fr; }
    .un-stat-row { gap: 24px; }
    .un-hero-fp { padding: 90px 16px 50px; }

    .un-fp-tooltip { display: none !important; }
    .un-fp-suite { cursor: pointer; }

    .un-pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .un-map-container iframe { height: 280px; }

    .un-booking-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .un-booking-calendar {
        max-width: 400px;
        margin: 0 auto;
    }

    .un-modal-card {
        grid-template-columns: 1fr;
        max-height: 95vh;
    }

    .un-modal-info {
        padding: 28px 24px 20px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .un-modal-form-side { padding: 24px; }
    .un-modal-features { grid-template-columns: 1fr; }

    .un-modal-overlay {
        padding: 12px;
        align-items: flex-start;
        padding-top: 40px;
    }
}

/* ── Small Tablet (≤ 600px) ── */
@media (max-width: 600px) {
    .un-section { padding: 64px 16px; }
    .un-cards { grid-template-columns: 1fr; gap: 14px; }
    .un-amenities-grid { grid-template-columns: 1fr; }
    .un-pricing-grid { grid-template-columns: 1fr; }
    .un-hero-header .un-desc br { display: none; }
    .un-map-container iframe { height: 240px; }
    .un-footer-bottom { flex-direction: column; text-align: center; }

    .un-faq-item summary { font-size: 14px; padding: 16px 20px; }
    .un-faq-answer { padding: 0 20px 16px; font-size: 13px; }

    .un-exit-popup-content { padding: 32px 24px; }
    .un-exit-popup-title { font-size: 20px; }

    .un-tour-time-grid { grid-template-columns: 1fr; }
    .un-tour-time-btn { flex-direction: row; justify-content: center; gap: 8px; }
    .un-contact-tab { font-size: 12px; padding: 10px 12px; }
}

/* ── Mobile (≤ 480px) ── */
@media (max-width: 480px) {
    .un-nav-inner { padding: 12px 16px; }
    .un-logo-main { font-size: 17px; letter-spacing: 2px; }
    .un-hero-fp { padding: 80px 12px 36px; }
    .un-stat-row { flex-wrap: wrap; gap: 16px; }
    .un-stat-num { font-size: 32px; }
    .un-legend { gap: 12px; }
    .un-about-feats { grid-template-columns: 1fr; }
    .un-floorplan-container { padding: 16px 8px; border-radius: var(--radius-lg); }

    .un-map-container iframe { height: 220px; }

    .un-modal-overlay {
        padding: 8px;
        padding-top: calc(20px + env(safe-area-inset-top, 0px));
    }
    .un-modal-card { border-radius: var(--radius-lg); }
    .un-modal-info { padding: 24px 20px 16px; }
    .un-modal-form-side { padding: 20px; }
    .un-modal-stats { gap: 12px; flex-wrap: wrap; }
    .un-modal-suite-name { font-size: 26px; }
    .un-modal-chair-toggle { flex-direction: column; gap: 8px; }

    .un-toast-container { left: 16px; right: 16px; }
    .un-toast { max-width: 100%; }

    .un-booking-calendar { padding: 20px 16px; }
    .un-cal-day { font-size: 12px; }
    .un-booking-minimap { padding: 16px; }
    .un-booking-legend { gap: 12px; flex-wrap: wrap; }

    .un-pricing-price { font-size: 38px; }
    .un-title { letter-spacing: -0.01em; }
}