/**
 * Layout - Container, seções, grid
 * Estrutura da página; sem componentes visuais.
 */

.site-container {
  width: 100%;
  max-width: var(--container-default);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

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

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

.site-section {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.site-section--sm {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.site-section--lg {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.site-grid {
  display: grid;
  gap: var(--space-8);
}

.site-grid--2 { grid-template-columns: repeat(2, 1fr); }
.site-grid--3 { grid-template-columns: repeat(3, 1fr); }
.site-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .site-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .site-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .site-grid--4,
  .site-grid--3,
  .site-grid--2 { grid-template-columns: 1fr; }
  .site-container { padding-left: var(--space-4); padding-right: var(--space-4); }
}

.site-split {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 768px) {
  .site-split { grid-template-columns: 1fr 1fr; }
}

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

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

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

.site-center {
  text-align: center;
}

.site-center .site-stack {
  align-items: center;
}

.site-center .site-stack > * {
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}