/* canal.css: a fileira do canal que se repete no início, nos episódios, nos temas e no Sobre: o ícone redondo do
   programa, o nome grande, a frase e o ritmo e, à direita, os atalhos redondos das três primeiras plataformas e o
   botão mostarda "Onde ouvir" (abre a janela com todas e o feed). Quem leva de uma página pra outra é o menu do topo.
   No telefone, por cima do vídeo, a fileira ganha o desenho do site das garotas: o nome grande numa linha, a frase em
   letra mostarda espaçada, a faixa de dados rodando no pé e o "Onde ouvir" num botão redondo que acompanha a rolagem.
   Depende de: base.css e onde-ouvir.css (o ícone de cada plataforma). Telefone nas regras soltas, o telefone com vídeo
   e o computador nos dois @media do fim. */

/* ------------------------------------------------------------ a fileira do canal */

.canal { padding-top: 16px; }

.canal__dentro {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icone texto" "acoes acoes";
  align-items: center; gap: 14px;
}

/* no telefone o texto quebra em várias linhas: o ícone fica no alto, junto do nome */
.canal__icone { grid-area: icone; align-self: start; width: 64px; height: 64px; }
.canal__icone svg { display: block; width: 100%; height: 100%; }

.canal__texto { grid-area: texto; display: grid; gap: 2px; min-width: 0; }

.canal__nome { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }

.canal__frase { font-size: 15px; font-weight: 600; line-height: 1.4; }

.canal__ritmo { font-size: 13px; color: var(--texto-suave); }

.canal__acoes { grid-area: acoes; display: flex; align-items: center; gap: 8px; }

.canal__botao { flex: 1 1 auto; min-height: 42px; }

/* os atalhos das plataformas: só o ícone num círculo cinza; o nome fica pro leitor de tela */
.canal__plataformas { display: flex; gap: 6px; }

.canal__plataforma {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--bloco);
}
.canal__plataforma:hover { background: var(--bloco-escuro); }
.canal__plataforma .selo__icone { width: 22px; height: 22px; }

/* a faixa de dados que roda só existe no telefone, por cima do vídeo */
.canal__faixa { display: none; }

/* no início e no Sobre a fileira sobe por cima do pé do vídeo (cinema.css), em letra clara sobre o degradê; o
   padding de baixo é maior que a subida, pra o preto da faixa sempre passar do fim do vídeo */
.canal--sobre-video { position: relative; z-index: 1; margin-top: -170px; padding: 0 0 22px; }
.canal--sobre-video .canal__frase { color: var(--branco); }
.canal--sobre-video .canal__ritmo { color: var(--texto-no-preto); }
.canal--sobre-video .canal__icone svg { border-radius: 50%; box-shadow: 0 0 0 2px var(--branco); }
.canal--sobre-video .canal__plataforma { background: rgba(255, 255, 255, .14); }
.canal--sobre-video .canal__plataforma:hover { background: rgba(255, 255, 255, .26); }

/* ------------------------------------------------------------ o telefone por cima do vídeo */

/* A ordem é nome, frase e faixa, encostados no pé da tela (cinema.css empurra a fileira pra baixo). O ícone, o ritmo
   e os atalhos saem: o ritmo e as plataformas passam a rodar na faixa, e o botão redondo abre a janela com todas.
   O z-index volta a auto pra fileira não virar uma camada própria: senão o botão redondo, que mora dentro dela,
   ficaria por baixo das miniaturas da página quando ela rola. */
@media (max-width: 899.98px) {
  .canal--sobre-video {
    z-index: auto; margin-top: 0; padding: 0 0 calc(14px + env(safe-area-inset-bottom, 0px));
    text-shadow: 0 2px 18px rgba(17, 17, 17, .85);
  }
  .canal--sobre-video .canal__dentro { display: flex; flex-direction: column; gap: 0; }

  .canal--sobre-video .canal__icone,
  .canal--sobre-video .canal__ritmo,
  .canal--sobre-video .canal__plataformas { display: none; }

  .canal--sobre-video .canal__acoes { display: contents; }

  .canal--sobre-video .canal__nome {
    margin-bottom: 10px; font-size: clamp(2.4rem, 15vw, 4.4rem); line-height: 1; letter-spacing: -0.04em; white-space: nowrap;
  }

  .canal--sobre-video .canal__frase {
    margin-bottom: 22px; color: var(--mostarda);
    font-size: 12px; font-weight: 700; line-height: 1.9; letter-spacing: .18em; text-transform: uppercase;
  }

  /* O rodízio sangra de ponta a ponta (100vw com a margem negativa) e some nas duas pontas pela máscara. */
  .canal--sobre-video .canal__faixa {
    display: flex; overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw);
    color: var(--texto-no-preto); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  }
  .canal__trilho {
    display: flex; flex: none; align-items: center; gap: 28px; padding-right: 28px;
    white-space: nowrap; animation: canal-desliza 28s linear infinite;
  }
  .canal__dados { display: contents; }
  .canal__dado { display: inline-flex; align-items: center; gap: 10px; }
  .canal__dado::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--mostarda); }

  @keyframes canal-desliza {
    to { transform: translateX(-100%); }
  }

  /* Quem pediu menos movimento vê a faixa parada, quebrando em linhas, sem a cópia de emenda. */
  @media (prefers-reduced-motion: reduce) {
    .canal--sobre-video .canal__faixa { width: auto; margin-left: 0; -webkit-mask-image: none; mask-image: none; }
    .canal__trilho { flex-wrap: wrap; gap: 4px 20px; white-space: normal; animation: none; }
    .canal__trilho + .canal__trilho { display: none; }
  }

  /* O "Onde ouvir" vira o botão redondo do canto, que acompanha a rolagem; o texto fica pro leitor de tela. */
  .canal--sobre-video .canal__botao {
    position: fixed; right: var(--margem); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 20;
    width: 58px; height: 58px; min-height: 0; padding: 0; border-radius: 50%;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .4);
  }
  .canal--sobre-video .canal__botao svg { width: 26px; height: 26px; }
  .canal--sobre-video .canal__botao-texto {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

@media (min-width: 900px) {
  .canal { padding-top: 20px; }
  .canal__dentro { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icone texto acoes"; gap: 20px; }
  .canal__icone { align-self: center; width: 88px; height: 88px; }
  .canal__nome { font-size: 30px; }
  .canal__frase { font-size: 16px; }
  .canal__ritmo { font-size: 14px; }
  .canal__botao { flex: none; min-height: 44px; padding: 0 24px; font-size: 15px; }
  .canal--sobre-video { margin-top: -150px; padding: 0 0 40px; }
}