/**
 * SCBL — Container & Section Rhythm
 *
 * One breakpoint set, one container, one section spacing scale.
 * Block CSS only adds media queries when something visibly changes
 * at that width (column counts, hide/show, etc.).
 */

:root {
  /* Breakpoints — reference values; CSS uses (min-width: <bp>) below. */
  --bp-sm:  40rem;   /* 640  */
  --bp-md:  48rem;   /* 768  */
  --bp-lg:  64rem;   /* 1024 */
  --bp-xl:  80rem;   /* 1280 */
  --bp-2xl: 96rem;   /* 1536 */

  /* Container max-widths — match theme.json layout. */
  --container-narrow:  45rem;     /* 720  — long-form text */
  --container-default: 82.5rem;   /* 1320 — most sections (theme.json contentSize) */
  --container-wide:    105rem;    /* 1680 — full-bleed designs (theme.json wideSize) */

  /* Fluid horizontal padding — scales smoothly phone → ultrawide */
  --container-padding: clamp(1rem, 4vw, 5rem);

  /* Section vertical rhythm */
  --section-py:       clamp(2.5rem, 6vw, 6rem);
  --section-py-tight: clamp(1.5rem, 3vw, 3rem);
  --section-py-loose: clamp(3.5rem, 8vw, 8rem);
}

.container {
  width: 100%;
  max-width: var(--container-default);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  box-sizing: border-box;
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }
.container--full   { max-width: 100%; padding-inline: 0; }

.section { padding-block: var(--section-py); }
.section--tight { padding-block: var(--section-py-tight); }
.section--loose { padding-block: var(--section-py-loose); }
.section--flush { padding-block: 0; }