/*
  Layout: shell, ritmo de secao e grids. Espacamento entre irmaos vem de
  `gap`, nunca de margens por elemento que colapsam ou dobram.
*/

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

.section {
  padding-block: var(--space-8);
  /*
    A faixa e o cabecalho sao fixos: sem esta margem, clicar numa ancora do
    menu para a secao com o titulo escondido atras deles.
  */
  scroll-margin-top: calc(var(--ticker-h, 0px) + var(--header-h, 0px) + var(--space-4));
}

.section--tight { padding-block: var(--space-7); }
.section--loose { padding-block: var(--space-9); }

.section + .section {
  border-top: var(--border-hairline) solid var(--color-border);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stack--sm { gap: var(--space-2); }
.stack--lg { gap: var(--space-6); }

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

/* Grid que reduz colunas antes de comprometer texto, controles ou imagens. */
.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.grid--halves {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 48rem) {
  .grid--halves { grid-template-columns: 1fr 1fr; }
}

.media {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--color-surface-raised);
  border-radius: var(--radius-sm);
}

.media--portrait { aspect-ratio: 3 / 4; }
.media--wide { aspect-ratio: 16 / 9; }