/*
 * Lista de itens (etapa E3) -- 10 usos em duas páginas: 7 no fale-conosco, 3 no seguranca.
 *
 * **A moldura não mora aqui**, pela mesma regra da E1 e da E2. No `main.css` o que cerca a
 * lista é da página e diferente em cada uma: `max-width: 927px` no item do seguranca,
 * `padding: 0 18px` + `margin-bottom: 58px` na lista do fale-conosco. Nada disso é
 * geometria compartilhada; chega com a página, no bloco G. Daí `lista-de-itens__item` sair
 * do template sem nenhuma regra -- ela existe para a página alcançar cada item.
 *
 * O que fica é a **identidade**: a coluna, o espaço entre os itens e a escala do texto.
 *
 * **O `gap` fica, e não é moldura.** Ele mede a distância de um item ao outro *dentro* do
 * componente, e é a única medida que as duas páginas declaram de forma consistente. Como
 * ele muda junto com a escala do texto -- 32px na compacta, 25px no destaque -- ele é parte
 * da variante, e não um campo que o editor escolhe.
 *
 * A escala é transcrita do original. O que **não** é transcrito é `font-family: Arial`, que
 * o `main.css` repete em cada uma das quatro regras: aqui é o token da D3.
 */

.lista-de-itens {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/*
 * `compacta` é o `.lista-de-itens` acima e não tem regra própria: é o desenho de 7 dos 10
 * itens, portanto o base. O template continua emitindo `lista-de-itens--compacta` porque é
 * por ele que a página do bloco G vai alcançar esta variante -- a mesma escolha que a E1
 * fez com `banner--cover`.
 */
.lista-de-itens--destaque {
  gap: 25px;
}

.lista-de-itens__titulo {
  font-family: var(--seb-fonte-corpo);
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: var(--seb-azul);

  /*
   * O respiro entre o título e o parágrafo do mesmo item, transcrito do original (4px na
   * compacta, 6px no destaque). É a única medida de margem que fica no componente, e fica
   * porque é interna a ele: o `base.css` zera a margem de `<h3>` e `<p>`, então sem isto os
   * dois saem colados. A moldura em volta da lista continua sendo da página.
   */
  margin-bottom: 4px;
}

.lista-de-itens__texto {
  font-family: var(--seb-fonte-corpo);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--seb-azul);
}

.lista-de-itens--destaque .lista-de-itens__titulo {
  font-size: 28px;
  margin-bottom: 6px;
}

.lista-de-itens--destaque .lista-de-itens__texto {
  font-size: 20px;
}

/*
 * Só o destaque diminui no celular, e isso é medido: o `main.css` tem `@media` para
 * `.item__title`/`.item__text` do seguranca e **nenhuma** para os `.info__*` do
 * fale-conosco, que ficam em 18px nos dois tamanhos de tela.
 */
@media (max-width: 768px) {
  .lista-de-itens--destaque {
    gap: 20px;
  }

  .lista-de-itens--destaque .lista-de-itens__titulo {
    font-size: 20px;
    line-height: 23px;
  }

  .lista-de-itens--destaque .lista-de-itens__texto {
    font-size: 16px;
    line-height: 22px;
  }
}