/* ==========================================================================
   Main — layout global compartilhado por todas as seções
   Carregado por último para poder ajustar composições entre componentes.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Respeita o notch/bordas curvas em iPhone no modo paisagem */
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

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

/* Espaçamento vertical padrão de seção */
.section {
  padding-block: var(--section-y);
  position: relative;
}

/* Empurra o conteúdo para baixo do header fixo quando necessário */
.main {
  position: relative;
}

/* Em telas muito largas o conteúdo respira mais sem esticar demais */
@media (min-width: 1920px) {
  :root {
    --container-max: 1400px;
  }
}