/* ============================================================
   layouts.css
   Every Layout primitives, exposed as composable utility classes.

   Source provenance:
   - .stack is based on the canonical CSS published at
     https://every-layout.dev/layouts/stack/ (the freely readable
     primitive), adapted to use --space from tokens.css.
   - .cover, .center, .cluster, .box, .grid, .frame are
     RECONSTRUCTED from widely documented intrinsic-CSS techniques.
     The Every Layout pages for these primitives are paywalled,
     so they are NOT copied from the source. Each reconstructed
     block is marked with a comment.

   No @media queries — responsiveness is intrinsic.
   ============================================================ */


/* ------------------------------------------------------------
   .cover — page shell.
   Min-block-size full viewport, header on top, footer on bottom,
   one designated main element that takes the remaining space.

   Reconstructed — not from Every Layout source.
   Technique: flex column with auto margins on the first/last
   children's neighbours, achieved here via justify-content and
   a .cover__main element that flex-grows.
   ------------------------------------------------------------ */
.cover {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  min-block-size: 100svh; /* respect mobile safe-areas where supported */
  padding-inline: var(--content-padding-inline);
}

.cover > * {
  margin-block: 0;
}

.cover > .cover__main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-xl);
}


/* ------------------------------------------------------------
   .center — horizontally centered with a max measure.

   Reconstructed — not from Every Layout source.
   Technique: max-inline-size + margin-inline: auto, plus
   box-sizing safety and an optional --gutter for breathing room.
   ------------------------------------------------------------ */
.center {
  box-sizing: content-box;
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter, 0);
}

/* Wider variant for hero blocks / image-heavy sections */
.center--wide {
  max-inline-size: calc(var(--measure) * 1.4);
}

.center--full {
  max-inline-size: calc(var(--measure) * 1.8);
}


/* ------------------------------------------------------------
   .stack — vertical rhythm via the owl selector.
   Based on the canonical Every Layout Stack CSS.
   See: https://every-layout.dev/layouts/stack/

   The owl selector `* + *` puts margin-block-start only between
   siblings, never above the first or below the last child.
   --space is overridable per-nested-stack.
   ------------------------------------------------------------ */
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * {
  margin-block: 0;
}

.stack > * + * {
  margin-block-start: var(--space, var(--space-m));
}

.stack-small  { --space: var(--space-s); }
.stack-large  { --space: var(--space-l); }
.stack-xlarge { --space: var(--space-xl); }

/* Split stack: when applied, the element after the nth-child(n)
   is pushed to the bottom. Useful inside cards where meta sits
   at the bottom regardless of body length. */
.stack--split > :nth-child(1) {
  margin-block-end: auto;
}


/* ------------------------------------------------------------
   .cluster — flex-wrap row with gap.
   For tag rows, nav, footer links, meta lists.

   Reconstructed — not from Every Layout source.
   Technique: display: flex; flex-wrap: wrap; gap. align-items
   defaults to center; justify-content can be overridden via
   --cluster-justify.
   ------------------------------------------------------------ */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space, var(--space-s));
  align-items: center;
  justify-content: var(--cluster-justify, flex-start);
}

/* Variant: distribute items to the ends (e.g. header: name | nav) */
.cluster--split { --cluster-justify: space-between; }
.cluster--end   { --cluster-justify: flex-end; }


/* ------------------------------------------------------------
   .box — padding + optional border.

   Reconstructed — not from Every Layout source.
   Technique: padding all sides equal to --box-padding;
   border uses --box-border-* tokens; the box establishes a new
   block-formatting context so margins from descendants don't
   collapse out of it.
   ------------------------------------------------------------ */
.box {
  padding: var(--box-padding);
  border: var(--box-border-width) solid var(--box-border-color);
  border-radius: var(--box-radius);
  background-color: var(--box-bg, transparent);
  /* Prevent margin-collapse from .stack descendants */
  display: flow-root;
}

.box--invert {
  --box-bg: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}


/* ------------------------------------------------------------
   .grid — intrinsic auto-fit grid.

   Reconstructed — not from Every Layout source.
   Technique: repeat(auto-fit, minmax(--grid-min, 1fr)) gives
   columns that wrap based on their own min size, no media
   queries needed. min() prevents overflow on narrow viewports.
   ------------------------------------------------------------ */
.grid {
  display: grid;
  gap: var(--space, var(--space-m));
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--grid-min), 100%), 1fr)
  );
}


/* ------------------------------------------------------------
   .frame — aspect-ratio image wrapper.

   Reconstructed — not from Every Layout source.
   Technique: aspect-ratio on the wrapper, then position the
   child img to object-fit cover the area.
   ------------------------------------------------------------ */
.frame {
  aspect-ratio: var(--frame-ratio);
  overflow: hidden;
  position: relative;
  background-color: var(--color-rule);
  border-radius: var(--box-radius);
}

.frame > img,
.frame > video,
.frame > svg {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.frame--square   { --frame-ratio: 1 / 1; }
.frame--portrait { --frame-ratio: 3 / 4; }
.frame--wide     { --frame-ratio: 21 / 9; }