/* ============================================
   layout.css — Grid, Containers, Spacing
   ============================================ */

/* Container is defined in base.css */

/* Section padding helper */
.section-pad { padding: var(--section-py) 0; }

/* Flex helpers */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.gap-sm       { gap: 12px; }
.gap-md       { gap: 24px; }
.gap-lg       { gap: 48px; }

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

/* Text alignment */
.text-center { text-align: center; }
.text-left   { text-align: left; }

/* Max-width constraints */
.max-w-sm  { max-width: 480px; }
.max-w-md  { max-width: 640px; }
.max-w-lg  { max-width: 800px; }
.max-w-xl  { max-width: 960px; }

/* Margin helpers */
.mx-auto   { margin-left: auto; margin-right: auto; }
.mb-sm     { margin-bottom: 16px; }
.mb-md     { margin-bottom: 32px; }
.mb-lg     { margin-bottom: 64px; }