/* Responsive Design - Mobile First Approach */

/* Tablet: 768px and up */
@media (min-width: 768px) {

    /* Hero adjustments for tablet */
    .hero-content {
        grid-template-columns: 1fr;
    }
}

/* Desktop: 1024px and up */
@media (min-width: 1024px) {

    /* Hero back to two columns */
    .hero-content {
        grid-template-columns: 1fr 1fr;
    }

    /* Services grid */
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Gallery grid */
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Mobile: max-width 767px */
@media (max-width: 767px) {

    /* Hero stacks vertically */
    .hero-content {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .hero-text {
        padding: var(--space-md);
    }

    .hero-headline {
        font-size: var(--text-2xl);
    }

    .hero-brand {
        gap: 0.5rem;
    }

    .hero-logo {
        height: 36px;
    }

    .hero-site-name {
        font-size: var(--text-xl);
    }

    .hero-image {
        width: 100%;
    }

    .hero-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    #hero {
        min-height: auto;
        max-height: none;
        padding: var(--space-xl) 0;
    }


    /* About doctor stacks */
    .about-header {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .doctor-photo {
        width: 200px;
        height: 200px;
        margin: 0 auto;
    }

    /* Services single column */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* Facility stacks */
    .facility-content {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    /* Gallery 2 columns on mobile */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

    /* Contact stacks */
    .contact-content {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .map-container {
        height: 300px;
    }

    /* Section spacing reduced on mobile */
    section {
        padding-top: var(--space-lg);
        padding-bottom: var(--space-lg);
    }

    /* Font size adjustments */
    h1 {
        font-size: calc(var(--text-3xl) * 0.85);
    }

    h2 {
        font-size: calc(var(--text-2xl) * 0.9);
    }

    /* Gallery nav buttons on mobile - touch friendly */
    .gallery-nav {
        width: 40px;
        height: 40px;
    }

    /* Touch-friendly tap targets */
    .btn {
        min-height: 44px;
        min-width: 44px;
    }

    .nav-link {
        padding: 12px 16px;
    }

    /* Disable parallax on mobile for performance */
    #hero {
        background-attachment: scroll;
    }
}

/* Very small mobile: max-width 375px */
@media (max-width: 375px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .hero-headline {
        font-size: calc(var(--text-2xl) * 0.9);
    }
}

/* Wide screens: 1440px and up */
@media (min-width: 1440px) {
    .container {
        padding-left: var(--space-lg);
        padding-right: var(--space-lg);
    }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 600px) {
    #hero {
        min-height: 100vh;
        padding: var(--space-md) 0;
    }
}

/* Reduced motion for accessibility and performance */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}