/* =====================================================================
   REDIAL — Health Tips YouTube facade (click-to-play)
   Lightweight thumbnail + play button; real iframe injected on click.
   Sits inside the parent .custom-youtube-wrapper (grid + height handled
   by parent style.css). Enqueued on the homepage only. v1.0 — 2026-05-30
   ===================================================================== */

.rd-yt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  display: block;
}
.rd-yt__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease, filter .35s ease;
}
.rd-yt:hover .rd-yt__thumb,
.rd-yt:focus-visible .rd-yt__thumb {
  transform: scale(1.05);
  filter: brightness(.85);
}
.rd-yt__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  pointer-events: none;
  transition: transform .2s ease;
}
.rd-yt__play svg { display: block; width: 100%; height: 100%; }
.rd-yt__play-bg { transition: fill .2s ease, opacity .2s ease; }
.rd-yt:hover .rd-yt__play { transform: translate(-50%, -50%) scale(1.06); }
.rd-yt:hover .rd-yt__play-bg,
.rd-yt:focus-visible .rd-yt__play-bg { fill: #E61E31; opacity: 1; }
.rd-yt:focus-visible { outline: 3px solid #E61E31; outline-offset: 2px; }

.rd-yt__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
}