/*
 * Warm Refresh — layout.css
 * Grid/flex primitives and a small, fixed utility set (~20 classes).
 * This file adds NEW primitives; it never replaced Argon/Bootstrap's old
 * .row / .col-* grid classes. Those were defined by
 * src/assets/css/argon-design-system.css, unlinked from every page in the
 * Task 3 chrome cutover and deleted outright in Task 14. Two out-of-scope
 * pages (/privacy, /terms - missed from the original Warm Refresh page
 * list) used .row/.col-lg-12/.mx-auto markup with no grid CSS backing it
 * since Task 3; Task 15 converted both to this file's .container instead.
 *
 * .container max-widths/breakpoints below intentionally match the old
 * Argon .container rule so nothing reflowed when this file was wired in:
 *   >=576px  -> 540px
 *   >=768px  -> 720px
 *   >=992px  -> 960px
 *   >=1200px -> 1040px
 */

.container {
  width: 100%;
  padding-right: var(--space-4);
  padding-left: var(--space-4);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1040px;
  }
}

/* Vertical rhythm wrapper for page sections */
.section {
  padding: var(--space-9) 0;
}

/* Spacing utilities */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

/* Text/flex utilities */
.text-center { text-align: center; }

.d-flex { display: flex; }

.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }

/* Visually hidden but still accessible to assistive tech */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}