/**
 * Responsive Styles
 * Breakpoints: 1240px, 1024px, 768px, 480px
 */

/* ========== 1240px ========== */
@media (max-width: 1240px) {
    .container {
        max-width: 1100px;
        padding: 0 20px;
    }

    .header-container {
        padding: 0 20px;
    }

    .nav-menu .nav-link {
        padding: 10px 14px;
        font-size: 14px;
    }
}

/* ========== 1024px ========== */
@media (max-width: 1024px) {
    :root {
        --fs-h1: 40px;
        --fs-h2: 38px;
        --fs-h3: 30px;
        --section-padding: 80px 0;
    }

    .container {
        max-width: 960px;
    }

    /* Header - Show hamburger, hide nav */
    .header-nav {
        display: none;
    }

    .header-cta {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    /* Hero */
    .hero-title {
        font-size: 40px;
        letter-spacing: 4px;
    }

    .hero-subtitle {
        font-size: 15px;
        letter-spacing: 5px;
    }

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

    .feature-item:nth-child(2) {
        border-right: none;
    }

    /* Overview */
    .overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Gallery */
    .gallery-item {
        width: calc(50% - 20px);
    }

    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .footer-builder {
        justify-content: flex-start;
    }

    /* Video */
    .video-section {
        height: 400px;
    }

    .video-content h2 {
        font-size: 34px;
    }
}

/* ========== 768px ========== */
@media (max-width: 768px) {
    :root {
        --fs-h1: 34px;
        --fs-h2: 32px;
        --fs-h3: 26px;
        --fs-h4: 20px;
        --section-padding: 60px 0;
    }

    /* Header */
    .site-header {
        height: 90px;
    }

    .site-header.scrolled {
        height: 74px;
    }

    .header-container {
        height: 90px;
    }

    .site-header.scrolled .header-container {
        height: 74px;
    }

    .header-logo a {
        height: 68px;
    }

    .header-logo img {
        height: 68px;
    }

    .site-header.scrolled .header-logo a {
        height: 56px;
    }

    .site-header.scrolled .header-logo img {
        height: 56px;
    }

    /* Hero */
    .hero-section {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .hero-title {
        font-size: 34px;
        letter-spacing: 3px;
    }

    .hero-subtitle {
        font-size: 13px;
        letter-spacing: 4px;
    }

    .hero-desc {
        font-size: 15px;
    }

    .hero-btn {
        padding: 14px 36px;
        font-size: 13px;
    }

    .features-strip {
        grid-template-columns: 1fr 1fr;
    }

    .feature-item {
        padding: 18px 15px;
    }

    .feature-icon img {
        width: 35px;
        height: 35px;
    }

    .feature-text h6 {
        font-size: 13px;
    }

    .feature-text p {
        font-size: 11px;
    }

    /* Section headers */
    .section-header {
        margin-bottom: 40px;
    }

    .section-header h2 {
        font-size: var(--fs-h2);
    }

    /* Overview */
    .overview-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .overview-item {
        padding: 30px 20px;
    }

    /* Gallery handled in gallery.css @media (max-width: 768px) */

    /* Plan */
    .plan-carousel {
        padding-bottom: 40px;
    }

    /* Video */
    .video-section {
        height: 350px;
    }

    .video-content h2 {
        font-size: 28px;
    }

    .video-content p {
        font-size: 15px;
    }

    /* Contact */
    .contact-info h2 {
        font-size: 30px;
    }

    .contact-form-wrap {
        padding: 30px;
    }

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

    /* Footer - tablet 2 columns */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .site-footer {
        padding: 60px 0 25px;
    }

    .footer-builder {
        justify-content: center;
    }

    .footer-bottom {
        margin-top: 30px;
    }
}

/* ========== 480px ========== */
@media (max-width: 480px) {
    :root {
        --fs-h1: 28px;
        --fs-h2: 26px;
        --fs-h3: 22px;
        --fs-h4: 18px;
        --section-padding: 50px 0;
    }

    .container {
        padding: 0 15px;
    }

    /* Header */
    .site-header {
        height: 82px;
    }

    .site-header.scrolled {
        height: 68px;
    }

    .header-container {
        height: 82px;
        padding: 0 15px;
    }

    .site-header.scrolled .header-container {
        height: 68px;
    }

    .header-logo a {
        height: 60px;
    }

    .header-logo img {
        height: 60px;
    }

    .site-header.scrolled .header-logo a {
        height: 50px;
    }

    .site-header.scrolled .header-logo img {
        height: 50px;
    }

    /* Hero */
    .hero-section {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .hero-content-inner {
        padding: 0 15px;
    }

    .hero-title {
        font-size: 28px;
        letter-spacing: 2px;
    }

    .hero-subtitle {
        font-size: 12px;
        letter-spacing: 3px;
    }

    .hero-desc {
        font-size: 14px;
        margin-bottom: 30px;
    }

    .hero-btn {
        padding: 12px 30px;
        font-size: 12px;
    }

    .features-strip {
        grid-template-columns: 1fr;
    }

    .feature-item {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding: 15px;
    }

    .feature-item:last-child {
        border-bottom: none;
    }

    /* Overview */
    .overview-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .overview-item {
        padding: 25px 20px;
    }

    .overview-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 15px;
    }

    .overview-icon i {
        font-size: 42px;
    }

    /* Gallery handled in gallery.css @media (max-width: 768px) */

    /* Floor Plan — hide carousel arrows on touch screens, rely on swipe */
    .sp-plans__carousel-prev,
    .sp-plans__carousel-next {
        display: none;
    }

    /* Video */
    .video-section {
        height: 400px;
    }

    .video-content h2 {
        font-size: 24px;
    }

    .video-content p {
        font-size: 14px;
        margin-bottom: 25px;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    .video-content .btn {
        padding: 12px 30px;
        font-size: 13px;
    }

    /* Contact */
    .contact-section {
        padding: 50px 0;
    }

    .contact-info h2 {
        font-size: 26px;
    }

    .contact-form-wrap {
        padding: 20px;
    }

    .checkbox-group {
        flex-direction: column;
        gap: 10px;
    }

    /* Footer */
    .site-footer {
        padding: 40px 0 20px;
    }

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

    .footer-heading {
        font-size: 16px;
    }

    .footer-social a {
        width: 35px;
        height: 35px;
    }
}

/* ========== 360px ========== */
@media (max-width: 360px) {
    :root {
        --fs-h1: 24px;
        --fs-h2: 22px;
        --fs-h3: 20px;
        --fs-h4: 16px;
    }

    .container {
        padding: 0 12px;
    }

    .header-container {
        padding: 0 12px;
    }

    .hero-title {
        font-size: 24px;
        letter-spacing: 1px;
    }

    .hero-subtitle {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .hero-desc {
        font-size: 13px;
    }

    .hero-btn {
        padding: 10px 24px;
        font-size: 11px;
    }

    .section-header h2 {
        font-size: 22px;
    }

    .mobile-nav-menu li a {
        font-size: 20px;
        padding: 10px 0;
    }

    .filter-btn {
        font-size: 12px;
        padding: 8px 20px;
    }

    .sp-plans__tab {
        padding: 6px 12px;
        font-size: 0.6rem;
    }

    .tab-btn {
        font-size: 12px;
        padding: 10px 6px;
    }

    .room-info h3 {
        font-size: 20px;
    }

    .room-info p {
        font-size: 14px;
    }

    .contact-info h2 {
        font-size: 22px;
    }

    .footer-heading {
        font-size: 15px;
    }
}

/* ========== Mobile Touch Targets (≥44×44) ========== */
@media (max-width: 768px) {
    /* Hero CTA */
    .hero-btn,
    .btn.hero-btn {
        min-height: 48px;
        padding: 14px 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Swiper nav arrows (landmarks carousel) */
    .swiper-button-next,
    .swiper-button-prev,
    .landmarks-next,
    .landmarks-prev {
        width: 44px !important;
        height: 44px !important;
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 16px !important;
    }

    /* Footer / misc nav links */
    footer a,
    .footer-nav a,
    .mobile-nav-menu a {
        display: inline-block;
        padding: 10px 4px;
        min-height: 44px;
    }

    /* WhatsApp floating button */
    .whatsapp-float,
    .whatsapp-float a {
        min-width: 52px;
        min-height: 52px;
    }
}

/* ========== Utility ========== */
body.menu-open {
    overflow: hidden;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Print styles */
@media print {
    .site-header,
    .hero-features,
    .mobile-menu-overlay,
    #preloader,
    .video-section {
        display: none !important;
    }
}