/* assine.css: o fim de toda página antes do rodapé. "Ouça, assista ou assine": a frase em itálico e os selos pretos
   das plataformas, com o ícone em branco e preto (o vermelho fica só pro play e pro "Novo"). Depois a pauta, que
   fica no lugar da newsletter do site do Mel Robbins (o plano decidiu: sem newsletter): sem cartão de cor, só o
   título grande entre dois fios. Os selos também aparecem na página do episódio.
   Depende de: base.css. Telefone nas regras soltas, computador no @media do fim. */

.assine { padding: 56px 0; text-align: center; }

.assine__titulo { max-width: 20ch; margin-inline: auto; font-size: 32px; font-style: italic; font-weight: 500; line-height: 1.08; }

.assine__ritmo { margin-top: 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cinza); }

/* "Ouça, assista ou assine" entre dois fios */
.assine__chamada {
  display: flex; align-items: center; gap: 14px; margin: 36px 0 18px;
  font-family: var(--letra-titulo); font-size: 21px; font-style: italic; font-weight: 500;
}
.assine__chamada::before,
.assine__chamada::after { content: ""; flex: 1; border-top: 1px solid var(--fio); }

.assine__mais { margin-top: 20px; }

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

.selos { display: grid; gap: 10px; justify-content: center; grid-template-columns: minmax(0, 280px); }

.selo {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 16px;
  background: var(--preto); color: var(--branco); text-align: left; text-decoration: none;
}
.selo:hover { background: var(--preto-claro); }

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

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

.selo__chamada { font-size: 11px; letter-spacing: 0.06em; opacity: .8; }
.selo__chamada::before { content: "Ouça no"; }
[data-plataforma="youtube"] .selo__chamada::before { content: "Assista no"; }

.selo__nome { font-size: 20px; font-weight: 500; white-space: nowrap; }

/* os ícones das plataformas em branco, com o miolo no preto do selo */
[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='%23fff'/%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='%23111' 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%3Crect width='40' height='40' rx='9' fill='%23fff'/%3E%3Ccircle cx='20' cy='17' r='4' fill='%23111'/%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='%23111' stroke-width='2.4' stroke-linecap='round'/%3E%3Crect x='18' y='22' width='4' height='11' rx='2' fill='%23111'/%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='%23fff'/%3E%3Cpath d='M16.5 14.5v12l10-6z' fill='%23111'/%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='%23fff'/%3E%3Cg fill='%23111'%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='%23fff'/%3E%3Cpath d='M17 8v11a3 3 0 1 1-2-2.8V10.5l9-2v8.5a3 3 0 1 1-2-2.8V6z' fill='%23111'/%3E%3Cpath d='M8 26c7 5 16 5 23 0' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M27 24l4.5 2-2.5 4' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* a janela "Mais opções e o feed": os cinco selos, um por linha, e o endereço do feed embaixo */
.modal-corpo .selos { grid-template-columns: minmax(0, 1fr); }

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

/* ------------------------------------------------------------ a pauta, entre dois fios */

.pauta { padding: 56px 0; }

.pauta__dentro {
  display: grid; justify-items: center; gap: 16px; padding: 40px 0;
  border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio); text-align: center;
}

.pauta__titulo { max-width: 16ch; font-size: 34px; font-style: italic; font-weight: 500; line-height: 1.05; }

.pauta__lado { display: grid; justify-items: center; gap: 18px; }

.pauta__texto { max-width: 36ch; color: var(--cinza); }

@media (min-width: 900px) {
  .assine { padding: 96px 0 100px; }
  .assine__titulo { font-size: 50px; }
  .assine__chamada { width: min(720px, 100%); margin: 48px auto 22px; font-size: 24px; }
  .assine .selos { grid-template-columns: repeat(4, 248px); gap: 14px; }
  .pauta { padding: 72px 0 96px; }
  .pauta__dentro {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; justify-items: start;
    gap: 0; padding: 56px 0; text-align: left;
  }
  .pauta__titulo { padding-right: 56px; font-size: 56px; }
  .pauta__lado { justify-items: start; align-self: stretch; align-content: center; padding-left: 56px; border-left: 1px solid var(--fio); }
}