/* Only apply to our block, not WordPress media modal */
/* Use more specific selector to avoid conflicts with WordPress media modal */
[data-type="acf/layout-media-frame"] .media-frame,
.block-editor-block-list__block[data-type="acf/layout-media-frame"] .media-frame,
.editor-styles-wrapper [data-type="acf/layout-media-frame"] .media-frame {
    position: relative !important;
    padding: 40px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    height: auto;
}

.media-frame__container {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg, #51ba6e, transparent 15%, transparent 85%, #51ba6e);
    border-radius: 16px;
    z-index: 0;
    margin: 0 auto;
}

/* Inline style will override this default */

/* Size options */
.media-frame__container--small {
    max-width: 400px;
}

.media-frame__container--medium {
    max-width: 600px;
}

.media-frame__container--large {
    max-width: 800px;
}

.media-frame__container--full {
    max-width: 100%;
}

.media-frame__container::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: #fff;
    border-radius: 14px;
    z-index: 1;
    pointer-events: none;
}

/* Ensure ::after doesn't clip content in editor */
.block-editor-block-list__block .media-frame__container::after,
.editor-styles-wrapper .media-frame__container::after,
.block-editor-block-list__layout .media-frame__container::after {
    pointer-events: none;
    z-index: -1;
}

.media-frame__media {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 100px;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 38px;
    background: #fff;
    border-radius: 14px;
    overflow: visible;
}

.media-frame__image,
.media-frame__video {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 50px !important;
    min-width: 50px !important;
    display: block !important;
    border-radius: 14px;
    object-fit: contain;
    overflow: visible;
    position: relative;
    z-index: 3 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.media-frame__image {
    max-height: none !important;
    height: auto !important;
    width: auto !important;
    min-width: 50px !important;
    min-height: 50px !important;
    position: relative;
    z-index: 3 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.media-frame__video {
    background: #000;
}

/* Grid Layout */
.media-frame--grid {
    padding: 40px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.media-frame__grid {
    display: grid;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.media-frame--grid-2 .media-frame__grid {
    grid-template-columns: repeat(2, 1fr);
}

.media-frame--grid-3 .media-frame__grid {
    grid-template-columns: repeat(3, 1fr);
}

.media-frame--grid-4 .media-frame__grid {
    grid-template-columns: repeat(4, 1fr);
}

.media-frame__grid-item {
    width: 100%;
}

.media-frame__grid-item .media-frame__container {
    max-width: 100%;
}

.media-frame__grid-item .media-frame__media {
    padding: 20px;
    min-height: 0;
}

.media-frame__grid-item .media-frame__image,
.media-frame__grid-item .media-frame__video {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Responsive */
@media (max-width: 768px) {
    [data-type="acf/layout-media-frame"] .media-frame,
    .block-editor-block-list__block[data-type="acf/layout-media-frame"] .media-frame,
    .editor-styles-wrapper [data-type="acf/layout-media-frame"] .media-frame {
        padding: 20px 0;
    }

    .media-frame__container {
        padding: 2px;
    }

    .media-frame__media {
        padding: 18px;
    }

    /* Grid responsive */
    .media-frame--grid-2 .media-frame__grid,
    .media-frame--grid-3 .media-frame__grid,
    .media-frame--grid-4 .media-frame__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .media-frame__grid-item .media-frame__media {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .media-frame--grid-2 .media-frame__grid,
    .media-frame--grid-3 .media-frame__grid,
    .media-frame--grid-4 .media-frame__grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* Editor styles - only for our block */
.block-editor-block-list__block[data-type="acf/layout-media-frame"] .media-frame {
    position: relative !important;
    overflow: visible !important;
    width: 100%;
    max-width: 100%;
    min-height: 200px;
    height: auto !important;
    max-height: none !important;
    padding: 40px 0;
}

.block-editor-block-list__block[data-type="acf/layout-media-frame"] .media-frame--grid {
    overflow: visible;
    width: 100%;
    max-width: 100%;
    min-height: 200px;
    padding: 40px 0;
}

.block-editor-block-list__block .media-frame__grid {
    overflow: visible;
    width: 100%;
    max-width: 100%;
}

.block-editor-block-list__block .media-frame__container {
    overflow: visible !important;
    box-sizing: border-box;
    min-height: 150px;
    height: auto;
}

.block-editor-block-list__block .media-frame__media {
    overflow: visible !important;
    box-sizing: border-box;
    min-height: 100px;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.block-editor-block-list__block .media-frame__grid-item {
    box-sizing: border-box;
    min-height: 150px;
}

/* Additional editor fixes to prevent overlap - only for our block */
.editor-styles-wrapper [data-type="acf/layout-media-frame"] .media-frame,
.block-editor-block-list__layout [data-type="acf/layout-media-frame"] .media-frame {
    margin-bottom: 20px;
    clear: both;
}

.editor-styles-wrapper .media-frame__container,
.block-editor-block-list__layout .media-frame__container {
    margin-bottom: 0;
}

.editor-styles-wrapper .media-frame__media,
.block-editor-block-list__layout .media-frame__media {
    position: relative;
    z-index: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Ensure images/GIFs are visible everywhere */
.media-frame__image,
.media-frame__video {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    min-width: 50px !important;
    min-height: 50px !important;
    z-index: 3 !important;
    position: relative !important;
}

/* Ensure images/GIFs are visible in editor */
.block-editor-block-list__block .media-frame__image,
.block-editor-block-list__block .media-frame__video {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    object-fit: contain !important;
}

.editor-styles-wrapper .media-frame__image,
.editor-styles-wrapper .media-frame__video,
.block-editor-block-list__layout .media-frame__image,
.block-editor-block-list__layout .media-frame__video {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
    object-fit: contain !important;
}

/* Prevent any clipping in editor - only for our block */
.block-editor-block-list__block[data-type="acf/layout-media-frame"] .media-frame,
.editor-styles-wrapper [data-type="acf/layout-media-frame"] .media-frame,
.block-editor-block-list__layout [data-type="acf/layout-media-frame"] .media-frame,
.block-editor-block-list__block .media-frame {
    position: relative !important;
    overflow: visible !important;
}

.block-editor-block-list__block .media-frame__container,
.editor-styles-wrapper .media-frame__container,
.block-editor-block-list__layout .media-frame__container {
    overflow: visible !important;
}