/* ═══════════════════════════════════════════════════════════
   GALERIJA — gallery component (M3) · brand-neutral
   Grid · tiles · entrance · empty state · lightbox thumb strip
   ═══════════════════════════════════════════════════════════ */

.fp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin: 0 0 2rem;
    animation: fp-scale-in .5s ease both;
}

.fp-tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
    background: #ece4d4;
    text-decoration: none;
}

.fp-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease, opacity .35s ease;
}

.fp-tile:hover img {
    transform: scale(1.04);
    opacity: .88;
}

.fp-tile figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 1.2rem .5rem .4rem;
    font-size: .78rem;
    letter-spacing: .06em;
    color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,.55));
    opacity: 0;
    transition: opacity .25s ease;
    text-align: center;
}

.fp-tile:hover figcaption { opacity: 1; }

@keyframes fp-scale-in {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* empty state */
.fp-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: #8b8273;
    border: 1px dashed var(--line, #e3dccf);
    border-radius: 6px;
    font-size: 1rem;
}
.fp-empty strong { display: block; font-size: 1.2rem; color: var(--brand-gold, #b49a76); margin-bottom: .3rem; }

/* home hero grid — gallery cards */
.fp-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}

.fp-card {
    display: block;
    text-decoration: none;
    color: var(--ink, #1c1a17);
    animation: fp-scale-in .5s ease both;
}

.fp-card .fp-card-img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
    background: #ece4d4;
}
.fp-card .fp-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease, opacity .35s ease;
}
.fp-card:hover .fp-card-img img { transform: scale(1.04); opacity: .88; }

.fp-card h3 {
    margin: .55rem 0 .1rem;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: .05em;
}
.fp-card .fp-card-count { font-size: .78rem; color: #8b8273; letter-spacing: .1em; text-transform: uppercase; }

/* ── PhotoSwipe custom thumbnail strip ──────────────────────
   One horizontal scrollable row — never a wrapping wall.
   Small galleries still render as a single short row;
   large galleries (100+ photos) scroll instead of stacking. */
.fp-strip {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    padding: 14px 0 2px;
    scrollbar-width: thin;
}
.fp-strip button {
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    overflow: hidden;
    background: #000;
    opacity: .6;
    transition: opacity .2s ease, border-color .2s ease;
}
.fp-strip button:hover { opacity: 1; }
.fp-strip button.is-active { border-color: var(--brand-gold, #b49a76); opacity: 1; }
.fp-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }