// =============================================================================
// FULL-WIDTH-VIDEO — Task #20 (v2)
// Full-bleed video poster with centered play button. Zero padding.
// Mobile-first: base = 375px (268px tall), desktop via respond-to('desktop')
// Measurements: design/measurements-v2.json → "full-width-video"
//   Web:    1440×900px, play-circle 80px centered
//   Mobile: 375×268px,  play-circle 40px centered
// =============================================================================

@import '../mixins';

.full-width-video {
  position: relative;
  line-height: 0; // remove inline image gap

  &__wrapper {
    position: relative;
    width: 100%;
    height: 268px; // mobile height

    @include respond-to('desktop') {
      height: 900px;
    }
  }

  &__thumbnail {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  // Real <video>/<iframe> (rendered via f:media — local files get <video>, YouTube/
  // Vimeo "online media" get the provider's <iframe>). Hidden until playback starts;
  // shown in place of the thumbnail once JS toggles .is-playing on the parent.
  &__media {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0; // iframe reset
  }

  &.is-playing {
    .full-width-video__thumbnail,
    .full-width-video__play {
      display: none;
    }

    .full-width-video__media {
      display: block;
    }
  }

  &__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;  // mobile: 40px
    height: 40px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;

    img {
      width: 40px;
      height: 40px;
      display: block;
    }

    &:hover {
      transform: translate(-50%, -50%) scale(1.1);
    }

    &:focus-visible {
      outline: 2px solid var(--color-white);
      outline-offset: 4px;
      border-radius: 50%;
    }

    @include respond-to('desktop') {
      width: 80px;
      height: 80px;

      img {
        width: 80px;
        height: 80px;
      }
    }
  }
}