/* ==========================================================================
   site-audiences.css: cards de audiencia (gradiente vivo e feixe de linhas).
   Parte do site.css (tokens, base e o que toda pagina usa vivem la). Este
   arquivo so entra na pagina que tem esta peca: quem decide e o SiteCss, a
   partir das secoes e mockups que a pagina desenhou. Carrega DEPOIS do
   site.css, na ordem fixa do SiteCss::ORDER (a mesma ordem em que as regras
   estavam no arquivo unico, para a cascata nao mudar).
   ========================================================================== */

/* 10.4 Cards de audiencia — gradiente sempre em movimento (site.js, modulo
   audiences); no hover o card cresce e os irmaos recuam (CSS, mais abaixo). */
.st-aud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.st-aud__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 370px;
  padding: 24px;
  border-radius: var(--radius);
  overflow: hidden;
  color: #fff;
  /* O primeiro stop leva 28% do azul-noite: na primaria PURA o titulo e a
     descricao em branco davam 2,55:1 (o card comeca claro justo onde o texto
     comeca). Com a mistura o matiz da marca continua, e o branco sobe para a
     faixa do AA. */
  background: linear-gradient(160deg, color-mix(in oklab, var(--aud-c) 56%, var(--aud-deep)), color-mix(in oklab, var(--aud-c) 37%, var(--aud-deep)) 52%, color-mix(in oklab, var(--aud-c) 17%, var(--aud-deep)));
}

.st-aud__card--1 { --aud-c: var(--aud-1); }

.st-aud__card--2 { --aud-c: var(--aud-2); }

.st-aud__card--3 { --aud-c: var(--aud-3); }

/* Os blobs sao elementos POSICIONADOS: sem position nos filhos, o texto (que
   nao e posicionado) seria pintado embaixo deles. */
.st-aud__mesh { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }

.st-aud__blob { position: absolute; border-radius: 50%; }

/* O blob claro fica na METADE de cima, onde vivem o titulo e a descricao em
   branco: clarear ali derruba o contraste do texto. Ele continua dando o
   movimento de malha, so que sem lavar o fundo. */
.st-aud__blob--a {
  left: -18%; top: -22%;
  width: 92%; height: 72%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--aud-c) 78%, #fff), transparent);
  opacity: .15;
}

.st-aud__blob--b {
  right: -24%; bottom: -18%;
  width: 104%; height: 78%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--aud-c) 55%, var(--aud-deep)), transparent);
  opacity: .6;
}

/* O FEIXE ondula sem parar (wave.js), atras do texto e da captura. A espessura
   e a opacidade de cada linha vem do PHP, em atributo do proprio SVG, porque
   variam linha a linha: 0,75 a 1,25px e 4% a 18% de branco. Aqui fica so o que
   e igual em todas. Linha fina a 18%, nao chapa: o contraste do texto branco
   por cima continua de pe. */
.st-aud__waves { position: absolute; inset: 0; width: 100%; height: 100%; }

/* O feixe pega o TOM DO PROPRIO CARD, nao branco: em branco puro as linhas
   ficavam de uma familia so nos tres cards e brigavam com o azul-petroleo do
   card do meio. A mistura mantem o matiz e sobe o brilho o bastante para o
   traco aparecer sobre a parte escura do gradiente; a opacidade de cada linha
   (4% a 18%) continua vindo do gerador. */
.st-aud__card { --aud-line: color-mix(in oklab, var(--aud-c) 45%, #fff); }

.st-aud__wave { fill: none; stroke: var(--aud-line); stroke-linecap: round; }

.st-aud__title { position: relative; font-size: 26px; line-height: 30px; font-weight: 500; letter-spacing: -0.015em; }

.st-aud__desc { position: relative; margin-top: 12px; font-size: 15px; line-height: 21px; color: rgba(255, 255, 255, .9); }

/* A tela fica NO FLUXO, ancorada na base pela margem automatica: fora do
   fluxo (absolute) ela cobria o botao assim que o titulo quebrava em duas
   linhas. O -24px de baixo anula o padding do card e mantem a tela colada. */
.st-aud__shot {
  position: relative;
  flex: 0 0 165px;
  margin: auto 0 -24px;
  border-radius: 8px 8px 0 0;
  border: 1px solid rgba(255, 255, 255, .25);
  border-bottom: 0;
  background: var(--bg-card);
  overflow: hidden;
  padding: 10px;
}

/* O slot (sections/audiences.php) e quem ocupa a celula da malha e recebe a
   entrada ao rolar; o card estica dentro dele para os tres terem a mesma
   altura, como quando eram filhos diretos da malha. */
.st-aud__slot { display: flex; min-width: 0; }

.st-aud__slot > .st-aud__card { flex: 1 1 auto; min-width: 0; }

/* HOVER em CSS puro, sem depender de nada. O do
   JS so ligava depois do GSAP chegar, em tela de 1025px ou mais, com
   "hover: hover" e SEM "reduzir movimento" (o Windows liga isso quando os
   efeitos de animacao estao desligados): em muita maquina ele nunca acontecia.
   Aqui nao ha :has() (Firefox ESR e Safari antigo nao tem) nem consulta de
   tipo de ponteiro: a malha nao recebe o mouse (pointer-events), so os slots,
   entao ":hover" na malha significa "o mouse esta em cima de UM card", e o vao
   entre eles nao apaga os tres. 769px e onde os cards ficam lado a lado.
   O card sob o mouse cresce; os irmaos recuam e apagam. Com "reduzir
   movimento" o efeito continua (e a pessoa que o provoca), so mais curto. */
@media (min-width: 769px) {
  .st-aud { pointer-events: none; }

  .st-aud__slot { pointer-events: auto; }

  .st-aud__card { transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }

  .st-aud:hover .st-aud__card { opacity: .5; transform: scale(.97); }

  .st-aud .st-aud__slot:hover { z-index: 2; }

  .st-aud .st-aud__slot:hover .st-aud__card { opacity: 1; transform: scale(1.03); }
}

@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
  .st-aud__card { transition-duration: .15s; }
}

/* Aparelho so de toque: o ":hover" gruda depois do toque e deixaria dois
   cards apagados ate a pessoa tocar em outro lugar. */
@media (hover: none) and (any-hover: none) {
  .st-aud:hover .st-aud__card,
  .st-aud .st-aud__slot:hover .st-aud__card { opacity: 1; transform: none; }
}

@media (max-width: 768px) {
  .st-aud { grid-template-columns: minmax(0, 1fr); }
}