/* ============================================================
   LUCENT UNIVERSITY GLOBAL MOBILE UI OPTIMIZATIONS
   Standardizes layout, imagery, and text alignment on mobile
   ============================================================ */

@media (max-width: 768px) {
    /* ============================================================
       1. Global Left Alignment
       ============================================================ */
    .text-center,
    .hero-text,
    h1, h2, h3, h4, 
    .display-2, .display-3, .display-4,
    section .display-2, section .display-3,
    .text-center .display-2, .text-center .display-3,
    .about-content .display-2, .overview-content .display-3,
    p, .lead,
    .about-content p, .overview-content p, .bgea-content p,
    .term-card h3,
    .course-item summary,
    .bgea-card-title,
    .professor-card h3,
    .pricing-card h3,
    .pricing-content h2,
    .video-section h2,
    .objectives-section h2,
    .curriculum-section h2,
    .career-content h2,
    section h2 {
        text-align: left !important;
    }
    
    h2, .display-2, .display-3 {
        font-size: 38px !important;
        line-height: 1.15 !important;
    }
    
    .eyebrow {
        text-align: left !important;
        display: block !important;
        width: 100% !important;
    }

    .eyebrow-center,
    .about-image .eyebrow,
    .overview-content .eyebrow,
    .text-center .eyebrow {
        justify-content: flex-start !important;
        align-items: flex-start !important;
        align-self: flex-start !important;
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ============================================================
       2. Section Grid Logic (Order manipulation)
       ============================================================ */
    .overview-glass-panel,
    .career-grid,
    .partner-grid,
    .pricing-grid,
    .pricing-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }

    /* Unwrap text wrappers */
    .overview-content,
    .career-content,
    .pricing-content,
    .pricing-header {
        display: contents !important;
    }

    /* Eyebrow Order */
    .overview-content > .eyebrow,
    .career-content > .eyebrow,
    .pricing-content > .eyebrow,
    .pricing-header > .eyebrow {
        order: 1 !important;
        margin-bottom: 8px !important;
    }

    /* Title Order */
    .overview-content > h2,
    .career-content > h2,
    .pricing-content > h2,
    .pricing-header > h2 {
        order: 2 !important;
        margin-bottom: 16px !important;
    }

    /* Image / Widget directly after title */
    .overview-image-col,
    .career-image,
    .pricing-card,
    .pricing-widget-wrapper,
    .pricing-card-wrapper,
    .pricing-main {
        order: 3 !important;
        margin-top: 8px !important;
        margin-bottom: 24px !important;
        width: 100% !important;
        flex-shrink: 0 !important;
    }

    /* Paragraphs and Stats */
    .overview-content > p,
    .career-content > p,
    .pricing-content > p,
    .pricing-header > p,
    .overview-content > .lead,
    .career-content > .lead,
    .pricing-header > .lead,
    .overview-stats-grid,
    .career-list-wrapper {
        order: 4 !important;
    }

    /* Career List Split Columns */
    .career-list {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px 8px !important;
    }
    .career-list li {
        font-size: 13px !important;
        text-align: left !important;
    }

    /* Overview CTA Button explicitly at the very bottom */
    .overview-content > a.btn {
        order: 5 !important;
        display: block !important;
        width: 100% !important;
        margin-top: 16px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* Make sure section image dimensions are fully responsive */
    .overview-image-col img,
    .career-image img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* ============================================================
       3. About Section (Video explicitly at bottom)
       ============================================================ */
    .about-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
    }
    .about-content {
        order: 1 !important;
    }
    .about-image {
        order: 2 !important;
    }
    .about-image video {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* ============================================================
       4. Card-Style Components (Images on Top)
       ============================================================ */
    /* Contact Wrapper */
    .contact-layout-wrapper {
        display: flex !important;
        flex-direction: column !important;
    }
    .contact-image-column {
        order: -1 !important; 
        margin-bottom: 24px !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
    .circle-image-container {
        width: 100% !important;
        max-width: 300px !important;
        height: auto !important;
        aspect-ratio: 1/1 !important; 
    }

    /* Partner Grid Element (Image on Top) */
    .partner-grid > div:last-child {
        order: -1 !important; 
        margin-bottom: 16px !important;
    }
    .partner-grid a.btn {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        margin-top: 16px !important;
    }

    /* BGEA Widget */
    .bgea-widget {
        display: flex !important;
        flex-direction: column !important;
    }
    .bgea-card-side {
        order: -1 !important;
        margin-bottom: 24px !important;
    }

    /* Requirement Grid */
    .req-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    .req-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 24px !important;
        gap: 8px !important;
    }
    .req-card h4, .req-card p {
        text-align: center !important;
        margin: 0 !important;
    }

    /* TEC Grid Icons */
    .tec-grid {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 12px !important;
    }
    .tec-grid .stat-compact {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* Footer Logo Centering */
    .footer-brand-col > div:first-child {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* ============================================================
       5. Enrollment Steps Fix
       ============================================================ */
    .enrollment-steps {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 24px !important;
    }
    .enrollment-steps .step p {
        text-align: center !important;
        margin-bottom: 0 !important;
    }
    .enrollment-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        align-items: center !important;
    }
    .enrollment-buttons .btn {
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* ============================================================
       6. Hero Section Adjustments
       ============================================================ */
    .hero-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }
    .hero-text {
        order: 1 !important;
    }
    .hero-card-wrapper {
        order: 2 !important;
    }

    .hero .hero-card-wrapper,
    .hero .hero-image-card,
    .hero .hero-image,
    .hero .contact-image-column .circle-image-container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 16px !important;
        max-height: 250px !important;
    }
    
    .hero .hero-image-card img, 
    .hero .hero-image img, 
    .hero .circle-image-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 16px !important;
    }
}