/* ==========================================================================
   HWR Space System — layout primitives (classes only)

   Values are NOT defined here. They come from the Bricks Variables Manager
   (categories "Space / Primitives" and "Space / Semantic").
   Canonical values live in hwr-tokens.source.css — do not enqueue that file.

   Every var() below carries a literal fallback as the LAST argument. If Bricks
   fails to generate its Style Manager CSS file (filesystem permissions, cache
   config), the site renders slightly off instead of collapsing to zero gap.
   Fallbacks are the fluid MINIMUM of each token — degrading small beats
   degrading huge.

   ENQUEUE: yes. Load before hwr-type.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   OVERRIDE PATTERN

   Every primitive reads a LOCAL prop first, so any element overrides one
   value without a new class and without leaving the token system:

     Element -> Style -> CSS -> Custom:
       --hwr-stack-space: var(--hwr-space-lg);

   Never write .hwr-stack--gap-32. Set the local prop.
   -------------------------------------------------------------------------- */


/* --- Section --------------------------------------------------------------
   Owns vertical rhythm AND the horizontal gutter. Nothing else sets these.

   NOTE: mirror these two declarations in Bricks Theme Styles -> Element >
   Section so every new section is correct with zero clicks. Because the
   modifiers below set the CUSTOM PROPERTY rather than the padding, they beat
   the theme style regardless of specificity or source order. */
.hwr-section {
  padding-block: var(--hwr-section-space-block, var(--hwr-section-space, 4rem));
  padding-inline: var(--hwr-section-gutter, var(--hwr-gutter, 1.25rem));
}

.hwr-section--tight { --hwr-section-space-block: var(--hwr-section-space-tight, 3rem); }
.hwr-section--loose { --hwr-section-space-block: var(--hwr-section-space-loose, 5rem); }
.hwr-section--flush        { padding-block: 0; }
.hwr-section--flush-top    { padding-block-start: 0; }
.hwr-section--flush-bottom { padding-block-end: 0; }

/* Collapse the seam between two same-background sections */
.hwr-section--seam + .hwr-section--seam { padding-block-start: 0; }


/* --- Container ------------------------------------------------------------
   Width only. Never add padding here — the section owns the gutter.
   Mirror in Theme Styles -> Element > Container (width + zero padding). */
.hwr-container {
  inline-size: 100%;
  max-inline-size: var(--hwr-container-size, var(--hwr-container, 75rem));
  margin-inline: auto;
}

.hwr-container--narrow { --hwr-container-size: var(--hwr-container-narrow, 55rem); }
.hwr-container--wide   { --hwr-container-size: var(--hwr-container-wide, 87.5rem); }
.hwr-container--full   { --hwr-container-size: 100%; }


/* --- Stack: vertical flex, one gap value -------------------------------- */
.hwr-stack {
  display: flex;
  flex-direction: column;
  gap: var(--hwr-stack-space, var(--hwr-gap-stack, 1rem));
}

.hwr-stack--tight   { --hwr-stack-space: var(--hwr-gap-tight, 0.25rem); }
.hwr-stack--cluster { --hwr-stack-space: var(--hwr-gap-cluster, 0.75rem); }
.hwr-stack--block   { --hwr-stack-space: var(--hwr-gap-block, 1.5rem); }
.hwr-stack--section { --hwr-stack-space: var(--hwr-gap-section, 2rem); }


/* --- Flow: margin-based rhythm for rich text / ACF WYSIWYG ---------------
   Use where you cannot control the markup (the_content, editor output). */
.hwr-flow > * + * {
  margin-block-start: var(--hwr-flow-space, var(--hwr-gap-stack, 1rem));
}

.hwr-flow :is(h2, h3, h4) { --hwr-flow-space: var(--hwr-gap-block, 1.5rem); }
.hwr-flow :is(h2, h3, h4) + * { --hwr-flow-space: var(--hwr-gap-tight, 0.25rem); }
.hwr-flow :is(ul, ol) > li + li { margin-block-start: var(--hwr-gap-tight, 0.25rem); }


/* --- Cluster: wrapping horizontal group (buttons, tags, logos) ---------- */
.hwr-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hwr-cluster-space, var(--hwr-gap-cluster, 0.75rem));
}

.hwr-cluster--inline  { --hwr-cluster-space: var(--hwr-gap-inline, 0.5rem); }
.hwr-cluster--loose   { --hwr-cluster-space: var(--hwr-gap-stack, 1rem); }
.hwr-cluster--center  { justify-content: center; }
.hwr-cluster--between { justify-content: space-between; }


/* --- Grid: intrinsic by default, explicit via modifiers ----------------- */
.hwr-grid {
  display: grid;
  gap: var(--hwr-grid-row-space, var(--hwr-grid-space, var(--hwr-gap-grid, 1.125rem)))
       var(--hwr-grid-column-space, var(--hwr-grid-space, var(--hwr-gap-grid, 1.125rem)));
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--hwr-grid-min, 17.5rem), 100%), 1fr)
  );
}

.hwr-grid--2 { --hwr-grid-min: 24rem; }
.hwr-grid--3 { --hwr-grid-min: 17.5rem; }
.hwr-grid--4 { --hwr-grid-min: 13.75rem; }
.hwr-grid--tight    { --hwr-grid-space: var(--hwr-space-xs, 0.75rem); }
.hwr-grid--loose    { --hwr-grid-space: var(--hwr-gap-block, 1.5rem); }
.hwr-grid--seamless { --hwr-grid-space: 0; }


/* --- Card: padding role, nothing else ----------------------------------- */
.hwr-card {
  padding: var(--hwr-card-space, var(--hwr-pad-card, 1.125rem));
}

.hwr-card--lg    { --hwr-card-space: var(--hwr-pad-card-lg, 1.5rem); }
.hwr-card--panel { --hwr-card-space: var(--hwr-pad-panel, 2rem); }
.hwr-card--flush { --hwr-card-space: 0; }


/* --- Split: two-up that collapses without a breakpoint -------------------
   Shorthand gap, not column-gap: when the columns stack, the SAME token
   becomes the row gap — fluid min (32) instead of a 60px canyon. */
.hwr-split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hwr-split-space, var(--hwr-gap-layout, 2rem));
}

.hwr-split > * {
  flex-grow: 1;
  flex-basis: calc((var(--hwr-split-threshold, 40rem) - 100%) * 999);
}

.hwr-split--tight { --hwr-split-space: var(--hwr-gap-block, 1.5rem); }
.hwr-split--loose { --hwr-split-space: var(--hwr-space-2xl, 3rem); }


/* --- Measure: cap line length on any text block -------------------------- */
.hwr-measure { max-inline-size: var(--hwr-measure, 68ch); }
.hwr-measure--center { margin-inline: auto; }


/* --------------------------------------------------------------------------
   DENSITY SCOPES — optional. Retune a whole region by remapping the semantic
   layer, not by touching any element. Apply to a section or the body.
   -------------------------------------------------------------------------- */

.hwr-density--compact {
  --hwr-section-space: var(--hwr-space-2xl, 3rem);
  --hwr-gap-section: var(--hwr-space-lg, 1.5rem);
  --hwr-gap-block: var(--hwr-space-md, 1.125rem);
  --hwr-gap-grid: var(--hwr-space-sm, 1rem);
}

.hwr-density--editorial {
  --hwr-section-space: var(--hwr-space-4xl, 5rem);
  --hwr-gap-section: var(--hwr-space-2xl, 3rem);
  --hwr-gap-block: var(--hwr-space-xl, 2rem);
}