/* =========================================================
   Mr Ribs — Gallery page
   ========================================================= */

.gallery-container { max-width: var(--maxw); margin: 3.5rem auto; padding: 0 1.5rem; }
.gallery-grid {
    columns: 3; column-gap: 1rem;
}
.gallery-item {
    break-inside: avoid; margin-bottom: 1rem; border-radius: var(--radius);
    overflow: hidden; cursor: pointer; position: relative; border: 1px solid var(--line);
}
.gallery-item img { width: 100%; transition: transform .6s ease, filter .4s ease; filter: brightness(.92); }
.gallery-item::after {
    content: '+'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--f-display); font-size: 2.5rem; color: var(--gold-soft);
    background: rgba(12,10,8,.45); opacity: 0; transition: opacity .35s;
}
.gallery-item:hover img { transform: scale(1.06); filter: brightness(1); }
.gallery-item:hover::after { opacity: 1; }

.image-count { text-align: center; color: var(--cream-dim); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-top: 2.5rem; }

/* Lightbox */
.modal {
    display: none; position: fixed; inset: 0; z-index: 2000;
    background: rgba(8,6,4,.96); align-items: center; justify-content: center;
}
.modal.active { display: flex; }
.modal-content img { max-width: 88vw; max-height: 82vh; border-radius: 8px; box-shadow: var(--shadow); }
.modal .close, .modal .prev, .modal .next {
    position: absolute; color: var(--cream); font-size: 2.4rem; cursor: pointer;
    user-select: none; transition: color .3s; z-index: 2001;
}
.modal .close:hover, .modal .prev:hover, .modal .next:hover { color: var(--gold-soft); }
.modal .close { top: 24px; right: 34px; }
.modal .prev { left: 28px; top: 50%; transform: translateY(-50%); font-size: 3rem; }
.modal .next { right: 28px; top: 50%; transform: translateY(-50%); font-size: 3rem; }
.modal-info { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: var(--cream-dim); font-size: .9rem; letter-spacing: .1em; }

@media (max-width: 900px) { .gallery-grid { columns: 2; } }
@media (max-width: 560px) { .gallery-grid { columns: 1; } }