/**
 * Gallery block — variant styles.
 *
 * Default variant uses inline Tailwind classes in default.php; this file
 * carries only the variant-specific layout overrides for stacked-overlay
 * and lightbox-only. Auto-enqueued by Block_Registry::enqueue_style().
 */

/* ── stacked-overlay ─────────────────────────────────────────────
 * Magazine-style overlapping stack — each image rotated and offset
 * a few degrees from its neighbours. Cap visible depth at the first
 * ~5 tiles; the rest stack underneath so very long galleries don't
 * spread off-screen. Hover lifts the front tile so the lightbox is
 * still discoverable. */
.lcms-block--gallery.is-stacked-overlay .gallery__grid {
    position: relative;
    display: block;
    max-width: 32rem;
    height: 28rem;
    margin: 2rem auto;
}

.lcms-block--gallery.is-stacked-overlay .gallery__item {
    position: absolute;
    inset: 0;
    aspect-ratio: 4 / 5;
    transform-origin: center center;
    transition: transform 280ms ease, box-shadow 280ms ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.lcms-block--gallery.is-stacked-overlay .gallery__item:nth-child(1) { transform: rotate(-6deg) translate(-1.5rem, 0); z-index: 1; }
.lcms-block--gallery.is-stacked-overlay .gallery__item:nth-child(2) { transform: rotate(3deg)  translate(1rem, -0.5rem); z-index: 2; }
.lcms-block--gallery.is-stacked-overlay .gallery__item:nth-child(3) { transform: rotate(-2deg) translate(0.5rem, 1rem); z-index: 3; }
.lcms-block--gallery.is-stacked-overlay .gallery__item:nth-child(4) { transform: rotate(5deg)  translate(-1rem, 1.5rem); z-index: 4; }
.lcms-block--gallery.is-stacked-overlay .gallery__item:nth-child(5) { transform: rotate(-1deg); z-index: 5; }
.lcms-block--gallery.is-stacked-overlay .gallery__item:nth-child(n+6) { transform: rotate(0deg); z-index: 0; opacity: 0; pointer-events: none; }

.lcms-block--gallery.is-stacked-overlay .gallery__item:hover {
    transform: scale(1.04) rotate(0deg);
    z-index: 10;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

/* On mobile the rotated stack gets too wide — tighten it. */
@media (max-width: 640px) {
    .lcms-block--gallery.is-stacked-overlay .gallery__grid {
        max-width: 20rem;
        height: 22rem;
    }
}

/* ── lightbox-only ───────────────────────────────────────────────
 * No on-page grid. Show a compact thumbnail strip + a button that
 * opens the lightbox at the first image. */
.lcms-block--gallery.is-lightbox-only .gallery__strip {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 1.5rem auto 1rem;
    max-width: 36rem;
}

.lcms-block--gallery.is-lightbox-only .gallery__strip-thumb {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.375rem;
    object-fit: cover;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    transition: transform 180ms ease;
}

.lcms-block--gallery.is-lightbox-only .gallery__strip-thumb:hover {
    transform: scale(1.06);
}

.lcms-block--gallery.is-lightbox-only .gallery__open {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    background: var(--lcms-color-primary, #2563eb);
    color: #fff;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background 150ms ease, transform 150ms ease;
}

.lcms-block--gallery.is-lightbox-only .gallery__open:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.lcms-block--gallery.is-lightbox-only .gallery__open-icon {
    width: 1.1em;
    height: 1.1em;
}

/* In edit mode the lightbox is disabled (see default.php / Style_Manager::is_edit_mode);
 * the lightbox-only variant has no on-page grid, so we render the strip
 * as a static preview. The "Open gallery" button is a no-op in edit
 * mode — same as the default variant's lightbox links. */

/* ── clustered-overlap ───────────────────────────────────────────
 * Evenly-sized tiles with deliberate overlap, arranged into a few
 * named layouts. Each tile is roughly the same size; the layout name
 * (big-sm-random / staircase / fan) drives the per-tile placement
 * via nth-child rules. Caps visible tiles at 5 — the rest stack
 * underneath. Hover lifts the front tile so the lightbox stays
 * discoverable. */
.lcms-block--gallery.is-clustered-overlap .gallery__grid {
    position: relative;
    display: block;
    max-width: 36rem;
    height: 30rem;
    margin: 2rem auto;
}

.lcms-block--gallery.is-clustered-overlap .gallery__item {
    position: absolute;
    width: 14rem;
    height: 14rem;
    transform-origin: center center;
    transition: transform 280ms ease, box-shadow 280ms ease, z-index 0s 280ms;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.lcms-block--gallery.is-clustered-overlap .gallery__item:nth-child(n+6) {
    opacity: 0;
    pointer-events: none;
}

.lcms-block--gallery.is-clustered-overlap .gallery__item:hover {
    transform: scale(1.06);
    z-index: 20;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}

/* big-sm-random: one larger central tile + four smaller scattered. */
.lcms-block--gallery.is-clustered-overlap.cluster-big-sm-random .gallery__item:nth-child(1) {
    top: 4rem; left: 50%; transform: translateX(-50%);
    width: 18rem; height: 18rem; z-index: 3;
}
.lcms-block--gallery.is-clustered-overlap.cluster-big-sm-random .gallery__item:nth-child(2) {
    top: 1rem; left: 2rem; width: 9rem; height: 9rem; z-index: 4;
}
.lcms-block--gallery.is-clustered-overlap.cluster-big-sm-random .gallery__item:nth-child(3) {
    top: 2rem; right: 1rem; left: auto; width: 8.5rem; height: 8.5rem; z-index: 5;
}
.lcms-block--gallery.is-clustered-overlap.cluster-big-sm-random .gallery__item:nth-child(4) {
    bottom: 1rem; left: 4rem; top: auto; width: 8.5rem; height: 8.5rem; z-index: 4;
}
.lcms-block--gallery.is-clustered-overlap.cluster-big-sm-random .gallery__item:nth-child(5) {
    bottom: 2rem; right: 3rem; left: auto; top: auto; width: 9rem; height: 9rem; z-index: 5;
}

/* staircase: diagonal cascade from top-left to bottom-right. */
.lcms-block--gallery.is-clustered-overlap.cluster-staircase .gallery__item:nth-child(1) { top: 0;    left: 0;     z-index: 1; }
.lcms-block--gallery.is-clustered-overlap.cluster-staircase .gallery__item:nth-child(2) { top: 3rem; left: 3rem;  z-index: 2; }
.lcms-block--gallery.is-clustered-overlap.cluster-staircase .gallery__item:nth-child(3) { top: 6rem; left: 6rem;  z-index: 3; }
.lcms-block--gallery.is-clustered-overlap.cluster-staircase .gallery__item:nth-child(4) { top: 9rem; left: 9rem;  z-index: 4; }
.lcms-block--gallery.is-clustered-overlap.cluster-staircase .gallery__item:nth-child(5) { top: 12rem;left: 12rem; z-index: 5; }

/* fan: arc with each tile rotated slightly from a shared bottom-centre pivot. */
.lcms-block--gallery.is-clustered-overlap.cluster-fan .gallery__grid {
    height: 24rem;
}
.lcms-block--gallery.is-clustered-overlap.cluster-fan .gallery__item {
    top: 0; left: 50%;
    transform-origin: 50% 100%;
}
.lcms-block--gallery.is-clustered-overlap.cluster-fan .gallery__item:nth-child(1) { transform: translateX(-50%) rotate(-24deg); z-index: 1; }
.lcms-block--gallery.is-clustered-overlap.cluster-fan .gallery__item:nth-child(2) { transform: translateX(-50%) rotate(-12deg); z-index: 2; }
.lcms-block--gallery.is-clustered-overlap.cluster-fan .gallery__item:nth-child(3) { transform: translateX(-50%) rotate(0deg);   z-index: 3; }
.lcms-block--gallery.is-clustered-overlap.cluster-fan .gallery__item:nth-child(4) { transform: translateX(-50%) rotate(12deg);  z-index: 2; }
.lcms-block--gallery.is-clustered-overlap.cluster-fan .gallery__item:nth-child(5) { transform: translateX(-50%) rotate(24deg);  z-index: 1; }

.lcms-block--gallery.is-clustered-overlap.cluster-fan .gallery__item:hover {
    transform: translateX(-50%) rotate(0deg) scale(1.06);
}

/* On mobile any cluster layout gets too cramped — collapse to a vertical stack. */
@media (max-width: 640px) {
    .lcms-block--gallery.is-clustered-overlap .gallery__grid {
        max-width: 100%;
        height: auto;
        display: flex !important;
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
    }
    .lcms-block--gallery.is-clustered-overlap .gallery__item {
        position: relative !important;
        inset: auto !important;
        top: auto !important; left: auto !important;
        right: auto !important; bottom: auto !important;
        transform: none !important;
        width: 90%;
        max-width: 18rem;
        height: 14rem;
    }
}

/* ── masonry ─────────────────────────────────────────────────────
 * Variable-height tiles flowing into columns. The column count comes
 * from the grid-cols-* utilities in masonry.php; each tile's height
 * comes from an inline `grid-row: span N` set from the image's aspect
 * ratio (Gallery_Aspect / B40). A small fixed row-unit gives the spans
 * something to bite against; `grid-auto-flow: dense` lets shorter tiles
 * backfill gaps while keeping reading order broadly left-to-right. The
 * row-unit rounding is the documented trade-off vs. a JS layout pass. */
.lcms-block--gallery.is-masonry .gallery__grid--masonry {
    grid-auto-rows: 1.75rem;
    grid-auto-flow: row dense;
    gap: 0.75rem;
    align-items: stretch;
}

/* Each tile fills the whole grid area its row-span allocates; the inner
 * <img> is object-cover, so the image crops to the rounded box height. */
.lcms-block--gallery.is-masonry .gallery__item {
    height: 100%;
    min-height: 0;
}

/* Tighten the row-unit on narrower viewports so portrait tiles don't
 * tower over the slimmer columns. */
@media (max-width: 1024px) {
    .lcms-block--gallery.is-masonry .gallery__grid--masonry {
        grid-auto-rows: 1.5rem;
    }
}
@media (max-width: 640px) {
    .lcms-block--gallery.is-masonry .gallery__grid--masonry {
        grid-auto-rows: 1.25rem;
        gap: 0.5rem;
    }
}