/* ==========================================================================
   Block: image — großes Stimmungsbild als Sektionstrenner.
   Varianten: width (full|container|narrow) × ratio (original|21/10|16/9|4/3)
   × radius (Toggle)

   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 {
  /* --- Rahmen ------------------------------------------------------------
     .image (die Sektion) trägt bereits Fläche + vertikalen Abstand aus
     04-layout.css (.block). Kein eigenes padding-inline auf der Sektion:
     .image__inner regelt die Breite pro Variante — dadurch bleibt „full“
     randlos, ohne 100vw zu benutzen. 100vw rechnet die Breite der
     Scrollbar mit ein und erzeugt horizontales Scrollen; .image__inner
     ist dagegen 100% seines Elternelements (.image, das selbst nur so
     breit ist wie main/body) — das schließt die Scrollbar korrekt aus. */

  .image__inner {
    inline-size: 100%;
  }

  .image__media {
    display: block;
    overflow: hidden;       /* schneidet Crop (object-fit: cover) und Radius sauber */
  }

  .image__media img {
    display: block;
    inline-size: 100%;
    block-size: auto;       /* ratio: original — keine Beschneidung, Bild behält Proportion */
  }

  /* --- Bildunterschrift ---------------------------------------------------- */

  .image__caption {
    margin-block-start: var(--space-xs);
    color: var(--color-on-surface-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-small);
  }

  /* Bei randlosem Bild läuft die Bildunterschrift sonst bis an den
     Viewport-Rand — hier bekommt nur sie den Gutter zurück. */
  .image--width-full .image__caption {
    padding-inline: var(--gutter);
  }

  /* --- width: container / narrow ------------------------------------------- */
  /* „full“ ist der Default und braucht keine eigene Regel: .image__inner
     ist ohne Zusatzklasse bereits randlos (100% Breite, kein Padding). */

  .image--width-container .image__inner {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .image--width-narrow .image__inner {
    max-inline-size: var(--container-narrow);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* --- ratio: 21/10 (Default) · 16/9 · 4/3 --------------------------------- */
  /* ratio: original setzt bewusst kein aspect-ratio — Basisregeln oben
     (block-size: auto) lassen das Bild unbeschnitten. */

  .image--ratio-21-10 .image__media {
    aspect-ratio: 21 / 10;
  }

  .image--ratio-16-9 .image__media {
    aspect-ratio: 16 / 9;
  }

  .image--ratio-4-3 .image__media {
    aspect-ratio: 4 / 3;
  }

  .image--ratio-21-10 .image__media img,
  .image--ratio-16-9 .image__media img,
  .image--ratio-4-3 .image__media img {
    block-size: 100%;
    object-fit: cover;
  }

  /* --- radius --------------------------------------------------------------- */

  .image--radius .image__media {
    border-radius: var(--radius-l);
  }

  /* Ausnahme von „ein Modifier ändert eine Eigenschaft, keine Kombi-Regeln“:
     ein randloses Bild reicht bis an den Viewport-Rand — ein Radius würde
     dort nur die äußersten Bildschirmecken beschneiden und ist sinnlos.
     Sinnvoller Default lt. docs/blocks.md: aus bei full, an bei container —
     über die Modifier-Kombination gelöst, nicht per PHP-Default im Snippet. */
  .image--width-full.image--radius .image__media {
    border-radius: 0;
  }
}