/* Seção de vídeo da página Quem Somos (Figma: Desk / Quem Somos,
   node 7449:2226 "Video 16:9 Placeholder"). O Figma só define um placeholder
   cinza + ícone de play — a imagem real vem da thumb do YouTube (ver
   nm_youtube_thumb_url() em page-somos-nm.php). */

.nm-somos-video {
  /* 96px = --nm-space-9: mesmo respiro do node em relação ao Banner (acima)
     e ao Big Numbers (abaixo) no Figma. */
  padding: var(--nm-space-9) 0;
}

.nm-somos-video__player {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--nm-radius-md);
  overflow: hidden;
  background-color: var(--nm-color-placeholder);
  background-size: cover;
  background-position: center;
}

.nm-somos-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  width: 96px;
  height: 96px;
}

.nm-somos-video__play img {
  display: block;
  width: 100%;
  height: 100%;
}

.nm-somos-video__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Plyr gera .plyr / .plyr__video-wrapper em volta do embed — precisam
   ocupar 100% do .nm-somos-video__player (que já define o aspect-ratio),
   em vez do aspect-ratio padrão 16:9 do Plyr. */
.nm-somos-video__player .plyr,
.nm-somos-video__player .plyr__video-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .nm-somos-video {
    padding: var(--nm-space-9) 0;
  }

  /* .containerSite (global) não tem gutter lateral em mobile — cada seção nm-
     cuida do próprio respiro de 16px, igual ao .nm-hero .texto-banner. */
  .nm-somos-video .containerSite {
    padding: 0 var(--nm-space-4);
  }

  /* Figma mobile: node "Video 2:3 Placeholder" (7449:2355) — thumb em recorte
     retrato (2:3), não 16:9. O vídeo do popup continua o mesmo (16:9); só a
     caixa da thumb muda de proporção. */
  .nm-somos-video__player {
    aspect-ratio: 2 / 3;
  }

  .nm-somos-video__play {
    width: 72px;
    height: 72px;
  }

  /* Vídeo fonte é 16:9 (paisagem), mas o card mobile é 2:3 (retrato) —
     sem isso, o YouTube "letterboxa" (barras vazias em cima/embaixo).
     Superdimensiona o wrapper na horizontal e centraliza (técnica de
     "cover" para embeds de iframe) pra cortar as laterais e preencher
     a altura toda do card, sem sobras fixas. Matemática: container 2:3
     -> altura = largura * 3/2; iframe 16:9 pra cobrir essa altura precisa
     de largura = altura * 16/9 = largura do container * 8/3 (~266.67%). */
  .nm-somos-video__player .plyr__video-wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    width: 266.67%;
    height: 100%;
    transform: translateX(-50%);
  }
}