/**
 * agenic Widgets – CTA Band  (Pilot der Kette Figma → Elementor)
 *
 * Quelle:   Figma `cta-band` (Set 1400:17740), Kontrakt v0.2 (08.08.2026)
 * Schichten: L3 (--ag-cta-band-*) → L2 (--color-*, --space-*) → L1.
 *
 * Token-Stand 08.08.2026: Die DS-0.01-Semantik (--color-surface-darkest,
 * --color-text-inverse-soft, --gradient-fusion-basic-reverse-30, --motion-*
 * u. a.) ist in tokens.css eingetragen (Werte exakt aus der Figma-Messung,
 * Regel Vincent: Figma-gleiche Werte ohne Rückfrage). Die früheren
 * tmp-Fallbacks sind abgebaut; Details im Projekt-Doc
 * `elementor-widget-pilot-08-08`.
 */

.ag-cta-band,
.ag-cta-band * {
    box-sizing: border-box; /* nicht von Theme/Elementor-Reset abhängig */
}

.ag-cta-band {
    /* L3 mit L2-Defaults */
    --ag-cta-band-padding: var(--spacing-l);            /* Figma spacing/l = 32 */
    --ag-cta-band-radius: var(--radius-l);           /* Figma radius/l = 24 */
    --ag-cta-band-gap: var(--spacing-ms);                /* Titel ↔ Copy = 12 */
    --ag-cta-band-actions-gap: var(--spacing-m);        /* Buttons unter sich = 16 */
    --ag-cta-band-content-gap: var(--spacing-ml);        /* Content ↔ Buttons = 24 */
    --ag-cta-band-space-before: 0px;                  /* Control „Abstand davor" */
    --ag-cta-band-space-after: 0px;                   /* Control „Abstand danach" */

    display: flex;
    flex-direction: column;
    gap: var(--ag-cta-band-content-gap);
    padding: var(--ag-cta-band-padding);
    border-radius: var(--ag-cta-band-radius);
    margin-block-start: var(--ag-cta-band-space-before);
    margin-block-end: var(--ag-cta-band-space-after);
    font-family: var(--font-sans);
}

/* ── Stil-Varianten (Figma-Achse `Stil`) ─────────────────────── */

.ag-cta-band--gradient {
    background: var(--gradient-fusion-basic-reverse-30); /* Paint Style fusion-basic--reverse-30, Winkel 134,2° gemessen */
    --ag-cta-band-color: var(--color-text-inverse-soft);       /* Text/inverse */
    --ag-cta-band-color-muted: var(--color-text-inverse-soft); /* Copy = Text/inverse */
}

.ag-cta-band--dunkel {
    background: var(--gradient-surface-darkest-tiefe);         /* Surface/darkest + Tiefenfläche, 25.09.2026 */
    --ag-cta-band-color: var(--color-text-inverse-soft);       /* Text/inverse */
    --ag-cta-band-color-muted: var(--color-text-grey-inverse); /* Text/grey--inverse */
}

.ag-cta-band--hell {
    background: var(--color-surface-light);                    /* Surface/light */
    --ag-cta-band-color: var(--color-text-standard);           /* Text/standard */
    --ag-cta-band-color-muted: var(--color-text-grey);         /* Text/grey */
}

/* ── Inhalt ──────────────────────────────────────────────────── */

.ag-cta-band__content {
    display: flex;
    flex-direction: column;
    gap: var(--ag-cta-band-gap);
}

.ag-cta-band__title {
    /* Text Style Digital/General/Display/XS: Inter Light 24/32, -2 % */
    margin: 0;
    /* Stufe panel-24, überschreibbar durch den Control „Stufe des Titels". */
    font-size: var(--ag-cta-band-title-fs, var(--ag-titel-panel-24-fs));
    line-height: var(--ag-cta-band-title-lh, var(--ag-titel-panel-24-lh));
    font-weight: var(--ag-cta-band-title-fw, var(--ag-titel-panel-24-fw));
    letter-spacing: -0.02em;
    color: var(--ag-cta-band-color);
}

.ag-cta-band__copy {
    /* Text Style Digital/General/Copy/M: Inter Light 16/21, -2 % */
    margin: 0;
    font-size: var(--fs-300);
    line-height: calc(21 / 16);
    font-weight: var(--fw-light);
    letter-spacing: -0.02em;
    color: var(--ag-cta-band-color-muted);
}

/* WYSIWYG-Inhalt (seit 3.3.1): Grundelemente im Copy-Bereich zähmen. */
.ag-cta-band__copy p,
.ag-cta-band__copy ul,
.ag-cta-band__copy ol {
    margin: 0 0 var(--spacing-s);
}

.ag-cta-band__copy > :last-child {
    margin-bottom: 0;
}

/* Listen im Fließtext: zentrale Regel in hello-elementor-child/assets/base.css
   (Entscheidung Vincent, 25.09.2026). Hier nur, was das Widget abweichend braucht. */
.ag-cta-band .ag-cta-band__copy > :is(ul, ol):last-child { margin-bottom: 0; }

.ag-cta-band .ag-cta-band__copy a {
    color: inherit;
    text-decoration: underline;
}

/* ── Buttons ─────────────────────────────────────────────────── */
/* Seit 3.4.0 (Atomic-Design-Regel Vincent): Buttons sind die geteilte
   Komponente `ag-button` (assets/css/button.css + includes/render-button.php).
   Das Band liefert nur noch Kontext: Anordnung und Sekundär-Textfarbe. */

.ag-cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ag-cta-band-actions-gap);
}

.ag-cta-band {
    --ag-button-color: var(--ag-cta-band-color); /* Kontext für ag-button--secondary */
}

/* ── Responsiv (Figma `Breakpoint`-Achse → Media Query) ──────── */
/* Grenzwert: --bp-md 768 (tokens.css) — A5-Festschreibung offen (TMP). */

@media (max-width: 767.98px) {
    .ag-cta-band__actions {
        flex-direction: column;
    }

    .ag-cta-band .ag-button.ag-button {
        width: 100%;
        justify-content: space-between; /* Label links, Pfeil rechts (Figma Mobil) */
    }
}

/* ── Einblendung (Modell: Global Standard + Widget-Override) ─── */
/* Nur aktiv, wenn JS bereit ist (html.ag-anim-ready) — ohne JS bleibt
   alles sichtbar. prefers-reduced-motion wird immer respektiert. */

@media (prefers-reduced-motion: no-preference) {
    html.ag-anim-ready .ag-cta-band[data-ag-anim="reveal"] {
        opacity: 0;
        transform: translateY(var(--motion-distance-reveal)); /* Motion distance/reveal (0.7) */
        transition:
            opacity var(--motion-reveal) var(--motion-ease-standard),
            transform var(--motion-reveal) var(--motion-ease-standard); /* Motion/reveal = 950 ms, easing-standard (0.7, gemessen) */
    }

    html.ag-anim-ready .ag-cta-band[data-ag-anim="reveal"].is-inview {
        opacity: 1;
        transform: none;
    }
}