/* =============================================================================
   QuickCare Design System — LAYOUT PRIMITIVES   (@layer qc.base)
   -----------------------------------------------------------------------------
   Reusable, qc-namespaced layout building blocks. New class names → zero
   collision with Bootstrap, safe to use immediately. Mobile-first.
   ========================================================================== */
@layer qc.base {

  /* Centered content column with fluid side padding. */
  .qc-container {
    width: 100%;
    max-width: var(--qc-container-max);
    margin-inline: auto;
    padding-inline: var(--qc-container-pad);
  }
  .qc-container--narrow { max-width: var(--qc-container-narrow); }
  .qc-container--wide   { max-width: var(--qc-container-wide); }
  .qc-container--flush  { padding-inline: 0; }

  /* Vertical section rhythm. */
  .qc-section { padding-block: var(--qc-section-y); }
  .qc-section--tight { padding-block: var(--qc-space-8); }
  .qc-section--muted { background: var(--qc-surface-muted); }
  .qc-section--sunken { background: var(--qc-surface-sunken); }
  .qc-section--inverse { background: var(--qc-surface-inverse); color: var(--qc-text-on-dark); }

  /* Stack: consistent vertical flow between children. Override gap with --qc-stack-gap. */
  .qc-stack { display: flex; flex-direction: column; }
  .qc-stack > * + * { margin-block-start: var(--qc-stack-gap, var(--qc-space-4)); }

  /* Cluster: wrapping horizontal group (button rows, tag lists, meta). */
  .qc-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qc-cluster-gap, var(--qc-space-3));
  }

  /* Auto-fit responsive grid: 1 column on phones, fills as space allows.
     Tune the minimum track with --qc-grid-min. */
  .qc-grid {
    display: grid;
    gap: var(--qc-grid-gap, var(--qc-space-6));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--qc-grid-min, 16rem)), 1fr));
  }

  /* Center a single child both axes. */
  .qc-center { display: grid; place-items: center; }

  /* Constrain measure for readable prose. */
  .qc-prose { max-width: 68ch; }
}