/* =========================
   GLOBAL
========================= */

body {
  margin: 0;
  background: black;
  min-height: 100vh;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Scrollbar aus (Galerie-Seite) */
::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

/* Wenn Fotoansicht offen: Background-Scroll sperren */
body.pv-open {
  overflow: hidden;
}

/* =========================
   GALLERY
========================= */

.gallery {
  padding: 240px 40px 40px;
}

/* =========================
   HYBRID MASONRY GRID
========================= */

.photo-wall {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* MAX 5 */
  grid-auto-rows: 180px;
  gap: 28px;
  align-items: start;
}

/* =========================
   PHOTOS
========================= */

.gallery-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  cursor: pointer;
  opacity: 0.95;

  transition:
    transform 0.25s ease,
    filter 0.25s ease,
    opacity 0.25s ease;
}

.gallery-photo:hover {
  opacity: 1;
  filter: brightness(110%) drop-shadow(0 0 14px rgba(255,255,255,0.35));
  transform: scale(1.015);
}

/* Höhen-Spans */
.gallery-photo[data-span="1"] { grid-row: span 1; }
.gallery-photo[data-span="2"] { grid-row: span 2; }

/* =========================
   RESPONSIVE – SPALTENLOGIK (Galerie)
========================= */

/* 4 Spalten */
@media (max-width: 1600px) {
  .photo-wall { grid-template-columns: repeat(4, 1fr); }
}

/* 3 Spalten */
@media (max-width: 1200px) {
  .photo-wall {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 170px;
  }
}

/* 2 Spalten – MINIMUM */
@media (max-width: 800px), (max-aspect-ratio: 3/4) {
  .gallery { padding: 220px 20px 40px; }

  .photo-wall {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
    gap: 20px;
  }
}

/* =========================
   OVERLAY UI (visuals_alt identisch)
========================= */

.artist-logo {
  position: fixed;
  top: 24px;
  right: 32px;
  z-index: 1000;
  pointer-events: auto;
}

.artist-logo img {
  width: clamp(140px, 18vw, 240px);
  height: auto;
  display: block;
}

.back-arrow {
  position: fixed;
  top: 28px;
  left: 32px;
  z-index: 1000;
  pointer-events: auto;
}

.back-arrow img {
  width: clamp(80px, 12vw, 128px);
  height: auto;
  display: block;
  transition: transform 0.2s ease;
}

.back-arrow:hover img {
  transform: scale(1.1);
}

/* =========================
   FOTOANSICHT (PoC System)
========================= */

.pv {
  position: fixed;
  inset: 0;
  z-index: 5000;

  opacity: 0;
  pointer-events: none;

  /* dynamische Engine Werte */
  --stageH: 72vh;
  --photoW: 520px;
}

.pv.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Backdrop – 20% dunkler als vorher */
.pv-backdrop {
  /* IMPORTANT:
     In Stage 4 scrollt die Fotoansicht (pv) vertikal. Wenn der Backdrop nur
     `position: absolute` ist, „bleibt“ der Blur am Dokumentanfang und unten
     fehlt er nach dem Scrollen.
     `fixed` hält Abdunklung + Blur immer vollflächig im Viewport. */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(4px);
}

/* Frame */
.pv-frame {
  position: relative;
  z-index: 2;

  width: 100%;
  height: 100%;
  box-sizing: border-box;

  padding: 40px 48px;

  display: flex;
  flex-direction: column;

  transform: scale(0.985);
  opacity: 0;

  transition:
    transform 0.45s cubic-bezier(0.4,0,0.2,1),
    opacity 0.25s ease;
}

.pv.is-open .pv-frame {
  transform: scale(1);
  opacity: 1;
}

/* Scrollbars in Fotoansicht: komplett unsichtbar (wie du wolltest) */
.pv * {
  scrollbar-width: none;
}
.pv *::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Header */
.pv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 0 0 auto;
}

.pv-titleline {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.pv-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(2.4rem, 3.6vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.5;
  color: white;
}

.pv-counter {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.18em; /* DAS ist „gesperrt“ */
  opacity: 0.55;
  color: white;

}

/* Close (gelbes Kreuz, responsive) */
.pv-close {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

.pv-close img {
  width: clamp(28px, 3.2vw, 44px);
  height: auto;
  display: block;
  opacity: 0.9;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.pv-close:hover img {
  opacity: 1;
  transform: scale(1.06);
}

/* Counter below (Stage 4) */
.pv-counter-below {
  display: none;
  margin-top: 10px;
}
.pv[data-stage="4"] .pv-counter-below {
  display: block;
}
.pv[data-stage="4"] #counterInline {
  display: none;
}

/* Layout Container */
.pv-layout {
  margin-top: 28px;
  height: var(--stageH);
  min-height: 0;
  gap: 40px;
  align-items: stretch;
}

/* =========================
   STAGE 0–2: 3 Spalten (links & rechts gleich breit!)
========================= */

.pv[data-stage="0"] .pv-layout,
.pv[data-stage="1"] .pv-layout,
.pv[data-stage="2"] .pv-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--photoW) minmax(0, 1fr);
}

/* =========================
   STAGE 3: 2 Spalten (Foto + rechte gemeinsame Scrollspalte)
   -> KEIN Übereinander: sideCol ist der Scrollcontainer
========================= */

.pv[data-stage="3"] .pv-layout {
  display: flex;
  height: var(--stageH);
  min-height: 0;
}

.pv-stage {
  min-width: 0;
  min-height: 0;
}

.pv[data-stage="3"] .pv-stage {
  flex: 0 0 var(--photoW);
}

.pv[data-stage="3"] .pv-side {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  min-height: 0;

  display: flex;
  flex-direction: column;
  gap: 22px;

  overflow-y: auto;   /* gemeinsame Scrollspalte */
  overflow-x: hidden; /* wichtig: kein Rechts-Overflow */
}

/* In Stage 3: Beschreibung + Galerie nicht einzeln scrollen */
.pv[data-stage="3"] .pv-desc-inner { overflow: visible; height: auto; }
.pv[data-stage="3"] .pv-thumbs { overflow: visible; height: auto; }

/* =========================
   STAGE 4: untereinander, ganze Ansicht scrollbar
========================= */

.pv[data-stage="4"] {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.pv[data-stage="4"] .pv-frame {
  height: auto;
  min-height: 100%;
}

.pv[data-stage="4"] .pv-layout {
  display: flex;
  flex-direction: column;
  height: auto;
  gap: 22px;
}

/* =========================
   DESCRIPTION
========================= */

.pv-desc,
.pv-photo {
  align-self: stretch;
}

.pv-desc {
  padding-top: 0;
  margin-top: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.pv-desc-inner {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 450;
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
}

/* =========================
   MAIN PHOTO (dominant, niemals crop)
========================= */

.pv-stage {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pv-stage-frame {
  height: var(--stageH);
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;
  min-height: 0;
}

.pv-stage-frame img {
  height: 100%;
  width: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Stage 4: Foto an Breite */
.pv[data-stage="4"] .pv-stage-frame {
  height: auto;
}
.pv[data-stage="4"] .pv-stage-frame img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* =========================
   THUMBS
========================= */

.pv-side {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.pv-thumbs {
  height: 100%;
  overflow-y: auto;
  min-width: 0;
}

/* Thumbs: Masonry-Look ohne Crop/Ohne Overlap
   -> CSS Columns (wie bei deinem Masonry-Grid in der Hauptgalerie),
      damit Hochkant/Querformat „locker“ fließen. */
.pv {
  --thumbGap: 14px;
  --thumbCols: 2;

  /* FOTO-BASIERTE CAP:
     - verhindert riesige Thumbs bei Portrait-Hauptfoto (kleines --photoW, große Side-Spalte)
     - hält Thumbs immer "untergeordnet" zum Hauptfoto
  */
  --thumbCap: min(
    240px,
    calc(var(--photoW) * 0.45),
    calc(var(--stageH) * 0.38)
  );
}


.pv-thumbs-grid {
  column-gap: var(--thumbGap);
  column-count: var(--thumbCols);
}

.pv-thumbs-grid img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 var(--thumbGap);
  break-inside: avoid;
  cursor: pointer;
  opacity: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.pv-thumbs-grid img:hover {
  transform: scale(1.02);
  box-shadow: 0 0 12px rgba(255,255,255,0.35);
}

.pv-thumbs-grid img.active {
  opacity: 0.55;
  pointer-events: none;
}

/* Column-Count per Stage/Substage */
.pv[data-stage="0"] { --thumbCols: 2; }
.pv[data-stage="1"] { --thumbCols: 2; }
.pv[data-stage="2"] { --thumbCols: 1; }
.pv[data-stage="3"][data-substage="a"] { --thumbCols: 2; }
.pv[data-stage="3"][data-substage="b"] { --thumbCols: 1; }
.pv[data-stage="4"] { --thumbCols: 3; }

/* FIX 2: Thumbs werden bei sehr breiten Fenstern sonst riesig.
   In Stage 0 und am Anfang von Stage 1 cappen wir die effektive Breite,
   sodass rechts „Luft“ entstehen darf – die Thumbs bleiben aber links am Foto.
   Sobald Stage 1 „normal“ ist (Fenster nicht mehr ultra-breit), fällt der Cap weg. */
.pv[data-stage="0"] .pv-side,
.pv[data-stage="1"] .pv-side {
  display: flex;
  justify-content: flex-start;
}

.pv[data-stage="0"] .pv-thumbs {
  max-width: calc(var(--thumbCap) * 2 + var(--thumbGap));
}

@media (max-width: 1650px) {
  .pv[data-stage="1"] .pv-thumbs {
    max-width: none;
  }
}

/* Stage 4: ganze Ansicht scrollt (pv), daher keine inneren Scroll-Container */
.pv[data-stage="4"] .pv-thumbs {
  height: auto;
  overflow: visible;
}

/* =========================
   FIX: Stage 3 – Description darf NICHT geclippt werden
   und muss im rechten Scroll-Flow sauber oberhalb der Thumbs stehen
========================= */

.pv[data-stage="3"] .pv-desc {
  overflow: visible;     /* statt hidden */
  flex: 0 0 auto;        /* nimmt nur so viel Höhe wie nötig */
  min-height: 0;
}

.pv[data-stage="3"] .pv-desc-inner {
  height: auto !important;      /* überschreibt height:100% */
  overflow: visible !important; /* Text nicht abschneiden */
}

.pv[data-stage="3"] .pv-thumbs {
  height: auto !important;      /* überschreibt height:100% */
  overflow: visible !important; /* keine eigene Scroll in Stage 3 */
  flex: 0 0 auto;
  min-height: 0;
}