/* ==========================================================================
   Block: text — Referenz-Slice.
   Deckt vier Screenshots mit einem Blueprint ab: theme × layout × card.

   Diese Datei wird von site/snippets/styles.php als eigenes <link> geladen,
   OHNE Layer-Zuweisung — deshalb deklariert sie @layer blocks selbst.
   Die Reihenfolge der Layer steht in base.css.
   ========================================================================== */

@layer blocks {
  /* --- Karte ----------------------------------------------------------- */
  /* .block.text--card ist in 04-layout.css transparent gesetzt:
     Fläche, Radius und Innenabstand liegen auf __inner. */

  /* Gutter außen, damit die Karte auf schmalen Viewports nicht am Rand klebt */
  .text--card {
    padding-inline: var(--gutter);
  }

  .text--card .text__inner {
    background: var(--color-surface);
    color: var(--color-on-surface);
    border-radius: var(--radius-l);
    padding-block: var(--space-l);
    padding-inline: var(--space-l);
  }

  @media (min-width: 48rem) {
    .text--card .text__inner {
      /* gemessen: 64px vertikal, 80px horizontal */
      padding-block: var(--space-2xl);
      padding-inline: calc(var(--space-2xl) + var(--space-s));
    }
  }

  /* --- Typografie ------------------------------------------------------ */
  /* Größe und Zeilenhöhe der Überschrift kommen aus 03-elements.css:
     h2 = 56px / 75px, h3 = 36px / 42px (beides gemessen).
     Hier steht nur der Abstand zum Fließtext. */

  .text__headline {
    margin-block-end: var(--space-l);
  }

  /* Fließtext: 16px / 22px aus body, Absatzabstand gemessen 32px */
  .text__body > * + * {
    margin-block-start: var(--paragraph-gap);
  }

  /* Links im Fließtext: auf dunklen Flächen hebt --color-link-on-surface
     (--brand-100, 7,07:1) den Kontrast an; sonst gilt die Textfarbe. */
  .text__body a {
    color: var(--color-link-on-surface, currentcolor);
  }

  /* --- Layout: center (Default) ---------------------------------------- */

  .text--layout-center {
    text-align: center;
  }

  /* Fließtextbreite gemessen 800px = --container-narrow */
  .text--layout-center .text__body {
    max-inline-size: var(--container-narrow);
    margin-inline: auto;
  }

  .text--layout-center .text__headline {
    max-inline-size: var(--container-narrow);
    margin-inline: auto;
    margin-block-end: var(--space-l);
  }

  /* --- Layout: left ---------------------------------------------------- */

  .text--layout-left {
    text-align: start;
  }

  .text--layout-left .text__body {
    max-inline-size: var(--container-narrow);
  }

  /* --- Layout: split --------------------------------------------------- */
  /* Mobile-First: gestapelt. Ab 900px zweispaltig,
     Überschrift links, Fließtext rechts. */

  .text--layout-split {
    text-align: start;
  }

  @media (min-width: 56.25rem) {
    .text--layout-split .text__inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-2xl);
      align-items: start;
    }

    .text--layout-split .text__headline {
      margin-block-end: 0;
    }

    .text--layout-split .text__body {
      max-inline-size: none;
    }
  }
}