/* ==========================================================================
   Ebene 2 · Every Layout – Komposition
   --------------------------------------------------------------------------
   Kleine Layout-Primitive, die sich beliebig ineinander stecken lassen.
   Sie kennen weder Farben noch Komponenten – nur Anordnung und Abstand.
   Jedes Primitive wird über Custom Properties gesteuert (--space, --min …),
   die man direkt im Markup setzen kann:  <div class="stack" style="--space: var(--s2)">

   Die Skala (--s-2 … --s5) folgt der Every-Layout-Konvention, zeigt aber auf
   Open-Props-Tokens. So sprechen Layout und OPUI-Komponenten denselben Rhythmus.
   ========================================================================== */

@layer layout {

  :root {
    --s-2: var(--size-1);        /* 0.25rem */
    --s-1: var(--size-2);        /* 0.5rem  */
    --s0:  var(--size-3);        /* 1rem    */
    --s1:  var(--size-fluid-2);  /* 1 → 1.5rem, fluide */
    --s2:  var(--size-fluid-3);  /* 1.5 → 2rem */
    --s3:  var(--size-fluid-4);  /* 2 → 3rem   */
    --s4:  var(--size-fluid-5);  /* 4 → 5rem   */
    --s5:  var(--size-fluid-6);  /* 5 → 7.5rem */

    --measure: var(--size-content-3);  /* ideale Zeilenlänge für Fließtext, 60ch */
  }

  /* Stack – Elemente untereinander mit gleichmäßigem Abstand ------------- */
  .stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space, var(--s1));
  }

  /* Cluster – Elemente nebeneinander, umbrechend (Buttons, Tags, Nav) ---- */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: var(--align, center);
    justify-content: var(--justify, flex-start);
    gap: var(--space, var(--s0));
  }

  /* Center – begrenzt die Breite und zentriert horizontal --------------- */
  .center {
    box-sizing: content-box;  /* Innenabstand zählt nicht zur max. Breite */
    container-type: inline-size;  /* Bezug für die Spalten-Regel unten (@container) */
    max-inline-size: var(--center-max, 72rem);
    margin-inline: auto;
    padding-inline: var(--gutter, var(--s1));
  }
  .center[data-width="narrow"] { --center-max: 45rem; }
  .center[data-width="wide"]   { --center-max: 90rem; }
  .center[data-width="full"]   { --center-max: none; }

  /* Grid – so viele Spalten wie Platz, jede mindestens --min breit ------ */
  .grid {
    display: grid;
    gap: var(--space, var(--s1));
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 16rem), 100%), 1fr));
  }

  /* Switcher – nebeneinander, bis --threshold unterschritten wird ------- */
  .switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space, var(--s1));
  }
  .switcher > * {
    flex-grow: 1;
    flex-basis: calc((var(--threshold, 40rem) - 100%) * 999);
  }

  /* Sidebar – schmale Seitenspalte + Inhalt, stapelt sich wenn eng ------ */
  .with-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space, var(--s1));
  }
  .with-sidebar > :first-child {
    flex-basis: var(--side-width, 20rem);
    flex-grow: 1;
  }
  .with-sidebar > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--content-min, 50%);
  }

  /* Cover – mindestens Bildschirmhöhe, Inhalt vertikal mittig ----------- */
  .cover {
    display: flex;
    flex-direction: column;
    min-block-size: var(--cover-min, 100svh);
  }
  .cover > :only-child {
    margin-block: auto;
  }

  /* Frame – festes Seitenverhältnis, Inhalt wird zugeschnitten ---------- */
  .frame {
    aspect-ratio: var(--n, 16) / var(--d, 9);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .frame > :is(img, video) {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* --------------------------------------------------------------------------
     Kirby-Spalten
     Kirby liefert pro Spalte einen Anteil von 12 (1/2 → 6, 1/3 → 4).
     Das Snippet setzt ihn als --span. Unter 48rem Breite stapeln sich
     die Spalten – als Container Query, reagiert also auf die verfügbare
     Breite statt auf den Bildschirm.
     -------------------------------------------------------------------------- */
  .columns {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space, var(--s3));
    align-items: start;
  }
  .columns[data-align="center"]  { align-items: center; }
  .columns[data-align="stretch"] { align-items: stretch; }

  .columns > * {
    grid-column: span var(--span, 12);
  }

  /* Schmal: eine Spalte statt 12 – sonst sind allein die 11 Lücken
     (je 2–3rem) breiter als ein Handy und die Zeile ragt über den Rand. */
  @container (width < 48rem) {
    .columns {
      grid-template-columns: minmax(0, 1fr);
    }
    .columns > * {
      grid-column: 1 / -1;
    }
  }
}