/* cartela.css: a cartela 16:9 e o cartão que a usa. A .cartela faz o papel da imagem do episódio (o podcast ainda não
   tem foto por episódio), como a cartela de abertura de um programa de TV: o quadro marinho com riscas finas, o
   rótulo "Episódio" com um fio amarelo curto embaixo, o número grande em branco e a duração numa etiqueta azul no
   canto de baixo. O .cartao-ep é o do "Comece por aqui" (a cartela, o título em até duas linhas, o tema e a data).
   Depende de: base.css. Telefone nas regras soltas, computador no @media do fim. */

.cartela {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--raio);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 14px),
    linear-gradient(150deg, var(--marinho-claro), var(--marinho) 65%);
  color: var(--branco);
}

.cartela__rotulo {
  position: absolute; top: 12px; left: 14px; padding-bottom: 4px; border-bottom: 2px solid var(--amarelo);
  font-family: var(--letra-titulo); font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}

.cartela__numero {
  position: absolute; left: 12px; bottom: 0;
  font-family: var(--letra-titulo); font-size: 76px; font-weight: 700; line-height: .95;
}

.cartela__duracao {
  position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: var(--raio-pequeno);
  background: var(--azul);
  font-family: var(--letra-titulo); font-size: 15px; font-weight: 600; letter-spacing: .04em; line-height: 1.3;
}

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

.cartao-ep { min-width: 0; }

/* no telefone, a cartela pequena à esquerda ocupa as duas linhas do texto */
.cartao-ep__link {
  display: grid; grid-template-columns: 136px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 4px 12px;
  text-decoration: none;
}

.cartao-ep .cartela { grid-row: 1 / 3; }
.cartao-ep .cartela__rotulo { top: 7px; left: 9px; padding-bottom: 2px; font-size: 11px; }
.cartao-ep .cartela__numero { left: 8px; font-size: 44px; }
.cartao-ep .cartela__duracao { right: 6px; bottom: 6px; padding: 1px 5px; font-size: 12px; }

.cartao-ep__titulo {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-family: var(--letra-titulo); font-size: 21px; font-weight: 600; line-height: 1.15; color: var(--marinho);
}
.cartao-ep__link:hover .cartao-ep__titulo { color: var(--azul); }
.cartao-ep__link:hover .cartela__duracao { background: var(--branco); color: var(--azul); }

.cartao-ep__meta {
  font-family: var(--letra-titulo); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--azul);
}

@media (min-width: 900px) {
  .cartela__numero { font-size: 92px; }
  .cartao-ep__link { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 8px; }
  .cartao-ep .cartela { grid-row: auto; }
  .cartao-ep .cartela__rotulo { top: 12px; left: 14px; padding-bottom: 4px; font-size: 14px; }
  .cartao-ep .cartela__numero { left: 12px; font-size: 92px; }
  .cartao-ep .cartela__duracao { right: 10px; bottom: 10px; padding: 2px 8px; font-size: 15px; }
}