/* Optimistische Upload-Tiles: Sofort-Preview im Galerie-Grid mit
   Progress-Ring (während S3-PUT) → indeterminate Spinner (Server-Processing)
   → Failed-Overlay mit Retry-Button. Form & Größe identisch zu .gallery-item. */

.gallery-item-pending {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: #1f2937;
    cursor: default;
    border-radius: 6px;
    /* Ring um das Tile, damit es als „in Arbeit" erkennbar ist */
    box-shadow: inset 0 0 0 2px rgba(91, 106, 191, 0.55);
}

.gallery-item-pending img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

/* Wenn der Browser das Bild nicht rendern kann (z.B. HEIC vom iPhone),
   wird das <img> ausgeblendet und ein dezentes Foto-Icon im Hintergrund
   gezeigt — statt des broken-image-Icons des Browsers. */
.gallery-item-pending.no-preview img,
.event-hero-image.uploading img.upload-no-preview {
    visibility: hidden;
}

.gallery-item-pending.no-preview {
    background: #1f2937 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.35)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>") center/40% no-repeat;
}

.event-hero-image.uploading.no-preview {
    background: #1f2937 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.35)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>") center/64px no-repeat;
}

.gallery-item-pending .pending-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.15) 70%
    );
    pointer-events: none;
}

/* Wrapper hält Größe; Spinner sitzt absolut etwas außerhalb der Torte */
.pending-ring-wrap {
    position: relative;
    width: 36%;
    max-width: 56px;
    aspect-ratio: 1;
    flex-shrink: 0;
}

/* Äußerer Spinner-Ring — ::after auf dem Wrap, damit er garantiert über
   dem Ring-Element liegt (pseudo-elements paint after real children). */
.pending-ring-wrap::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ffffff;
    animation: pending-spin 0.9s linear infinite;
    pointer-events: none;
}


/* Progress-Ring (kreisförmig, deterministisch während Bytes-Upload) */
.pending-ring {
    position: relative;
    width: 100%;
    height: 100%;
    --pct: 0;
    border-radius: 50%;
    background:
        conic-gradient(
            #ffffff calc(var(--pct) * 1%),
            rgba(255, 255, 255, 0.18) 0
        );
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
    transition: --pct 0.15s linear;
}

.pending-ring::before {
    content: "";
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
}

/* Spinner (indeterminate, sobald PUT durch ist und Worker arbeitet) */
.pending-spinner {
    width: 32%;
    max-width: 48px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #ffffff;
    animation: pending-spin 0.9s linear infinite;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

@keyframes pending-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Konfirmations-Fade beim Übergang Pending → echtes Tile */
.gallery-item-pending.confirming {
    transition: opacity 0.25s ease;
    opacity: 0;
}

/* ───────────────────────────────────────────────────────────
   Event-Image (Hero) optimistisches Preview
   Identisches Verhalten wie Galerie-Tiles: erst Progress-Ring während
   des Uploads, danach indeterminate Spinner während Server-Processing.
   ─────────────────────────────────────────────────────────── */
.event-hero-image.uploading {
    position: relative;
}

.event-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

/* Progress-Ring identisch zur Galerie-Variante, leicht größer für Hero */
.event-image-overlay .pending-ring-wrap {
    width: 56px;
    max-width: none;
}

.event-image-overlay .pending-spinner {
    width: 44px;
    height: 44px;
    border-width: 3px;
}