/* ============================================================
   Bloco "Clima, Esportes e Rádio" da home modular — faixa fina
   (inc/home-blocos/bloco-painel-trio.php, JS em assets/js/painel-trio.js).
   Computador: uma faixa de uma linha (56px), três segmentos separados por
   divisórias finas, em larguras proporcionais (a rádio, a maior); o
   conteúdo fica à esquerda e o "ver mais →" encosta na borda direita do
   segmento, sem área morta.
   Celular: clima e rádio numa linha, o jogo na de baixo.
   Segmento ausente não existe no HTML: o flex reparte o espaço.
   Tudo escopado em .ptv-trio (os blocos isolados não mudam) e só com os
   tokens de style.css → tema claro vem de graça.
   ============================================================ */

.ptv-trio{
  --trio-vivo:#E5484D;
  display:flex;
  align-items:stretch;
  min-height:56px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  font-size:.8125rem;
  line-height:1.25;
  color:var(--ink);
}
[data-theme="light"] .ptv-trio{--trio-vivo:#C62828;}

.ptv-trio__seg{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:6px 18px;
  color:inherit;
  text-decoration:none;
}
.ptv-trio__seg + .ptv-trio__seg{border-left:1px solid var(--line);}
.ptv-trio a{color:inherit; text-decoration:none;}
.ptv-trio a:focus-visible{outline:2px solid var(--orange); outline-offset:-3px; border-radius:10px;}
a.ptv-trio__seg,
.ptv-trio__jg{transition:background-color .15s;}
a.ptv-trio__seg:hover,
.ptv-trio__jg:hover{background:var(--panel-raised);}

.ptv-trio__tx{display:flex; align-items:baseline; gap:8px; min-width:0; white-space:nowrap;}

/* "ver mais →": discreto, encostado na borda direita do segmento. */
.ptv-trio__mais{
  margin-left:auto;
  flex-shrink:0;
  padding-left:4px;
  font-size:.6875rem;
  color:var(--ink-mute);
  white-space:nowrap;
}
a.ptv-trio__seg:hover .ptv-trio__mais,
a.ptv-trio__mais:hover{color:var(--orange);}

/* ---------- clima ---------- */
.ptv-trio__seg--clima{flex:0 1 auto;}
/* Sozinho no fim (sem esportes nem rádio), o clima ocupa o espaço. */
.ptv-trio__seg--clima:last-child{flex:1 1 auto;}
.ptv-trio__seg--clima .ptv-ce__ic{flex-shrink:0; width:24px; height:24px; color:var(--orange);}
.ptv-trio__temp{font-size:1.25rem; font-weight:800; letter-spacing:-.01em; font-variant-numeric:tabular-nums;}
.ptv-trio__cond{min-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--ink-soft);}
.ptv-trio__mm{color:var(--ink-mute); font-size:.75rem; font-variant-numeric:tabular-nums;}

/* ---------- esportes ---------- */
.ptv-trio__seg--esportes{flex:1 1 auto; gap:2px; padding-left:6px; padding-right:12px;}
.ptv-trio__jg{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  flex:0 1 auto;
  min-width:0;
  padding:4px 8px;
  border-radius:8px;
}
.ptv-trio__jgmeta{
  display:flex;
  gap:5px;
  min-width:0;
  font-size:.625rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-mute);
  white-space:nowrap;
}
.ptv-trio__comp{min-width:0; overflow:hidden; text-overflow:ellipsis;}
.ptv-trio__comp::after{content:" ·";}
.ptv-trio .ptv-esp-hoje__h{flex-shrink:0; color:var(--ink-soft);}
.ptv-trio__jg.is-vivo .ptv-esp-hoje__h{color:var(--trio-vivo);}
.ptv-trio__placar{display:flex; align-items:center; gap:5px; min-width:0; white-space:nowrap; font-weight:600;}
.ptv-trio__nm{min-width:0; overflow:hidden; text-overflow:ellipsis;}
.ptv-trio .esp-escudo{flex-shrink:0; width:18px; height:18px;}
.ptv-trio img.esp-escudo{object-fit:contain;}
.ptv-trio span.esp-escudo{display:inline-grid; place-items:center; border-radius:50%; font-size:6px; font-weight:900;}
.ptv-trio .ptv-esp-hoje__g{font-size:.875rem; font-weight:900; font-variant-numeric:tabular-nums;}
.ptv-trio .ptv-esp-hoje__g:empty{display:none;}
.ptv-trio__x{color:var(--ink-mute); font-weight:400; font-size:.75rem;}
.ptv-trio__seg--esportes > .ptv-trio__mais{align-self:center;}

/* ---------- rádio: logo + play + "ao vivo" / "Tocando agora" ---------- */
/* Container para esconder o "tocando agora" quando não há largura para ele
   (ver os @container mais abaixo). */
.ptv-trio__seg--radio{flex:1 1 0; gap:12px; padding-left:14px; padding-right:20px; cursor:pointer; container:ptv-trio-radio / inline-size;}
/* Logo com fundo transparente, direto na faixa: a do tema vem em duas
   versões ("hits" escuro no tema claro, branco no escuro). O site é escuro
   por padrão e só fica claro com data-theme="light" no <html>. Uma logo
   configurada no Personalizador é uma imagem só, sem classe de tema. */
.ptv-trio__logo{
  flex-shrink:0;
  display:block;
  width:auto;
  height:40px;
  max-width:160px;
  object-fit:contain;
}
.ptv-trio__logo--claro,
[data-theme="light"] .ptv-trio__logo--escuro{display:none;}
[data-theme="light"] .ptv-trio__logo--claro{display:block;}
.ptv-trio__play{
  flex-shrink:0;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--orange);
  color:#fff;
  transition:background-color .15s, transform .15s;
}
.ptv-trio__play svg{width:15px; height:15px;}
.ptv-trio__ic-play{margin-left:2px;}
.ptv-trio__ic-pause,
.is-tocando .ptv-trio__ic-play{display:none;}
.is-tocando .ptv-trio__ic-pause{display:block;}
.ptv-trio__seg--radio:hover .ptv-trio__play{background:var(--orange-deep); transform:scale(1.06);}
.is-carregando .ptv-trio__play{animation:ptv-trio-pulso 1s ease-in-out infinite;}
.ptv-trio__vivo{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:.625rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--trio-vivo);
  white-space:nowrap;
}
.ptv-trio__vivo i{width:6px; height:6px; border-radius:50%; background:currentColor;}
/* "Ao vivo" em cima, "Tocando agora: …" embaixo, numa linha com reticências. */
.ptv-trio__info{display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0; flex:1 1 auto;}
.ptv-trio__agora{
  display:block;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:.75rem;
  color:var(--ink-soft);
}
.ptv-trio__agora[hidden]{display:none;}
.ptv-trio__agora-rot{color:var(--ink-mute);}
.ptv-trio__musica{color:var(--ink); font-weight:600;}
.is-tocando .ptv-trio__vivo i{animation:ptv-trio-pulso 1.4s ease-in-out infinite;}

/* ---------- computador: distribuição da faixa ----------
   Larguras proporcionais, como um grid de três colunas: 0,85 parte para o
   clima, 1,2 para o esporte e 1,65 para a rádio, que tem a linha da música
   para preencher. O clima nunca fica mais estreito que o próprio conteúdo
   (em telas menores, os outros dois cedem). Proporção fixa, e não pela
   largura do conteúdo, para a faixa não mudar a cada troca de música. Sem um
   segmento, os outros dividem o espaço nas mesmas proporções. Em cada um, o
   conteúdo fica à esquerda e o "ver mais →" encosta na borda direita (na
   rádio, a linha da música vai até a borda): sem área morta. */
@media (min-width:701px){
  .ptv-trio__seg{gap:12px; padding:6px 20px;}
  .ptv-trio__seg--clima{flex:.85 1 0; min-width:max-content;}
  .ptv-trio__seg--esportes{flex:1.2 1 0; padding-left:10px; padding-right:20px;}
  .ptv-trio__seg--radio{flex:1.65 1 0; gap:14px; padding-left:18px; padding-right:20px;}
  .ptv-trio a.ptv-trio__mais{color:var(--ink-mute);}
  .ptv-trio a.ptv-trio__mais:hover{color:var(--orange);}
  /* O que sobra no clima e no esporte se divide dos dois lados do conteúdo
     (as margens automáticas dele e do "ver mais" repartem a sobra), em vez
     de virar um buraco entre o conteúdo e a seta. */
  .ptv-trio__seg--clima .ptv-ce__ic,
  .ptv-trio__seg--esportes .ptv-trio__jg{margin-left:auto;}

  /* Clima: ícone e temperatura maiores; condição em cima e mín/máx embaixo,
     no mesmo ritmo de duas linhas do jogo e da rádio. */
  .ptv-trio__seg--clima .ptv-ce__ic{width:28px; height:28px;}
  .ptv-trio__seg--clima .ptv-trio__tx{
    display:grid;
    grid-template-columns:auto minmax(0, auto);
    grid-template-rows:auto auto;
    column-gap:12px;
    row-gap:1px;
    align-items:center;
  }
  .ptv-trio__temp{grid-row:1 / 3; font-size:1.625rem; line-height:1;}
  .ptv-trio__cond{grid-column:2; align-self:end; font-size:.8125rem; font-weight:600; color:var(--ink);}
  .ptv-trio__mm{grid-column:2; align-self:start; font-size:.75rem;}
  /* Sem condição, o mín/máx fica centrado ao lado da temperatura. */
  .ptv-trio__temp + .ptv-trio__mm{grid-row:1 / 3; align-self:center;}

  /* Esporte: escudos, nomes e placar maiores; nomes inteiros quando cabem. */
  .ptv-trio__jg{gap:3px; padding-top:2px; padding-bottom:2px;}
  .ptv-trio__jgmeta{font-size:.6875rem;}
  .ptv-trio__placar{gap:6px; font-size:.9375rem; line-height:1.2;}
  .ptv-trio .esp-escudo{width:20px; height:20px;}
  .ptv-trio .ptv-esp-hoje__g{font-size:1rem;}

  /* Rádio: "● ao vivo · tocando agora" numa linha pequena e a música
     embaixo, em destaque, ocupando toda a largura até a borda direita.
     O <span> "tocando agora" vira display:contents para o rótulo ficar na
     linha de cima, ao lado do "ao vivo"; sem música, fica só o "ao vivo",
     centrado ao lado do play. */
  .ptv-trio__info{
    flex:1 1 0;
    width:0;
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    align-content:center;
    column-gap:6px;
    row-gap:3px;
  }
  .ptv-trio__agora{display:contents;}
  .ptv-trio__agora[hidden]{display:none;}
  .ptv-trio__agora-rot{
    font-size:.625rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    white-space:nowrap;
  }
  .ptv-trio__agora-rot::before{content:"· "; color:var(--ink-mute);}
  .ptv-trio__musica{
    grid-column:1 / -1;
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:.875rem;
  }

  /* Sem a música, ou com a faixa de um ou dois segmentos (a rádio fica bem
     mais larga que o conteúdo), logo + play + texto vão para o centro do
     segmento, em vez de deixar a metade direita vazia. */
  .ptv-trio:not(.ptv-trio--3) .ptv-trio__seg--radio .ptv-trio__info,
  .ptv-trio__seg--radio:has(.ptv-trio__agora[hidden]) .ptv-trio__info{flex:0 1 auto; width:auto; margin-right:auto;}
  .ptv-trio:not(.ptv-trio--3) .ptv-trio__seg--radio .ptv-trio__logo,
  .ptv-trio__seg--radio:has(.ptv-trio__agora[hidden]) .ptv-trio__logo{margin-left:auto;}

  /* Rádio estreita: sem a música (fica logo, play e "ao vivo"). */
  @container ptv-trio-radio (max-width:290px){
    .ptv-trio__agora{display:none;}
  }
}
/* Computador estreito (até 1200px): os "ver mais →" viram só a seta, para
   sobrar espaço para a música. */
@media (min-width:701px) and (max-width:1200px){
  .ptv-trio__mais{font-size:0;}
  .ptv-trio__mais::after{content:"→"; font-size:1rem;}
  .ptv-trio__seg{padding-left:16px; padding-right:16px;}
  .ptv-trio__seg--esportes{padding-left:8px;}
}
@media (max-width:700px){
  @container ptv-trio-radio (max-width:240px){
    .ptv-trio__agora{display:none;}
  }
}

@keyframes ptv-trio-pulso{50%{opacity:.45;}}
@media (prefers-reduced-motion:reduce){
  .ptv-trio *{animation:none !important; transition:none !important;}
}

/* ---------- celular: clima + rádio numa linha, o jogo embaixo ---------- */
@media (max-width:700px){
  .ptv-trio{flex-wrap:wrap; min-height:0;}
  .ptv-trio .ptv-trio__seg{min-height:48px; padding:6px 14px; overflow:hidden;}
  .ptv-trio .ptv-trio__seg--clima{order:1; flex:0 1 auto;}
  .ptv-trio .ptv-trio__seg--radio{order:2; flex:1 1 0;}
  .ptv-trio .ptv-trio__seg--esportes{order:3; flex:1 1 100%; max-width:none; padding-left:4px; border-left:none; border-top:1px solid var(--line);}
  .ptv-trio .ptv-trio__nm{max-width:none;}
  .ptv-trio--1 .ptv-trio__seg--esportes{border-top:none;}
  /* Rádio sem o clima: sozinha na linha de cima, ocupa a largura. */
  .ptv-trio .ptv-trio__seg--radio:first-child,
  .ptv-trio .ptv-trio__seg--esportes:first-child + .ptv-trio__seg--radio{border-left:none; flex:1 1 auto;}
  /* Rádio: logo menor (28px) e play de 32px; "Ao vivo" sai (o aria-label do
     botão continua dizendo "ao vivo"). A música, se couber, aparece sem o
     rótulo "Tocando agora:" (que fica para leitor de tela). */
  .ptv-trio .ptv-trio__seg--radio{gap:8px; padding-left:10px; padding-right:12px;}
  .ptv-trio__logo{height:28px; max-width:110px;}
  .ptv-trio__play{width:32px; height:32px;}
  .ptv-trio__play svg{width:14px; height:14px;}
  .ptv-trio__vivo{display:none;}
  .ptv-trio__agora{font-size:.6875rem;}
  .ptv-trio__agora-rot{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);}
  /* O jogo usa a linha toda antes de cortar os nomes. */
  .ptv-trio__jg{flex:1 1 auto;}
  .ptv-trio__seg--clima .ptv-trio__mais{font-size:0;}
  .ptv-trio__seg--clima .ptv-trio__mais::after{content:"→"; font-size:.875rem;}
}
@media (max-width:480px){
  /* Sem espaço para a seta: a linha inteira do clima já é o link. */
  .ptv-trio__seg--clima .ptv-trio__mais{display:none;}
  /* A condição fica para leitor de tela; o ícone já a mostra. */
  .ptv-trio__cond{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);}
}