/* Video — C17.
 *
 * A 16:9 frame holding a poster and one control. The control is a link until
 * JavaScript upgrades it, so it is styled as a control from the start — there
 * is no state in which it looks unfinished.
 */

.pl-video__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-4);
}

.pl-video__title {
  font-size: var(--step-2);
  letter-spacing: var(--track-tight);
  max-width: 24ch;
  margin: 0;
}

.pl-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: var(--rule) solid var(--c-rule);
  background: var(--c-surface-inv);
  display: flex;
}

.pl-video__frame > img,
.pl-video__frame > .pl-placeholder,
.pl-video__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* Bottom left, over the poster: the one place a control can sit on any frame
 * without covering the subject. Paper on navy, so it is legible over whatever
 * the photograph turns out to be. */
.pl-video__play {
  position: relative;
  align-self: flex-end;
  margin: var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--pl-paper);
  color: var(--pl-navy);
  text-decoration: none;
  font-weight: 600;
  /* 44px minimum target, whatever the type does. */
  min-height: 2.75rem;
  box-sizing: border-box;
  transition: background-color var(--transition);
}

.pl-video__play:hover,
.pl-video__play:focus-visible {
  background: var(--c-water);
  color: var(--pl-navy);
}

/* A triangle drawn in borders — no icon file for a shape this simple, and it
 * takes the text colour with it. */
.pl-video__marker {
  width: 0;
  height: 0;
  border-left: 0.75rem solid currentColor;
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
}

.pl-video__caption {
  margin: var(--sp-2) 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 56ch;
  text-wrap: pretty;
}