/* ======================================================
   EVOLEADZ — layout.css (COMPLET)
   - Containers
   - Sections (bg/surface)
   - Utility layout helpers
   ====================================================== */

/* Container */
.evo-container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Sections */
.evo-section{
  padding-block: clamp(56px, 6vw, 92px);
}

.evo-section--soft{
  background: var(--c-surface-soft);
}

.evo-section--dark{
  background: var(--c-bg);
  color: var(--c-text-inv);
}
.evo-section--dark p{
  color: var(--c-text-inv-muted);
}

/* Dark soft */
.evo-section--dark-soft{
  background: var(--c-bg-2);
  color: var(--c-text-inv);
}
.evo-section--dark-soft p{
  color: var(--c-text-inv-muted);
}

/* Borders */
.evo-divider{
  border-top: 1px solid var(--c-border);
}

/* Grid helpers */
.evo-grid{
  display: grid;
  gap: 24px;
}
@media (min-width: 1024px){
  .evo-grid--2{ grid-template-columns: 1fr 1fr; }
  .evo-grid--3{ grid-template-columns: repeat(3, 1fr); }
}

/* Spacing helpers */
.evo-mt-1{ margin-top: 8px; }
.evo-mt-2{ margin-top: 16px; }
.evo-mt-3{ margin-top: 24px; }
.evo-mt-4{ margin-top: 36px; }

.evo-mb-1{ margin-bottom: 8px; }
.evo-mb-2{ margin-bottom: 16px; }
.evo-mb-3{ margin-bottom: 24px; }
.evo-mb-4{ margin-bottom: 36px; }