/* =========================================================================
   LAYOUT — container, grid de 12 colunas, seções e utilitários
   =========================================================================
   Nada aqui conhece um componente específico. São os ossos da página.
   ========================================================================= */

/* ---- Container ---------------------------------------------------------
   Largura máxima única para o site inteiro. Todo conteúdo se alinha nela —
   é o que faz as seções parecerem parte do mesmo documento. */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Container estreito, na medida de leitura confortável. */
.container--text {
  max-width: var(--container-text);
}

/* ---- Grid de 12 colunas ------------------------------------------------
   Mobile: coluna única. A partir de 768px o grid de 12 entra em cena.
   As classes .col-* só valem no desktop, de propósito: no mobile tudo
   empilha e não há o que decidir. */

.grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  /* grid-column-end (e nao o atalho grid-column) e' deliberado: o atalho
     zera o grid-column-start, entao uma .col-6 combinada com .start-7
     colapsaria para uma unica coluna. Separando as duas propriedades,
     span e start compoem em qualquer ordem. */
  .col-1 { grid-column-end: span 1; }
  .col-2 { grid-column-end: span 2; }
  .col-3 { grid-column-end: span 3; }
  .col-4 { grid-column-end: span 4; }
  .col-5 { grid-column-end: span 5; }
  .col-6 { grid-column-end: span 6; }
  .col-7 { grid-column-end: span 7; }
  .col-8 { grid-column-end: span 8; }
  .col-9 { grid-column-end: span 9; }
  .col-10 { grid-column-end: span 10; }
  .col-11 { grid-column-end: span 11; }
  .col-12 { grid-column-end: span 12; }

  .start-1 { grid-column-start: 1; }
  .start-2 { grid-column-start: 2; }
  .start-3 { grid-column-start: 3; }
  .start-4 { grid-column-start: 4; }
  .start-5 { grid-column-start: 5; }
  .start-6 { grid-column-start: 6; }
  .start-7 { grid-column-start: 7; }
  .start-8 { grid-column-start: 8; }
  .start-9 { grid-column-start: 9; }
  .start-10 { grid-column-start: 10; }
  .start-11 { grid-column-start: 11; }
  .start-12 { grid-column-start: 12; }
}

/* Grade automática para conjuntos de cards de largura semelhante.
   auto-fit + minmax resolve o responsivo sem media query por quantidade. */
.grid-auto {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.grid-auto--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

/* ---- Seções ------------------------------------------------------------
   O ritmo vertical da página inteira sai daqui. Uma seção nunca define
   seu próprio padding solto. */

.section {
  padding-block: var(--section-padding-y);
  position: relative;
}

.section--tight {
  padding-block: var(--space-16);
}

.section--subtle {
  background-color: var(--color-bg-subtle);
}

.section--muted {
  background-color: var(--color-bg-muted);
}

/* Seção escura: inverte o texto e tudo que herda dele. */
.section--inverse {
  background-color: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.section--inverse h1,
.section--inverse h2,
.section--inverse h3,
.section--inverse h4 {
  color: var(--color-text-inverse);
}

.section--inverse .text-muted,
.section--inverse .lead {
  color: var(--color-text-inverse-muted);
}

.section--inverse a {
  color: var(--color-accent-on-dark);
}

.section--inverse hr,
.section--inverse .divider {
  border-color: var(--color-border-inverse);
}

/* Cabeçalho de seção: eyebrow + título + linha de apoio.
   Padrão único, usado por toda seção da LP. */
.section-header {
  max-width: 64ch;
  margin-bottom: var(--space-12);
}

.section-header--center {
  margin-inline: auto;
  text-align: center;
}

.section-header > * + * {
  margin-top: var(--space-4);
}

/* ---- Pilha vertical ----------------------------------------------------
   O espaçamento vertical mais comum do sistema: "empilhe estes filhos
   com um espaço constante entre eles". Evita margem solta em componente. */

.stack        > * + * { margin-top: var(--space-4);  }
.stack-sm     > * + * { margin-top: var(--space-2);  }
.stack-lg     > * + * { margin-top: var(--space-6);  }
.stack-xl     > * + * { margin-top: var(--space-10); }

/* ---- Linha horizontal --------------------------------------------------- */

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.cluster--between {
  justify-content: space-between;
}

.cluster--center {
  justify-content: center;
}

/* ---- Utilitários de texto ----------------------------------------------
   Deliberadamente poucos. Um sistema de utilitários grande vira um
   framework paralelo e o design system perde a função. */

.text-muted   { color: var(--color-text-muted); }
.text-subtle  { color: var(--color-text-subtle); }
.text-accent  { color: var(--color-accent-text); }
.text-center  { text-align: center; }
.text-balance { text-wrap: balance; }

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .lead { font-size: var(--text-xl); }
}

.measure {
  max-width: var(--container-text);
}

/* ---- Escala de display -------------------------------------------------
   Para quando o tamanho visual precisa divergir do nível semântico do
   heading — o h1 do hero é maior que o h1 padrão sem virar outro elemento. */

.display-1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

.display-2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

@media (min-width: 480px) {
  .display-1 { font-size: var(--text-5xl); }
  .display-2 { font-size: var(--text-4xl); }
}

@media (min-width: 1024px) {
  .display-1 { font-size: var(--text-6xl); }
  .display-2 { font-size: var(--text-5xl); }
}

/* ---- Divisor ------------------------------------------------------------ */

.divider {
  border: 0;
  border-top: var(--border-width) solid var(--color-border);
  margin-block: var(--space-12);
}

/* Régua curta em bronze — a marca d'água que abre as seções. */
.rule {
  width: var(--space-12);
  height: var(--border-width-thick);
  background-color: var(--color-accent);
  border: 0;
}

.section--inverse .rule {
  background-color: var(--color-accent-on-dark);
}

/* ---- Visibilidade responsiva -------------------------------------------- */

@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}