/*
 * Layout-Primitive nach Every Layout. Sie setzen nur Anordnung, keine Farben
 * und keine Schrift. Anpassung über Custom Properties (--space, --threshold,
 * --minimum, --n/--d, ...). Komponenten setzen sie zusammen.
 */
@layer layout {
  /* Stack: vertikaler Rhythmus zwischen Geschwistern. */
  .stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

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

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

  /* Box: gepolsterter Behälter. Rahmen statt Outline, damit Kontrast- und
     Skelett-Linien nicht an der Box-Regel scheitern. */
  .box {
    padding: var(--box-padding, var(--space-l));
    border: var(--border-thin) solid transparent;
    border-radius: var(--radius-box);
  }

  /* Center: zentrierte Spalte mit festem Randabstand. Keine Höchstbreite:
     Der Inhalt nimmt, was zwischen den Rändern frei ist (--center-max
     begrenzt bei Bedarf die Gesamtbreite). Die volle Breite (inline-size)
     hält sie auch als Kind eines Stack, wo automatische Ränder sonst auf die
     Inhaltsbreite schrumpfen. */
  .center {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: var(--center-max, none);
    margin-inline: auto;
    padding-inline: var(--content-edge);
  }

  /* Cluster: umbrechende Gruppe. */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space, var(--space-m));
    justify-content: var(--cluster-justify, flex-start);
    align-items: var(--cluster-align, center);
  }

  /* Sidebar: Seitenleiste neben fließendem Inhalt, bricht von selbst um. */
  .with-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space, var(--space-l));
  }

  .with-sidebar > :first-child {
    flex-basis: var(--sidebar-width, var(--layout-sidebar));
    flex-grow: 1;
  }

  .with-sidebar > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--content-min, 50%);
  }

  /* Switcher: Zeile oder Spalte je nach Behälterbreite. */
  .switcher {
    --threshold: var(--layout-threshold);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space, var(--space-l));
  }

  .switcher > * {
    flex-grow: 1;
    flex-basis: calc((var(--threshold) - 100%) * 999);
  }

  .switcher > :nth-last-child(n + 5),
  .switcher > :nth-last-child(n + 5) ~ * {
    flex-basis: 100%;
  }

  /* Cover: ein Hauptelement mittig, optional Kopf und Fuß. */
  .cover {
    display: flex;
    flex-direction: column;
    min-block-size: var(--cover-height, var(--viewport-block));
    padding: var(--space, var(--space-l));
  }

  .cover > * {
    margin-block: var(--space, var(--space-l));
  }

  .cover > :first-child:not(.cover-center) {
    margin-block-start: 0;
  }

  .cover > :last-child:not(.cover-center) {
    margin-block-end: 0;
  }

  .cover > .cover-center {
    margin-block: auto;
  }

  /* Grid: automatisch gefüllte Spalten ohne Haltepunkte. */
  .grid {
    --minimum: var(--layout-grid-min);
    display: grid;
    gap: var(--space, var(--space-l));
    grid-template-columns: repeat(auto-fit, minmax(min(var(--minimum), 100%), 1fr));
  }

  /* Frame: Seitenverhältnis, Inhalt wird beschnitten. */
  .frame {
    --n: 16;
    --d: 9;
    aspect-ratio: var(--n) / var(--d);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

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

  /* Reel: horizontales Scrollen. Eine einzelne Karte füllt die Breite
     (flex-grow); mehrere nehmen höchstens 85 % und lassen die nächste
     angeschnitten sehen. Alle Karten einer Reihe sind gleich hoch. */
  .reel {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--space, var(--space-m));
    padding-block-end: var(--space-xs);
    scrollbar-color: var(--color-line) var(--color-surface-sunken);
  }

  .reel > * {
    flex: 1 0 min(var(--item-width, var(--layout-reel-item)), var(--layout-reel-item-max));
  }
}