/* gallery.css – Portfolio-Fotograf */
.gallery-section { background: var(--color-bg); }

/* Filter buttons */
.gallery-filters { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.gallery-filter { padding: 0.5em 1.4em; font-size: var(--font-size-sm); font-weight: var(--font-weight-semi); border: 1px solid var(--color-border-light); color: var(--color-text-muted); border-radius: var(--radius-full); transition: all var(--transition-base); cursor: pointer; }
.gallery-filter:hover { border-color: var(--color-gold); color: var(--color-gold); }
.gallery-filter.is-active { background: var(--color-gold); border-color: var(--color-gold); color: #0D0D0D; }
.gallery-filter:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; }

/* Masonry grid via CSS columns */
.gallery-grid { columns: 3; column-gap: 6px; }
.gallery-item { display: block; overflow: hidden; position: relative; width: 100%; cursor: pointer; border: none; padding: 0; background: none; margin-bottom: 6px; break-inside: avoid; }
.gallery-item--tall .gallery-img { aspect-ratio: 2/3; }
.gallery-img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; transition: transform 0.6s ease; }
.gallery-img.lazy { background: var(--color-surface-2); }
.gallery-item__overlay { position: absolute; inset: 0; background: rgba(212,175,55,0); display: flex; align-items: flex-end; padding: var(--space-4); transition: background var(--transition-slow); }
.gallery-item__overlay span { font-size: var(--font-size-xs); font-weight: var(--font-weight-semi); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; opacity: 0; transform: translateY(8px); transition: opacity var(--transition-base), transform var(--transition-base); }
.gallery-item:hover .gallery-item__overlay { background: rgba(13,13,13,0.45); }
.gallery-item:hover .gallery-item__overlay span { opacity: 1; transform: translateY(0); }
.gallery-item:hover .gallery-img { transform: scale(1.04); }
.gallery-item:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }

/* Hidden items (filtered out) */
.gallery-item[hidden] { display: none; }

.gallery-empty { text-align: center; color: var(--color-text-dim); font-size: var(--font-size-lg); padding: var(--space-12) 0; font-style: italic; font-family: var(--font-display); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: var(--z-lightbox); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-3); }
.lightbox__img { max-width: 90vw; max-height: 80vh; object-fit: contain; }
.lightbox__caption { font-size: var(--font-size-sm); color: rgba(255,255,255,0.55); font-style: italic; font-family: var(--font-display); text-align: center; max-width: 600px; }
.lightbox__close { position: fixed; top: var(--space-6); right: var(--space-6); color: #fff; font-size: var(--font-size-2xl); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.1); transition: background var(--transition-fast); }
.lightbox__close:hover { background: rgba(212,175,55,0.5); }
.lightbox__prev, .lightbox__next { position: fixed; top: 50%; transform: translateY(-50%); color: #fff; font-size: var(--font-size-3xl); width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); border-radius: 50%; transition: background var(--transition-fast); }
.lightbox__prev { left: var(--space-6); }
.lightbox__next { right: var(--space-6); }
.lightbox__prev:hover, .lightbox__next:hover { background: rgba(212,175,55,0.4); }
.lightbox__prev:focus-visible, .lightbox__next:focus-visible, .lightbox__close:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; }

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