/* 📖 layout.css — Grid, containers e estrutura de seções
   ⚠️  Alterar? Depende de tokens.css */

/* ─── Container principal ─── */

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

@media (min-width: 768px) {
  .container { padding-inline: var(--space-8); }
}

@media (min-width: 1280px) {
  .container { padding-inline: var(--space-12); }
}

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

/* ─── Seções ─── */

.section {
  position: relative;
  padding-block: var(--section-py-sm);
  overflow: hidden;
}

@media (min-width: 768px) {
  .section { padding-block: var(--section-py); }
}

@media (min-width: 1024px) {
  .section { padding-block: var(--section-py-lg); }
}

.section__header {
  text-align: center;
  max-width: var(--max-width-text);
  margin-inline: auto;
  margin-bottom: var(--space-16);
}

.section__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.section__label::before,
.section__label::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--color-accent);
  opacity: 0.5;
}

.section__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-6);
}

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

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

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

/* ─── Grid utilities ─── */

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
}

/* ─── Split layout (texto + visual) ─── */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }

  .split--wide-right {
    grid-template-columns: 5fr 7fr;
  }

  .split--wide-left {
    grid-template-columns: 7fr 5fr;
  }

  .split--reverse > *:first-child {
    order: 2;
  }
}

/* ─── Divisor visual ─── */

.divider {
  width: 100%;
  height: 1px;
  background: var(--border-muted);
}

/* ─── Spacers ─── */

.spacer-sm  { height: var(--space-8); }
.spacer-md  { height: var(--space-16); }
.spacer-lg  { height: var(--space-24); }