/* ==========================================================================
   Block: text_media — Foto + Textkarte als gleichwertiges Kachelpaar.
   Varianten: media_position (left|right) × theme (default|alt|primary|secondary)

   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.

   .text-media ist in 04-layout.css bereits transparent gesetzt (Fläche liegt
   auf __body, nicht auf der Sektion) und .text-media__inner steht dort schon
   in der Container-Liste (max-inline-size, gutter). Hier nur das Grid und
   die beiden Kacheln.
   ========================================================================== */

@layer blocks {
  /* --- Grid: zwei Kacheln --------------------------------------------- */

  .text-media__inner {
    display: grid;
    gap: var(--space-m); /* 24px, gemessen */
  }

  @media (min-width: 48rem) {
    .text-media__inner {
      grid-template-columns: 1fr 1fr;
      /* align-items: stretch ist der Grid-Default — beide Kacheln übernehmen
         damit automatisch die Höhe der jeweils höheren, ob der Text kurz
         oder lang ist. Hier nur zur Dokumentation explizit gesetzt. */
      align-items: stretch;
    }

    /* die ganze Variante — eine Zeile */
    .text-media--media-right .text-media__media { order: 2; }

    /* Ab hier füllt die Kachel beide Dimensionen der Grid-Zelle direkt,
       OHNE aspect-ratio. Grund: bei align-items:stretch ist die Zeilenhöhe
       nicht mehr "auto" — sobald der Text nebenan die Zeile hoch zieht,
       löst aspect-ratio die (jetzt hohe) Höhe zuerst auf und rechnet daraus
       eine zu breite Breite (Höhe × 4/3), die die Spalte sprengt. Weil die
       Breite über inline-size:100% bereits definit ist, entscheidet
       object-fit:cover auf dem <img> über den Bildausschnitt — die feste
       4:3-Optik gilt nur mobil, wo die Kachel allein steht (unten). */
    .text-media__media {
      aspect-ratio: auto;
      inline-size: 100%;
      block-size: 100%;
    }
  }

  /* --- Fotokachel -------------------------------------------------------- */

  .text-media__media {
    aspect-ratio: 4 / 3; /* nur mobil bestimmend, siehe Override oben ab 48rem */
    border-radius: var(--radius-l);
    overflow: hidden;

    /* Grid-Items haben min-width:auto als Default und lassen sich nicht unter
       die intrinsische Größe des <img> schrumpfen (figure.php setzt width/
       height als HTML-Attribute = die Originalpixel des Fotos). Ohne diese
       Zeile sprengt ein großes Foto die Spalte und damit den Viewport. */
    min-inline-size: 0;
  }

  .text-media__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* --- Textkachel ---------------------------------------------------------
     Fläche + Text kommen aus --color-surface / --color-on-surface. Das
     Theme belegt beide um (01-tokens.css) — hier steht keine Theme-Regel. */

  /* min-inline-size: 0 auch auf der Textkachel, aus demselben Grund wie oben
     auf der Fotokachel: Grid-Items haben min-width:auto als Default. Ein
     langes deutsches Kompositum in der Überschrift („Betriebswirtschaftliche“)
     ist bei --text-h3-lg breiter als die Spalte. overflow-wrap:break-word aus
     02-reset.css bricht das Wort erst beim Rendern, es senkt die
     min-content-Breite NICHT — ohne diese Zeile zieht die Kachel deshalb den
     einspaltigen Grid-Track auf und die Seite scrollt horizontal (gemessen bei
     390px: scrollWidth 418 statt 390). */
  .text-media__body {
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-l);
    background: var(--color-surface);
    color: var(--color-on-surface);
    border-radius: var(--radius-l);
    padding: var(--space-xl); /* 48px, gemessen */
  }

  /* Button soll seine eigene Breite behalten, nicht die Kachelbreite füllen */
  .text-media__body .button {
    align-self: flex-start;
  }

  /* Ausnahme laut CONVENTIONS.md: text_media braucht eine größere Stufe als
     die level-gesteuerte h2/h3-Größe aus 03-elements.css. Gemessen: 48px /
     LH 58px (1,2) → --text-h3-lg, --leading-h3. */
  .text-media__headline {
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
  }

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

  /* Listen im Fließtext bekommen ihre Marker zurück (02-reset.css nimmt sie
     global weg). 03-elements.css stellt sie nur für .text__body, .card__text
     und .site-footer__address wieder her — diese Datei darf nicht angefasst
     werden, deshalb erklärt der Block seinen Fließtextbereich selbst. */
  .text-media__text :where(ul, ol) {
    list-style: revert;
    padding-inline-start: var(--space-m);
  }

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