/* ============================================================
   RESPONSIVE CSS — Smiles Unlimited Dental Centre
   Mobile-First breakpoints for custom components
   ============================================================ */

/* ─── Large Desktop (1400px+) ─────────────────────────────── */
@media (min-width: 1400px) {
    .hero-image-wrapper img { height: 580px; }
}

/* ─── Desktop (992px – 1199px) ────────────────────────────── */
@media (max-width: 1199px) {
    .hero-image-wrapper img { height: 460px; }
    .gallery-grid { column-count: 3; }
}

/* ─── Tablet (768px – 991px) ──────────────────────────────── */
@media (max-width: 991px) {
    .hero-section {
        padding-top: 140px;
        padding-bottom: 60px;
        min-height: auto;
    }

    .hero-image-wrapper img { height: 400px; }

    .navbar-island.scrolled {
        max-width: 100%;
        padding: 12px 20px;
    }

    .section-dark {
        padding: 60px 40px;
    }

    h1.display-3 { font-size: 3.25rem; }
    h2.display-5 { font-size: 2.25rem; }
}

/* ─── Small Tablet (576px – 767px) ────────────────────────── */
@media (max-width: 767px) {
    .hero-section {
        padding-top: 120px;
        padding-bottom: 40px;
    }

    .hero-image-wrapper { margin-top: 0; }
    .hero-image-wrapper img { height: 320px; }

    .gallery-grid {
        column-count: 2;
    }

    /* Force full-width gallery items on mobile */
    .gallery-item[style*="grid-column: span 2"] {
        grid-column: auto !important;
    }

    .gallery-item[style*="grid-row: span 2"] {
        grid-row: auto !important;
    }

    .section-dark {
        padding: 48px 24px;
        border-radius: 24px;
    }

    .site-footer { border-radius: 32px 32px 0 0; }

    h1.display-3 { font-size: 2.75rem; }
    h2.display-5 { font-size: 2rem; }

    .before-after-wrapper { aspect-ratio: 1/1; }

    .stat-number { font-size: 2.75rem; }
}

/* ─── Mobile (up to 575px) ────────────────────────────────── */
@media (max-width: 575px) {
    .navbar-wrapper { padding: 14px 12px; }
    .navbar-island  { padding: 12px 16px; }

    .hero-section { padding-top: 110px; }

    .hero-image-wrapper img { height: 260px; }

    .gallery-grid {
        column-count: 1;
    }

    h1.display-3 { font-size: 2.25rem; }
    h2.display-5 { font-size: 1.75rem; }
    h3.display-6 { font-size: 1.5rem; }

    .service-img-wrapper { height: 180px; }

    .back-to-top  { bottom: 20px; right: 20px; }
    .whatsapp-float { bottom: 76px; right: 20px; }

    .testimonial-card { padding: 28px 24px; }

    .btn-premium,
    .btn-outline { font-size: 0.95rem; padding: 12px 28px; }

    .stat-card { padding: 28px 20px; }
    .stat-number { font-size: 2.4rem; }

    .section-dark { padding: 40px 20px; border-radius: 20px; }

    .feature-card { padding: 28px 24px; }

    .mobile-nav-drawer { width: 100vw; }

    .section-label { font-size: 0.7rem; }
}

/* ─── Very Small Devices (320px) ──────────────────────────── */
@media (max-width: 359px) {
    h1.display-3 { font-size: 2rem; }
    .hero-image-wrapper img { height: 220px; }
}

/* ─── Print Styles ────────────────────────────────────────── */
@media print {
    .navbar-wrapper,
    .back-to-top,
    .whatsapp-float,
    .cookie-banner,
    .scroll-progress,
    .mobile-nav-overlay,
    .mobile-nav-drawer { display: none !important; }

    .hero-section { padding-top: 40px; min-height: auto; }
    .site-footer  { border-radius: 0; }
}

/* ─── Accessibility: Reduced Motion ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .marquee-content { animation: none; }
    .parallax-img    { transform: none !important; }
}