/* cartao-ep.css: o episódio em cartão. O .cartao-ep é o da grade (número, título, resumo, data e duração);
   o .comece-cartao é o grande do "Comece por aqui", com o número enorme em laranja. A .grade-ep põe os cartões
   em três colunas no computador e um embaixo do outro no telefone.
   Depende de: base.css. Telefone nas regras soltas, computador no @media do fim. */

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

/* ------------------------------------------------------------ o cartão da grade */

.cartao-ep__link {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 10px; height: 100%; padding: 20px;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao);
  text-decoration: none;
}
.cartao-ep__link:hover { background: var(--cartao-alto); border-color: var(--linha-clara); }

.cartao-ep__numero { font-family: var(--letra-titulo); font-size: 30px; line-height: 1; color: var(--texto-suave); }

.cartao-ep__titulo { font-size: 18px; font-weight: 600; line-height: 1.3; }

.cartao-ep__resumo {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 15px; color: var(--texto-suave);
}

.cartao-ep__meta { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-fraco); }

/* ------------------------------------------------------------ o cartão grande do "Comece por aqui" */

.comece-cartao__link {
  display: grid; gap: 8px; height: 100%; padding: 24px 20px;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao);
  text-decoration: none;
}
.comece-cartao__link:hover { background: var(--cartao-alto); border-color: var(--linha-clara); }

.comece-cartao__numero { font-family: var(--letra-titulo); font-size: 96px; line-height: .9; color: var(--laranja); }

.comece-cartao__rotulo { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }

.comece-cartao__titulo { font-size: 20px; font-weight: 600; line-height: 1.3; }

.comece-cartao__resumo {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 15px; color: var(--texto-suave);
}

@media (min-width: 900px) {
  .grade-ep { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .cartao-ep__link { padding: 24px; }
  .comece-cartao__link { padding: 32px 28px 28px; gap: 10px; }
  .comece-cartao__numero { font-size: 136px; }
  .comece-cartao__titulo { font-size: 22px; }
}