/* ===== Local fixes for video embeds (consolidated) ===== */

/* 1) Inline iframe (if any pages still use it) */
.yt { max-width: 960px; margin: 1rem auto; }
.yt iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 8px; display: block; }

/* 2) Click-to-play THUMBNAIL CARD pattern */
.video-card { position: relative; max-width: 960px; margin: 1rem auto; }
.video-card--compact { max-width: 360px; } /* optional smaller card */
.video-card .thumb { position: relative; display: block; aspect-ratio: 16/9; background:#000; border-radius: 8px; }
.video-card img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* YouTube-style overlay for thumbnail cards (kept for pages using thumbnails) */
.video-card .play-icon { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.video-card .play-icon::before {
  content: ''; width: 68px; height: 48px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'><path d='M66.52 7.74a8 8 0 0 0-5.64-5.66C55.83 0.5 34 0.5 34 0.5s-21.83 0-26.88 1.58A8 8 0 0 0 1.48 7.74 83.3 83.3 0 0 0 0 24a83.3 83.3 0 0 0 1.48 16.26 8 8 0 0 0 5.64 5.66C12.17 47.5 34 47.5 34 47.5s21.83 0 26.88-1.58a8 8 0 0 0 5.64-5.66A83.3 83.3 0 0 0 68 24a83.3 83.3 0 0 0-1.48-16.26z' fill='%23f00'/><path d='M45 24 27 14v20z' fill='%23fff'/></svg>") center/contain no-repeat;
  opacity: .9; transition: opacity .2s;
}
.video-card:hover .play-icon::before { opacity: 1; }
.video-card iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 8px; display: block; }

/* 3) ROW LIST pattern (small generic icon + title to the right) */
.video-row { max-width: 520px; margin: 6px 0; }
.video-row .row-link { display: flex !important; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.video-row .row-link:hover .label { text-decoration: underline; }

/* Neutralize any global pseudo-element overlays within row pattern only */
.video-row .play-icon::before,
.video-row .play-icon::after { content: none !important; }

/* Small generic play icon as a self-contained background box */
.video-row .play-icon.generic.small {
  width: 22px; height: 22px; flex: 0 0 22px; display: inline-block; border-radius: 50%;
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
 <circle cx='32' cy='32' r='32' fill='rgba(0,0,0,0.65)'/>\
 <polygon points='26,20 26,44 46,32' fill='%23ffffff'/>\
</svg>") center/contain no-repeat;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.video-row .row-link .label { display: inline-block; line-height: 1.2; }

/* 4) Player block inserted under rows */
.video-player { margin: 10px 0 18px; max-width: 960px; }
.video-player iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 8px; display: block; }
.video-player .caption { font-size: 0.95rem; color: #333; margin-top: 6px; }


/* --- Row icon fix --- */
.video-row .row-link {
  display: flex !important;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

/* Kill any legacy overlay pseudo-elements in row context */
.video-row .play-icon::before,
.video-row .play-icon::after { content: none !important; }

/* Prevent absolute positioning from older styles */
.video-row .play-icon { position: static !important; }

/* The small generic play icon box */
.video-row .play-icon.generic.small {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  display: inline-block !important;
  border-radius: 50%;
  background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
 <circle cx='32' cy='32' r='32' fill='rgba(0,0,0,0.65)'/>\
 <polygon points='26,20 26,44 46,32' fill='%23ffffff'/>\
</svg>") center/contain no-repeat !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* Keep the label on the right */
.video-row .row-link .label { display: inline-block; line-height: 1.2; }