/**
 * agenic Komponenten-CSS – Text-Columns (Organismus).
 *
 * Figma-Quelle: Set `text-columns` (629:4535, Seite 0.5, 6 Varianten =
 * Spalten 2·3·4 × Breakpoint Desktop·Mobil, gemessen 10.08.2026):
 *   Spalten-Gap 2/3 Spalten = spacing/l 32 · 4 Spalten = spacing/xxl 64
 *   ABWEICHUNG seit 21.09.2026 (Entscheidung Vincent): Gap bei allen
 *   Spaltenzahlen = Rinne des 12er-Rasters, spacing/ml 24 (Figma `0.4 · Grids`,
 *   `shelf/spaltenraster` 930:23075). Damit liegen die Spalten auf denselben
 *   Rasterlinien wie die Strapline von ag-titlekombinationen--split-N
 *   (2 Spalten: 612 · 3 Spalten: 408/816 bei 1200). Vorher 4 px Versatz.
 *   Figma-Quelle zeigt noch 32/64 → Rückspielpunkt.
 *   Divider → Grid = spacing/ml 24 · Mobil: einspaltig gestapelt
 * Inhalt der Spalten: ag-text-block (eigenes Partial/CSS).
 * Markup: widgets/text-columns.php (konsumiert ag_render_text_block).
 * Kontrakt: Projekt-Doc `kontrakte-welle-a-10-08.md`.
 */

.ag-text-columns,
.ag-text-columns * {
    box-sizing: border-box;
}

.ag-text-columns {
    /* L3 mit L2-Defaults */
    --ag-text-columns-gap: var(--spacing-ml);            /* Spalten-Gap = Rinne 12er-Raster 24 (Entscheidung Vincent 21.09.2026, Figma 32/64) */
    --ag-text-columns-row-gap: var(--spacing-ml);        /* Divider → Grid = 24 */
    --ag-text-columns-space-before: 0px;                 /* Control „Abstand davor" */
    --ag-text-columns-space-after: 0px;                  /* Control „Abstand danach" */

    display: flex;
    flex-direction: column;
    gap: var(--ag-text-columns-row-gap);
    margin-block-start: var(--ag-text-columns-space-before);
    margin-block-end: var(--ag-text-columns-space-after);
}

.ag-text-columns__divider {
    margin: 0;
}

.ag-text-columns__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ag-text-columns-gap);
}

.ag-text-columns--3 .ag-text-columns__grid {
    grid-template-columns: repeat(3, 1fr);
}

.ag-text-columns--4 .ag-text-columns__grid {
    grid-template-columns: repeat(4, 1fr);
}

/* ── Mobil: einspaltig (Quelle: Breakpoint-Varianten stapeln) ── */

@media (max-width: 767px) { /* --bp-md 768, A5-Festschreibung offen (tmp) */
    .ag-text-columns__grid,
    .ag-text-columns--3 .ag-text-columns__grid,
    .ag-text-columns--4 .ag-text-columns__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-l);                           /* Mobil-Stapel: 32 */
    }
}

/* ── Einblendung (0.7-Standardmuster; Gate nur mit JS) ───────── */

html.ag-anim-ready .ag-text-columns[data-ag-anim="reveal"] {
    transition:
        opacity var(--motion-reveal) var(--motion-ease-standard),
        transform var(--motion-reveal) var(--motion-ease-standard);
}

html.ag-anim-ready .ag-text-columns[data-ag-anim="reveal"]:not(.is-inview) {
    opacity: 0;
    transform: translateY(var(--motion-distance-reveal));
}

@media (prefers-reduced-motion: reduce) {
    html.ag-anim-ready .ag-text-columns[data-ag-anim="reveal"],
    html.ag-anim-ready .ag-text-columns[data-ag-anim="reveal"]:not(.is-inview) {
        transition: none;
        transform: none;
        opacity: 1;
    }
}

/* ── Innenabstand steuerbar (3.88.0) ─────────────────────────────────────
   Entscheidung Vincent, 24.08.2026: Der Innenabstand soll bei jedem Widget
   am Control liegen, nicht nur der Außenabstand. Dieses Widget führt im
   Design kein Blockpolster — die Vorgabe ist deshalb 0, und die Regel wird
   erst wirksam, wenn jemand am Control etwas wählt.
   Steht bewusst am Dateiende: gleiche Spezifität wie die Regeln oben, die
   spätere gewinnt. Nur oben und unten; seitlich begrenzt die Content-Breite. */
.ag-text-columns {
    padding-block: var(--ag-text-columns-pad-oben, 0px) var(--ag-text-columns-pad-unten, 0px);
}