/* Alder video card, playing in place (partials/_video-card.tpl.php,
   js/alder.js [data-al-vplay]). Loads after alder-cards.css, which owns the
   card's look; this file adds the poster button, the player that replaces
   it on click, and the name as the card's one link. */

/* The poster is one button covering the whole picture. */
.al-vcard__go {
  position: absolute; top: 0; left: 0; z-index: 1; display: block; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; border-radius: inherit; background: none;
  color: var(--al-pill); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* Ring drawn inside: the picture clips anything outside its corners. */
.al-vcard__go:focus { outline: 3px solid var(--al-ink); outline-offset: -6px; box-shadow: inset 0 0 0 3px #fff; }
.al-vcard__go:focus:not(:focus-visible) { outline: none; box-shadow: none; }
@media (hover: hover) { .al-vcard__go:hover .al-vcard__play { scale: 1.06; } }

/* Playing: the player fills the picture; black behind letterboxing. */
.al-vcard.is-playing .al-vcard__pic { background: #000; }
.al-vcard__pic iframe, .al-vcard__pic video {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; background: #000;
}
.al-vcard.is-playing:active .al-vcard__pic { scale: none; }

/* The name is the link; it underlines on its own hover, not the card's. */
.al-vcard .al-vcard__name { text-decoration: none; }
@media (hover: hover) {
  .al-vcard.al-vcard--play:hover .al-vcard__name { text-decoration-line: none; }
  .al-vcard.al-vcard--play .al-vcard__name:hover {
    text-decoration-line: underline; text-decoration-color: currentColor;
    text-decoration-thickness: 1.5px; text-underline-offset: .12em;
  }
}
.al-vcard .al-vcard__name:focus-visible { outline: 2px solid var(--al-ink); outline-offset: 2px; border-radius: 2px; }