/* youtube-embed.css — shared styles for the click-to-load YouTube facade.
   Included by any page that uses <script src="/js/youtube-embed.js">.
   Relies on the page already defining --surface, --line, --text, --body, --purple-light
   (all Mailvantis pages have these). */

/* ── Outer wrapper ─────────────────────────────────────────────────────── */
.yt-embed {
  margin: 24px auto;
  width: 100%;
}

/* Regular 16:9 video — max 800px */
.yt-embed--wide {
  max-width: 800px;
}

/* YouTube Short 9:16 — max 360px */
.yt-embed--vertical {
  max-width: 360px;
}

/* ── Aspect-ratio container (reserves space, no layout shift) ──────────── */
.yt-ratio {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface, #1a1a18);
  border: 1px solid var(--line, #2a2a28);
}

.yt-embed--wide  .yt-ratio { aspect-ratio: 16 / 9; }
.yt-embed--vertical .yt-ratio { aspect-ratio: 9 / 16; }

/* ── Facade button ────────────────────────────────────────────────────── */
.yt-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.yt-facade:focus-visible {
  outline: 3px solid var(--purple-light, #a78bfa);
  outline-offset: 2px;
}

/* Thumbnail fills the whole button */
.yt-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Semi-transparent scrim so play icon and title are legible over any thumbnail */
.yt-facade::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  transition: background 0.15s;
}

.yt-facade:hover::after {
  background: rgba(0,0,0,0.20);
}

/* Play icon and title sit above the scrim */
.yt-play-btn,
.yt-title {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.yt-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  transition: transform 0.15s;
}

.yt-facade:hover .yt-play-btn {
  transform: scale(1.08);
}

.yt-title {
  font-family: var(--font-ui, "Inter", sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  text-align: center;
  padding: 0 16px;
  max-width: 90%;
}

/* ── Live iframe (replaces facade after click) ─────────────────────────── */
.yt-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ── Watch on YouTube fallback link ────────────────────────────────────── */
.yt-watch-link {
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--body, #9a9990);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-align: center;
}

.yt-watch-link:hover {
  color: var(--purple-light, #a78bfa);
}

/* ── Mobile — no horizontal scroll at 375px ────────────────────────────── */
@media (max-width: 480px) {
  .yt-embed--wide,
  .yt-embed--vertical {
    max-width: 100%;
  }
}