/* dela-media — Galerie: Behind-the-Scenes-Wand mit Filter und Lightbox.
   Baut auf tokens.css + service.css auf, reine Zusatzklassen. */

.gallery-intro { padding-bottom: 0; }

.gallery-count { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--fg-4); margin-top: 6px; }

.gallery-filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 36px 0 40px;
}
.gallery-filter-chip {
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--fg-3); padding: 8px 0; position: relative; cursor: pointer;
  background: none; border: none; transition: color .25s;
  white-space: nowrap;
}
.gallery-filter-chip span { color: var(--fg-4); font-family: var(--font-mono); letter-spacing: 0; text-transform: none; margin-left: 4px; }
.gallery-filter-chip:hover { color: #fff; }
.gallery-filter-chip::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out);
}
.gallery-filter-chip.is-active { color: #fff; }
.gallery-filter-chip.is-active::after { transform: scaleX(1); }

.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.gallery-cell {
  position: relative; aspect-ratio: 4/3; overflow: hidden; cursor: pointer;
  background: var(--bg-3);
}
.gallery-cell img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.82) brightness(.9); transition: transform 1s var(--ease-out), filter .6s;
}
.gallery-cell:hover img { transform: scale(1.06); filter: saturate(1) brightness(1); }
.gallery-cell__tag {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: #fff; opacity: 0; transform: translateY(6px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
  pointer-events: none;
}
.gallery-cell::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.75) 100%);
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.gallery-cell:hover::before, .gallery-cell:hover .gallery-cell__tag { opacity: 1; transform: translateY(0); }
.gallery-cell.is-hidden { display: none; }

@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .gallery-grid { grid-template-columns: 1fr; gap: 10px; }
  .gallery-filter-bar { gap: 8px 16px; }
}