/* ouvir.css: "Onde ouvir", com os selos das plataformas em cartões brancos (ícone, "Ouça no" e o nome), e o
   cartão marinho "Mande uma pauta", que fica no lugar da newsletter (o plano decidiu: sem newsletter).
   Os selos compactos (.selos--compactos) moram no cartão lateral da página do episódio.
   Depende de: base.css (o .cartao e o .botao-mais). Telefone nas regras soltas, computador no @media do fim. */

.ouvir__dentro { display: grid; gap: 24px; }

.ouvir__mais { justify-self: start; }

/* ------------------------------------------------------------ os selos */

.selos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.selo {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 14px;
  text-decoration: none; transition: box-shadow .2s, border-color .2s;
}
.selo:hover { border-color: var(--dourado); box-shadow: var(--sombra-alta); }

.selo__icone { width: 32px; height: 32px; flex: none; background: center / contain no-repeat; }

.selo__texto { display: grid; min-width: 0; line-height: 1.15; }

.selo__chamada { font-size: 12px; color: var(--texto-suave); }
.selo__chamada::before { content: "Ouça no"; }
[data-plataforma="youtube"] .selo__chamada::before { content: "Assista no"; }

.selo__nome { font-size: 15px; font-weight: 700; color: var(--marinho); }

[data-plataforma="spotify"] .selo__icone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%231ed760'/%3E%3Cpath d='M10 15c7-2 14-1.5 20 2M11 21c6-1.6 12-1 17 1.6M12 26.5c5-1.2 9.5-.8 13.5 1.2' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-plataforma="apple"] .selo__icone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f452ff'/%3E%3Cstop offset='1' stop-color='%23832bc1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='40' height='40' rx='9' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='17' r='4' fill='%23fff'/%3E%3Cpath d='M13.5 24a8.5 8.5 0 1 1 13 0M10.5 28a12.5 12.5 0 1 1 19 0' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3Crect x='18' y='22' width='4' height='11' rx='2' fill='%23fff'/%3E%3C/svg%3E"); }
[data-plataforma="youtube"] .selo__icone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='1' y='8' width='38' height='25' rx='7' fill='%23ff0000'/%3E%3Cpath d='M16.5 14.5v12l10-6z' fill='%23fff'/%3E%3C/svg%3E"); }
[data-plataforma="deezer"] .selo__icone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='9' fill='%23a238ff'/%3E%3Cg fill='%23fff'%3E%3Crect x='8' y='24' width='5' height='8' rx='1'/%3E%3Crect x='15' y='18' width='5' height='14' rx='1'/%3E%3Crect x='22' y='11' width='5' height='21' rx='1'/%3E%3Crect x='29' y='20' width='5' height='12' rx='1'/%3E%3C/g%3E%3C/svg%3E"); }
[data-plataforma="amazon"] .selo__icone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='9' fill='%2325d1da'/%3E%3Cpath d='M17 8v11a3 3 0 1 1-2-2.8V10.5l9-2v8.5a3 3 0 1 1-2-2.8V6z' fill='%23000'/%3E%3Cpath d='M8 26c7 5 16 5 23 0' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M27 24l4.5 2-2.5 4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* os selos pequenos do cartão lateral do episódio: só o ícone e o nome */
.selos--compactos { gap: 8px; }
.selos--compactos .selo { min-height: 48px; padding: 0 10px; gap: 8px; }
.selos--compactos .selo__icone { width: 26px; height: 26px; }
.selos--compactos .selo__chamada { display: none; }
.selos--compactos .selo__nome { font-size: 14px; }

/* a janela "Todas as opções e o feed": os cinco selos numa coluna só e o endereço do feed embaixo */
.selos--janela { grid-template-columns: minmax(0, 1fr); }

.janela-feed__rotulo { margin: 24px 0 8px; }

/* ------------------------------------------------------------ o cartão da pauta */

.pauta {
  display: grid; gap: 12px; padding: 24px; border-radius: var(--raio);
  background: var(--marinho); color: rgba(255, 255, 255, .85);
}

.pauta__titulo { font-size: 22px; color: var(--branco); }

.pauta__texto { font-size: 15px; }

.pauta .botao-dourado { justify-self: start; margin-top: 6px; }

@media (min-width: 900px) {
  .ouvir__dentro { gap: 32px; }
  .selos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .selo { min-height: 76px; padding: 0 18px; }
  .selo__icone { width: 36px; height: 36px; }
  .selo__nome { font-size: 16px; }
  .selos--compactos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .selos--compactos .selo { min-height: 48px; padding: 0 10px; }
  .selos--compactos .selo__icone { width: 26px; height: 26px; }
  .selos--compactos .selo__nome { font-size: 14px; }
  .selos--janela { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pauta { padding: 32px; }
}