/* ==========================================================================
   Page: gallery  (site/gallery/index)
   --------------------------------------------------------------------------
   .gallery     bento photo grid — 4 columns of rounded tiles; .gtile--big
                spans 2×2, .gtile--wide 2×1 (dense packing fills the gaps).
                The caption slides up on hover / shows on touch screens.
   .lightbox    full-screen <dialog>: the photo + caption on a dark stage,
                a bottom bar with the counter, previous/next and close.
   ========================================================================== */

/* ── Grid ────────────────────────────────────────────────────────────────── */
.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(150px, 12vw + 40px, 230px);
    grid-auto-flow: dense;
    gap: var(--gap);
}
.gtile { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--card-soft); }
.gtile--big  { grid-column: span 2; grid-row: span 2; }
.gtile--wide { grid-column: span 2; }
.gtile a { display: block; height: 100%; }
.gtile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t) var(--ease); }
.gtile a:hover img { transform: scale(1.04); }
.gtile a:focus-visible { outline: 3px solid var(--lemon); outline-offset: -3px; border-radius: inherit; }

.gtile__caption {
    position: absolute;
    inset-inline: var(--s-3);
    bottom: var(--s-3);
    padding: 0.45em 0.95em;
    border-radius: var(--r-pill);
    background: rgb(16 30 40 / 0.72);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.5;
    width: fit-content;
    max-width: calc(100% - var(--s-3) * 2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.gtile a:hover .gtile__caption, .gtile a:focus-visible .gtile__caption { opacity: 1; transform: none; }
@media (hover: none) { .gtile--big .gtile__caption { opacity: 1; transform: none; } }

.gallery-empty { display: flex; align-items: center; gap: var(--s-3); color: var(--ink-soft); }
.gallery-empty .icon { width: 28px; height: 28px; color: var(--navy); }

.gallery + .pagination { margin-top: var(--s-6); }

/* ── Lightbox ────────────────────────────────────────────────────────────── */
.lightbox {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgb(12 22 30 / 0.96);
    color: #fff;
}
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox::backdrop { background: rgb(12 22 30 / 0.6); }
.lightbox__stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: var(--s-5) var(--gutter) var(--s-3); }
.lightbox__figure { display: grid; justify-items: center; gap: var(--s-3); max-height: 100%; min-height: 0; }
.lightbox__figure img { max-width: min(100%, 1400px); max-height: calc(100dvh - 150px); border-radius: var(--r-md); object-fit: contain; }
.lightbox__caption { color: var(--on-dark-soft); font-size: var(--fs-sm); text-align: center; }
.lightbox__caption:empty { display: none; }

.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--gutter) max(var(--s-4), env(safe-area-inset-bottom)); }
.lightbox__count { min-width: 4em; color: var(--on-dark-soft); font-family: var(--font-num); font-size: var(--fs-sm); }
.lightbox__nav { display: flex; gap: var(--s-2); }
.lightbox__btn {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.1);
    color: #fff;
    font-size: 1.25rem;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lightbox__btn:hover:not(:disabled) { background: var(--lemon); color: var(--navy); }
.lightbox__btn:disabled { opacity: 0.3; cursor: default; }
.lightbox__btn:focus-visible { outline: 2px solid var(--lemon); outline-offset: 2px; }

@media (max-width: 991.98px) {
    .gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575.98px) {
    .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
    .gtile--wide { grid-column: span 2; }
}