/* photo-curtain runtime styles — Fabric-Curtain-Slide-Hero. Scoping unter
   .ms-photo-curtain (Vertrag 02 §4); die Content-Window-Optik liefert
   _shared/hero-chrome.css (Host lädt sie), hier nur die Bühnenschichten
   und die Slide-Navigation. */

.ms-photo-curtain {
  /* Dock-Höhe für die Slide-Navigation — hero-chrome.css .hud rechnet
     seinen unteren Padding damit (--dock), damit Content-Fenster und
     Nav-Pfeile sich nicht überlappen. */
  --dock: 4.5rem;
  position: relative;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
  cursor: auto;
  user-select: none;
  -webkit-user-select: none;
}

.ms-photo-curtain .mspc-next,
.ms-photo-curtain .mspc-rest,
.ms-photo-curtain .mspc-gl,
.ms-photo-curtain .mspc-planes,
.ms-photo-curtain .mspc-plane {
  position: absolute;
  inset: 0;
}

.ms-photo-curtain .mspc-next { z-index: 0; }
.ms-photo-curtain .mspc-rest { z-index: 1; }
.ms-photo-curtain .mspc-gl {
  z-index: 2;
  background: transparent;
  opacity: 0;
  pointer-events: none;
}
.ms-photo-curtain .mspc-gl.is-live { opacity: 1; }
.ms-photo-curtain.is-playing .mspc-rest { visibility: hidden; }
.ms-photo-curtain .mspc-planes { z-index: 0; pointer-events: none; }

.ms-photo-curtain .mspc-gl canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}

.ms-photo-curtain .mspc-rest img,
.ms-photo-curtain .mspc-next img,
.ms-photo-curtain .mspc-plane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.ms-photo-curtain .mspc-rest img,
.ms-photo-curtain .mspc-next img { opacity: 1; }
.ms-photo-curtain .mspc-plane img { opacity: 0; }

/* Kein WebGL (Fehler/Kontext-Limit): statischer Crossfade-Fallback — die
   Bühne zeigt das aktuelle Foto, die Navigation funktioniert weiter. */
.ms-photo-curtain.mspc-no-gl .mspc-gl { display: none !important; }
.ms-photo-curtain.mspc-no-gl .mspc-rest { z-index: 1; visibility: visible !important; }
.ms-photo-curtain.mspc-no-gl .mspc-next { display: none; }

.ms-photo-curtain .mspc-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}

.ms-photo-curtain .mspc-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.4rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  pointer-events: none;
  padding: 0 1rem;
}

/* Nav-Buttons gegen Theme-/Builder-Button-Styles gehärtet (appearance,
   explizite Werte auf Basis UND Hover/Focus, erhöhte Spezifität über
   .mspc-nav) — sonst gewinnt z. B. das Theme `button:hover` mit eigenem
   Border/Hintergrund und die Buttons sehen anders aus als im Editor. */
.ms-photo-curtain .mspc-nav .mspc-nav__btn {
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  min-height: 44px;
  min-width: 44px;
  margin: 0;
  padding: 0 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  outline: none;
  background: rgba(12, 12, 16, 0.6);
  color: #fff;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: normal;
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.2s, border-color 0.2s;
}

.ms-photo-curtain .mspc-nav .mspc-nav__btn:hover,
.ms-photo-curtain .mspc-nav .mspc-nav__btn:focus-visible,
.ms-photo-curtain .mspc-nav .mspc-nav__btn:focus {
  background: rgba(30, 30, 40, 0.85);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  outline: none;
  box-shadow: none;
}

.ms-photo-curtain .mspc-nav__count {
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.75rem;
  min-width: 3.5rem;
  text-align: center;
}

@media (max-width: 640px) {
  .ms-photo-curtain .mspc-nav { bottom: 1rem; }
}