/* ============================================================
   gallery.css — Kuratierte Hängung (Masonry), Werk-Karten,
   Serien-Intro, Filter, Lightbox.  Kern: Werk = Exponat mit Tafel.
   Löst "Galerie nicht so 1a": KEINE gleich-große Miniatur-Sliderei.
   ============================================================ */

/* ----------------------- Galerie-Intro (Seitenkopf) ----------------------- */
.gallery-hero { padding-block: clamp(3rem, 7vw, 6rem) var(--block-y); }
.gallery-hero__title { font-size: var(--fs-h2); margin-top: .7rem; }
.gallery-hero__note {
  margin-top: 1.2rem; font-size: .95rem; color: var(--ink-600);
  display: inline-flex; gap: .6rem; align-items: flex-start;
  background: var(--paper-2); border: 1px solid var(--line);
  border-left: 3px solid var(--gold); padding: .8rem 1.1rem; border-radius: var(--r-sm);
  max-width: 60ch;
}

/* ----------------------- Serien-Filter (sticky unter Header) ----------------------- */
.series-filter {
  position: sticky; top: var(--header-h); z-index: 50;
  padding-block: .9rem; margin-bottom: var(--block-y);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border-block: 1px solid var(--line);
}
.series-filter__inner { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.series-filter__label {
  font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-400); font-weight: 600; margin-right: .5rem;
}
.filter-btn {
  font-size: .88rem; font-weight: 500; padding: .45rem 1rem; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); color: var(--ink-600); background: transparent;
  transition: all var(--dur-1) var(--ease-out);
}
.filter-btn:hover { border-color: var(--gold-deep); color: var(--ink-900); }
.filter-btn[aria-pressed="true"] { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--paper); }

/* ----------------------- Serie (Sektion) ----------------------- */
.serie { padding-bottom: var(--section-y); scroll-margin-top: calc(var(--header-h) + 70px); }
.serie[hidden] { display: none; }
.serie__head { max-width: 64ch; margin-bottom: var(--block-y); }
.serie__index {
  font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--gold-deep);
}
.serie__title { font-size: var(--fs-h3); margin: .4rem 0 .9rem; }
.serie__desc { color: var(--ink-600); line-height: 1.65; }

/* WOW pro Serie: gepinnte Intro (sticky) — der Serientitel „begleitet" das
   Durchscrollen der Hängung wie eine Saaltafel. Dependency-frei; mit GSAP
   kann gsap-init dies zu einem echten Pin-Scrub upgraden (data-pin). */
@media (min-width: 901px) {
  .serie:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(230px, 310px) 1fr;
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: start;
  }
  .serie__head {
    position: sticky;
    top: calc(var(--header-h) + 88px);
    margin-bottom: 0;
  }
}

/* ----------------------- Masonry-Hängung ----------------------- */
.hang {
  columns: 3 280px;
  column-gap: var(--gap);
}
@media (min-width: 901px) { .serie:not([hidden]) .hang { columns: 2 240px; } }
@media (max-width: 900px) { .hang { columns: 2 240px; } }
@media (max-width: 560px) { .hang { columns: 1; } }

/* Werk-Karte (.work-card*) + Platzhalter (.art-ph) liegen in components.css
   — sie werden auch im Werk-Teaser der Startseite genutzt (kein gallery.css dort). */

/* ----------------------- Schluss-Notiz Galerie ----------------------- */
.gallery-foot {
  margin-top: var(--block-y); padding-top: var(--block-y); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.gallery-foot__prices { color: var(--ink-900); font-weight: 600; }
.gallery-foot__prices span { display: block; color: var(--ink-600); font-weight: 400; font-size: .92rem; margin-top: .3rem; }

/* ============================================================
   Lightbox — tastatur-bedienbar (Esc / ← → ), a11y dialog
   ============================================================ */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-lightbox);
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(20,18,14,.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-out), visibility var(--dur-2);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__stage {
  display: grid; gap: 1.2rem; max-width: min(1100px, 100%); max-height: 100%;
  transform: scale(.97); transition: transform var(--dur-2) var(--ease-out);
}
.lightbox.is-open .lightbox__stage { transform: scale(1); }
.lightbox__figure { display: grid; place-items: center; min-height: 0; }
.lightbox__img, .lightbox__ph {
  max-width: 100%; max-height: 72vh; width: auto; height: auto;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.8);
  border: 8px solid #fff; background: #fff;
}
.lightbox__ph { width: min(70vw, 520px); aspect-ratio: var(--ph-ar, 1/1); }
.lightbox__caption { color: var(--on-dark); text-align: center; }
.lightbox__caption .t { font-family: var(--font-display); font-size: 1.35rem; }
.lightbox__caption .m { color: var(--on-dark-soft); font-size: .92rem; margin-top: .4rem; }
.lightbox__caption .chip { margin-top: .7rem; }

.lightbox__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--glass-bg-dark); color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.25);
  display: grid; place-items: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background var(--dur-1);
}
.lightbox__btn:hover { background: var(--bordeaux); color: var(--paper); }
.lightbox__btn svg { width: 24px; height: 24px; }
.lightbox__prev { left: clamp(.5rem, 2vw, 2rem); }
.lightbox__next { right: clamp(.5rem, 2vw, 2rem); }
.lightbox__close { top: clamp(.8rem,2vw,1.6rem); right: clamp(.8rem,2vw,1.6rem); transform: none; width: 48px; height: 48px; }
.lightbox__count { position: absolute; top: clamp(.8rem,2vw,1.6rem); left: clamp(.8rem,2vw,1.6rem);
  color: var(--on-dark-soft); font-size: .85rem; letter-spacing: .1em; }

@media (max-width: 560px) {
  .lightbox__prev { left: .4rem; } .lightbox__next { right: .4rem; }
  .lightbox__btn { width: 44px; height: 44px; }
}