/* ==========================================================
   JT MAISON — Custom Grid Gallery Widget
   ========================================================== */

.jtm-grid-gallery {
    width: 100%;
}

.jtm-grid-gallery__inner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--jtm-grid-gap, 20px);
}

.jtm-grid-gallery__item {
    position: relative;
    overflow: hidden;
    /* Height and span are controlled via inline CSS variables per item */
    height: var(--jtm-item-height, 350px);
    grid-column: span var(--jtm-col-span-desktop, 12);
}

.jtm-grid-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.jtm-grid-gallery__item:hover .jtm-grid-gallery__img {
    transform: scale(1.03);
}

/* Default light overlay to match some JT Maison aesthetics, optional */
.jtm-grid-gallery__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.4s ease;
    pointer-events: none;
}

/* ==========================================================
   RESPONSIVE — TABLET
   ========================================================== */
@media (max-width: 1024px) {
    .jtm-grid-gallery__item {
        grid-column: span var(--jtm-col-span-tablet, 6);
        height: calc(var(--jtm-item-height, 350px) * 0.8);
    }
}

/* ==========================================================
   RESPONSIVE — MOBILE (Carousel)
   ========================================================== */
@media (max-width: 768px) {
    .jtm-grid-gallery {
        margin: 0 -24px; /* Bleed out to screen edges */
        width: calc(100% + 48px);
    }

    .jtm-grid-gallery__inner {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 0 24px 20px 24px;
        gap: 16px;
        grid-template-columns: none; /* Disable grid */
        scrollbar-width: none; /* Hide scrollbar Firefox */
    }

    .jtm-grid-gallery__inner::-webkit-scrollbar {
        display: none; /* Hide scrollbar Chrome/Safari */
    }

    .jtm-grid-gallery__item {
        flex: 0 0 75%; /* Show 1.5 images approx */
        scroll-snap-align: start;
        grid-column: auto !important;
        height: auto !important;
        aspect-ratio: 2/3 !important; /* VERTICAL aspect ratio */
    }

    .jtm-grid-gallery__img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    /* Arrows for mobile */
    .jtm-grid-gallery__nav {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 10px;
    }

    .jtm-grid-gallery__nav button {
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        color: var(--jtm-dark);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.3s;
    }

    .jtm-grid-gallery__nav button:active {
        opacity: 0.5;
    }
}

@media (min-width: 769px) {
    .jtm-grid-gallery__nav {
        display: none;
    }
}