/* =========================================
   HOTEL SNOWLION — RESPONSIVE
========================================= */

@media (max-width: 1100px) {
    .main-nav {
        gap: 14px;
    }

    .main-nav a {
        font-size: 0.82rem;
    }

    .facility-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .main-nav,
    .nav-contact {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .welcome-grid,
    .rooms-feature,
    .dining-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .welcome-grid,
    .rooms-feature,
    .dining-grid {
        gap: 42px;
    }

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

    .fact-item {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

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

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

    .gallery-item:first-child {
        grid-row: auto;
    }
}

@media (max-width: 640px) {
    :root {
        --section-space: 78px;
    }

    body {
        padding-bottom: 62px;
    }

    .nav-wrapper {
        min-height: 76px;
    }

    .brand-name {
        font-size: 0.92rem;
    }

    .brand-tagline {
        font-size: 0.58rem;
    }

    .hero {
        min-height: 92vh;
    }

    .hero-content {
        padding-top: 120px;
        padding-bottom: 60px;
    }

    .hero h1 {
        font-size: clamp(2.8rem, 14vw, 4.7rem);
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn {
        width: 100%;
    }

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

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

    .image-placeholder {
        min-height: 300px;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 250px;
    }

    .gallery-item {
        min-height: 250px;
    }

    .contact-actions {
        flex-direction: column;
    }

    .contact-actions .btn {
        width: 100%;
    }

    .mobile-contact-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: 62px;
        box-shadow: 0 -4px 18px rgba(0,0,0,0.12);
    }

    .mobile-contact-bar a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
    }

    .mobile-contact-bar a:first-child {
        background: #fff;
        color: var(--color-dark);
    }

    .mobile-contact-bar a:last-child {
        background: var(--whatsapp);
        color: #0c2d17;
    }
}

/* =========================================
   MOBILE NAVIGATION MENU
   (used up to 1100px so the 8 menu links never squeeze the header)
========================================= */

@media (max-width: 1100px) {
    .site-header {
        position: absolute;
    }

    .nav-wrapper {
        position: relative;
    }

    .menu-toggle {
        position: relative;
        z-index: 1002;
        display: block;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #ffffff;
        font-size: 1.8rem;
        line-height: 1;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 1001;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        width: min(86vw, 360px);
        height: 100vh;

        margin: 0;
        padding: 110px 28px 40px;

        background: rgba(16, 23, 22, 0.98);
        backdrop-filter: blur(18px);

        transform: translateX(105%);
        opacity: 0;
        visibility: hidden;

        transition:
            transform 0.35s ease,
            opacity 0.35s ease,
            visibility 0.35s ease;

        box-shadow: -20px 0 50px rgba(0, 0, 0, 0.25);
    }

    .main-nav.is-open {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }

    .main-nav a {
        width: 100%;
        padding: 15px 0;

        border-bottom: 1px solid rgba(255, 255, 255, 0.08);

        font-size: 1.05rem;
        color: #ffffff;
        opacity: 1;
    }

    .main-nav a::after {
        display: none;
    }

    .main-nav a.active {
        color: #bfe5e1;
    }

    .nav-contact {
        display: none;
    }
}

@media (max-width: 640px) {
    .main-nav {
        width: 88vw;
        padding-top: 100px;
    }
}