/* ============================================================
   video-showcase.css — Bewegtbild-Thumbnail + Cineast-Popover (SSOT)
   ------------------------------------------------------------
   EIN wiederverwendbares Video-Showcase für die ganze Website: ein
   autoplay-stummes Loop-Thumbnail (.bm-vshow) mit cursor-folgendem
   „Play"-Label; Klick zieht den Player als Vollbild-Popover (.bm-vpop)
   per clip-path aus der Mitte auf (Backdrop blurrt, native Controls).

   Look adaptiert von Skiper UI „Skiper67" (https://skiper-ui.com/v1/skiper67,
   MIT) — vanilla JS/CSS-Nachbau, KEINE React/framer-motion/media-chrome-
   Abhängigkeit, keine Skiper-Assets, keine 1:1-Codekopie.

   Vertrag:
     Trigger  <button class="bm-vshow" data-vshow data-renditions='…'
                      data-vshow-title="…">  (Macro video_showcase)
     Overlay  <div class="bm-vpop" data-vpop> … </div>  (EINMAL pro Seite,
              partials/video-popover.html.jinja) · Engine assets/js/video-showcase.js
     Thumbnail-Video reitet auf der zentralen js-lazy-video-Runtime (main.js):
     Rung-Wahl · Mobile-Fallback · Off-Screen-Pause zentral, kein Extra-Code.

   Alle Farben/Radien/Timings = Tokens in variables.css (--vshow-* / --vpop-*).
   ============================================================ */

/* Scroll-Lock während der Popover offen ist (eigene Klasse — die Lightbox
   nutzt bm-lightbox-open; getrennt, weil beide CSS-Schichten je nach Seite
   unabhängig geladen werden). */
body.bm-vpop-open { overflow: hidden; }

/* ── Sektions-Layout: responsiv-adaptiv ──────────────────────────────────────
   Mobil/Tablet (<1024px): gestapelt & zentriert — Kopf, kompaktes Quadrat-Teaser,
   Fakten darunter (mobile-first, Tap-to-Fullscreen).
   Desktop (≥1024px): Split — Video prominent im ECHTEN Hochformat links, Fakten
   rechts (Kopf über den Fakten). So füllt der Baustein die Breite und verkauft
   Kompetenz, statt allein mittig zu schweben. */
.bm-vshow-split {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "head" "media" "facts";
  justify-items: center;
  gap: var(--space-6);
}
.bm-vshow-split__head  { grid-area: head; text-align: center; }
.bm-vshow-split__media { grid-area: media; }
.bm-vshow-split__facts { grid-area: facts; width: 100%; max-width: 34rem; }
.bm-vshow-split__facts:empty { display: none; }

/* Fakten IMMER als vertikale Liste (nicht das 2/3-Spalten-Raster von usp-grid) —
   liest sich als Fakten-Strip neben/unter dem Video. */
.bm-vshow-split .usp-grid { grid-template-columns: 1fr; }

@media (min-width: 1024px) {
  .bm-vshow-split {
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    grid-template-areas:
      "media head"
      "media facts";
    align-content: center;
    align-items: start;
    justify-items: start;
    gap: var(--space-5) clamp(2rem, 5vw, 4.5rem);
  }
  .bm-vshow-split__head  { text-align: left; align-self: end; }
  .bm-vshow-split__media { align-self: center; }
  .bm-vshow-split__facts { align-self: start; max-width: none; }

  /* Video prominent: echtes Hochformat statt Quadrat-Teaser, größer. */
  .bm-vshow-split__media .bm-vshow { width: clamp(300px, 30vw, 380px); }
  .bm-vshow-split__media .bm-vshow__frame { aspect-ratio: 9 / 16; }
  /* Kein Verbinder-Haarstrich im Split (kein Kopf direkt darüber). */
  .bm-vshow-split__media .bm-vshow::before { display: none; }
}

/* ── Thumbnail-Trigger (Karte) ───────────────────────────────────────────── */
.bm-vshow {
  position: relative;
  display: block;
  width: clamp(170px, 44vw, 220px);      /* kompaktes Quadrat-TEASER (Skiper67) —
                                            klein & neugierig-machend; der WOW-Effekt
                                            ist der Sprung klein → riesiger Player */
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--vshow-thumb-radius);
  box-shadow: var(--vshow-thumb-shadow);
  transition: transform var(--transition-base, 0.28s) var(--ease-standard),
              box-shadow var(--transition-base, 0.28s) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.bm-vshow:hover,
.bm-vshow:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--vshow-thumb-shadow-hover);
}
.bm-vshow:focus-visible { outline: 2px solid rgb(var(--c-red)); outline-offset: 3px; }

/* Signatur-Verbinder (Skiper67): feine, nach oben zeigende Gradient-Haarlinie über
   dem Teaser — führt vom Abschnitts-Kopf zum klickbaren Bild. currentColor erbt die
   Textfarbe des Abschnitts → funktioniert auf hellem UND dunklem Section-Variant. */
.bm-vshow::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--space-4));
  width: 1px;
  height: 2.4rem;
  background: linear-gradient(to bottom, transparent, currentColor);
  opacity: 0.28;
  transform: translateX(-50%);
  pointer-events: none;
}

.bm-vshow__frame {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;                    /* Quadrat-Teaser: crop-cover jedes Format
                                            (Hoch- wie Querformat) auf ein kompaktes
                                            Kachelbild; volle Auflösung im Popover */
  overflow: hidden;
  border-radius: var(--vshow-thumb-radius);
  background: rgb(var(--c-scrim));
  isolation: isolate;                     /* mix-blend-exclusion bleibt lokal */
}

/* Poster (Bild-SSOT) + Video decken deckungsgleich. */
.bm-vshow__poster,
.bm-vshow__poster-img,
.bm-vshow__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bm-vshow__video {
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 1;
}
.bm-vshow__video.is-playing { opacity: 1; }

/* Cursor-folgendes „Play"-Label (Desktop, feine Zeiger). Position über CSS-Vars
   (--bm-vshow-x/y, in JS rAF-gedrosselt gesetzt) → GPU-Transform, kein Reflow.
   mix-blend-exclusion invertiert gegen den Untergrund → immer lesbar. */
.bm-vshow__cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--vshow-cursor-text);
  mix-blend-mode: exclusion;
  border-radius: var(--vshow-cursor-radius);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--bm-vshow-x, 50%), var(--bm-vshow-y, 50%), 0) translate(-50%, -50%);
  transition: opacity 0.18s ease;
  white-space: nowrap;
}
.bm-vshow__cursor .icon { width: 0.85em; height: 0.85em; fill: currentColor; }
.bm-vshow.is-hovering .bm-vshow__cursor { opacity: 1; }

/* Touch-/Coarse-Fallback: statisches Play-Badge mittig (kein Cursor). */
.bm-vshow__badge {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  display: none;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: var(--radius-full);
  background: var(--vshow-badge-bg);
  color: var(--vshow-badge-text);
  box-shadow: var(--shadow-lg);
}
.bm-vshow__badge .icon { width: 1.3rem; height: 1.3rem; fill: currentColor; margin-left: 2px; }

/* Auf Zeigern OHNE feine Hover-Fähigkeit (Touch): Cursor-Label aus, Badge an. */
@media (hover: none), (pointer: coarse) {
  .bm-vshow__cursor { display: none; }
  .bm-vshow__badge  { display: grid; }
}

/* ── Popover-Overlay (EINMAL pro Seite) ──────────────────────────────────── */
.bm-vpop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
}
.bm-vpop.is-open { display: grid; place-items: center; }

.bm-vpop__backdrop {
  position: absolute;
  inset: 0;
  background: var(--vpop-backdrop);
  backdrop-filter: blur(var(--vpop-backdrop-blur)) saturate(0.9);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.bm-vpop.is-open .bm-vpop__backdrop { opacity: 1; }

/* Bühne: Player im ECHTEN Video-Format (--vpop-aspect = w/h, per JS aus videos.yaml
   gesetzt; Default 0.5625 = Hochformat 9:16). Höhen- ODER breitenbegrenzt, je nach
   Orientierung. Zieht per clip-path aus einem kleinen zentralen Riegel auf (Skiper-
   Feel): startet als winziges Rechteck, federt weich auf Vollformat. */
.bm-vpop__stage {
  position: relative;
  z-index: 2;
  aspect-ratio: var(--vpop-aspect, 0.5625);
  height: min(92vh, calc(96vw / var(--vpop-aspect, 0.5625)));
  max-width: 96vw;
  border-radius: var(--vpop-stage-radius);
  overflow: hidden;
  background: rgb(var(--c-scrim));
  box-shadow: var(--vpop-stage-shadow);
  clip-path: inset(43% 45% 41% 45%);
  opacity: 0;
  transition: clip-path var(--vpop-open-duration) var(--vpop-open-ease),
              opacity 0.24s ease;
}
.bm-vpop.is-open .bm-vpop__stage {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

.bm-vpop__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: rgb(var(--c-scrim));
}

/* Schließen-Button (X per CSS gezeichnet — kein Icon nötig, wie die Lightbox). */
.bm-vpop__close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 4;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: rgb(var(--c-scrim) / 0.55);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.bm-vpop__close:hover { background: rgb(var(--c-scrim) / 0.8); transform: scale(1.06); }
.bm-vpop__close:focus-visible { outline: 2px solid rgb(var(--c-white)); outline-offset: 2px; }
.bm-vpop__close::before,
.bm-vpop__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 2px;
  background: var(--color-text-inverse);
  border-radius: 2px;
}
.bm-vpop__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.bm-vpop__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ── Reduced-Motion: kein Aufzieher, kein Cross-Fade — sofort sichtbar ────── */
@media (prefers-reduced-motion: reduce) {
  .bm-vshow,
  .bm-vshow__video,
  .bm-vshow__cursor,
  .bm-vpop__backdrop,
  .bm-vpop__stage { transition: none; }
  .bm-vpop__stage { clip-path: inset(0 0 0 0); }
}