/* ============================================
   Dr. Boutheina Beji — Responsive Stylesheet
   ============================================ */

/* Tablet: 768px - 1024px */
@media (max-width: 1024px) {
    :root {
        --space-2xl: 80px;
        --space-xl: 60px;
    }

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

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

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

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

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

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

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

    .two-columns img {
        min-height: 350px;
        order: -1;
    }

    .specialty-row {
        grid-template-columns: 1fr;
    }

    .specialty-image {
        order: -1;
    }

    .specialty-image img {
        height: 350px;
    }

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

    .contact-info {
        order: -1;
    }

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

/* Mobile: < 768px */
@media (max-width: 767px) {
    :root {
        --space-lg: 24px;
        --space-xl: 40px;
        --space-2xl: 60px;
    }

    body {
        font-size: 15px;
    }

    h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 32px;
    }

    h3 {
        font-size: 24px;
    }

    .lead {
        font-size: 17px;
    }

    /* Navigation */
    .nav-desktop {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .header-inner {
        padding: 0 var(--space-md);
    }

    /* Hero */
    .hero {
        min-height: 90vh;
    }

    .hero-compact {
        min-height: 50vh;
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-subtitle {
        font-size: 12px;
        letter-spacing: 0.1em;
    }

    /* Services */
    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .service-card-img {
        aspect-ratio: 16 / 9;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-item h3 {
        font-size: 32px;
    }

    /* Quote */
    .quote-content blockquote {
        font-size: 22px;
    }

    /* Two columns */
    .two-columns img {
        min-height: 280px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

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

    .gallery-filters {
        gap: 8px;
    }

    .gallery-filter {
        padding: 8px 16px;
        font-size: 12px;
    }

    /* Specialty */
    .specialty-image img {
        height: 280px;
    }

    /* CTA */
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    /* Testimonial */
    .testimonial-text {
        font-size: 16px;
    }

    /* WhatsApp float */
    .whatsapp-float {
        width: 48px;
        height: 48px;
        bottom: 16px;
        right: 16px;
    }

    .whatsapp-float svg {
        width: 24px;
        height: 24px;
    }

    /* Map */
    .map-section {
        height: 300px;
    }

    /* Contact */
    .contact-info {
        padding: var(--space-md);
    }

    /* Social */
    .social-links {
        flex-wrap: wrap;
    }
}

/* Small mobile: < 480px */
@media (max-width: 479px) {
    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 26px;
    }

    .hero-title {
        font-size: 28px;
    }

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

    .stat-item h3 {
        font-size: 28px;
    }

    .btn-primary,
    .btn-secondary {
        padding: 14px 28px;
        font-size: 13px;
    }

    .review-card {
        padding: var(--space-md);
    }
}