/* ==========================================================================
   Click-to-play YouTube (reusable). Shows the thumbnail until clicked, then
   swaps in the player (js/youtube.js). Markup:
   <a class="yt" href="https://www.youtube.com/watch?v=ID" data-yt="ID" aria-label="Play video: Title">
     <img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt=""><span class="yt-play"></span><span class="yt-label">Label</span></a>
   WordPress: a "Video" block that takes a YouTube link.
   ========================================================================== */

.yt{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#1d0c09;color:#fff;text-decoration:none;box-shadow:0 12px 26px rgba(42,32,22,.18);}
.yt img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,opacity .3s ease;opacity:.92;}
.yt:hover img{transform:scale(1.04);opacity:1;}
.yt-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(101,28,20,.92);box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .2s ease,background .2s ease;}
.yt-play::after{content:"";position:absolute;left:26px;top:20px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent #fff;}
.yt:hover .yt-play{transform:scale(1.08);background:var(--ink-2);}
.yt-label{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px;font-size:13px;font-weight:500;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);}
.yt-frame{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;}
.yt-frame iframe{width:100%;height:100%;border:0;display:block;}