/* =========================================
   MOBILE RESPONSIVE FIXES (M3 Fast Track - New File)
   ========================================= */

/* =========================================
   TABLET RESPONSIVE FIXES (600px - 1180px)
   ========================================= */
@media (max-width: 1180px) {
    .main-container {
        padding: 1.5rem;
        max-width: 100%;
    }

    /* 1. Poster: Allow flexibility but keep some structure */
    .poster-html {
        width: 90% !important;
        max-width: 700px !important;
        /* Cap width */
        aspect-ratio: unset !important;
        height: auto !important;
        margin: 0 auto 2rem;
    }

    .poster-content {
        padding: 3rem 2rem !important;
        height: auto !important;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .poster-title {
        font-size: 4rem !important;
        /* Smaller than desktop, bigger than mobile */
        white-space: normal !important;
        line-height: 1.1 !important;
    }

    /* 2. Footer on Tablet */
    .contact-footer {
        flex-direction: row;
        /* Keep row if space permits */
        flex-wrap: wrap;
        /* Allow wrapping */
        justify-content: center;
        gap: 2rem;
        padding: 2rem;
    }

    /* If screen is narrower tablet (portrait), stack it */
    @media (max-width: 820px) {
        .contact-footer {
            flex-direction: column;
        }

        .contact-footer .app-logo {
            position: static;
            transform: none;
            margin-bottom: 1rem;
        }

        .line-qr img {
            display: block !important;
            width: 140px !important;
            height: auto !important;
        }
    }
}

/* =========================================
   MOBILE RESPONSIVE FIXES (< 600px)
   ========================================= */
@media (max-width: 600px) {

    /* 1. Reset Global Styles */
    body {
        font-size: 16px;
        /* Base 16px */
    }

    /* 1. Reset Global Styles */
    html,
    body {
        overflow-x: hidden;
        /* Prevent horizontal scroll */
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .main-container {
        padding: 1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        /* Safe area for home bar */
        max-width: 100%;
        width: 100%;
        overflow-x: hidden;
    }

    /* 2. Poster Container Adaptations */
    .poster-html {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: unset !important;
        /* Remove fixed ratio */
        height: auto !important;
        /* Allow growing */
        border-radius: 16px;
        margin: 0;
        overflow: hidden;
        /* Contains overflowing elements */
    }

    .poster-content {
        padding: 2rem 1rem !important;
        /* Tighter padding */
        height: auto !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        /* Stack naturally */
        gap: 1.5rem;
        /* Consistent spacing */
    }

    /* 3. Typography Adjustments */
    .poster-title {
        font-size: 3rem !important;
        /* Smaller on mobile */
        white-space: normal !important;
        /* Allow wrapping */
        line-height: 1 !important;
        margin-bottom: 0.5rem;
        word-wrap: break-word;
        /* Ensure wrapping */
    }

    .title-line {
        width: 60%;
        margin: 1.5rem auto;
    }

    .poster-subtitle {
        font-size: 1.8rem !important;
        white-space: normal !important;
        line-height: 1.3 !important;
        padding: 0 1rem;
    }

    /* 4. Hook Box */
    .hook-box {
        padding: 1.5rem 1rem;
        margin: 1rem 0;
        border-radius: 20px;
    }

    .hook-title {
        font-size: 1.8rem !important;
        margin-bottom: 0.5rem;
    }

    .hook-desc {
        font-size: 1.3rem !important;
        line-height: 1.4 !important;
    }

    /* 5. Feature Bullets */
    .feature-bullets {
        gap: 1rem;
    }

    .bullet-item {
        flex-direction: column;
        /* Stack icon top */
        text-align: center;
        padding: 1.5rem 1rem;
        gap: 0.8rem;
        border-radius: 16px;
    }

    .icon-circle {
        margin: 0 auto;
        /* Center icon */
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }

    .bullet-text h3 {
        font-size: 1.3rem !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }

    .bullet-text p {
        font-size: 1rem !important;
        color: #64748b;
    }

    /* 6. Condition */
    .condition-box {
        padding: 1rem;
    }

    .cond-main {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
    }

    .cond-sub {
        font-size: 0.9rem !important;
        margin-top: 0.5rem;
    }

    /* 7. Footer & misc */
    .poster-footer,
    .syllabus-grid {
        /* Already has media query in style.css but ensure stacking */
        grid-template-columns: 1fr;
    }

    /* 8. Floating Button Fix */
    .floating-download-btn {
        top: auto;
        bottom: 20px;
        /* Move to bottom right on mobile so it's thumb accessible */
        right: 20px;
        font-size: 0.9rem;
        padding: 12px 20px;
        border-radius: 50px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    /* 9. Contact Footer Fix */
    .contact-footer {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
        padding: 2rem 1rem;
    }

    .line-qr {
        flex-direction: column;
        gap: 0.5rem;
    }

    .phone-contact {
        font-size: 1.3rem;
    }

    /* 10. Fix Logo & QR Visibility */
    .contact-footer .app-logo {
        position: static;
        /* Stop floating absolute */
        transform: none;
        margin-bottom: 1rem;
        width: 80px;
        height: 80px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    .line-qr img {
        display: block !important;
        width: 180px !important;
        /* Make QR clearly visible */
        height: auto !important;
        margin-top: 1rem;
        background: white;
        padding: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}