/*
 * 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: 2rem"`). 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: clamp(3rem, 8vw, 6rem);

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

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

  /* 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, 1rem));
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--cluster-justify, flex-start);
    row-gap: var(--cluster-space-y, var(--cluster-space, 1rem));
  }

  /* 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, 1rem);
    justify-content: space-between;
  }

  /* Grid — responsive auto-fit grid; wraps when items hit their min size. */
  .grid {
    display: grid;
    gap: var(--grid-space, 1rem);
    grid-template-columns: repeat(
      var(--grid-cols, auto-fit),
      minmax(min(var(--grid-min, 16rem), 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);
  }
}