/*
 * Markup contract for the lazy profile video block:
 *
 * <section class="renew-video-player" data-renew-video>
 *   <h2>姓名｜活動影片</h2>
 *   <div class="renew-video-player__stage">
 *     <video id="renew-video-name"
 *       class="renew-video-player__media"
 *       controls playsinline preload="none"
 *       aria-describedby="renew-video-name-status"></video>
 *     <button class="renew-video-player__play" data-video-play
 *       type="button" aria-controls="renew-video-name"
 *       aria-label="播放姓名活動影片">▶</button>
 *   </div>
 *   <p class="renew-video-player__status" data-video-status
 *     id="renew-video-name-status" role="status" aria-live="polite">
 *     影片尚未載入，按下播放按鈕開始。
 *   </p>
 *   <p class="renew-video-player__fallback">
 *     <a href="{{asset:assets/name-introduction.mp4}}" data-video-direct>
 *       無法使用播放器時，直接開啟影片
 *     </a>
 *   </p>
 * </section>
 *
 * Keep the section after .profile-layout and before .profile-next. The
 * The runtime resolves the href/src/poster tokens. video-player.js reads the
 * resolved direct-link href only after the play button is activated.
 */

body.v19-site main.v18-main-content .renew-video-player {
  margin: 3rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--v18-line, #bf9979);
}

body.v19-site main.v18-main-content .renew-video-player h2 {
  max-width: 42rem;
  margin: 0 0 1rem;
  color: var(--v18-ink, #333333);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

body.v19-site main.v18-main-content .renew-video-player__stage {
  position: relative;
  width: min(100%, 58rem);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--v18-line, #bf9979);
  background: #f5f3f1;
}

body.v19-site main.v18-main-content .renew-video-player__media {
  display: block;
  width: 100%;
  height: 100%;
  background: #f5f3f1;
  object-fit: contain;
  object-position: center;
}

body.v19-site main.v18-main-content .renew-video-player__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 4.75rem;
  height: 4.75rem;
  transform: translate(-50%, -50%);
  place-items: center;
  padding: 0 0 0 0.22rem;
  border: 2px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  background: var(--v18-wine, #610706);
  box-shadow: 0 0.25rem 1rem rgba(51, 51, 51, 0.22);
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  transition: background-color 160ms ease, transform 160ms ease;
}

body.v19-site main.v18-main-content .renew-video-player__play:hover {
  background: var(--v18-red, #a00000);
  transform: translate(-50%, -50%) scale(1.04);
}

body.v19-site main.v18-main-content .renew-video-player__play:active {
  transform: translate(-50%, -50%) scale(0.97);
}

body.v19-site main.v18-main-content .renew-video-player__play:disabled {
  cursor: wait;
  opacity: 0.7;
}

body.v19-site main.v18-main-content .renew-video-player__play:focus-visible {
  outline: 3px solid #610706;
  outline-offset: 5px;
}

body.v19-site main.v18-main-content .renew-video-player__play[hidden] {
  display: none;
}

body.v19-site main.v18-main-content .renew-video-player__status,
body.v19-site main.v18-main-content .renew-video-player__fallback {
  max-width: 58rem;
  margin: 0.65rem 0 0;
  color: var(--v18-muted, #666666);
  font-size: 0.82rem;
  line-height: 1.55;
}

body.v19-site main.v18-main-content .renew-video-player__fallback a {
  color: var(--v18-wine, #610706);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

body.v19-site main.v18-main-content .renew-video-player__fallback a:hover {
  color: var(--v18-red, #a00000);
}

body.v19-site main.v18-main-content .renew-video-player__status[data-video-state="error"] {
  color: var(--v18-red, #a00000);
}

@media screen and (max-width: 900px) {
  body.v19-site main.v18-main-content .renew-video-player {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
  }

}

@media screen and (max-width: 575px) {
  body.v19-site main.v18-main-content .renew-video-player h2 {
    font-size: 1.25rem;
  }


  body.v19-site main.v18-main-content .renew-video-player__play {
    width: 4rem;
    height: 4rem;
  }
}

body.v19-site main.v18-main-content .renew-video-player--compact {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

body.v19-site main.v18-main-content .renew-video-player--compact h2 {
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
}

body.v19-site main.v18-main-content .renew-video-player--compact .renew-video-player__stage {
  width: 100%;
  aspect-ratio: 16 / 9;
}

body.v19-site main.v18-main-content .renew-video-player--compact .renew-video-player__status,
body.v19-site main.v18-main-content .renew-video-player--compact .renew-video-player__fallback {
  font-size: 0.74rem;
}

body.v19-site main.v18-main-content .renew-video-player--portrait .renew-video-player__stage {
  width: min(100%, 22rem);
  aspect-ratio: 9 / 16;
}

@media (prefers-reduced-motion: reduce) {
  body.v19-site main.v18-main-content .renew-video-player__play {
    transition: none;
  }
}