/* =====================================================================
 * TNM Gallery — Layout Styles
 *
 * Three layouts:
 *   .tnm-gallery--grid       — fixed CSS grid, equal columns
 *   .tnm-gallery--masonry    — CSS columns (vertical waterfall)
 *   .tnm-gallery--justified  — flexbox row pack (Flickr-style)
 *
 * Caption modes:
 *   .tnm-gallery--cap-bottom — figcaption below image (default)
 *   .tnm-gallery--cap-hover  — figcaption fades in on hover overlay
 *   .tnm-gallery--cap-none   — captions hidden
 *
 * Color contract — three-layer cascade:
 *   var(--tnm-gallery-accent, var(--nk-accent, #c9a063))
 *   1. Plugin brand filter / settings
 *   2. Theme CSS variable
 *   3. TNM gold fallback
 * ===================================================================== */

.tnm-gallery {
    --tnm-gallery-gap: 12px;
    --tnm-gallery-radius: 4px;
    --tnm-gallery-cap-color: var(--nk-text-muted, #555);
    --tnm-gallery-cap-bg: rgba(0, 0, 0, 0.55);
    --tnm-gallery-cap-text-light: #fff;
    box-sizing: border-box;
    width: 100%;
}

.tnm-gallery *,
.tnm-gallery *::before,
.tnm-gallery *::after { box-sizing: inherit; }

.tnm-gallery-picture { display: block; line-height: 0; }

.tnm-gallery-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--tnm-gallery-radius);
    transition: transform 0.45s ease, filter 0.3s ease;
}

.tnm-gallery-item {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    cursor: zoom-in;
}

.tnm-gallery-item:hover .tnm-gallery-img,
.tnm-gallery-item:focus-visible .tnm-gallery-img {
    transform: scale(1.025);
}

.tnm-gallery-item:focus-visible {
    outline: 2px solid var(--tnm-gallery-accent, #c9a063);
    outline-offset: 3px;
}

.tnm-gallery-caption {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--tnm-gallery-cap-color);
    margin: 8px 0 0;
}

/* ---------- GRID ---------- */
.tnm-gallery--grid {
    display: grid;
    gap: var(--tnm-gallery-gap);
    grid-template-columns: repeat(var(--tnm-gallery-cols, 3), 1fr);
}
.tnm-gallery--grid[data-columns="1"] { --tnm-gallery-cols: 1; }
.tnm-gallery--grid[data-columns="2"] { --tnm-gallery-cols: 2; }
.tnm-gallery--grid[data-columns="3"] { --tnm-gallery-cols: 3; }
.tnm-gallery--grid[data-columns="4"] { --tnm-gallery-cols: 4; }
.tnm-gallery--grid[data-columns="5"] { --tnm-gallery-cols: 5; }
.tnm-gallery--grid[data-columns="6"] { --tnm-gallery-cols: 6; }

@media (max-width: 1024px) {
    .tnm-gallery--grid[data-columns="5"],
    .tnm-gallery--grid[data-columns="6"] { --tnm-gallery-cols: 4; }
}
@media (max-width: 768px) {
    .tnm-gallery--grid { --tnm-gallery-cols: 2 !important; }
}
@media (max-width: 480px) {
    .tnm-gallery--grid { --tnm-gallery-cols: 1 !important; }
}

/* Grid: enforce square-ish tiles via aspect-ratio when columns > 1 */
.tnm-gallery--grid .tnm-gallery-item {
    aspect-ratio: 4 / 3;
}
.tnm-gallery--grid .tnm-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- MASONRY (CSS columns) ---------- */
.tnm-gallery--masonry {
    column-gap: var(--tnm-gallery-gap);
    column-count: var(--tnm-gallery-cols, 3);
}
.tnm-gallery--masonry[data-columns="1"] { --tnm-gallery-cols: 1; }
.tnm-gallery--masonry[data-columns="2"] { --tnm-gallery-cols: 2; }
.tnm-gallery--masonry[data-columns="3"] { --tnm-gallery-cols: 3; }
.tnm-gallery--masonry[data-columns="4"] { --tnm-gallery-cols: 4; }
.tnm-gallery--masonry[data-columns="5"] { --tnm-gallery-cols: 5; }
.tnm-gallery--masonry[data-columns="6"] { --tnm-gallery-cols: 6; }

.tnm-gallery--masonry .tnm-gallery-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: var(--tnm-gallery-gap);
    display: block;
}

@media (max-width: 1024px) {
    .tnm-gallery--masonry[data-columns="5"],
    .tnm-gallery--masonry[data-columns="6"] { --tnm-gallery-cols: 4; }
}
@media (max-width: 768px) {
    .tnm-gallery--masonry { --tnm-gallery-cols: 2 !important; }
}
@media (max-width: 480px) {
    .tnm-gallery--masonry { --tnm-gallery-cols: 1 !important; }
}

/* ---------- JUSTIFIED (flex pack) ---------- */
.tnm-gallery--justified {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tnm-gallery-gap);
}
.tnm-gallery--justified .tnm-gallery-item {
    flex: 1 1 240px;
    height: 240px;
    max-width: 100%;
}
.tnm-gallery--justified .tnm-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 768px) {
    .tnm-gallery--justified .tnm-gallery-item {
        flex-basis: 45%;
        height: 200px;
    }
}
@media (max-width: 480px) {
    .tnm-gallery--justified .tnm-gallery-item {
        flex-basis: 100%;
        height: 240px;
    }
}

/* =====================================================================
 * EDITORIAL LAYOUTS (v1.0.3+)
 *
 *   .tnm-gallery--feature-left   1 big image left + 4×3 small grid right
 *   .tnm-gallery--feature-right  mirror of feature-left
 *   .tnm-gallery--mosaic         magazine-style mixed sizes (7-item pattern)
 *   .tnm-gallery--split-2x2      1 big + 2×2 small (Airbnb hero pattern)
 *
 * Common: tiles use object-fit: cover so any aspect ratio fills cleanly.
 * Mobile: all editorial layouts collapse to a sane 1- or 2-col stack.
 *
 * Critical sizing rule: <picture> defaults to its content's natural size,
 * which breaks the chain  grid-cell → tile → picture → img(height:100%).
 * For all editorial layouts where tiles span multiple rows or have fixed
 * heights, picture must explicitly fill its parent.
 * ===================================================================== */

.tnm-gallery--feature-left .tnm-gallery-picture,
.tnm-gallery--feature-right .tnm-gallery-picture,
.tnm-gallery--mosaic .tnm-gallery-picture,
.tnm-gallery--split-2x2 .tnm-gallery-picture {
    display: block;
    width: 100%;
    height: 100%;
}

.tnm-gallery--feature-left .tnm-gallery-item,
.tnm-gallery--feature-right .tnm-gallery-item,
.tnm-gallery--mosaic .tnm-gallery-item,
.tnm-gallery--split-2x2 .tnm-gallery-item {
    min-width: 0;
    min-height: 0;
}

/* ---------- FEATURE-LEFT (1 big + 4-col × 3-row grid) ---------- */

.tnm-gallery--feature-left {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: var(--tnm-gallery-gap);
}

.tnm-gallery--feature-left .tnm-gallery-item {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.tnm-gallery--feature-left .tnm-gallery-item:first-child {
    grid-column: 1;
    grid-row: 1 / span 3;
    aspect-ratio: auto;
}

.tnm-gallery--feature-left .tnm-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .tnm-gallery--feature-left {
        grid-template-columns: 1.6fr 1fr 1fr 1fr;
    }
    .tnm-gallery--feature-left .tnm-gallery-item:first-child {
        grid-row: 1 / span 3;
    }
}

@media (max-width: 768px) {
    .tnm-gallery--feature-left {
        grid-template-columns: 1fr 1fr;
    }
    .tnm-gallery--feature-left .tnm-gallery-item:first-child {
        grid-column: 1 / -1;
        grid-row: auto;
        aspect-ratio: 4 / 3;
    }
}

/* ---------- FEATURE-RIGHT (mirror) ---------- */

.tnm-gallery--feature-right {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 2fr;
    gap: var(--tnm-gallery-gap);
}

.tnm-gallery--feature-right .tnm-gallery-item {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.tnm-gallery--feature-right .tnm-gallery-item:first-child {
    grid-column: 5;
    grid-row: 1 / span 3;
    aspect-ratio: auto;
}

.tnm-gallery--feature-right .tnm-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .tnm-gallery--feature-right {
        grid-template-columns: 1fr 1fr 1fr 1.6fr;
    }
    .tnm-gallery--feature-right .tnm-gallery-item:first-child {
        grid-column: 4;
        grid-row: 1 / span 3;
    }
}

@media (max-width: 768px) {
    .tnm-gallery--feature-right {
        grid-template-columns: 1fr 1fr;
    }
    .tnm-gallery--feature-right .tnm-gallery-item:first-child {
        grid-column: 1 / -1;
        grid-row: auto;
        aspect-ratio: 4 / 3;
    }
}

/* ---------- MOSAIC (magazine-style mixed sizes, 7-item repeating pattern) ---------- */

.tnm-gallery--mosaic {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(120px, 18vw);
    gap: var(--tnm-gallery-gap);
    grid-auto-flow: dense;
}

.tnm-gallery--mosaic .tnm-gallery-item {
    grid-column: span 2;
    grid-row: span 1;
    overflow: hidden;
}

/* 7-item repeating rhythm: 1 huge → 2 small → 1 wide → 1 tall → 2 small */
.tnm-gallery--mosaic .tnm-gallery-item:nth-child(7n+1) {
    grid-column: span 3;
    grid-row: span 2;
}
.tnm-gallery--mosaic .tnm-gallery-item:nth-child(7n+4) {
    grid-column: span 2;
    grid-row: span 2;
}

.tnm-gallery--mosaic .tnm-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .tnm-gallery--mosaic {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: minmax(110px, 22vw);
    }
    .tnm-gallery--mosaic .tnm-gallery-item { grid-column: span 2; }
    .tnm-gallery--mosaic .tnm-gallery-item:nth-child(7n+1) {
        grid-column: span 4;
        grid-row: span 2;
    }
    .tnm-gallery--mosaic .tnm-gallery-item:nth-child(7n+4) {
        grid-column: span 2;
        grid-row: span 1;
    }
}

@media (max-width: 600px) {
    .tnm-gallery--mosaic {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(140px, 38vw);
    }
    .tnm-gallery--mosaic .tnm-gallery-item,
    .tnm-gallery--mosaic .tnm-gallery-item:nth-child(7n+1),
    .tnm-gallery--mosaic .tnm-gallery-item:nth-child(7n+4) {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* ---------- SPLIT 2×2 (Airbnb-style: 1 big + 2×2 small) ----------
 *
 * v1.0.5 — Left tile is the height anchor. Columns 2:1:1 + container
 * aspect 2:1 → left tile is square-ish (W/2 × W/2). Right tiles are
 * also square-ish (W/4 × ~W/4). Both crop landscape and portrait
 * source photos nicely via object-fit: cover.
 *
 * Critical fix: `.tnm-gallery-picture` MUST have explicit 100% × 100%
 * because <picture> defaults to natural-content size, which prevents
 * the child <img height:100%> from resolving against the grid cell.
 */

.tnm-gallery--split-2x2 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--tnm-gallery-gap);
    aspect-ratio: 2 / 1;
    width: 100%;
}

.tnm-gallery--split-2x2 .tnm-gallery-item {
    overflow: hidden;
    border-radius: var(--tnm-gallery-radius);
    position: relative;
    /* Stretch into the assigned grid cell — explicit min-* values so
       the item never shrinks below its allocation when image content
       has a smaller intrinsic size. */
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
}

.tnm-gallery--split-2x2 .tnm-gallery-item:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
}

/* This is the fix. <picture> normally sizes to its content (natural img
   dimensions). Force it to fill the grid item so the inner <img height:100%>
   resolves against the cell height, not the image's natural height. */
.tnm-gallery--split-2x2 .tnm-gallery-picture {
    display: block;
    width: 100%;
    height: 100%;
}

.tnm-gallery--split-2x2 .tnm-gallery-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* This pattern shows exactly 5 tiles. Hide overflow; "Show all photos"
   button on the 5th tile opens the lightbox slider with the full set. */
.tnm-gallery--split-2x2 .tnm-gallery-item:nth-child(n+6) {
    display: none;
}

/* ---------- "SHOW ALL PHOTOS" BUTTON (Airbnb-style) ---------- */

.tnm-gallery-show-all {
    position: absolute;
    bottom: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fff;
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    z-index: 5;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    user-select: none;
    white-space: nowrap;
}

.tnm-gallery-show-all:hover,
.tnm-gallery-item:hover .tnm-gallery-show-all,
.tnm-gallery-item:focus-visible .tnm-gallery-show-all {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
    background: #fafafa;
}

.tnm-gallery-show-all-icon { display: block; flex-shrink: 0; }
.tnm-gallery-show-all-label { line-height: 1; }

/* The 5th tile contains the button. Disable its hover-zoom so the button
   stays anchored cleanly without the underlying image scaling. */
.tnm-gallery--split-2x2 .tnm-gallery-item:nth-child(5):hover .tnm-gallery-img,
.tnm-gallery--split-2x2 .tnm-gallery-item:nth-child(5):focus-visible .tnm-gallery-img {
    transform: none;
}

@media (max-width: 768px) {
    .tnm-gallery-show-all {
        bottom: 12px;
        right: 12px;
        padding: 8px 12px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .tnm-gallery-show-all {
        padding: 7px 10px;
        font-size: 11px;
        gap: 6px;
    }
    .tnm-gallery-show-all-icon { width: 14px; height: 14px; }
}

@media (max-width: 768px) {
    .tnm-gallery--split-2x2 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        aspect-ratio: auto;
    }
    .tnm-gallery--split-2x2 .tnm-gallery-item:first-child {
        grid-column: 1 / -1;
        grid-row: auto;
        aspect-ratio: 16 / 10;
    }
    .tnm-gallery--split-2x2 .tnm-gallery-item:not(:first-child) {
        aspect-ratio: 4 / 3;
    }
}

/* ---------- CAPTION VARIANTS ---------- */

.tnm-gallery--cap-none .tnm-gallery-caption { display: none; }

.tnm-gallery--cap-hover .tnm-gallery-caption {
    position: absolute;
    inset: auto 0 0 0;
    margin: 0;
    padding: 12px 14px;
    color: var(--tnm-gallery-cap-text-light);
    background: linear-gradient(to top, var(--tnm-gallery-cap-bg) 30%, transparent);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.tnm-gallery--cap-hover .tnm-gallery-item:hover .tnm-gallery-caption,
.tnm-gallery--cap-hover .tnm-gallery-item:focus-visible .tnm-gallery-caption {
    opacity: 1;
    transform: translateY(0);
}