/**
 * Styling for media in imported Nostr posts.
 *
 * Loaded on the frontend and in the admin, matching the wp_head/admin_head
 * output this replaces.
 */
/* Responsive image styling */
.nostr-imported-image {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 1em auto !important;
}

/* Container for better scaling */
.wp-block-image {
    max-width: 800px !important; /* Maximum width for large screens */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Ensure images don't overflow on mobile */
@media (max-width: 800px) {
    .wp-block-image {
        width: 100% !important;
        padding: 0 10px !important;
    }
}

/* Improved video styling */
.wp-block-video {
    max-width: 800px;
    margin: 2em auto;
    position: relative;
    aspect-ratio: 16/9;
}

.wp-block-video video {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 8px;
    background: #000;
    object-fit: contain;
}

/* Ensure controls are visible */
.wp-block-video video::-webkit-media-controls {
    display: flex !important;
    visibility: visible !important;
}

.wp-block-video video::-webkit-media-controls-enclosure {
    display: flex !important;
    visibility: visible !important;
}