/* assets/css/componentes.css — Componentes compartilhados: cards de multimídia, lightboxes (vídeo/imagem/PDF), animação do botão Associe-se e movimento reduzido. */

/* -----------------------------------------------------
   CARDS da seção Multimídia (Vídeos / Boletins / O Eletricitário) —
   cada card (.stieen-multimidia-banner, 4:5) fica dentro de um
   .stieen-multimidia-item, com o ícone + título como um cabeçalho
   ACIMA do card (não mais sobreposto na imagem).
   ----------------------------------------------------- */
.stieen-multimidia-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stieen-multimidia-item-titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: calc(22px * var(--stieen-escala-fonte));
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cor-multimidia-titulos, var(--stieen-escuro));
}
.stieen-multimidia-item-titulo i { color: var(--cor-multimidia-icones, var(--stieen-vermelho)); font-size: calc(28px * var(--stieen-escala-fonte)); }
.stieen-multimidia-item-link {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  font-size: calc(14px * var(--stieen-escala-fonte));
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cor-multimidia-links, var(--stieen-vermelho));
}
.stieen-multimidia-item-link i { font-size: calc(12px * var(--stieen-escala-fonte)); transition: transform .2s ease; }
.stieen-multimidia-item-link:hover i { transform: translateX(4px); }

.stieen-multimidia-banner-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.stieen-multimidia-banner:hover .stieen-multimidia-banner-poster { transform: scale(1.04); }

/* Lightbox: o vídeo é dimensionado pela LARGURA (nunca pela altura) —
   um vídeo 4:5 cabe perfeitamente na moldura de referência; um vídeo
   mais alto que isso (9:16, o formato real que o STIEEN posta no
   Instagram) cresce em altura mantendo a mesma largura, sempre
   centralizado. overflow:auto no overlay é só uma rede de segurança
   pra nunca cortar o vídeo em tela muito baixa, sem entrar em conflito
   com a regra de basear tudo na largura. */
.stieen-video-lightbox,
.stieen-imagem-lightbox,
.stieen-pdf-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--stieen-veu-escuro);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  overflow: auto;
}
.stieen-video-lightbox.is-aberto,
.stieen-imagem-lightbox.is-aberto,
.stieen-pdf-lightbox.is-aberto { display: flex; }
.stieen-video-lightbox-fechar {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--stieen-escuro-elevado);
  color: var(--stieen-branco);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}
.stieen-video-lightbox-fechar:hover { background: var(--stieen-vermelho); }
.stieen-video-lightbox-wrap {
  width: min(420px, 92vw);
  margin: auto;
}
.stieen-video-lightbox-wrap video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  background: var(--stieen-escuro);
}

/* Boletim é imagem de texto (panfleto) — dimensionar pela LARGURA
   deixaria letra pequena numa tela alta. Aqui o critério é o oposto
   do vídeo: cresce pela ALTURA, sem limite de largura ("sem freios"),
   travando só quando bater na altura máxima do dispositivo (92vh).
   width/height:auto + max-width/max-height é o jeito certo de deixar
   o navegador preservar a proporção real da imagem sozinho — se os
   dois eixos ficassem fixos ao mesmo tempo (ex: height fixo + max-width
   cortando a largura depois), a imagem distorce, esticada. */
.stieen-imagem-lightbox-wrap {
  margin: auto;
  display: flex;
}
.stieen-imagem-lightbox-wrap img {
  display: block;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 8px;
}

/* Jornal (PDF): "deixa correr solto" de verdade — sem largura máxima
   nenhuma (a 1ª versão travava em 900px por engano, sobrava vazio
   nas laterais até em tela grande, print temp/29.jpg). O visualizador
   nativo de PDF do navegador ocupa a tela quase inteira (só um respiro
   mínimo pro overlay) e cuida do próprio scroll/zoom entre as páginas. */
.stieen-pdf-lightbox { padding: 16px; }
.stieen-pdf-lightbox-wrap {
  width: 100%;
  height: 100%;
  margin: 0;
}
.stieen-pdf-lightbox-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
  background: var(--stieen-branco);
  display: block;
}

@media (max-width: 480px) {
  .stieen-video-lightbox-fechar { top: 12px; right: 12px; width: 40px; height: 40px; }
}

/* Chama a atenção pro CTA principal do header: 4 movimentos em loop
   de 12s (3s entre cada um) — onda, chacoalhar, onda, tremedeira,
   e recomeça. "Chacoalhar" replica o efeito de verdade do banner da
   Prece no Staecnon (prototipo-nova-home/assets/css/homepage2-prece.css,
   @keyframes homepage2-prece-chacoalhar: rotate ±2deg, 5 alternâncias
   rápidas) — a 1ª versão daqui usava translateX por engano; isso virou
   a "tremedeira" (movimento 4), e o chacoalhar de verdade (rotação)
   entrou como movimento 2. Onda = mesmo espírito do botão Denúncias
   (anel de box-shadow expandindo). Um só keyframe cuida de tudo porque
   cada movimento acontece num instante diferente do ciclo. */
.stieen-btn-associe { animation: stieen-associe-efeitos 12s ease-in-out infinite; }
.stieen-btn-associe:hover,
.stieen-btn-associe:focus-visible { animation-play-state: paused; }

@keyframes stieen-associe-efeitos {
  0%, 9%, 25%, 27.5%, 50%, 59%, 75%, 80.83%, 100% {
    transform: none;
    box-shadow: 0 0 0 0 transparent;
  }

  /* Movimento 1 (t=0s) — onda */
  4.17% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--stieen-vermelho) 55%, transparent); }
  8.33% { box-shadow: 0 0 0 16px transparent; }

  /* Movimento 2 (t=3s, 25% de 12s) — chacoalhar (rotação, igual Prece) */
  25.42% { transform: rotate(-2deg); }
  25.83% { transform: rotate(2deg); }
  26.25% { transform: rotate(-2deg); }
  26.67% { transform: rotate(2deg); }
  27.08% { transform: rotate(-2deg); }

  /* Movimento 3 (t=6s, 50% de 12s) — onda de novo */
  54.17% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--stieen-vermelho) 55%, transparent); }
  58.33% { box-shadow: 0 0 0 16px transparent; }

  /* Movimento 4 (t=9s, 75% de 12s) — tremedeira (vibração lateral) */
  75.83% { transform: translateX(-4px); }
  76.67% { transform: translateX(4px); }
  77.5%  { transform: translateX(-4px); }
  78.33% { transform: translateX(4px); }
  79.17% { transform: translateX(-2px); }
  80%    { transform: translateX(2px); }
}

/* Quem prefere menos movimento na tela não precisa do CTA chacoalhando
   — tanto por preferência do SISTEMA OPERACIONAL (media query nativa)
   quanto pelo toggle "Reduzir movimento" do próprio painel de
   acessibilidade do site ([data-movimento="reduzido"] no <html>,
   ligado por assets/js/acessibilidade.js). Os sliders (hero e
   notícias) respeitam a mesma preferência dentro do próprio JS
   (hero-slider.js / noticias-slider.js), não dá pra fazer por CSS. */
@media (prefers-reduced-motion: reduce) {
  .stieen-btn-associe { animation: none; }
}
[data-movimento="reduzido"] .stieen-btn-associe { animation: none; }

/* Hover com "movimento" (translateY/scale) de card — desliga só o
   deslocamento, mantém a mudança de cor/borda do hover (isso não é
   um efeito chamativo, é só realce visual). */
[data-movimento="reduzido"] .stieen-multimidia-banner:hover,
[data-movimento="reduzido"] .stieen-multimidia-banner:hover .stieen-multimidia-banner-poster,
[data-movimento="reduzido"] .stieen-veja-tambem-item:hover {
  transform: none;
}

.stieen-menu-mobile-toggle {
  display: none;
  background: none;
  border: none;
  font-size: calc(22px * var(--stieen-escala-fonte));
  color: var(--stieen-escuro);
  cursor: pointer;
}