/*
 * Composition — CUBE CSS layout primitives.
 *
 * Context-agnostic, cosmetic-free skeletons that own layout and rhythm only.
 * Every value is a token with a sensible default, tunable per-instance via the
 * exposed custom property (e.g. `style="--flow-space: var(--space-lg)"`).
 * Blocks compose these; they never set colors, fonts, or borders.
 */
@layer composition {
  /* Wrapper — centered content column with a consistent gutter. */
  .wrapper {
    --wrapper-max: var(--main-width);
    --wrapper-gutter: var(--main-padding);

    box-sizing: content-box;
    margin-inline: auto;
    max-inline-size: var(--wrapper-max);
    padding-inline: var(--wrapper-gutter);
  }

  /* Region — a vertical band of whitespace (section rhythm). */
  .region {
    --region-space: var(--space-band);

    padding-block: var(--region-space);
  }

  /* Flow / Stack — vertical rhythm between siblings via the owl selector. */
  .flow > * + * {
    margin-block-start: var(--flow-space, var(--space-gap));
  }

  /* Cluster — a wrapping row of items with a shared gap and alignment. */
  .cluster {
    align-items: var(--cluster-align, center);
    column-gap: var(--cluster-space-x, var(--cluster-space, var(--space-gap)));
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--cluster-justify, flex-start);
    row-gap: var(--cluster-space-y, var(--cluster-space, var(--space-gap)));
  }

  /* Repel — push children to opposite ends; collapse to a stack when tight. */
  .repel {
    align-items: var(--repel-align, center);
    display: flex;
    flex-wrap: wrap;
    gap: var(--repel-space, var(--space-gap));
    justify-content: space-between;
  }

  /* Grid — responsive auto-fit grid; wraps when items hit their min size. */
  .grid {
    align-items: var(--grid-align, stretch);
    display: grid;
    gap: var(--grid-space, var(--space-gap));
    grid-template-columns: repeat(
      var(--grid-cols, auto-fit),
      minmax(min(var(--grid-min, var(--col-grid)), 100%), 1fr)
    );
  }

  /* Center — constrain measure and center horizontally (optionally content). */
  .center {
    box-sizing: content-box;
    margin-inline: auto;
    max-inline-size: var(--center-max, 60ch);
  }

  .center[data-center~="intrinsic"] {
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  /* Frame — a fixed aspect-ratio media box that crops its contents. */
  .frame {
    aspect-ratio: var(--frame-ratio, 16 / 9);
    overflow: hidden;
  }

  .frame > :is(img, video) {
    block-size: 100%;
    inline-size: 100%;
    object-fit: var(--frame-fit, cover);
  }

  /* Split — a two-column pairing (copy beside media, form beside links);
     collapses to a stack on small screens. */
  .split {
    align-items: var(--split-align, center);
    display: grid;
    gap: var(--split-space, var(--space-split));
    grid-template-columns: var(--split-cols, 1fr 1fr);
  }

  /* Rail — a fixed side rail beside a fluid column (tour chapters);
     collapses to a stack on small screens. */
  .rail {
    display: grid;
    gap: var(--rail-space, var(--space-xl));
    grid-template-columns: var(--rail-size, var(--col-rail)) 1fr;
  }

  @media (max-width: 48em) /* --breakpoint-md */ {
    .split,
    .rail { grid-template-columns: 1fr; }
  }

  /* ── Variant classes — each sets its primitive's knob; a curated scale,
        not a free axis. Flow steps also work on a single child (the owl
        selector reads the custom property per child). ── */
  .flow-2xs { --flow-space: var(--space-hair); }
  .flow-xs { --flow-space: var(--space-2xs); }
  .flow-sm { --flow-space: var(--space-xs); }
  .flow-md { --flow-space: var(--space-md); }
  .flow-lg { --flow-space: var(--space-step); }
  .flow-xl { --flow-space: var(--space-flow-xl); }

  .cluster-tight { --cluster-space: var(--space-2xs); }
  .cluster-loose { --cluster-space: var(--space-md); }
  .cluster-baseline { --cluster-align: baseline; }
  .cluster-center { --cluster-justify: center; }

  .grid-flush { --grid-space: 0; }
  .grid-tight { --grid-space: var(--space-2xs); }
  .grid-roomy { --grid-space: var(--space-nudge); }
  .grid-loose { --grid-space: var(--space-step); }
  .grid-narrow { --grid-min: var(--col-grid-narrow); }
  .grid-compact { --grid-min: var(--col-grid-compact); }
  .grid-thirds { --grid-cols: 3; --grid-min: 0; }
  .grid-start { --grid-align: start; }

  .split-start { --split-align: start; }
  .split-end { --split-align: end; }

  .region-compact { --region-space: var(--space-2xl); }
}