/* ===========================================
   pagePartials/mediaFallback.css
   Graceful placeholders for offline/failed media
   =========================================== */

/* --- Image Fallback --- */

.media-load-failed {
    opacity: 0 !important;
    pointer-events: none;
}

.media-error {
    position: relative;
    cursor: default !important;
    pointer-events: none;
}

.media-error::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #f3f4f6;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3Cline x1='2' y1='2' x2='22' y2='22'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px 32px;
    z-index: 1;
}

/* Disable hover effects on errored gallery items */
.page-gallery-item:has(.media-error) {
    pointer-events: none;
    transform: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

/* --- Iframe Fallback Overlay (shared) --- */

.media-fallback-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 2;
    border-radius: inherit;
    /* A label, not a control: it must never swallow a tap meant for the player or
       map underneath (pointer-events defaults to auto, which it did). */
    pointer-events: none;
}

.media-fallback-overlay svg {
    opacity: 0.6;
}

.media-fallback-overlay span {
    font-size: 13px;
    font-weight: 500;
}

/* Video variant */
.media-fallback-overlay--video {
    background: #1a1a2e;
}

.media-fallback-overlay--video svg {
    color: rgba(255, 255, 255, 0.35);
}

.media-fallback-overlay--video span {
    color: rgba(255, 255, 255, 0.5);
}

/* Map variant */
.media-fallback-overlay--map {
    background: #e8eaed;
}

.media-fallback-overlay--map svg {
    color: #9ca3af;
}

.media-fallback-overlay--map span {
    color: #6b7280;
}