/* Mobile Layout Fixes - Strictly limits changes to mobile devices (<768px) */

.mobile-girl-img-container {
    display: none;
}

@media (max-width: 768px) {
    /* ISSUE 9 - Global Rules */
    body {
        overflow-x: hidden !important;
    }
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    .section-padding {
        padding: 48px 20px !important;
    }
    .btn {
        width: 100% !important;
    }
    
    /* ISSUE 1 - More Than Just A Straight Smile */
    .benefits-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 24px !important;
    }
    .benefits-image-wrapper {
        order: -1 !important; /* Move above text */
        width: 100% !important;
        max-width: 340px !important;
        margin: 0 auto !important;
    }
    .benefits-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding-left: 0 !important;
    }
    .benefits-content h2 {
        width: 100% !important;
        text-align: center !important;
        margin-left: 0 !important;
    }
    .benefits-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        margin-top: 1rem !important;
        width: 100% !important;
    }
    .benefits-list li {
        justify-content: flex-start !important;
        width: max-content !important;
        margin: 0 auto 12px auto !important;
    }

    /* ISSUE 2 - Treatment Cards */
    .treatment-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    .treatment-card {
        height: 100% !important;
        width: 100% !important;
    }

    /* ISSUE 3 - Doctor Section */
    .doctor-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .doctor-image-wrapper {
        width: 280px !important;
        height: auto !important;
        margin: 0 auto 24px auto !important;
    }
    .doctor-stats-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin: 2rem auto !important;
    }
    .doctor-content .btn {
        margin: 0 auto !important;
    }

    /* ISSUE 4 & 5 - Why Get Braces & CTA Card */
    .combined-section {
        background-image: none !important;
    }
    .responsive-grid-combined {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 32px !important;
    }
    .mobile-girl-img-container {
        display: block !important;
        width: 260px !important;
        margin: 0 auto !important;
    }
    .mobile-girl-img-container img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    .cta-card-mobile {
        width: 100% !important;
        max-width: 340px !important;
        margin: 0 auto !important;
        padding: 32px 24px !important;
        align-items: center !important;
        text-align: center !important;
    }
    .cta-card-mobile h2, .cta-card-mobile p {
        text-align: center !important;
        width: 100% !important;
    }
    .cta-card-mobile > div {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* ISSUE 6 - FAQ */
    .faq-accordion {
        width: 100% !important;
    }
    .faq-question {
        padding: 20px !important;
        height: auto !important;
        min-height: 64px !important;
    }
    .faq-question h3 {
        white-space: normal !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
    }
    .faq-answer {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* ISSUE 7 - Contact Cards */
    .contact-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    .contact-card {
        height: auto !important;
        width: 100% !important;
    }

    /* ISSUE 8 - Map */
    .map-container iframe {
        width: 100% !important;
        height: 300px !important;
    }

    /* Header / Logo Mobile Fix */
    .logo img {
        height: 28px !important;
    }
}