/* Gallery – Wizytowka-Fryzjer */
.gallery-section { background: var(--color-brown); overflow: hidden; }
.gallery-section .section__title { color: var(--color-cream); }
.gallery-section .section__eyebrow { color: var(--color-gold-light); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.gallery-item { display: block; overflow: hidden; position: relative; aspect-ratio: 3/4; cursor: pointer; border: none; padding: 0; background: none; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; display: block; }
.gallery-item::after { content: ''; position: absolute; inset: 0; background: rgba(194,149,108,0); transition: background var(--transition-slow); }
.gallery-item:hover::after { background: rgba(194,149,108,0.2); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }
/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.93); z-index: var(--z-lightbox); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 2px; }
.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(255,255,255,0.25); }
.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.1); 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(255,255,255,0.25); }
@media (max-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
