/**
 * Instagram Sync - Frontend Styles
 * Styles for displaying Instagram media (images and videos) on the frontend
 */

/* Video wrapper */
.instagram-video-wrapper {
    margin: 20px 0;
    text-align: center;
}

/* Video player */
.instagram-video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Responsive video */
@media (max-width: 768px) {
    .instagram-video-wrapper {
        margin: 15px 0;
    }
    
    .instagram-video {
        width: 100%;
    }
}

/* Image styles (existing) */
.instagram-image {
    max-width: 100%;
    height: auto;
}

/* Gallery layout for carousel posts with mixed media */
.instagram-media-gallery {
    display: grid;
    gap: 20px;
    margin: 20px 0;
}

.instagram-media-gallery .instagram-video-wrapper,
.instagram-media-gallery .wp-block-image {
    margin: 0;
}