/* Media Content Editor & Frontend Flex Grid Layout */
.anm-media-content-editor-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.anm-media-content-editor-wrapper .block-editor-block-list__layout,
.wp-block-anm-media-content .block-editor-block-list__layout {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (min-width: 768px) {
    .anm-media-content-editor-wrapper .block-editor-block-list__layout,
    .wp-block-anm-media-content .block-editor-block-list__layout {
        gap: 24px !important;
    }
}

/* Flex item rules for editor and frontend */
.anm-media-content-editor-wrapper .block-editor-block-list__layout > .wp-block,
.wp-block-anm-media-content .block-editor-block-list__layout > .wp-block,
.media-item-group {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    flex: 1 1 260px !important;
    min-width: 220px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

@media (min-width: 768px) {
    .anm-media-content-editor-wrapper .block-editor-block-list__layout > .wp-block,
    .wp-block-anm-media-content .block-editor-block-list__layout > .wp-block,
    .media-item-group {
        flex: 1 1 calc(33.333% - 16px) !important;
        max-width: calc(33.333% - 16px) !important;
    }
}

.media-item-title,
.media-item-subtitle {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* Ensure SVG icon sizing */
.media-item-image img,
.media-item-image svg {
    max-width: 70px !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* 
 * Respect parent core/group layout & padding containment
 */
.wp-block-group > .wp-block-anm-media-content,
.is-layout-constrained > .wp-block-anm-media-content {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

.wp-block-anm-media-content > div,
.anm-media-content-editor-wrapper > div {
    max-width: 1240px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 
 * CRITICAL: Zero out ALL padding on Parent Block Container & Inner Wrapper Divs
 * Parent block container MUST HAVE 0 padding vertically and horizontally.
 */
.wp-block-anm-media-content,
.anm-media-content-editor-wrapper,
.wp-block-anm-media-content > div,
.anm-media-content-editor-wrapper > div,
.wp-block-anm-media-content.has-background,
.anm-media-content-editor-wrapper.has-background,
.wp-block-anm-media-content.has-text-color,
.anm-media-content-editor-wrapper.has-text-color {
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 
 * Apply ALL Parent Block Support Settings directly to Child Item Group Cards (.media-item-group)
 * Padding, Background Color, Text Color, Border Radius, Shadow configured on parent block.
 */
.wp-block-anm-media-content .media-item-group,
.anm-media-content-editor-wrapper .media-item-group {
    padding-top: var(--item-pt, 28px) !important;
    padding-right: var(--item-pr, 20px) !important;
    padding-bottom: var(--item-pb, 24px) !important;
    padding-left: var(--item-pl, 20px) !important;
    background-color: var(--item-bg, #ffffff) !important;
    color: var(--item-color, #111827) !important;
    border-radius: var(--item-radius, 10px) !important;
    box-shadow: var(--item-shadow, 0 2px 12px rgba(0, 0, 0, 0.04)) !important;
}

.wp-block-anm-media-content .media-item-group .media-item-title,
.anm-media-content-editor-wrapper .media-item-group .media-item-title,
.wp-block-anm-media-content .media-item-group .media-item-subtitle,
.anm-media-content-editor-wrapper .media-item-group .media-item-subtitle {
    color: var(--item-color, inherit) !important;
}