/**
 * agenic Widgets – Text-Media-Panel (Organismus).
 *
 * Quelle:   Figma `text-media-panel-cropped--1col` (Set 653:4383), Kontrakt v0.2 (09.08.2026)
 * Schichten: L3 (--ag-text-media-panel-*) → L2 (tokens.css) → L1.
 *
 * tmp-Punkte (ehrlich markiert):
 *  - Medienspaltenbreite Desktop 584/1200 ≈ 48,667 % — in Figma ungebunden
 *  - Medienhöhe Mobil 240 px — in Figma ungebunden
 *  - Body-Padding Mobil unten 96 px — in Figma ungebunden (Platz für Bildmarke),
 *    keine Stufe der Spacing-Leiter
 *  - Breakpoint 768 — A5-Festschreibung offen
 */

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

.ag-text-media-panel {
    /* L3 mit L2-Defaults */
    --ag-text-media-panel-bg: var(--color-surface-lightest);   /* Fläche lightest (Default) */
    --ag-text-media-panel-fg: var(--color-text-standard);      /* Text/standard */
    --ag-text-media-panel-radius: var(--radius-l);            /* Figma radius/l = 24 */
    --ag-text-media-panel-media-radius: var(--radius-m);      /* Figma radius/m = 16 */
    --ag-text-media-panel-media-fit: cover;                    /* Einfügemodus (object-fit), Figma „Fill" */
    --ag-text-media-panel-media-position: center;              /* Ausrichtung (object-position) */
    /* Boden für die Bildhöhe auf Desktop. Ohne ihn hätte der Rahmen gar keine
       eigene Höhe und `object-fit` bliebe wirkungslos — Begründung an der
       Regel `.ag-text-media-panel__media`. Der Wert ist NICHT an der Quelle
       gemessen: 360 hält die Bestandspanels (377/433) unverändert und
       entspricht dem Einzelbild-Desktop des Schwesterblocks media-text-list
       (584/360). Rückspielpunkt auf 0.8 Sektion 02. */
    --ag-text-media-panel-media-min-h: 360px;                  /* tmp */
    --ag-text-media-panel-padding: var(--spacing-xxl);         /* Figma spacing/xxl = 64 */
    --ag-text-media-panel-media-w: 48.667%;                    /* tmp — Figma 584/1200 ungebunden */
    --ag-text-media-panel-logo-size: 40px;                     /* Figma 40 px */
    --ag-text-media-panel-logo-offset: var(--spacing-l);       /* Desktop-Offset = Figma 32 (spacing/l) */
    --ag-text-media-panel-space-before: 0px;                   /* Control „Abstand davor" */
    --ag-text-media-panel-space-after: 0px;                    /* Control „Abstand danach" */

    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--ag-text-media-panel-bg);
    color: var(--ag-text-media-panel-fg);
    border-radius: var(--ag-text-media-panel-radius);
    overflow: hidden;                                          /* Figma: clipsContent (cropped) */
    margin-block-start: var(--ag-text-media-panel-space-before);
    margin-block-end: var(--ag-text-media-panel-space-after);
    font-family: var(--font-sans);
}

/* ── Flächen-Varianten (Figma-Achse, bereinigt: Variant2 ⇒ dark) ── */

.ag-text-media-panel--lightest { background: var(--color-surface-lightest); } /* Surface/lightest */
.ag-text-media-panel--light    { background: var(--color-surface-light); }    /* Surface/light */

.ag-text-media-panel--frosted {
    background: var(--color-surface-frosted);                  /* Surface/frosted (Rückmigration 09.08.2026) */
    -webkit-backdrop-filter: blur(var(--effect-backdrop-blur));
    backdrop-filter: blur(var(--effect-backdrop-blur));        /* Values/effects/backdrop-blur = 8 */
}

.ag-text-media-panel--dark {
    background: var(--color-surface-dark);                     /* Surface/dark */
    --ag-text-media-panel-fg: var(--color-text-inverse-soft);  /* Text/inverse */
}

/* ── Medium (randlos beschnitten, Desktop links) ─────────────────── */

/* Warum `position: relative` + Mindesthöhe, und warum das Bild absolut liegt:

   Der Rahmen hatte auf Desktop KEINE eigene Höhe — er zog sich über
   `align-items: stretch` auf die Zeilenhöhe. Solange die Textspalte die höhere
   war, ging das gut. War das BILD höher, bestimmte es die Zeilenhöhe selbst;
   `height: 100%` am <img> löste dann auf einen Wert auf, den das Bild gerade
   erst erzeugt hatte, und `object-fit` hatte nichts mehr zu beschneiden.
   Ergebnis: Der Control „Einfügemodus" war wirkungslos — genau der Befund
   Vincents vom 26.08.2026.

   Gemessen am 26.08.2026 auf agenic.local (Testbild 400×1600, kurzer Text):
   Rahmen 584×2336, cover und contain optisch identisch. Mit dieser Regel:
   Rahmen 584×360, Bild 584×360, cover schneidet. Die beiden Bestandspanels der
   Startseite bleiben bei 377 und 433 px — unverändert, weil beide über dem
   Boden von 360 liegen.

   Das Bild absolut zu setzen ist der eigentliche Hebel: Nur so fällt es aus der
   Höhenrechnung heraus. Die Mindesthöhe ist der Boden, damit der Rahmen bei
   kurzem Text nicht in sich zusammenfällt. */
.ag-text-media-panel__media {
    flex: 0 0 var(--ag-text-media-panel-media-w);
    position: relative;
    min-height: var(--ag-text-media-panel-media-min-h);
    margin: 0;
    border-radius: var(--ag-text-media-panel-media-radius);
    overflow: hidden;
}

/* Blockname vorangestellt wegen `.elementor img { height: auto }` — mit nur
   `.ag-text-media-panel__media img` (0,1,1) stünde es gleichauf und die
   Reihenfolge der Stylesheets entschiede. Begründung ausführlich in card.css. */
.ag-text-media-panel .ag-text-media-panel__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    /* Grundsatz 8: <img>, Einfügemodus und Ausschnitt per Control. Die
       Variablen setzt entweder der sektionsweite Control (`selectors`) oder
       das Partial am <figure> — bei `tabs` je Repeater-Eintrag. */
    object-fit: var(--ag-text-media-panel-media-fit, cover);
    object-position: var(--ag-text-media-panel-media-position, center);
}

/* A1 (Kontrakt): Platzhalter ohne Bild = Fusion-Fläche wie das
   Figma-Specimen (media-placeholder Typ=Fusion; ohne Specimen-Icon). */
.ag-text-media-panel__media--placeholder {
    /* QA 10.08.: Quelle media-placeholder = fusion-basic--reverse (134°, grün oben links) */
    background: var(--gradient-fusion-basic-reverse, var(--gradient-fusion-basic));
    min-height: 100%;
    transform: scaleX(-1); /* Figma-Specimen läuft grün→dunkel; fusion-basic läuft dunkel→grün (Annäherung, tmp) */
}

/* ── Textspalte ──────────────────────────────────────────────────── */

.ag-text-media-panel__body {
    flex: 1;
    min-width: 0;
    padding: var(--ag-text-media-panel-padding);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ag-text-media-panel__pills {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-s);                                      /* pill-list gap = spacing/s (8) */
    margin: 0 0 var(--spacing-l);                               /* title-row gap = spacing/l (32) */
    padding: 0;
}

.ag-text-media-panel__headline {
    /* Text Style Digital/General/Display/S: Inter Light 38/44, -2 % */
    margin: 0;
    /* Stufe sektion-38, überschreibbar durch den Control „Stufe des Titels". */
    font-size: var(--ag-text-media-panel-headline-fs, var(--ag-titel-sektion-38-fs));
    line-height: var(--ag-text-media-panel-headline-lh, var(--ag-titel-sektion-38-lh));
    font-weight: var(--ag-text-media-panel-headline-fw, var(--ag-titel-sektion-38-fw));
    letter-spacing: -0.02em;
    color: var(--ag-text-media-panel-fg);
}

.ag-text-media-panel__copy {
    /* Text Style Digital/General/Copy/M: Inter Light 16/21, -2 % */
    margin: var(--spacing-m) 0 0;                               /* header gap = spacing/m (16) */
    font-size: var(--fs-300);
    line-height: calc(21 / 16);
    font-weight: var(--fw-light);
    letter-spacing: -0.02em;
    color: var(--ag-text-media-panel-fg);                       /* Figma: Copy ebenfalls Text/standard bzw. inverse */
}

/* WYSIWYG-Inhalt zähmen. */
.ag-text-media-panel__copy p,
.ag-text-media-panel__copy ul,
.ag-text-media-panel__copy ol {
    margin: 0 0 var(--spacing-s);
}

.ag-text-media-panel__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-text-media-panel .ag-text-media-panel__copy > :is(ul, ol):last-child { margin-bottom: 0; }

/* Kit-/Theme-Linkfarben schlagen Einzelklassen (Spezifität 0,1,1),
   sobald ein <a> im Spiel ist → Doppelklasse ≥ (0,2,0), alle States. */
.ag-text-media-panel .ag-text-media-panel__copy a,
.ag-text-media-panel .ag-text-media-panel__copy a:hover,
.ag-text-media-panel .ag-text-media-panel__copy a:focus,
.ag-text-media-panel .ag-text-media-panel__copy a:visited {
    color: inherit;
    text-decoration: underline;
}

.ag-text-media-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-m);
    margin-top: var(--spacing-l);                               /* column gap = 32 (Figma ungebunden, G4 → spacing/l) */
}

/* ── Bildmarke (dekorativ, absolut) ──────────────────────────────── */

.ag-text-media-panel__logo {
    position: absolute;
    top: var(--ag-text-media-panel-logo-offset);
    right: var(--ag-text-media-panel-logo-offset);
    width: var(--ag-text-media-panel-logo-size);
    height: auto;
    color: var(--color-surface-darkest);                        /* Figma agenic-logo Farbe=Schwarz */
    pointer-events: none;
}

.ag-text-media-panel--dark .ag-text-media-panel__logo {
    color: var(--color-surface-lightest);                       /* Figma dark: Neutrals/000 - white-grey (#f8fafa) */
}

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

@media (max-width: 767.98px) {
    .ag-text-media-panel {
        flex-direction: column;                                 /* Figma Mobil: Medium oben */
        --ag-text-media-panel-padding: var(--spacing-ml);       /* Figma Mobil-Padding 24 (spacing/ml, ungebunden gemessen) */
        --ag-text-media-panel-logo-offset: var(--spacing-ml);   /* Mobil-Offset = Figma 24 */
    }

    .ag-text-media-panel__media {
        flex: none;
        width: 100%;
        /* Der Desktop-Boden muss hier weg: `min-height` schlägt `height`,
           sonst bliebe der Rahmen auf Mobil bei 360 statt 240. */
        min-height: 0;
        height: 240px;                                          /* tmp — Figma Mobil 343×240, ungebunden */
    }

    .ag-text-media-panel__body {
        padding-bottom: 96px;                                   /* tmp — Figma 96 ungebunden (Platz für Bildmarke) */
    }

    .ag-text-media-panel__logo {
        top: auto;
        bottom: var(--ag-text-media-panel-logo-offset);         /* Figma Mobil: unten rechts */
    }
}

/* ── 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-text-media-panel[data-ag-anim="reveal"] {
        opacity: 0;
        transform: translateY(var(--motion-distance-reveal));
        transition:
            opacity var(--motion-reveal) var(--motion-ease-standard),
            transform var(--motion-reveal) var(--motion-ease-standard);
    }

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