/* ============================================
   COURSES PAGE BANNER - MOBILE OPTIMIZATION
   YCB Promotional Banner Mobile Design
   Mobile Only (max-width: 767px)
   Desktop: UNCHANGED
   ============================================ */

@media (max-width: 767px) {
    
    /* ============================================
       1. YCB BANNER CONTAINER - FULL WIDTH
       ============================================ */
    
    /* YCB Banner wrapper */
    div[style*="margin-top: 1px"][style*="margin-bottom: 1px"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: clamp(20px, 4vw, 30px) 0 !important;
        padding: 0 !important;
    }
    
    /* YCB Banner inner container */
    div[style*="width: 100%"][style*="padding: 30px 5%"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: clamp(20px, 4vw, 25px) clamp(15px, 3vw, 20px) !important;
        margin: 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(20px, 4vw, 25px) !important;
        text-align: center !important;
    }
    
    /* YCB Banner flex container */
    div[style*="flex: 1"][style*="padding: 0 40px"] {
        flex-direction: column !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(15px, 3vw, 20px) !important;
    }
    
    /* ============================================
       2. YCB BANNER CONTENT - COMPACT
       ============================================ */
    
    /* YCB Banner text container */
    div[style*="flex: 1"]:first-child {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        text-align: center !important;
    }
    
    /* YCB Banner subtitle - targeting p with specific style */
    div[style*="margin-top: 1px"] p[style*="font-size: 12px"] {
        font-size: clamp(11px, 2.8vw, 13px) !important;
        line-height: 1.5 !important;
        margin-bottom: clamp(8px, 2vw, 12px) !important;
        color: #666 !important;
        text-align: center !important;
    }
    
    /* YCB Banner heading - targeting h2 with brown color */
    div[style*="margin-top: 1px"] h2[style*="color: #8b4513"] {
        font-size: clamp(18px, 4.5vw, 22px) !important;
        line-height: 1.4 !important;
        margin-bottom: clamp(15px, 3vw, 20px) !important;
        color: #8b4513 !important;
        font-weight: bold !important;
        text-align: center !important;
        padding: 0 clamp(10px, 2vw, 15px) !important;
    }
    
    /* YCB Banner list */
    ul[style*="list-style: none"] {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 0 clamp(15px, 3vw, 20px) 0 !important;
        width: 100% !important;
        text-align: left !important;
    }
    
    /* YCB Banner list items */
    ul[style*="list-style: none"] li {
        margin-bottom: clamp(8px, 2vw, 12px) !important;
        font-size: clamp(13px, 3.2vw, 15px) !important;
        line-height: 1.5 !important;
        padding: 0 clamp(10px, 2vw, 15px) !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* YCB Banner list icons */
    ul[style*="list-style: none"] li i {
        margin-right: clamp(8px, 2vw, 10px) !important;
        font-size: clamp(14px, 3.5vw, 16px) !important;
        flex-shrink: 0 !important;
    }
    
    /* YCB Banner CTA text - targeting p with red color */
    div[style*="margin-top: 1px"] p[style*="color: var(--primary-red)"] {
        font-size: clamp(15px, 3.8vw, 17px) !important;
        line-height: 1.5 !important;
        margin-bottom: clamp(15px, 3vw, 20px) !important;
        text-align: center !important;
        padding: 0 clamp(10px, 2vw, 15px) !important;
    }
    
    /* YCB Banner button - targeting btn with teal background */
    div[style*="margin-top: 1px"] a.btn[style*="background: #008080"] {
        width: 100% !important;
        max-width: 280px !important;
        padding: clamp(12px, 3vw, 14px) clamp(20px, 5vw, 25px) !important;
        font-size: clamp(14px, 3.5vw, 16px) !important;
        border-radius: 6px !important;
        display: inline-block !important;
        text-align: center !important;
        margin: 0 auto !important;
        min-height: 48px !important;
        box-sizing: border-box !important;
    }
    
    /* YCB Banner footer info */
    div[style*="margin-top: 15px"] {
        margin-top: clamp(15px, 3vw, 20px) !important;
        font-size: clamp(12px, 3vw, 14px) !important;
        text-align: center !important;
        padding: 0 clamp(10px, 2vw, 15px) !important;
        line-height: 1.6 !important;
    }
    
    /* YCB Banner footer icons */
    div[style*="margin-top: 15px"] i {
        margin-right: clamp(5px, 1.2vw, 8px) !important;
        margin-left: clamp(5px, 1.2vw, 8px) !important;
        font-size: clamp(12px, 3vw, 14px) !important;
    }
    
    /* ============================================
       3. YCB BANNER IMAGE (IF ANY)
       ============================================ */
    
    /* YCB Banner image container - targeting second flex container */
    div[style*="flex: 0 0 400px"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        padding: 0 !important;
        padding-left: 0 !important;
        order: 2 !important;
        margin-top: clamp(20px, 4vw, 25px) !important;
    }
    
    /* YCB Banner image wrapper */
    div[style*="flex: 0 0 400px"] > div {
        width: 100% !important;
        max-width: 100% !important;
        padding: clamp(15px, 3vw, 20px) !important;
    }
    
    /* YCB Banner image area */
    div[style*="flex: 0 0 400px"] div[style*="height: 250px"] {
        height: clamp(200px, 38vh, 250px) !important;
        width: 100% !important;
    }
    
    /* YCB Banner laptop icon */
    div[style*="flex: 0 0 400px"] i.fa-laptop {
        font-size: clamp(80px, 20vw, 120px) !important;
    }
    
    /* YCB Banner online classes badge */
    div[style*="flex: 0 0 400px"] div[style*="background: rgba(255,255,255,0.95)"] {
        padding: clamp(10px, 2.5vw, 12px) clamp(18px, 4.5vw, 22px) !important;
        font-size: clamp(13px, 3.2vw, 15px) !important;
        bottom: clamp(15px, 3vw, 20px) !important;
    }
    
    /* ============================================
       4. RESPONSIVE BREAKPOINT FIXES
       ============================================ */
    
    /* Fix for nested flex containers */
    div[style*="display: flex"] {
        flex-wrap: wrap !important;
    }
    
    /* Ensure text doesn't overflow */
    h2, p, li {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
        word-break: normal !important;
    }
    
    /* ============================================
       5. VERY SMALL SCREENS (max-width: 480px)
       ============================================ */
    
    @media (max-width: 480px) {
        div[style*="width: 100%"][style*="padding: 30px 5%"] {
            padding: clamp(15px, 3vw, 20px) clamp(12px, 3vw, 15px) !important;
        }
        
        div[style*="margin-top: 1px"] h2[style*="color: #8b4513"] {
            font-size: clamp(16px, 4vw, 20px) !important;
        }
        
        div[style*="margin-top: 1px"] ul[style*="list-style: none"] li {
            font-size: clamp(12px, 3vw, 14px) !important;
        }
        
        div[style*="margin-top: 1px"] a.btn[style*="background: #008080"] {
            font-size: clamp(13px, 3.2vw, 15px) !important;
            padding: clamp(10px, 2.5vw, 12px) clamp(18px, 4.5vw, 22px) !important;
        }
    }
}