/* ═══════════════════════════════════════════════
   Editorial Gallery — gallery-editorial.css
   Works with the current HTML structure (inline styles)
═══════════════════════════════════════════════ */

:root {
    --editorial-gap:         20px;
    --editorial-grid-height: 360px;
}

/* ── Main wrapper ── */
.monet-editorial-wrap,
.product-gallery-editorial {
    display: flex !important;
    flex-direction: column !important;
}

/* ══════════════════════════════
   MAIN IMAGE (full width)
══════════════════════════════ */
.monet-editorial__main {
    width: 100%;
    line-height: 0;
    overflow: hidden;
}

.monet-editorial__main img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain;
    object-position: center;
}

/* ══════════════════════════════
   GRID ROWS
   !important needed to override inline style="grid-template-columns:1fr 1fr"
══════════════════════════════ */
.monet-editorial__row {
    display: grid !important;
    height: var(--editorial-grid-height);
}

/* Row 1 → wide left */
.monet-editorial__row:nth-of-type(1) { grid-template-columns: 2fr 1fr !important; }

/* Row 2 → wide right */
.monet-editorial__row:nth-of-type(2) { grid-template-columns: 1fr 2fr !important; }

/* Row 3 → wide left */
.monet-editorial__row:nth-of-type(3) { grid-template-columns: 2fr 1fr !important; }

/* Row 4 → wide right */
.monet-editorial__row:nth-of-type(4) { grid-template-columns: 1fr 2fr !important; }

/* Row 5+ (alternating pattern) */
.monet-editorial__row:nth-of-type(5) { grid-template-columns: 2fr 1fr !important; }
.monet-editorial__row:nth-of-type(6) { grid-template-columns: 1fr 2fr !important; }
.monet-editorial__row:nth-of-type(7) { grid-template-columns: 2fr 1fr !important; }
.monet-editorial__row:nth-of-type(8) { grid-template-columns: 1fr 2fr !important; }

/* Single image → spans full width */
.monet-editorial__row .monet-editorial__cell:only-child {
    grid-column: 1 / -1 !important;
}

/* Row with single image → single column, reduced height */
.monet-editorial__row:has(.monet-editorial__cell:only-child) {
    grid-template-columns: 1fr !important;
    height: calc(var(--editorial-grid-height) * 0.65) !important;
}

/* ══════════════════════════════
   GRID CELLS & IMAGES
══════════════════════════════ */
.monet-editorial__cell {
    overflow: hidden;
    height: 100%;
    line-height: 0;
}

/* Override inline style="width:100%;height:auto" */
.monet-editorial__cell img,
.monet-editorial__cell .monet-editorial__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    transition: transform .4s ease;
}

/* ══════════════════════════════
   LINKS / HOVER
══════════════════════════════ */
.monet-editorial__link {
    display: block !important;
    overflow: hidden;
    height: 100%;
    cursor: zoom-in;
    line-height: 0;
}

.monet-editorial__main .monet-editorial__link {
    height: auto !important;
}

.monet-editorial__link:hover img,
.monet-editorial__link:hover .monet-editorial__img {
    transform: scale(1.04);
}

/* ══════════════════════════════
   FADE-IN
══════════════════════════════ */
.monet-editorial__img {
    opacity: 0;
    transition: opacity .35s ease, transform .4s ease;
}

.monet-editorial__img.is-loaded,
.monet-editorial__img.fade-in {
    opacity: 1;
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 600px) {
    :root {
        --editorial-gap:         6px;
        --editorial-grid-height: 160px;
    }

    /* Equal columns on mobile */
    .monet-editorial__row,
    .monet-editorial__row:nth-of-type(n) {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (min-width: 601px) and (max-width: 1024px) {
    :root {
        --editorial-grid-height: 240px;
    }
}