/**
 * Dynamic Grid Block Styles
 * File: /blocks/dynamic-grid/style.css
 */
.dynamic-grid-block .grid-container {
    margin: 0 auto;
    position: relative;
}

.dynamic-grid-block .grid-layout {
    display: grid;
	grid-template-columns: 1fr;
    grid-template-rows: 
        var(--blue-height, 150px)
        1fr
        1fr
        var(--green-height, 150px);
}

/* Top section (blue/background image area) */
.dynamic-grid-block .top-section {
    grid-row: 1 / span 2;
    grid-column: 1;
    background-color: lightgray;
	background-size: cover;
    position: relative;
    z-index: 1;
    min-height: var(--blue-height, 150px);
}

/* Ghost anchor (positioning reference) */
.dynamic-grid-block .ghost-anchor {
    background-color: #ff00ff;
    grid-row: 2;
    grid-column: 1;
    z-index: 0;
}

/* Background image styles */
.dynamic-grid-block .top-section.has-background {
    background-color: transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.dynamic-grid-block .top-section.has-background + .ghost-anchor {
    background-color: transparent;
}

/* Spacer section (grows with content) */
.dynamic-grid-block .spacer-section {
    grid-row: 3;
    grid-column: 1;
    background-color: transparent;
    z-index: 1;
}

/* Bottom section (green area) */
.dynamic-grid-block .bottom-section {
    grid-row: 4;
    grid-column: 1;
    background-color: transparent;
    z-index: 1;
    min-height: var(--green-height, 150px);
}

/* Content box (red box with Inner Blocks) */
.dynamic-grid-block .content-box {
    grid-row: 2 / span 2;
    grid-column: 1;
    align-self: center;
    justify-self: center;
    box-sizing: border-box;
    z-index: 10;
    min-height: fit-content;
	padding-left: var(--dynamic-grid--padding-left);
	padding-right: var(--dynamic-grid--padding-right);
}

.dynamic-grid-block .content-box > .inner{
	max-width: var(--dynamic-grid--container-width, unset);
	background-color: white;
	box-shadow: var(--dynamic-grid--box-shadow);
}

.dynamic-grid-block .content-box .wp-block {
    margin-bottom: 1em;
}

.dynamic-grid-block .content-box .wp-block:last-child {
    margin-bottom: 0;
}

/* Editor specific styles */
.block-editor-block-list__layout .dynamic-grid-block .content-box {
    min-height: 80px;
}