/* ==========================================================================
   Block: hero — Seiteneinstieg mit Illustration.
   Varianten: media_position (right|left) × theme (primary|default|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.
   ========================================================================== */

@layer blocks {
  /* --- Container --------------------------------------------------------- */
  /* hero__inner steht (anders als text__inner/card__inner) nicht in der
     gemeinsamen Container-Regel in 04-layout.css — deshalb hier selbst
     gesetzt, mit denselben Tokens. */

  .hero__inner {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 4fr 1fr;
    gap: var(--space);
    align-items: center;
  }

  /* Mobile-First: Illustration steht per Quellreihenfolge immer unter dem
     Text — media_position wirkt erst ab dem Breakpoint (siehe unten). */

  .hero__body {
    display: grid;
    gap: var(--space-l);
  }

  .hero__headline {
    margin: 0;
  }

  /* Subline: 24 → 30px, eigener Token, weil hero die einzige Stelle ist,
     die --text-lead benutzt (gemessen 24px / LH 30px). */
  .hero__lead {
    margin: 0;
    font-size: var(--text-lead);
    line-height: var(--leading-lead);
    color: var(--color-on-surface);
  }

  .hero__body .button {
    justify-self: start;
  }

  /* --- Illustration -------------------------------------------------------
     SVG, transparent, ohne Crop: contain statt cover. */

  .hero__media {
    margin: 0;
  }

  .hero__media img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    max-inline-size: 100%;
    object-fit: contain;
  }

  /* --- Layout-Variante: media_position -----------------------------------
     Text links ~55 %, Illustration rechts ~45 %, vertikal zentriert.
     Ab 900px zweispaltig; darunter bleibt die Illustration unter dem Text. */

  @media (min-width: 56.25rem) {
    .hero__inner {
      grid-template-columns: 1.2fr 1fr;
      gap: var(--space-2xl);
    }

    /* die ganze Variante — eine Zeile */
    .hero--media-left .hero__media {
      order: -1;
    }
  }
}