/* Camplix · media.css — YouTube-Klick-Fassade (Blog + Spot-Galerie) und
   Video-Kacheln der Spot-Galerie. Wird nur auf Blog-Beitraegen (blog-post.js)
   und Gastgeber-Spot-Seiten (spot-detail.js) eingebunden; versioniert wie die
   anderen Stylesheets in build.mjs. */

/* ── YouTube-Klick-Fassade (Blog + Spot-Galerie): vor dem Klick kein Kontakt
   zu YouTube, erst der Klick laedt youtube-nocookie. ──────────────────── */
.cx-video {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 1.6em 0;
  border: 0;
  border-radius: 16px;
  background: #2C2C2C;
  color: #fff;
  cursor: pointer;
  font: inherit;
  padding: 1em;
  transition: background 200ms;
}
.cx-video:hover { background: #1E3A3A; }
.cx-video-play {
  width: 64px; height: 64px;
  border-radius: 9999px;
  background: #2BA8A8;
  position: relative;
  box-shadow: 0 8px 24px -6px rgba(43, 168, 168, 0.6);
}
.cx-video-play::after {
  content: "";
  position: absolute;
  left: 55%; top: 50%;
  transform: translate(-50%, -50%);
  border: 12px solid transparent;
  border-left: 20px solid #fff;
  border-right: 0;
}
.cx-video-titel { font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: 1.05em; }
.cx-video-hinweis { font-size: 0.75em; color: rgba(255, 255, 255, 0.65); max-width: 40ch; text-align: center; line-height: 1.4; }
.cx-video-rahmen { aspect-ratio: 16 / 9; margin: 1.6em 0; border-radius: 16px; overflow: hidden; }
.cx-video-rahmen iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Video-Kachel in der Spot-Galerie: Titelfoto abgedunkelt + Play-Zeichen,
   kein Vorschaubild von YouTube (waere schon eine Anfrage vor dem Klick). */
.cx-vtile { position: relative; display: block; padding: 0; border: 0; background: #2C2C2C; cursor: pointer; }
.cx-vtile > img { opacity: 0.55; filter: saturate(0.8); transition: opacity 300ms; }
.cx-vtile:hover > img { opacity: 0.7; }
.cx-vtile-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 9999px; background: #2BA8A8;
  box-shadow: 0 8px 24px -6px rgba(43, 168, 168, 0.6);
}
/* Play-Dreieck rein per CSS (wie .cx-video-play) — kein Icon-Nachladen noetig. */
.cx-vtile-play::after, .cx-vthumb::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  border-style: solid; border-color: transparent transparent transparent #fff;
}
.cx-vtile-play::after { border-width: 11px 0 11px 19px; transform: translate(-40%, -50%); }
.cx-vthumb { position: relative; }
.cx-vthumb::after { border-width: 7px 0 7px 12px; transform: translate(-40%, -50%); }
.cx-vtile-label {
  position: absolute; left: 10px; bottom: 10px;
  font-family: 'Outfit', system-ui, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
  background: rgba(44, 44, 44, 0.7); border-radius: 9999px; padding: 3px 9px;
}