/* Frontend-only styles for BuilderGlut Two blocks */

/* Frontend container styles */
.wp-block-builderglut-two-container {
    display: flex !important;
    width: 100%;
    gap: 20px;
    box-sizing: border-box !important;
    overflow: visible !important;
    max-width: 100% !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
}

.wp-block-builderglut-two-container.equal-height {
    align-items: stretch;
}

.wp-block-builderglut-two-container.equal-height .wp-block-builderglut-two-column {
    height: 100%;
}

/* Frontend two-rows layout */
.wp-block-builderglut-two-container[data-layout="two-rows-mixed"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    width: 100% !important;
}

/* Frontend two-rows column sizing */
.wp-block-builderglut-two-container[data-layout="two-rows-mixed"] .wp-block-builderglut-two-column:nth-child(1) {
    flex: 0 0 calc(25% - 10px) !important;
    width: calc(25% - 10px) !important;
    max-width: calc(25% - 10px) !important;
}

.wp-block-builderglut-two-container[data-layout="two-rows-mixed"] .wp-block-builderglut-two-column:nth-child(2) {
    flex: 0 0 calc(75% - 10px) !important;
    width: calc(75% - 10px) !important;
    max-width: calc(75% - 10px) !important;
}

.wp-block-builderglut-two-container[data-layout="two-rows-mixed"] .wp-block-builderglut-two-column:nth-child(3) {
    flex: 0 0 calc(50% - 10px) !important;
    width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
}

.wp-block-builderglut-two-container[data-layout="two-rows-mixed"] .wp-block-builderglut-two-column:nth-child(4) {
    flex: 0 0 calc(50% - 10px) !important;
    width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
}

/* Force wrap after second column to create two rows */
.wp-block-builderglut-two-container[data-layout="two-rows-mixed"] .wp-block-builderglut-two-column:nth-child(2)::after {
    content: '';
    flex-basis: 100%;
    height: 0;
}

/* Frontend Column Styles - clean, no borders */
.wp-block-builderglut-two-column {
    min-height: auto !important;
    position: relative !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    transition: none !important;
    overflow: visible !important;
    word-wrap: break-word !important;
    box-sizing: border-box !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    box-shadow: none !important;
    display: flex !important;
}

/* Frontend specific content wrapper to maintain user's custom padding/margins */
.wp-block-builderglut-two-column > * {
    width: 100%;
    flex: none !important;
}

/* Ensure content within columns respects boundaries */
.wp-block-builderglut-two-column * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Handle specific content types that might overflow */
.wp-block-builderglut-two-column img {
    max-width: 100% !important;
    height: auto !important;
}

.wp-block-builderglut-two-column pre,
.wp-block-builderglut-two-column code {
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
}

.wp-block-builderglut-two-column table {
    width: 100% !important;
    table-layout: fixed !important;
}

.wp-block-builderglut-two-column .wp-block,
.wp-block-builderglut-two-column [class*="wp-block"] {
    max-width: 100% !important;
    overflow: hidden !important;
    word-wrap: break-word !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Frontend responsive */
    .wp-block-builderglut-two-container {
        flex-direction: column !important;
        padding: 0 !important;
        gap: 20px !important;
    }
    
    .wp-block-builderglut-two-container .wp-block-builderglut-two-column {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
    }
    
    /* Frontend two-row layout becomes single column on mobile */
    .wp-block-builderglut-two-container[data-layout="two-rows-mixed"] {
        flex-direction: column !important;
    }
    
    .wp-block-builderglut-two-container[data-layout="two-rows-mixed"] .wp-block-builderglut-two-column {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}