/* ============================================================
   ADG Vantage — Utilities
   Layout helpers, containers, spacing, dark section wrapper.
   ============================================================ */

/* ─── Container ────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ─── Section ──────────────────────────────────────────────── */
section {
  padding-block: var(--space-16);
}

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

.section-tight {
  padding-block: var(--space-12);
}

/* ─── Dark composition sections ────────────────────────────── */
/* Wrap any section in `.section-dark` to use the on-dark token set.
   Tokens auto-swap; components below adapt via these locally-redefined
   semantic tokens. Doesn't bleed outside the wrapper. */
.section-dark {
  background: var(--color-bg-on-dark);
  color: var(--color-text-on-dark);

  /* Locally swap semantic tokens so components inside read "dark" */
  --color-bg:            var(--color-bg-on-dark);
  --color-surface:       var(--color-surface-on-dark);
  --color-text:          var(--color-text-on-dark);
  --color-text-strong:   var(--color-text-on-dark);
  --color-text-muted:    var(--color-text-muted-on-dark);
  --color-text-subtle:   var(--color-text-subtle-on-dark);
  --color-border:        var(--color-border-on-dark);
  --color-border-strong: var(--color-border-strong-on-dark);
  --color-brand:         var(--color-brand-on-dark);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 {
  color: var(--color-text-on-dark);
}

/* ─── Layout helpers ───────────────────────────────────────── */
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-8); }

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

.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--space-6);
}
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ─── Text alignment ───────────────────────────────────────── */
.text-center  { text-align: center; }
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

/* Centered section heads (subtitle constrained for readability) */
.text-center .section-sub,
.text-center > p {
  margin-inline: auto;
  max-width: 60ch;
}

/* ─── Visibility ───────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 767px) {
  .hide-on-mobile { display: none !important; }
}
@media (min-width: 768px) {
  .hide-on-desktop { display: none !important; }
}