/* =====================================================================
   layout.css — Layout primitives only (Mobile-first)
   - container / stacks / grids / alignment
   - No colors, no “component styling” here
   ===================================================================== */

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--px);
  padding-right: var(--px);
}

/* Vertical rhythm helpers */
.section{ padding: var(--s-6) 0; }
.section--tight{ padding: var(--s-5) 0; }

.stack{ display: grid; gap: var(--gap); }
.stack--tight{ gap: 12px; }
.stack--loose{ gap: 22px; }

.row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: center;
}

.row--top{ align-items: flex-start; }
.row--between{ justify-content: space-between; }
.row--center{ justify-content: center; }

/* Grid primitives */
.grid{ display: grid; gap: var(--gap); }
.grid--tight{ gap: 12px; }
.grid--loose{ gap: 22px; }

/* Mobile default: 1 column by default.
   Enable columns via utility classes at breakpoints. */
@media (min-width: 768px){
  .grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px){
  .grid-5{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid-6{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Alignment */
.center{ display: grid; place-items: center; }
.center-x{ display: grid; justify-items: center; }
.center-y{ display: grid; align-items: center; }

.sticky-top{ position: sticky; top: 0; z-index: var(--z-header); }

/* Prevent layout overflow issues (common on mobile) */
.minw-0{ min-width: 0; }
.overflow-hidden{ overflow: hidden; }