/*
 * Cartão (etapa E4) -- 3 usos, todos no learning.
 *
 * **Aqui a medida vem, e isso não contradiz a E1/E2/E3.** A regra daquelas etapas é que a
 * *moldura de página* não entra: o que cerca o componente e muda de página para página. Este
 * cartão é o contrário -- a caixa **é** ele. Largura, altura, o fundo azul, a altura da capa
 * e o `padding` do conteúdo são o desenho do cartão, iguais nos 3, e sem eles não há cartão
 * nenhum, só texto sobre fundo branco.
 *
 * O que continua sendo de página é o que está **em volta**, e vai para a G8 junto do
 * `RowPlugin` da D2, que faz o papel do `.cards` do estático: o `gap: 18px` entre os
 * cartões e o `margin-bottom: 42px` do contêiner.
 *
 * **E uma declaração do `.cards` que a G8 não deve transcrever: `align-items: center`.** Com
 * ela, três cartões de conteúdo desigual saem centrados e de alturas diferentes. Sem ela, a
 * `linha` da D2 fica no `stretch` que é padrão do flex, e o `min-height` abaixo passa a ser
 * piso: os três crescem juntos até a altura do maior, que é o que a altura fechada do
 * original entregava. As duas decisões se sustentam uma na outra, então esta ficou registrada
 * aqui e na E4.
 *
 * Transcrito de `main.css:2740-2772`, com uma mudança e um registro:
 *
 * **`min-height` no lugar de `height: 421px`.** No estático o texto dos 3 cartões é fixo e a
 * altura fechada cabe. Aqui ele é editável: um parágrafo mais longo transbordaria a caixa,
 * calado. `min-height` mantém os três iguais quando o conteúdo é parecido -- que é o que a
 * altura fixa entregava -- e cresce em vez de cortar quando não é.
 *
 * **O `padding` assimétrico é do original** (`0 22px 18px 27px`), não um engano de
 * transcrição. Fica como está: não há nada aqui que diga qual dos dois lados era o certo.
 */

.cartao {
  display: flex;
  flex-direction: column;
  width: 361px;
  min-height: 421px;
  background-color: var(--seb-azul);
}

.cartao__capa {
  width: 100%;
  height: 200px;
  /* A capa é recortada, e não deformada: as 3 do estático têm proporções diferentes. */
  object-fit: cover;
  margin-bottom: 16px;
}

.cartao__conteudo {
  padding: 0 22px 18px 27px;
}

.cartao__titulo {
  font-family: var(--seb-fonte-corpo);
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  color: var(--seb-branco);
  margin-bottom: 10px;
}

.cartao__texto {
  font-family: var(--seb-fonte-corpo);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: var(--seb-branco);
}

/*
 * No celular o cartão larga a largura fixa e ocupa a faixa, com teto -- é o que o original
 * faz. E é isto que empilha os três: com `width: 100%` eles não caberiam lado a lado, e o
 * `flex-wrap` que a `linha` da D2 já declara os quebra. Por isso o contêiner do estático
 * virar `flex-direction: column` no `@media` não precisou vir junto.
 */
@media (max-width: 768px) {
  .cartao {
    width: 100%;
    max-width: 340px;
  }
}