/*
 * Darstellung zu assets/photo-upload.js (Vorschau-Kacheln).
 *
 * Farben und Masse kommen aus CSS-Variablen. Jede Seite kann sie an ihr Design
 * anpassen, ohne diese Datei zu aendern, zum Beispiel:
 *
 *   .form-section { --pu-border: #333; --pu-muted: #a5a5a5; }
 */

.photo-previews {
    --pu-size: 96px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--pu-size), 1fr));
    gap: var(--pu-gap, 0.6rem);
    margin-top: var(--pu-gap, 0.6rem);
}

.photo-previews[hidden] {
    display: none;
}

.photo-preview {
    margin: 0;
    min-width: 0;
}

.photo-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border: 1px solid var(--pu-border, rgba(255, 255, 255, 0.15));
    border-radius: var(--pu-radius, 4px);
    background: var(--pu-bg, transparent);
}

.photo-preview figcaption {
    margin-top: 0.25rem;
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--pu-muted, inherit);
    text-transform: none;
    letter-spacing: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Format, das der Browser nicht anzeigen kann: nur der Dateiname, dafuer vollstaendig. */
.photo-preview.no-image figcaption {
    white-space: normal;
    word-break: break-all;
}