/*
 * psn ToolKit - Bildnachweis-Liste (Frontend-Inhaltselement).
 * Bewusst zurueckhaltend/self-contained; erbt Schrift/Farbe vom Theme, bringt nur
 * Layout + dezente Struktur mit.
 */
.psn-credits { margin: 1.5rem 0; }
.psn-credits-heading { margin: 0 0 1rem; }

.psn-credits-toolbar { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; flex-wrap: wrap; }
.psn-credits-search { position: relative; flex: 1 1 260px; max-width: 420px; display: inline-block; }
.psn-credits-filter {
    width: 100%; box-sizing: border-box; padding: .55em 2.1em .55em .8em;
    border: 1px solid rgba(127, 127, 127, .45); border-radius: 6px;
    font: inherit; color: inherit; background: transparent;
}
.psn-credits-filter:focus { outline: 2px solid #4394d1; outline-offset: 1px; }
.psn-credits-clear {
    position: absolute; right: .35em; top: 50%; transform: translateY(-50%);
    border: 0; background: transparent; color: inherit; cursor: pointer;
    font-size: 1.35em; line-height: 1; padding: 0 .25em; opacity: .5;
}
.psn-credits-clear:hover { opacity: .9; }
.psn-credits-count { font-size: .85em; opacity: .65; }

.psn-credits-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
}
.psn-credits-item {
    display: flex; gap: 1rem; align-items: flex-start;
    padding: 1rem; border: 1px solid rgba(127, 127, 127, .28); border-radius: 8px;
    list-style: none;
}
/* Theme-Dekoration (pinkfarbener "›"-Pfeil-Bullet vor Listeneintraegen) hier weg. */
.psn-credits-item::before, .psn-credits-item::after, .psn-credits-item::marker {
    content: none !important; display: none !important; background: none !important;
}
.psn-credits-item[hidden] { display: none; }
@media (max-width: 900px) { .psn-credits-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .psn-credits-list { grid-template-columns: minmax(0, 1fr); } }

.psn-credits-thumb { flex: 0 0 auto; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; line-height: 0; }
.psn-credits-thumb img {
    display: block; width: 96px; height: 96px; object-fit: cover;
    border-radius: 6px; background: rgba(127, 127, 127, .12);
}

/* Lightbox (Klick auf Thumbnail -> Originalbild als Overlay). */
.psn-credits-lightbox {
    position: fixed; inset: 0; z-index: 99999; padding: 2rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .85); cursor: zoom-out;
}
.psn-credits-lightbox[hidden] { display: none; }
.psn-credits-lightbox img {
    max-width: 92vw; max-height: 88vh; width: auto; height: auto;
    border-radius: 4px; box-shadow: 0 6px 48px rgba(0, 0, 0, .5); background: #fff; cursor: default;
}
.psn-credits-lightbox-close {
    position: absolute; top: .75rem; right: 1.25rem; z-index: 1;
    font-size: 2.4rem; line-height: 1; color: #fff; background: none; border: 0; cursor: pointer; opacity: .85;
}
.psn-credits-lightbox-close:hover { opacity: 1; }

.psn-credits-body { flex: 1 1 auto; min-width: 0; }
.psn-credits-copyright { font-weight: 600; }
.psn-credits-row { font-size: .92em; margin-top: .15rem; }
.psn-credits-label { opacity: .6; }
.psn-credits-usage { font-size: .85em; margin-top: .35rem; opacity: .85; }
.psn-credits-usage a { text-decoration: underline; }
.psn-credits-usage code { font-size: .92em; word-break: break-all; }
.psn-credits-file { font-size: .78em; opacity: .5; margin-top: .35rem; word-break: break-all; }

.psn-credits-empty { opacity: .7; font-style: italic; }

@media (max-width: 480px) {
    .psn-credits-thumb img { width: 64px; height: 64px; }
}