/* =========================================
   RESPONSIVE STYLES — Figma Design Match
   ========================================= */

/* Tablet */
@media (max-width: 992px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .hero-content { grid-template-columns: 1fr; text-align: center; }
    .hero-text { max-width: 100%; }
    .hero-image { display: none; }
    .hero-actions { justify-content: center; }
    .hero-stats { justify-content: center; }
    .promises-grid { grid-template-columns: 1fr 1fr; }
    .process-steps { grid-template-columns: 1fr 1fr; }
    .appointment-grid { grid-template-columns: 1fr; }
    .welcome-stats { gap: 24px; }
    .services-section .section-header { text-align: center; max-width: 700px; margin-left: auto; }
}

/* Mobile Nav */
@media (max-width: 768px) {
    .nav-toggle { display: block; z-index: 1001; }

    .nav-menu {
        position: fixed; top: 0; right: -100%; width: 80%; max-width: 360px; height: 100vh;
        background: var(--white); flex-direction: column; align-items: stretch;
        padding: 80px 24px 24px; gap: 0; box-shadow: var(--shadow-xl);
        transition: right var(--transition); overflow-y: auto; z-index: 1000;
    }
    .nav-menu.open { right: 0; }
    .nav-menu a { padding: 14px 16px; font-size: 1rem; border-bottom: 1px solid var(--gray-100); border-radius: 0; }

    .has-dropdown .dropdown {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; padding: 0 0 0 16px; display: none; border: none;
    }
    .has-dropdown.open .dropdown { display: block; }

    .nav-cta { margin-top: 16px; }
    .nav-cta a.btn { width: 100%; justify-content: center; }

    /* Hero */
    .hero { padding: 100px 0 0; min-height: auto; }
    .hero::after { height: 40px; }
    .hero-content { padding-bottom: 50px; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; justify-content: center; }

    /* Sections */
    .section { padding: 60px 0; }
    .section-header { margin-bottom: 32px; }

    /* Welcome */
    .welcome-section { padding: 60px 0 40px; }
    .welcome-stats { flex-direction: column; gap: 16px; align-items: center; }

    /* Marquee */
    .marquee-track span { font-size: 1.2rem; }

    /* Grids */
    .promises-grid,
    .services-grid,
    .why-us-grid,
    .doctors-grid,
    .testimonials-grid,
    .cases-grid { grid-template-columns: 1fr; }

    /* Stats */
    .stats-grid { flex-direction: column; gap: 20px; }
    .stat-card strong { font-size: 2.2rem; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-bottom-links { justify-content: center; }

    /* Emergency */
    .emergency-box { padding: 36px 24px; }
    .emergency-cases ul { flex-direction: column; align-items: center; }

    /* CTA */
    .cta-box { padding: 40px 20px; }
    .cta-actions { flex-direction: column; }
    .cta-actions .btn { width: 100%; justify-content: center; }

    /* Form */
    .form-row { grid-template-columns: 1fr; }
    .contact-form-wrap { padding: 24px; }
    .appointment-grid { grid-template-columns: 1fr; gap: 30px; }

    /* Process steps */
    .process-steps { grid-template-columns: 1fr; }

    /* Back to top */
    .back-to-top { bottom: 20px; right: 20px; }
}

/* Small mobile */
@media (max-width: 480px) {
    .container { padding: 0 16px; }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    .hero-stats { flex-direction: column; gap: 12px; }
    .about-highlights { grid-template-columns: 1fr 1fr; }
    .promises-grid { grid-template-columns: 1fr; }
}

/* Large screens */
@media (min-width: 1400px) {
    :root { --max-width: 1320px; }
}

/* Print */
@media print {
    .site-header, .nav-toggle, .back-to-top, .cta-section, .cta-actions,
    .marquee-section, .appointment-section { display: none; }
    .hero { min-height: auto; padding: 20px 0; background: none; color: var(--dark); }
    .hero::after { display: none; }
    .hero h1 { color: var(--dark); }
    .hero h1 span { color: var(--primary); }
    .section { padding: 20px 0; }
    body { font-size: 12pt; }
}