.wp-block-wedplan-blog-random-images-block {
    position: relative;
    height: 60vh;
    min-height: 300px;
    max-height: 800px;
    height: clamp(300px, 60vh, 800px);
    display: block;
    box-sizing: border-box;
}

.wp-block-wedplan-blog-random-images-block * {
    box-sizing: border-box;
}

.wp-block-wedplan-blog-random-images-block .blog-random-images-single {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.wp-block-wedplan-blog-random-images-block .blog-random-images-single img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.wp-block-wedplan-blog-random-images-block .blog-random-images-layout {
    display: flex;
    align-items: stretch;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.wp-block-wedplan-blog-random-images-block .blog-random-images-rotator {
    flex: 0 0 30%;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.wp-block-wedplan-blog-random-images-block .rotator-gallery {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
}

.wp-block-wedplan-blog-random-images-block .rotator-gallery .rotator-slide,
.wp-block-wedplan-blog-random-images-block .rotator-gallery .flickity-cell {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.wp-block-wedplan-blog-random-images-block .rotator-gallery .rotator-slide img,
.wp-block-wedplan-blog-random-images-block .rotator-gallery .flickity-cell img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 1;
}

.wp-block-wedplan-blog-random-images-block .blog-random-images-featured {
    flex: 0 0 70%;
    overflow: hidden;
    height: 100%;
    position: relative;
}

.wp-block-wedplan-blog-random-images-block .blog-random-images-featured img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Flickity specific styles */
.wp-block-wedplan-blog-random-images-block .rotator-gallery.flickity-enabled {
    background: transparent;
    height: 100%;
}

.wp-block-wedplan-blog-random-images-block .rotator-gallery .flickity-viewport {
    height: 100%;
    width: 100%;
}

.wp-block-wedplan-blog-random-images-block .rotator-gallery .flickity-slider {
    height: 100%;
    width: 100%;
}

/* Flickity fade effect styles */
.wp-block-wedplan-blog-random-images-block .rotator-gallery.flickity-enabled .rotator-slide,
.wp-block-wedplan-blog-random-images-block .rotator-gallery.flickity-enabled .flickity-cell {
    width: 100%;
    left: 0 !important;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
    display: block !important;
}

.wp-block-wedplan-blog-random-images-block .rotator-gallery.flickity-enabled .rotator-slide.is-selected,
.wp-block-wedplan-blog-random-images-block .rotator-gallery.flickity-enabled .flickity-cell.is-selected {
    opacity: 1;
    pointer-events: auto;
}

/* Ensure first slide is visible before Flickity initializes */
.wp-block-wedplan-blog-random-images-block .rotator-gallery:not(.flickity-enabled) .rotator-slide {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.wp-block-wedplan-blog-random-images-block .rotator-gallery:not(.flickity-enabled) .rotator-slide:first-child {
    display: block;
}

/* Mobile styles */
@media (max-width: 768px) {
    .wp-block-wedplan-blog-random-images-block {
        height: 50vh;
        min-height: 250px;
        max-height: 600px;
        height: clamp(250px, 50vh, 600px);
    }
    
    .wp-block-wedplan-blog-random-images-block .blog-random-images-layout {
        display: block;
    }
    
    .wp-block-wedplan-blog-random-images-block .blog-random-images-rotator {
        display: none;
    }
    
    .wp-block-wedplan-blog-random-images-block .blog-random-images-featured {
        flex: none;
        width: 100%;
        height: 100%;
    }
}

/* Editor styles */
.editor-styles-wrapper .wp-block-wedplan-blog-random-images-block {
    height: 60vh !important;
    min-height: 300px !important;
    max-height: 800px !important;
    height: clamp(300px, 60vh, 800px) !important;
}

.block-editor-block-preview__content .wp-block-wedplan-blog-random-images-block {
    height: auto;
    max-height: none;
    min-height: 300px;
}