/* ==========================================================
   JT MAISON — Project Gallery Widget
   ========================================================== */

.jtm-project-gallery {
    width: 100%;
    background: var(--jtm-white);
    padding: 0 40px 100px 40px;
}

/* DESKTOP (Asymmetric grid) */
.jtm-project-gallery__desktop {
    display: grid;
    grid-template-columns: repeat(100, 1fr);
    grid-auto-rows: 280px; /* Reduced height to look elegant and panoramic */
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
}

.jtm-project-gallery__d-item {
    height: 280px !important;
    width: 100% !important;
    margin: 0;
    padding: 0;
}

/* Magic pattern for repeating asymmetric 6-image layout using Grid Spans */
.jtm-project-gallery__d-item:nth-child(6n+1) { grid-column: span 42; }
.jtm-project-gallery__d-item:nth-child(6n+2) { grid-column: span 23; }
.jtm-project-gallery__d-item:nth-child(6n+3) { grid-column: span 35; }
.jtm-project-gallery__d-item:nth-child(6n+4) { grid-column: span 30; }
.jtm-project-gallery__d-item:nth-child(6n+5) { grid-column: span 45; }
.jtm-project-gallery__d-item:nth-child(6n+6) { grid-column: span 25; }

.jtm-project-gallery__d-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Hide mobile initially */
.jtm-project-gallery__mobile {
    display: none;
}

/* ==========================================================
   RESPONSIVE MOBILE
   ========================================================== */
@media (max-width: 768px) {
    .jtm-project-gallery {
        padding: 0 0 60px 0; /* Remove horizontal padding so carousel bleeds */
    }

    .jtm-project-gallery__desktop {
        display: none; /* Hide desktop grid */
    }
    
    .jtm-project-gallery__mobile {
        display: block; /* Show mobile 3-level carousel */
    }
    
    .jtm-project-gallery__m-inner {
        display: flex;
        flex-direction: column;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding: 0 24px;
    }
    
    .jtm-project-gallery__m-inner::-webkit-scrollbar {
        display: none;
    }
    
    .jtm-project-gallery__track {
        display: flex;
        gap: 10px;
        width: max-content; /* Critical: allows natural widths to define track width */
    }
    
    .jtm-project-gallery__track img {
        height: 130px !important; /* Smaller height so all 3 fit beautifully on mobile */
        width: auto !important;
        max-width: 85vw !important; /* Prevents extremely wide images from breaking UX */
        object-fit: cover !important;
        scroll-snap-align: center;
    }
    
    .jtm-project-gallery__swipe {
        margin-top: 24px;
        padding: 0 24px;
        color: var(--jtm-dark);
        opacity: 0.5;
        cursor: pointer;
        width: max-content;
    }
}