/* ==========================================================================
   Block: cta — Abschluss-Sektion mit Portrait, Aufforderung und Kontaktdaten.
   Varianten: image_shape (circle|square|none) × 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.
   ========================================================================== */

@layer blocks {
  /* --- Container ---------------------------------------------------------
     .cta__inner steht NICHT in der geteilten Container-Liste von
     04-layout.css (nur .text__inner, .card__inner, .text-media__inner) —
     deshalb trägt der Block seinen Container selbst. */

  .cta__inner {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-l);
  }

  /* Überschrift und Fließtext bleiben schmal, auch wenn __inner breiter ist */
  .cta__headline,
  .cta__body {
    max-inline-size: var(--container-narrow);
  }

  /* Fließtext: 16px / 22px aus body, Absatzabstand gemessen 32px (wie text.css) */
  .cta__body > * + * {
    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 — dort nichts ändern). */
  .cta__body :where(ul, ol) {
    list-style: revert;
    padding-inline-start: var(--space-m);
  }

  .cta__body a {
    color: var(--color-link-on-surface, currentcolor);
  }

  /* --- Portrait ------------------------------------------------------- */
  /* Ø 280px, cover, 1:1 — kein Token in dieser Größenordnung vorhanden,
     deshalb direkter Wert (17.5rem = 280px). */

  .cta__media {
    inline-size: 17.5rem;
    block-size: 17.5rem;
  }

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

  /* --radius-full ergibt bei gleicher Breite/Höhe einen exakten Kreis */
  .cta--image-circle .cta__media img {
    border-radius: var(--radius-full);
  }

  /* image-square braucht keine eigene Regel — der Basiswert (kein Radius) reicht */

  /* --- Kontaktblock ----------------------------------------------------- */
  /* Drei Zeilen, Medium-Gewicht, 16px (gemessen) — nicht Bold, siehe Bericht. */

  .cta__contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .cta__contact-line {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
  }

  .cta__contact-link {
    color: var(--color-link-on-surface, currentcolor);
  }
}