/**
 * Bild-Galerie (inline, aufklappbar) - generische Komponente
 *
 * Gemeinsam genutzt fuer Wappen UND Avatare, in Heldengenerierung (Schritt 3)
 * und Helden-Einstellungen. Ersetzt die alte Mediabox-Lightbox.
 * Skin-adaptiv ueber die --mobile-* / --space-* / --touch-target-* Tokens
 * (jeder Skin ueberschreibt die --mobile-* Farben am :root). Responsives
 * Grid (auto-fill) - funktioniert Desktop wie Mobil.
 *
 * Global ueber html_head_css.inc.php geladen (css_link, ?v=filemtime).
 * Markup + Verhalten liefert render_bild_galerie() in functions_general.inc.php.
 */

.bild-galerie {
    margin-top: 10px;
    padding: var(--space-sm, 0.5rem);
    border: 1px solid var(--mobile-border-soft);
    border-radius: 8px;
    background: var(--mobile-surface-2);
    box-sizing: border-box;
}

.bild-galerie-search {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--touch-target-min, 44px);
    padding: 8px 14px;
    margin-bottom: var(--space-sm, 0.5rem);
    border: 1px solid var(--mobile-border);
    border-radius: 20px;
    background: var(--mobile-surface);
    color: var(--mobile-text);
    font-size: inherit;
    font-family: inherit;
}

.bild-galerie-search:focus {
    outline: none;
    border-color: var(--mobile-accent);
    box-shadow: 0 0 0 3px var(--mobile-border-soft);
}

.bild-galerie-search::placeholder {
    opacity: 0.6;
}

.bild-galerie-kat-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs, 0.25rem);
    margin-bottom: var(--space-sm, 0.5rem);
}

.bild-galerie-kat {
    cursor: pointer;
    padding: 6px 16px;
    min-height: var(--touch-target-min, 44px);
    border: 1px solid var(--mobile-border);
    border-radius: 16px;
    background: var(--mobile-chip-bg);
    color: var(--mobile-text);
    font-size: inherit;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease;
}

.bild-galerie-kat.active {
    background: var(--mobile-accent);
    color: var(--mobile-accent-contrast);
    border-color: var(--mobile-accent-strong);
    font-weight: 600;
}

.bild-galerie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: var(--space-xs, 0.25rem);
    max-height: 50vh;
    overflow-y: auto;
    padding: 2px;
}

.bild-kachel {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 2px solid transparent;
    border-radius: 6px;
    background: var(--mobile-surface);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.bild-kachel:hover {
    border-color: var(--mobile-accent);
    transform: translateY(-2px);
}

.bild-kachel.selected {
    border-color: var(--mobile-accent);
    box-shadow: 0 0 0 2px var(--mobile-accent);
}

.bild-kachel img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
}

.bild-galerie-no-results {
    padding: var(--space-md, 1rem);
    text-align: center;
    opacity: 0.7;
    font-style: italic;
}