/* ============================================
   MOBILE UI/UX - IMAGE SECTIONS OPTIMIZATION
   Mobile Only (max-width: 767px)
   Desktop/Tablet: UNCHANGED
   ============================================ */

@media (max-width: 767px) {
    
    /* ============================================
       1. SPACING OPTIMIZATION - REDUCE EXCESSIVE GAPS
       ============================================ */
    
    /* Reduce section margins */
    section,
    [style*="margin-top: 40px"],
    [style*="margin: 40px"] {
        margin-top: clamp(20px, 4vw, 30px) !important;
        margin-bottom: clamp(20px, 4vw, 30px) !important;
    }
    
    /* Reduce padding around image containers */
    [style*="padding: 0 5%"],
    [style*="padding: 20px 5%"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-top: clamp(15px, 3vw, 20px) !important;
        padding-bottom: clamp(15px, 3vw, 20px) !important;
    }
    
    /* Compact spacing for image sections */
    .image-section,
    [style*="text-align: center"] {
        margin-top: clamp(15px, 3vw, 25px) !important;
        margin-bottom: clamp(15px, 3vw, 25px) !important;
        padding-top: clamp(12px, 2.5vw, 18px) !important;
        padding-bottom: clamp(12px, 2.5vw, 18px) !important;
    }
    
    /* Remove excessive gaps between elements */
    .welcome-sec,
    [class*="sec"] {
        margin-bottom: clamp(20px, 4vw, 30px) !important;
        padding: clamp(18px, 3.5vw, 25px) clamp(15px, 3vw, 20px) !important;
    }
    
    /* ============================================
       2. IMAGE BEHAVIOR - FULL WIDTH, CONTROLLED HEIGHT
       ============================================ */
    
    /* All images - full width, no overflow (exclude home hero full-bleed bg) */
    img:not(.hero-bg-img) {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        display: block;
        margin: 0 auto;
    }
    
    /* Banner images - controlled height */
    [alt*="banner"],
    [alt*="Banner"],
    [style*="maharshi-patanjali-banner"],
    [style*="affiliation-banner"],
    img[src*="banner"] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: clamp(180px, 35vh, 260px) !important;
        object-fit: cover;
        object-position: center;
        border-radius: 8px;
    }
    
    /* Hero slider - compact on mobile (home keeps same image + height rules as desktop/tablet) */
    .hero-slider:not(.home-hero-below-notification) {
        height: clamp(200px, 40vh, 300px) !important;
        margin-top: 0 !important;
        margin-bottom: clamp(15px, 3vw, 20px) !important;
    }
    
    /* Image containers - no overflow */
    [style*="max-width: 1200px"],
    [style*="max-width: 1440px"],
    [style*="max-width: 100%"] {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Decorative images - fixed height range */
    img[src*="patanjali"],
    img[src*="Patanjali"],
    .decorative-image {
        max-height: clamp(200px, 38vh, 280px) !important;
        object-fit: cover;
    }
    
    /* ============================================
       3. HEADING RULES - SINGLE LINE, CLEAN
       ============================================ */
    
    /* Main section headings */
    .heading-style,
    h2.heading-style,
    h2[class*="heading"] {
        font-size: clamp(20px, 5vw, 24px) !important;
        line-height: 1.2 !important;
        margin-bottom: clamp(10px, 2vw, 15px) !important;
        margin-top: clamp(8px, 1.5vw, 12px) !important;
        text-align: center;
        max-width: 100%;
        padding: 0 clamp(10px, 2vw, 15px);
        word-wrap: break-word;
        hyphens: none;
        letter-spacing: -0.01em;
    }
    
    /* Short headings - try single line */
    h2.heading-style:not(:has(br)) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Long headings - allow wrap */
    h2.heading-style {
        white-space: normal;
        word-wrap: break-word;
        hyphens: none;
    }
    
    /* Sub-headings */
    h3.heading-style,
    h3[class*="heading"],
    h3 {
        font-size: clamp(18px, 4.5vw, 22px) !important;
        line-height: 1.3 !important;
        margin-bottom: clamp(8px, 1.5vw, 12px) !important;
        text-align: center;
        max-width: 100%;
        padding: 0 clamp(10px, 2vw, 15px);
    }
    
    /* Prevent awkward line breaks (no auto hyphens — bad for Hindi) */
    h2, h3, h4 {
        word-break: normal;
        hyphens: none;
        letter-spacing: -0.02em;
    }
    
    /* Long headings - reduce font size to fit */
    h2:has-text("Welcome to MPYPCP"),
    h2:has-text("Our Popular Courses") {
        font-size: clamp(18px, 4.5vw, 22px) !important;
    }
    
    /* ============================================
       4. SUBTEXT / DESCRIPTION TEXT
       ============================================ */
    
    /* Text blocks - readable width, proper spacing */
    p,
    .welcome-sec p,
    [style*="text-align: justify"] {
        font-size: clamp(14px, 3.5vw, 16px) !important;
        line-height: 1.6 !important;
        margin-bottom: clamp(12px, 2.5vw, 16px) !important;
        max-width: 100%;
        padding: 0 clamp(5px, 1.5vw, 10px);
        text-align: left;
    }
    
    /* Center-aligned text sections */
    [style*="text-align: center"] p,
    .text-center p {
        text-align: center;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Subtext under headings */
    h2 + p,
    h3 + p,
    .heading-style + p {
        margin-top: clamp(8px, 1.5vw, 12px) !important;
        margin-bottom: clamp(12px, 2.5vw, 18px) !important;
    }
    
    /* ============================================
       5. ALIGNMENT & STRUCTURE
       ============================================ */
    
    /* Center-align image sections on mobile */
    [style*="text-align: center"],
    .image-section,
    [style*="max-width: 100%; margin: 0 auto; text-align: center"] {
        text-align: center !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 100%;
    }
    
    /* Image + heading groups */
    img + h2,
    img + h3,
    [style*="text-align: center"] img {
        margin-top: clamp(12px, 2.5vw, 18px) !important;
    }
    
    /* Ensure text doesn't touch edges */
    .container,
    [class*="container"] {
        padding-left: clamp(15px, 3vw, 20px) !important;
        padding-right: clamp(15px, 3vw, 20px) !important;
    }
    
    /* ============================================
       6. SECTION STACKING LOGIC
       ============================================ */
    
    /* Natural flow: Image → Heading → Text → CTA */
    .image-section {
        display: flex;
        flex-direction: column;
        gap: clamp(10px, 2vw, 15px);
    }
    
    .image-section img {
        order: 1;
        margin-bottom: clamp(10px, 2vw, 15px);
    }
    
    .image-section h2,
    .image-section h3 {
        order: 2;
        margin-top: clamp(8px, 1.5vw, 12px);
    }
    
    .image-section p {
        order: 3;
    }
    
    .image-section .btn,
    .image-section a[class*="btn"] {
        order: 4;
        margin-top: clamp(12px, 2.5vw, 18px);
    }
    
    /* ============================================
       7. BUTTONS / CTA
       ============================================ */
    
    /* Full-width buttons on mobile */
    .btn,
    a.btn,
    button,
    [class*="btn"] {
        width: 100%;
        max-width: 100%;
        min-height: 48px;
        padding: clamp(12px, 2.5vw, 16px) clamp(20px, 4vw, 30px) !important;
        font-size: clamp(15px, 3.5vw, 17px) !important;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: clamp(15px, 3vw, 20px) !important;
        margin-bottom: clamp(10px, 2vw, 15px) !important;
    }
    
    /* CTA spacing from text */
    p + .btn,
    .welcome-sec .btn {
        margin-top: clamp(18px, 3.5vw, 24px) !important;
    }
    
    /* ============================================
       8. TYPOGRAPHY POLISH
       ============================================ */
    
    /* Reduce heavy text */
    strong,
    b {
        font-weight: 600;
    }
    
    /* Prevent long words overflow (no hyphens:auto — harms Devanagari) */
    * {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: none;
    }
    
    /* Text width limit for readability */
    p,
    .welcome-sec p {
        max-width: 100%;
    }
    
    /* ============================================
       9. SPECIFIC SECTION FIXES
       ============================================ */
    
    /* Patanjali Banner Section */
    img[src*="maharshi-patanjali-banner"],
    img[alt*="Maharshi Patanjali - View Our Courses"] {
        margin-top: clamp(15px, 3vw, 25px) !important;
        margin-bottom: clamp(15px, 3vw, 25px) !important;
        padding: 0 !important;
        max-height: clamp(200px, 38vh, 280px) !important;
        object-fit: cover;
        border-radius: 8px;
        width: 100% !important;
    }
    
    /* Patanjali Banner Container - Reduce margins */
    div[style*="width: 100%; margin: 40px 0"] {
        margin-top: clamp(20px, 4vw, 30px) !important;
        margin-bottom: clamp(20px, 4vw, 30px) !important;
    }
    
    div[style*="padding: 0 5%"] {
        padding-left: clamp(15px, 3vw, 20px) !important;
        padding-right: clamp(15px, 3vw, 20px) !important;
    }
    
    /* Quick Access Banners */
    [style*="grid-template-columns: repeat(3"] {
        gap: clamp(12px, 2.5vw, 18px) !important;
    }
    
    [style*="height: 270px"] {
        height: clamp(180px, 35vh, 220px) !important;
    }
    
    /* Stats Section */
    .stats-row {
        margin-top: clamp(20px, 4vw, 30px) !important;
        padding: clamp(15px, 3vw, 20px) clamp(10px, 2vw, 15px) !important;
    }
    
    .stat-box {
        margin-bottom: clamp(12px, 2.5vw, 18px) !important;
        padding: clamp(20px, 4vw, 28px) clamp(15px, 3vw, 20px) !important;
    }
    
    /* Course Cards */
    .course-card {
        margin-bottom: clamp(15px, 3vw, 20px) !important;
    }
    
    .course-img {
        height: clamp(120px, 25vh, 150px) !important;
    }
    .course-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* Affiliation Banner */
    .affiliation-banner {
        margin-top: clamp(10px, 2vw, 15px) !important;
        margin-bottom: clamp(10px, 2vw, 15px) !important;
        padding: clamp(15px, 3vw, 20px) clamp(12px, 2.5vw, 18px) !important;
    }
    
    .affiliation-banner h3 {
        font-size: clamp(18px, 4.5vw, 22px) !important;
        margin-bottom: clamp(6px, 1.2vw, 10px) !important;
        line-height: 1.3 !important;
    }
    
    .affiliation-banner p {
        font-size: clamp(13px, 3.2vw, 15px) !important;
        margin-bottom: clamp(10px, 2vw, 15px) !important;
    }
    
    /* Welcome Section */
    .welcome-sec {
        padding: clamp(20px, 4vw, 28px) clamp(15px, 3vw, 20px) !important;
        margin-bottom: clamp(20px, 4vw, 30px) !important;
        margin-top: clamp(15px, 3vw, 25px) !important;
    }
    
    .welcome-sec h2 {
        font-size: clamp(20px, 5vw, 24px) !important;
        margin-bottom: clamp(12px, 2.5vw, 18px) !important;
        margin-top: clamp(8px, 1.5vw, 12px) !important;
        line-height: 1.2 !important;
    }
    
    /* About Patanjali Section */
    .welcome-sec h3 {
        font-size: clamp(18px, 4.5vw, 22px) !important;
        margin-bottom: clamp(10px, 2vw, 15px) !important;
        margin-top: clamp(8px, 1.5vw, 12px) !important;
        line-height: 1.3 !important;
    }
    
    .welcome-sec img {
        max-height: clamp(200px, 38vh, 280px) !important;
        margin-bottom: clamp(15px, 3vw, 20px) !important;
        margin-top: clamp(10px, 2vw, 15px) !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Welcome Section Flex Layout - Stack on Mobile */
    .welcome-sec [style*="display: flex"] {
        flex-direction: column !important;
        gap: clamp(15px, 3vw, 20px) !important;
    }
    
    .welcome-sec [style*="flex: 1"] {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        width: 100% !important;
    }
    
    /* ============================================
       10. NO HORIZONTAL SCROLL - FINAL CHECKS
       ============================================ */
    
    /* Force no overflow */
    * {
        max-width: 100% !important;
    }
    
    /* Fix any remaining overflow sources */
    [style*="width: 100vw"] {
        width: 100% !important;
    }
    
    [style*="min-width"] {
        min-width: auto !important;
    }
    
    /* Long text handling */
    p, span, div, li {
        word-break: normal;
        overflow-wrap: break-word;
    }
    
    /* Tables - ensure scrollable */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
    }
}