/* =========================================
   LUMIERE — GALLERY DETAIL
========================================= */

.lumiere-gallery-detail {
    position:relative;
    width:100%;
    padding:25px 0 90px;
    color:var(--ink);
}

.lumiere-gallery-detail::before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    bottom:0;
    left:50%;
    width:100vw;
    transform:translateX(-50%);
    background:var(--cream);
}



/* GALLERY */

.lumiere-gallery-detail__grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:220px;
    gap:14px;
}


/* PHOTO */

.lumiere-gallery-detail__item {
    position:relative;
    display:block;
    min-width:0;
    overflow:hidden;
    border-radius:8px;
    background:var(--cream2);
}

.lumiere-gallery-detail__item img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}

.lumiere-gallery-detail__item:hover img {
    transform:scale(1.035);
}


/* MASONRY COMPOSITION */

.lumiere-gallery-detail__item:nth-child(1) {
    grid-column:span 2;
    grid-row:span 2;
}

.lumiere-gallery-detail__item:nth-child(2) {
    grid-row:span 2;
}

.lumiere-gallery-detail__item:nth-child(3) {
    grid-column:span 1;
}

.lumiere-gallery-detail__item:nth-child(4) {
    grid-column:span 1;
    grid-row:span 2;
}

.lumiere-gallery-detail__item:nth-child(5) {
    grid-column:span 2;
}

.lumiere-gallery-detail__item:nth-child(6) {
    grid-row:span 2;
}

.lumiere-gallery-detail__item:nth-child(7) {
    grid-column:span 2;
}

.lumiere-gallery-detail__item:nth-child(8) {
    grid-column:span 1;
    grid-row:span 2;
}

.lumiere-gallery-detail__item:nth-child(9) {
    grid-column:span 1;
}

.lumiere-gallery-detail__item:nth-child(10) {
    grid-column:span 2;
}


/* =========================================
   TABLET
========================================= */

@media (max-width:991.98px) {

    .lumiere-gallery-detail {
        padding:25px 0 75px;
    }

    .lumiere-gallery-detail__grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
        grid-auto-rows:190px;
        gap:12px;
    }

}


/* =========================================
   MOBILE — MASONRY
========================================= */

@media (max-width:767.98px) {

    .lumiere-gallery-detail {
        padding:20px 0 65px;
    }

    .lumiere-gallery-detail__header {
        margin-bottom:35px;
    }

    .lumiere-gallery-detail__grid {
        display:block;
        column-count:2;
        column-gap:10px;
    }

    .lumiere-gallery-detail__item {
        display:block;
        width:100%;
        height:auto;
        margin:0 0 10px;
        overflow:hidden;
        break-inside:avoid;
        border-radius:7px;
    }

    .lumiere-gallery-detail__item img {
        display:block;
        width:100%;
        height:auto;
        object-fit:initial;
        transform:none;
    }

    .lumiere-gallery-detail__item:hover img {
        transform:none;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width:575.98px) {

    .lumiere-gallery-detail {
        padding:15px 0 60px;
    }

    .lumiere-gallery-detail__header {
        margin-bottom:30px;
    }

    .lumiere-gallery-detail__eyebrow {
        gap:9px;
    }

    .lumiere-gallery-detail__eyebrow span:first-child,
    .lumiere-gallery-detail__eyebrow span:last-child {
        flex-basis:28px;
        width:28px;
    }

    .lumiere-gallery-detail__grid {
        column-gap:8px;
    }

    .lumiere-gallery-detail__item {
        margin-bottom:8px;
        border-radius:6px;
    }

}

.lumiere-gallery-detail__back {
    margin-bottom:35px;
}

.lumiere-gallery-detail__back-link {
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--muted);
    font-family:"Plus Jakarta Sans",Arial,sans-serif;
    font-size:13px;
    font-weight:500;
    text-decoration:none;
    transition:color .25s ease;
}

.lumiere-gallery-detail__back-link svg {
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.4;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .25s ease;
}

.lumiere-gallery-detail__back-link:hover {
    color:var(--ink);
}

.lumiere-gallery-detail__back-link:hover svg {
    transform:translateX(-4px);
}