/**
 * 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);
}

/* The "Open gallery" / "View N photos" button itself is styled by the
 * shared .btn / .btn-{style} system (assets/css/src/main.css), driven
 * by the block's button_style field — not bespoke rules here. This
 * only adds the icon+label gap .btn doesn't define on its own (only
 * .btn-text does, for its trailing arrow), plus the icon's size. */
.lcms-block--gallery.is-lightbox-only .gallery__open,
.lcms-block--gallery.is-preview-grid .gallery__open {
    gap: 0.5rem;
}

.lcms-block--gallery.is-lightbox-only .gallery__open-icon,
.lcms-block--gallery.is-preview-grid .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. */

/* ── preview-grid ────────────────────────────────────────────────
 * Fixed grid_cols x grid_rows preview + a persistent "View N photos"
 * button beneath it (reuses .gallery__open styling above). The grid
 * itself is a static preview — the button is the click-through into
 * the full-gallery lightbox. */
.lcms-block--gallery.is-preview-grid .gallery__preview-grid {
    margin-bottom: 1rem;
}

/* ── 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 {
    grid-auto-rows: 1.75rem;
    grid-auto-flow: row dense;
    gap: 0.75rem;
    align-items: stretch;
}

/* Grid flow: 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. Scoped to .grid so the columns flow (below) keeps natural height. */
.lcms-block--gallery.is-masonry .gallery__grid--masonry.grid .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 {
        grid-auto-rows: 1.5rem;
    }
}
@media (max-width: 640px) {
    .lcms-block--gallery.is-masonry .gallery__grid--masonry.grid {
        grid-auto-rows: 1.25rem;
        gap: 0.5rem;
    }
}

/* ── masonry, columns flow (B40 strategy b) ──────────────────────
 * True uncropped tiles via CSS multi-column. Images keep their natural
 * aspect (no row-unit rounding, no object-cover crop). The trade-off is
 * reading order: tiles fill top-to-bottom down each column rather than
 * left-to-right. Column counts mirror the grid flow's responsive
 * breakpoints (cols-2 / cols-3 / cols-4). */
.lcms-block--gallery.is-masonry .gallery__grid--masonry-cols {
    display: block;
    column-gap: 0.75rem;
}

.lcms-block--gallery.is-masonry .gallery__grid--masonry-cols .gallery__item {
    display: block;
    width: 100%;
    margin-bottom: 0.75rem;
    /* Keep a tile from splitting across a column break. */
    break-inside: avoid;
}

/* cols-2 → 1 col, then 2 from sm. */
.lcms-block--gallery.is-masonry .gallery__grid--masonry-cols.gallery__grid--cols-2 { column-count: 1; }
/* cols-3 → 1 col, then 2 / 3. */
.lcms-block--gallery.is-masonry .gallery__grid--masonry-cols.gallery__grid--cols-3 { column-count: 1; }
/* cols-4 → 2 cols, then 3 / 4. */
.lcms-block--gallery.is-masonry .gallery__grid--masonry-cols.gallery__grid--cols-4 { column-count: 2; }

@media (min-width: 640px) {
    .lcms-block--gallery.is-masonry .gallery__grid--masonry-cols.gallery__grid--cols-2 { column-count: 2; }
    .lcms-block--gallery.is-masonry .gallery__grid--masonry-cols.gallery__grid--cols-3 { column-count: 2; }
    .lcms-block--gallery.is-masonry .gallery__grid--masonry-cols.gallery__grid--cols-4 { column-count: 3; }
}
@media (min-width: 1024px) {
    .lcms-block--gallery.is-masonry .gallery__grid--masonry-cols.gallery__grid--cols-3 { column-count: 3; }
    .lcms-block--gallery.is-masonry .gallery__grid--masonry-cols.gallery__grid--cols-4 { column-count: 4; }
}

/* ── polaroid-pile ────────────────────────────────────────────────
 * Bounded box — width comes from the Preview Width field (a Tailwind
 * max-w-* class set in polaroid-pile.php, same field/options as
 * preview-grid); height follows via --pile-ratio (set inline —
 * computed in polaroid-pile.php from Gallery Aspect Ratio on Grid /
 * Row-Fan's own fixed proportions otherwise, then scaled by Vertical
 * Spacing) rather than a fixed value, so it scales with whatever width
 * the preset resolves to. grid needs no mobile override — a max-width-
 * capped block with no explicit width already shrinks to the viewport
 * on its own, same
 * as preview-grid's box, and a square-ish cluster degrades fine at
 * small sizes. row/fan get a dedicated mobile treatment below instead
 * of shrinking further, since a wide line of many photos just turns
 * into a row of slivers otherwise.
 *
 * Each tile anchors to its own cell in an invisible grid (--pile-left/
 * --pile-top, percent of the box — computed per tile in
 * polaroid-pile.php from its index) so two photos can't fully overlap;
 * --pile-rot/--pile-x/--pile-y then apply a small seeded nudge within
 * that cell for the scattered look. Tile width is a share of the
 * box's actual rendered width (100% / --pile-cols, set once on the
 * box and inherited by every tile), not a fixed rem value — that's
 * what keeps tiles from overlapping at any pile_count (2-9) / width
 * combination without needing per-count constants. CSS vars rather
 * than baking straight into `transform`/`top`/`left`/`width` so
 * :hover can cleanly override just the transform value without
 * fighting inline styles. z-index comes from the template (rendering
 * order = drop order), so later tiles sit on top like a physically-
 * dropped pile. */
.lcms-block--gallery.is-polaroid-pile .gallery__grid {
    position: relative;
    display: block;
    margin: 2rem auto;
    aspect-ratio: var(--pile-ratio, 1 / 1);
}

.lcms-block--gallery.is-polaroid-pile .gallery__pile-item {
    position: absolute;
    top: var(--pile-top, 50%);
    left: var(--pile-left, 50%);
    width: calc((100% / var(--pile-cols, 3)) - 1.2rem);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transform: translate(-50%, -50%) translate(var(--pile-x, 0), var(--pile-y, 0)) rotate(var(--pile-rot, 0deg));
    transition: transform 280ms ease, box-shadow 280ms ease, z-index 0s 280ms;
    cursor: pointer;
    /* Clips the photo to this box's own corners — needed for
     * .lcms-rounded to actually round the full-bleed photo (Polaroid
     * Style off), since the inner photo-wrap fills 100% of this box
     * either way. Doesn't affect this element's own box-shadow, which
     * renders outside the border box regardless of overflow. */
    overflow: hidden;
}

/* Polaroid Style on: the classic white-framed print, heavier bottom
 * margin for the caption. Off (default): full-bleed — the photo IS
 * the tile, no frame, no caption (there's no margin to put one in). */
.lcms-block--gallery.is-polaroid-pile .gallery__pile-item.is-polaroid {
    background: #fff;
    padding: 0.5rem 0.5rem 1.5rem;
}

.lcms-block--gallery.is-polaroid-pile .gallery__pile-item:hover {
    transform: translate(-50%, -50%) scale(1.06) rotate(0deg);
    z-index: 50;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}

/* Handwritten-feel caption strip in the frame's bottom margin — the
 * defining polaroid detail. Empty when the attachment has no title
 * (the field is only rendered at all when there's a title to show). */
.lcms-block--gallery.is-polaroid-pile .gallery__pile-caption {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.65rem;
    line-height: 1.2;
    color: #333;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* row/fan on mobile: rather than keep shrinking a wide line of photos
 * into illegible slivers, switch to a horizontal swipe strip — same
 * pattern as Netflix rows / Instagram story reels / Pinterest boards.
 * Tiles go back to a plain in-flow row at a fixed legible size and
 * drop the seeded scatter (rotation/offset don't read well inside a
 * scrolling strip, and flex items ignore top/left/z-index anyway once
 * position is static — the --pile-* values just go unused here, no
 * PHP changes needed). Width still respects the Preview Width preset
 * — that's the visible "window", photos beyond it are a swipe away
 * rather than the box growing or its contents shrinking further. */
@media (max-width: 640px) {
    .lcms-block--gallery.is-polaroid-pile.is-pile-row .gallery__grid,
    .lcms-block--gallery.is-polaroid-pile.is-pile-fan .gallery__grid {
        aspect-ratio: unset;
        display: flex;
        overflow-x: auto;
        overflow-y: visible;
        gap: 0.75rem;
        padding: 0.5rem 0.25rem 1rem;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .lcms-block--gallery.is-polaroid-pile.is-pile-row .gallery__pile-item,
    .lcms-block--gallery.is-polaroid-pile.is-pile-fan .gallery__pile-item {
        position: static;
        flex: 0 0 auto;
        width: 6rem;
        transform: none;
        scroll-snap-align: start;
    }

    .lcms-block--gallery.is-polaroid-pile.is-pile-row .gallery__pile-item:hover,
    .lcms-block--gallery.is-polaroid-pile.is-pile-fan .gallery__pile-item:hover {
        transform: scale(1.04);
    }
}