/* ==========================================================================
   Video Band — acf/tc94-video
   ==========================================================================
   The frame holds its shape before the iframe loads, so nothing on the page
   jumps when a lazy video arrives. aspect-ratio does that for free; a padding
   hack would too, but this reads.

   An upright video is capped at 24rem rather than filling the column: a 9:16
   frame at full container width would stand about 2000px tall on a desktop and
   push everything else off the screen.
   ========================================================================== */

.tc94-video {
  margin: var(--wp--preset--spacing--70) 0 0;
}

.tc94-video__frame {
  position: relative;
  width: 100%;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--wp--custom--radius--lg);
  /* Shows through while the iframe loads, and behind the player's own
     letterboxing once it has. */
  background-color: var(--wp--preset--color--surface-darker);
  box-shadow: var(--wp--custom--shadow--media);
}

.tc94-video--upright .tc94-video__frame {
  aspect-ratio: 9 / 16;
  max-width: 24rem;
}

.tc94-video__frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.tc94-video__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  margin-top: var(--wp--preset--spacing--40);
}

.tc94-video__caption {
  margin: 0;
  max-width: var(--wp--custom--measure--short);
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--custom--color--text-muted);
}

.tc94-section--dark .tc94-video__caption {
  color: var(--wp--custom--color--on-dark-muted);
}

/* An upright frame is narrow and centred, so its caption row lines up under it
   rather than stretching the full container width. */
.tc94-video--upright .tc94-video__foot {
  max-width: 24rem;
  margin-inline: auto;
}

@media (max-width: 29.9375rem) {
  /* The link is only as tall as its own line, which is a small target on a
     phone. The padding grows the touch area and the negative margin pulls the
     layout back, so nothing moves. */
  .tc94-video__foot .tc94-link-arrow {
    padding-block: 0.6875rem;
    margin-block: -0.6875rem;
  }
}