/* Post thumbnail (iframe embed) and click-to-play video thumbnail. */
@layer components {
  .post-thumbnail {
    margin: 0;
  }

  .post-thumbnail img {
    width: 100%;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-md);
    background: var(--color-code-bg);
  }

  .post-thumbnail--iframe {
    position: relative;
    aspect-ratio: var(--post-thumbnail-aspect, 16 / 9);
    overflow: hidden;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-md);
    background: var(--color-code-bg);
  }

  .post-thumbnail--iframe picture,
  .post-thumbnail--iframe img {
    width: 100%;
    height: 100%;
  }

  .post-thumbnail--iframe picture {
    display: block;
  }

  .post-thumbnail--iframe img {
    object-fit: cover;
    object-position: center center;
    border: 0;
    border-radius: 0;
  }

  .post-thumbnail__play {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    padding: 0;
    display: grid;
    place-items: center;
    background: color-mix(in oklch, #000 22%, transparent);
    color: var(--color-fg);
    cursor: pointer;
  }

  .post-thumbnail__play:hover,
  .post-thumbnail__play:focus-visible {
    background: color-mix(in oklch, #000 30%, transparent);
  }

  .post-thumbnail__play-icon {
    width: clamp(3.25rem, 9vw, 4.75rem);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-rule-strong);
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, var(--color-bg) 88%, transparent);
    box-shadow: 0 0.75rem 2rem color-mix(in oklch, #000 28%, transparent);
    transition:
      background-color 150ms ease,
      transform 150ms ease;
  }

  .post-thumbnail__play:hover .post-thumbnail__play-icon,
  .post-thumbnail__play:focus-visible .post-thumbnail__play-icon {
    background: var(--color-bg);
    transform: scale(1.04);
  }

  .post-thumbnail__play svg {
    width: 42%;
    height: 42%;
    transform: translateX(8%);
    fill: currentColor;
  }

  .post-thumbnail__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--color-code-bg);
  }

  .post-thumbnail--iframe.is-active picture,
  .post-thumbnail--iframe.is-active .post-thumbnail__play {
    display: none;
  }

  .post-thumbnail__noscript {
    position: absolute;
    inset-inline: var(--space-3);
    inset-block-end: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    font-size: var(--fs-caption);
  }

  /* Click-to-play header video: a poster with a play button that swaps in an
     inline <video> on click. Shared by the article banner and project cards. */
  .video-thumbnail {
    position: relative;
    display: block;
    overflow: hidden;
  }

  .video-thumbnail picture,
  .video-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .video-thumbnail__video {
    /* The global `video { display: block }` reset (author origin) overrides the
       UA `[hidden]` rule, so hide the idle video explicitly to keep it from
       swallowing the play button's click. */
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
  }

  .video-thumbnail.is-playing .video-thumbnail__video {
    display: block;
  }

  .video-thumbnail__play {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    border: 0;
    padding: 0;
    display: grid;
    place-items: center;
    background: color-mix(in oklch, #000 22%, transparent);
    color: var(--color-fg);
    cursor: pointer;
  }

  .video-thumbnail__play:hover,
  .video-thumbnail__play:focus-visible {
    background: color-mix(in oklch, #000 30%, transparent);
  }

  .video-thumbnail__play-icon {
    width: clamp(3.25rem, 9vw, 4.75rem);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-rule-strong);
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, var(--color-bg) 88%, transparent);
    box-shadow: 0 0.75rem 2rem color-mix(in oklch, #000 28%, transparent);
    transition:
      background-color 150ms ease,
      transform 150ms ease;
  }

  .video-thumbnail__play:hover .video-thumbnail__play-icon,
  .video-thumbnail__play:focus-visible .video-thumbnail__play-icon {
    background: var(--color-bg);
    transform: scale(1.04);
  }

  .video-thumbnail__play svg {
    width: 42%;
    height: 42%;
    transform: translateX(8%);
    fill: currentColor;
  }

  .video-thumbnail.is-playing picture,
  .video-thumbnail.is-playing .video-thumbnail__play {
    display: none;
  }

  .video-thumbnail__noscript {
    position: absolute;
    inset-inline: var(--space-3);
    inset-block-end: var(--space-3);
    z-index: 3;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    font-size: var(--fs-caption);
  }

  /* Banner variant: keep the poster's own aspect ratio inside a rounded frame.
     Cover with a matching ratio is not a crop, so the no-crop preview QA passes. */
  .video-thumbnail--banner {
    aspect-ratio: var(--video-aspect, 16 / 9);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-md);
    background: var(--color-code-bg);
  }

  .video-thumbnail--banner img {
    object-fit: cover;
  }

  .video-thumbnail--banner.post-thumbnail img {
    border: 0;
    border-radius: 0;
  }

  /* Card variant: only the centered badge is the play button, so a click
     anywhere else on the thumbnail falls through to the card's Open link. */
  .video-thumbnail--card .video-thumbnail__play {
    inset: auto;
    top: 50%;
    left: 50%;
    width: auto;
    background: transparent;
    transform: translate(-50%, -50%);
  }

  .video-thumbnail--card .video-thumbnail__play:hover,
  .video-thumbnail--card .video-thumbnail__play:focus-visible {
    background: transparent;
  }

  .video-thumbnail--card .video-thumbnail__play-icon {
    width: clamp(2.25rem, 14vw, 3rem);
    box-shadow: 0 0.5rem 1.25rem color-mix(in oklch, #000 32%, transparent);
  }
}
