/* layout.css */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gap-md);
}

.section {
  padding: var(--section-padding);
}

.section-bg-alt {
  background-color: var(--bg-secondary);
}

/* Flex Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--gap-sm); }
.gap-md { gap: var(--gap-md); }
.gap-lg { gap: var(--gap-lg); }

/* Grid Utilities */
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Helpers */
.text-center { text-align: center; }
.text-left { text-align: left; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-lg { margin-bottom: var(--gap-lg); }
.w-full { width: 100%; }

.section-header {
  max-width: 800px;
  margin: 0 auto var(--gap-lg) auto;
  text-align: center;
}