/* ==========================================================================
   layout.css — layout utilities
   --------------------------------------------------------------------------
   Milestone 1 · Foundation scaffold

   Layer role: `layout` (Phase 6 §5.2).
   Container, section spacing, grid + column spans, stack, flow, hidden, and
   the structural a11y helpers (sr-only). Cross-breakpoint reflow coordination
   belongs to responsive.css (placeholder for later milestones).
   ========================================================================== */

/* Container — Phase 1 §4.2: max 1280, page padding 16 / 28 / 32 / 40 */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

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

@media (min-width: 1024px) {
  .container {
    padding-inline: var(--container-padding-laptop);
  }
}

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

/* Section — vertical spacing per breakpoint (Phase 1 §3 / §4.2) */
.section {
  padding-block: var(--section-space-mobile);
}

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

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

@media (min-width: 1280px) {
  .section {
    padding-block: var(--section-space-desktop);
  }
}

/* Grid — 4 / 8 / 12 columns per breakpoint (Phase 1 §4.2). Column counts can be
   overridden locally via the --grid-cols-* custom properties. */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols-mobile, var(--columns-mobile)), minmax(0, 1fr));
  gap: var(--gutter-mobile);
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(var(--grid-cols-tablet, var(--columns-tablet)), minmax(0, 1fr));
    gap: var(--gutter-tablet);
  }
}

@media (min-width: 1280px) {
  .grid {
    grid-template-columns: repeat(var(--grid-cols-desktop, var(--columns-desktop)), minmax(0, 1fr));
    gap: var(--gutter-desktop);
  }
}

/* Column spans — Phase 1 §4.3. Active from tablet up; below that all content
   stacks to a single column (component reflow is a Milestone 2 concern). */
@media (min-width: 768px) {
  .col-span-2  { grid-column: span 2; }
  .col-span-3  { grid-column: span 3; }
  .col-span-4  { grid-column: span 4; }
  .col-span-6  { grid-column: span 6; }
  .col-span-8  { grid-column: span 8; }
  .col-span-12 { grid-column: span 12; }
}

/* Stack — flex column with a consistent gap (default 24px) */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-24));
}

/* Flow — margin-based vertical rhythm; space via --flow-space (default 24px) */
.flow > * + * {
  margin-top: var(--flow-space, var(--space-24));
}

/* Hidden — removes an element from layout and the accessibility tree.
   !important keeps the utility reliable regardless of load order (the
   documented exception to the Phase 6 §6 no-!important guidance). */
.hidden {
  display: none !important;
}

/* sr-only — visually hidden, still exposed to assistive tech (Phase 1 §17) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}