/* ==========================================================================
   Run Playgrounds — article-embeds.css
   External media inside articles. post-optimizer turns YouTube iframes into a
   "watch card" (.external-video-card); plain responsive iframes are covered too.
   ========================================================================== */

.external-video-card { margin: 32px 0; border: 1.5px solid var(--char); border-radius: var(--radius); overflow: hidden; background: var(--green); }
.external-video-card-link { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(220px, 1fr); color: #FFFFFF; text-decoration: none; }
.article-content a.external-video-card-link { color: #FFFFFF; text-decoration: none; font-weight: 400; }
.external-video-card-media { position: relative; display: block; min-height: 220px; background: var(--char); }
.external-video-card-image { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; aspect-ratio: auto; }
.external-video-card-play {
  position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--yellow); transition: transform .15s ease;
}
.external-video-card-play::before {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-35%, -50%);
  border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent var(--char);
}
.external-video-card-link:hover .external-video-card-play { transform: translate(-50%, -50%) scale(1.06); }
.external-video-card-body { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 24px; }
.external-video-card-eyebrow { font-family: var(--f-mono); font-size: var(--t-13); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); }
.external-video-card-title { font-size: var(--t-23); font-weight: 700; line-height: 1.25; color: #FFFFFF; }
.external-video-card-meta { font-family: var(--f-mono); font-size: var(--t-13); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-2); }

/* plain embeds */
.article-content .embed,
.article-content .video-embed { position: relative; margin: 32px 0; aspect-ratio: 16 / 9; background: var(--char); }
.article-content .embed iframe,
.article-content .video-embed iframe,
.article-content iframe { display: block; width: 100%; max-width: 100%; border: 0; }
.article-content .embed iframe,
.article-content .video-embed iframe { position: absolute; inset: 0; height: 100%; }

@media (max-width: 767.98px) {
  .external-video-card-link { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .external-video-card-play { transition: none; }
}