/*
  Cap 4b · O que vem em todo site (Figma 123:2 › "CAP 4b · O que vem em todo
  site" 203:2), 1440 × 790.
  Medidas do Figma:
    título a 120px do topo (Geist Medium 56), apoio de 382px à direita
      (Geist 16/150%, texto-apoio, 4px abaixo do topo do título);
    grade 131px abaixo do topo do título: 5 colunas de 227 com gap 16, duas
      linhas (200 e 203 de altura); 120px de respiro embaixo;
    card: superficie/vidro, borda 1px linha, raio 24, padding 24, gap 10;
      número JetBrains Mono 13 (destaque), título Geist Medium 19 (−1%),
      texto Geist 15/145% (texto-apoio).
  Aqui: uma coluna no celular (cards compactos), duas no tablet. A partir de
  1024px, as colunas e o encaixe na tela ficam em assets/css/encaixe.css.
*/
/* A partir de 1024px (faixas B e C), esta seção tem regras em assets/css/encaixe.css */

.secao-incluso {
  padding-block: var(--secao-respiro);
  background-color: var(--fundo);
}

/* ------------------------------------------------------------------
   Título e apoio
   ------------------------------------------------------------------ */
.incluso-cabecalho {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.incluso-titulo {
  color: var(--texto);
  font-size: clamp(2rem, 3.89vw, var(--titulo-secao));
  font-weight: var(--peso-medio);
  line-height: var(--titulo-secao-altura);
  letter-spacing: var(--titulo-secao-letra);
}

.incluso-apoio {
  max-width: 382px;
  color: var(--texto-apoio);
  font-size: var(--apoio);
  line-height: var(--apoio-altura);
}

/* ------------------------------------------------------------------
   Lista: uma coluna, cards compactos
   ------------------------------------------------------------------ */
.incluso-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.incluso-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border-radius: var(--raio-24);
  background-color: var(--superficie-vidro);
  box-shadow: inset 0 0 0 1px var(--linha);
}

.incluso-numero {
  color: var(--destaque);
  font-family: var(--fonte-mono);
  font-size: var(--rotulo-numero-etapa);
  line-height: normal;
}

.incluso-item-titulo {
  color: var(--texto);
  font-size: var(--titulo-item);
  font-weight: var(--peso-medio);
  letter-spacing: var(--titulo-item-letra);
  line-height: normal;
}

.incluso-item-texto {
  color: var(--texto-apoio);
  font-size: var(--apoio-etapa);
  line-height: var(--apoio-etapa-altura);
}

/* ------------------------------------------------------------------
   Tablet (768 a 1023px): duas colunas; os cards de uma linha ficam com a
   mesma altura (stretch da grade)
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
  .incluso-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 48px;
  }

  .incluso-item {
    gap: 10px;
    padding: 24px;
  }
}