/**
 * Frontend Styles for Layout Block
 */

.wp-block-perron-layout {
    display: grid;
    /* Or flex */
    gap: 1rem;
    /* Adjust gap as needed */
    align-items: start;
}

.perron-layout-cell {
    height: 100%;
}

/* Add specific layout styles here based on classes like .perron-layout-50-50 */

.perron-layout-cell>*+* {
    margin-block-start: var(--flow, 2rem);
}

/* Example for 50-50 */
.wp-block-perron-layout.perron-layout-50-50 {
    grid-template-columns: repeat(2, 1fr);
}

/* Example for 33-33-33 */
.wp-block-perron-layout.perron-layout-33-33-33 {
    grid-template-columns: repeat(3, 1fr);
}

/* Example for 25-75 */
.wp-block-perron-layout.perron-layout-25-75 {
    grid-template-columns: 1fr 3fr;
}

/* Example for 75-25 */
.wp-block-perron-layout.perron-layout-75-25 {
    grid-template-columns: 3fr 1fr;
}

/* Example for 25-25-25-25 */
.wp-block-perron-layout.perron-layout-25-25-25-25 {
    grid-template-columns: repeat(4, 1fr);
}

/* Example for 66-33 */
.wp-block-perron-layout.perron-layout-66-33 {
    grid-template-columns: 2fr 1fr;
}

/* Example for 33-66 */
.wp-block-perron-layout.perron-layout-33-66 {
    grid-template-columns: 1fr 2fr;
}

/* Add responsive adjustments if needed */
@media (max-width: 767px) {
    .wp-block-perron-layout {
        grid-template-columns: 1fr !important;
        /* Stack columns on smaller screens */
    }
}

.wp-block-perron-layout>.wp-block {
    /* Styles for individual columns on the frontend if needed */
    /* Example: ensure inner blocks fill the column */
    width: 100%;
}

.wp-block-perron-layout {
    gap: clamp(1.6rem, 3vw, 4rem);
    align-items: stretch;
}

.perron-layout-cell {
    position: relative;
    min-width: 0;
}

.perron-layout-cell> :is(.wp-block-group, .wp-block-quote, .wp-block-pullquote),
.perron-layout-cell> :is(p, ul, ol):only-child {
    height: 100%;
    padding: clamp(1.6rem, 2.5vw, 3rem);
    border: 1px solid color-mix(in oklch, var(--foreground), transparent 88%);
    border-radius: clamp(1.4rem, 2vw, 2.6rem);
    background: color-mix(in oklch, var(--paper), transparent 12%);
    box-shadow: var(--ai-shadow, 0 24px 80px rgba(0, 0, 0, 0.12));
    backdrop-filter: blur(16px) saturate(130%);
}

.perron-layout-cell> :is(.wp-block-group, .wp-block-quote, .wp-block-pullquote) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.perron-layout-cell p {
    color: color-mix(in oklch, var(--text), transparent 12%);
}

.wp-block-perron-layout.alignfull {
    padding-inline: clamp(1.2rem, 3vw, 4rem);
}

@media (min-width: 768px) {
    .wp-block-perron-layout.perron-layout-25-25-25-25 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) and (min-width: 768px) {

    .wp-block-perron-layout.perron-layout-25-25-25-25,
    .wp-block-perron-layout.perron-layout-33-33-33 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}