/*
 * Synapsenbrenner - Modul kibild, Baustein batch (Bauplan P11, 21.09.2026).
 * Das Abzeichen „Mit KI erstellt" am Bild und die Tafel dahinter.
 *
 * ABHAENGIG VON: den Token aus southvision-child/bloecke/basis.css
 * (--sb-petrol-700/-900, --sb-weiss, --sb-gelb, --sb-radius-s,
 * --sb-schrift-text, --sb-text), jeweils mit Ersatzwert, weil diese Datei im
 * Plugin liegt und die Token im Child-Theme. Kein fremdes Stylesheet, kein
 * Theme-Markup, kein JavaScript.
 *
 * DIE EINE REGEL, DIE NACH AUSSEN WIRKT: das Elternelement des Abzeichens
 * bekommt position:relative, damit das Abzeichen im Bild sitzt. Sie greift
 * ueber :has() nur dort, wo wirklich ein Abzeichen haengt.
 *
 * RUECKBAU: Option sb_kibild_baustein_batch_aktiv loeschen, dann laedt diese
 * Datei nicht mehr und im HTML steht nichts davon.
 */

/* Der Anker: nur Elemente, die tatsaechlich ein Abzeichen tragen. */
:where(a, div, figure, li, picture, section, span, td):has(> .sb-kibild) {
    position: relative;
}

.sb-kibild {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    /* Die Hero-Galerie setzt pointer-events:none auf .imgWrap (Entsch. 32),
       damit die Bilder nicht klickbar sind. Das Abzeichen ist es doch. */
    pointer-events: auto;
    line-height: 1;
}

/* Variante C (Daniel, 21.09.2026 abends): nur das EU-Zeichen, kein Wort.
   Der dunkle Kasten sitzt eng um den Kreis, damit er das Bild kaum zudeckt;
   das Zeichen ist 22 px gross, damit die Buchstaben AI lesbar bleiben. */
.sb-kibild-abzeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 4px;
    border: 0;
    border-radius: 10px;
    background-color: rgba(2, 28, 30, 0.72);
    cursor: pointer;
}

/* Drei Klassen tief, und das mit Absicht: Die CPT-Stylesheets setzen
   .sbHeroGalerie .imgWrap img auf position:absolute mit 100 Prozent Breite und
   Hoehe (Spezifitaet 0-2-1). Eine flache Regel verliert dagegen, und das
   Zeichen fuellte den ganzen Knopf. Auf die Ladereihenfolge ist kein Verlass
   (Befund F52), deshalb gewinnt hier die Spezifitaet: 0-3-0 schlaegt 0-2-1. */
.sb-kibild .sb-kibild-abzeichen .sb-kibild-zeichen {
    position: static;
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.sb-kibild-abzeichen:hover,
.sb-kibild-abzeichen:focus-visible {
    background-color: var(--sb-petrol-900, #021c1e);
}

/* Die Tafel. popover="auto": geschlossen, bis jemand das Abzeichen antippt.
   Browser ohne Popover-Unterstuetzung kennen das Attribut nicht, deshalb hier
   zusaetzlich display:none - sonst staende der Text offen in der Seite. */
.sb-kibild-tafel {
    display: none;
}

.sb-kibild-tafel:popover-open {
    display: flex;
    position: fixed;
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    gap: 12px;
    width: min(360px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    margin: 0;
    padding: 20px;
    border: 0;
    border-radius: var(--sb-radius, 20px);
    background-color: var(--sb-weiss, #ffffff);
    color: var(--sb-text, #1f2937);
    font-family: var(--sb-schrift-text, "Source Sans 3", sans-serif);
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
}

.sb-kibild-tafel::backdrop {
    background-color: rgba(2, 28, 30, 0.55);
}

.sb-kibild-titel {
    color: var(--sb-petrol-700, #004445);
    font-family: var(--sb-schrift-titel, Montserrat, sans-serif);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.sb-kibild-text {
    display: block;
}

.sb-kibild-link {
    color: var(--sb-petrol-700, #004445);
    font-weight: 600;
    text-decoration: underline;
}

.sb-kibild-zu {
    align-self: flex-start;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--sb-petrol-700, #004445);
    border-radius: var(--sb-radius-s, 12px);
    background-color: transparent;
    color: var(--sb-petrol-700, #004445);
    font-family: var(--sb-schrift-text, "Source Sans 3", sans-serif);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.sb-kibild-zu:hover,
.sb-kibild-zu:focus-visible {
    background-color: var(--sb-gelb, #e5de00);
}

/* Handy: das Abzeichen etwas kleiner, damit es kleine Bilder nicht zudeckt. */
/* Handy: die Tippflaeche wird NICHT kleiner, im Gegenteil. Der Kasten um das
   Bild schluckt jeden Fehlgriff (pointer-events: none), und 30 px sind fuer
   einen Daumen schon knapp. */
@media (max-width: 767px) {
    .sb-kibild {
        right: 6px;
        bottom: 6px;
    }

    .sb-kibild-abzeichen {
        width: 34px;
        height: 34px;
        padding: 5px;
    }

    .sb-kibild .sb-kibild-abzeichen .sb-kibild-zeichen {
        width: 24px;
        height: 24px;
    }
}