/* ============================================== 
   MOBILE PROJECT MODAL REFACTOR
   Single Column Vertical Scroll (Instagram/Behance Style)
   ============================================== */

@media (max-width: 1180px) {

    /* 1. Reset Modal Content Layout */
    .modal-content {
        display: flex !important;
        flex-direction: column !important;
        /* Standard column flow */
        height: 100% !important;
        width: 100% !important;
        overflow-y: auto !important;
        /* Single scrollbar for everything */
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-template-areas: none !important;
        border-radius: 16px !important;
        /* Rounded corners */
    }

    /* 2. Text Section (Hero) - Order 1 */
    .modal-text {
        order: 1 !important;
        padding: 20px !important;
        /* Symmetrical padding all around */
        height: auto !important;
        overflow: visible !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. Image Section (Gallery) - Order 2 */
    .modal-images {
        order: 2 !important;
        padding: 0 20px 60px !important;
        /* Bottom padding for scroll end */
        height: auto !important;
        overflow: visible !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* 4. Image Grid (Vertical Stack) */
    .modal-image-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
        height: auto !important;
        grid-template-columns: none !important;
        /* Override any grid */
    }

    .modal-grid-item {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        aspect-ratio: auto !important;
        /* Let image define ratio */
        display: block !important;
    }

    .modal-grid-item img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        border-radius: 4px !important;
    }

    /* 5. Close Button (Perfectly positioned in curve) */
    .modal-close {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        z-index: 10000 !important;
        background: rgba(0, 0, 0, 0.6) !important;
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        backdrop-filter: blur(10px) !important;
    }

    /* 6. Hide Carousel if present (just in case) */
    .modal-carousel {
        display: none !important;
    }

    /* 7. Typography Adjustments for Mobile */
    .modal-title {
        font-size: 32px !important;
        line-height: 1.1 !important;
        margin-bottom: 10px !important;
    }

    .modal-subtitle {
        font-size: 16px !important;
        margin-bottom: 20px !important;
        opacity: 0.8 !important;
    }

    .modal-description p {
        font-size: 16px !important;
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
    }

    /* 8. Stats Grid on Mobile */
    .modal-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 25px 15px !important;
        margin-top: 8px !important;
        margin-bottom: 20px !important;
        /* Reduced since padding handles border */
        padding: 0 0 30px 0 !important;
        /* Push border line down */
    }

    .modal-stat {
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .modal-stat-number {
        font-family: 'Cormorant Garamond', serif !important;
        font-size: 37px !important;
        /* 15% smaller than 44px */
        font-weight: 400 !important;
        color: #fff !important;
        line-height: 1.0 !important;
        margin-bottom: 10px !important;
        margin-top: 0 !important;
    }

    .modal-stat-label {
        font-family: 'Inter', sans-serif !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.1em !important;
        color: rgba(255, 255, 255, 0.6) !important;
        margin: 0 !important;
    }

    /* 9. Hide Side Arrows (Swipe Navigation) */
    .modal-nav-arrows {
        display: none !important;
    }

    /* 10. Refined Typography */
    .modal-title {
        font-size: 42px !important;
        /* Increased from 32px */
        line-height: 1.05 !important;
        margin-bottom: 15px !important;
        letter-spacing: -0.02em !important;
    }

    .modal-subtitle {
        font-size: 18px !important;
        line-height: 1.4 !important;
        margin-bottom: 5px !important;
        /* Minimal */
        opacity: 0.7 !important;
        padding-bottom: 10px !important;
        /* Reduced from 20px */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* 10. Details Section Spacing */
    .modal-details {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        grid-template-columns: 1fr 1fr !important;
        /* Horizontal 2x2 grid */
        gap: 15px !important;
    }

    /* 10b. Remove Header Bottom Padding */
    .modal-header {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 11. Logo Scaling - HIDDEN ON MOBILE (matches desktop) */
    .modal-logo {
        display: none !important; /* Hide logo on mobile like desktop */
        margin-bottom: 20px !important;
        background: transparent !important;
        /* Ensure no background */
        border: none !important;
        box-shadow: none !important;
    }

    .modal-logo img {
        height: auto !important;
        width: auto !important;
        max-height: 50px !important;
        /* Controlled height */
        max-width: 120px !important;
        object-fit: contain !important;
    }
}