/* ============================================
   Project video — hover controls (play + audio)
   ============================================ */

.project__video-host,
.project__yt-embed,
.project-scrolly__figure:has(> video[data-scroll-play]),
.mykorrizha__figure:has(> video[data-scroll-play]),
.aidea__figure:has(> video[data-scroll-play]),
.handshake__figure:has(> video[data-scroll-play]) {
  position: relative;
}

.project__video-host .project__yt-player,
.project__yt-embed .project__yt-player {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.project__video-controls {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 5;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.22s var(--ease-standard),
    visibility 0.22s var(--ease-standard);
}

.project__video-host.is-video-hover .project__video-controls,
.project__video-host:focus-within .project__video-controls {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.project__video-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(var(--space-2) * 2 + var(--text-sm) * var(--leading-normal));
  height: calc(var(--space-2) * 2 + var(--text-sm) * var(--leading-normal));
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background-color: var(--color-bg-primary);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition:
    background-color 0.2s var(--ease-standard),
    color 0.2s var(--ease-standard),
    border-color 0.2s var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .project__video-btn:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-border-hover);
    color: var(--color-text-primary);
  }
}

.project__video-btn svg {
  display: block;
  width: calc(var(--text-sm) * var(--leading-normal));
  height: calc(var(--text-sm) * var(--leading-normal));
}

/* Block native YouTube click overlay — custom controls only */
.project__video-host iframe,
.project__yt-embed iframe {
  pointer-events: none !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

@media (hover: none) {
  .project__video-controls {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* 1× scale — full frame visible, no crop */
.page .project-scrolly__track video[data-scroll-play],
.page .project-scrolly__track .mykorrizha__media-video,
.page .project-scrolly__track .aidea__media-video,
.page .project-scrolly__track .handshake__media-video,
video.project__media {
  object-fit: contain !important;
  object-position: center;
  background-color: var(--color-surface-primary);
}

/* Mykorrizha — fill the frame, content centered (no letterbox gaps) */
.page.mykorrizha .project-scrolly__track .mykorrizha__media-video,
.page.mykorrizha .project-scrolly__track video[data-scroll-play] {
  object-fit: cover !important;
  object-position: center center;
}

.page .project-scrolly__track .handshake__media-video--landscape {
  object-fit: contain !important;
}