/* ===================================================================
   StrikePoint — YouTube embeds (youtubeEmbed in src/render-offerings.mjs).
   Shared by the service pages and the Photos & Videos gallery. Colors and
   fonts come from pages.css.
   =================================================================== */
.yt-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.yt-frame[hidden], .yt-fallback[hidden] { display: none; }

/* Click-to-load thumbnail. */
.yt-play { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; cursor: pointer; }
.yt-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yt-play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,13,0) 45%, rgba(5,7,13,0.55)); transition: background 0.2s; }
.yt-play-btn {
  position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 14px 28px;
  background: var(--red); color: #fff; white-space: nowrap;
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.16em; text-transform: uppercase;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  box-shadow: 0 8px 32px rgba(255,42,60,0.4);
  transition: background 0.2s;
}
.yt-play:hover .yt-play-btn { background: var(--red-glow); }
.yt-play:hover::after { background: linear-gradient(180deg, rgba(5,7,13,0.1) 0%, rgba(5,7,13,0.6)); }
.yt-play:focus-visible { outline: 3px solid var(--blue-glow); outline-offset: -3px; }
.yt-play-via {
  position: absolute; right: 12px; bottom: 10px; z-index: 1;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}

/* Shown in place of the player when the owner disables embedding. */
.yt-embed .yt-fallback {
  margin: 0; padding: 28px 16px; text-align: center;
  background: var(--bg-2, #111a2e); color: var(--ink-dim); font-size: 15px; line-height: 1.6;
}
.yt-embed .yt-fallback a { color: var(--blue-glow); font-weight: 700; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (max-width: 480px) {
  .yt-play-btn { padding: 12px 20px; font-size: 14px; letter-spacing: 0.12em; }
  .yt-play-via { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .yt-play-btn, .yt-play::after { transition: none; }
}