/* ============================================
   RESPONSIVE — MOBILE FIRST
   ============================================ */

/* === Tablet (< 992px) === */
@media (max-width: 991.98px) {
    .facilities__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .facility-card {
        min-height: 380px;
    }

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

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

    .about-facility__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .about-facility__image img {
        height: 300px;
    }

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

    .facility-contact__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .about-content__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .about-content__grid--reverse {
        direction: ltr;
    }

    .about-content__image img {
        height: 300px;
    }

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

    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8);
    }

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

/* === Mobile landscape / small tablet (< 768px) === */
@media (max-width: 767.98px) {
    :root {
        --nav-height: 64px;
    }

    .navbar__links {
        display: none;
    }

    .navbar__cta {
        display: none;
    }

    .navbar__hamburger {
        display: flex;
    }

    .hero {
        min-height: 85vh;
        padding: var(--space-6);
    }

    .hero__scroll-hint {
        display: none;
    }

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

    .facility-card {
        min-height: 280px;
        padding: var(--space-8) var(--space-6);
    }

    .facility-card__cta {
        opacity: 1;
        transform: translateY(0);
    }

    .why-us__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

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

    .why-us__item {
        padding: var(--space-6) var(--space-4);
    }

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

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

    .cta-section {
        padding: var(--space-16) var(--space-6);
    }

    .cta-section__contact {
        flex-direction: column;
        align-items: center;
        gap: var(--space-4);
    }

    .facility-hero {
        min-height: 40vh;
        padding: calc(var(--nav-height) + var(--space-8)) var(--space-6) var(--space-8);
    }

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

    .schedule-timeline::before {
        left: 18px;
    }

    .about-values__grid {
        grid-template-columns: 1fr;
    }

    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .footer__bottom {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }

    .contact-cards__grid {
        grid-template-columns: 1fr;
    }

    .contact-form {
        padding: var(--space-6);
    }

    .section {
        padding: var(--space-12) 0;
    }
}

/* === Mobile portrait (< 576px) === */
@media (max-width: 575.98px) {
    .container {
        padding: 0 var(--space-4);
    }

    .hero__cta {
        flex-direction: column;
        align-items: center;
    }

    .hero__cta .btn {
        width: 100%;
        max-width: 280px;
    }

    .facility-card {
        min-height: 250px;
    }

    .facility-card__icon {
        font-size: 3rem;
        margin-bottom: var(--space-4);
    }

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

    .cta-section__buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-section__buttons .btn {
        width: 100%;
        max-width: 280px;
    }

    .facility-hero__title {
        font-size: 1.75rem;
    }
}

/* === Large desktop (> 1400px) === */
@media (min-width: 1401px) {
    .facility-card {
        min-height: 550px;
    }
}