/* RandRow Public CSS - Updated */

/* Base Row Layout Classes */
.randrow-container {
    width: 100%;
    box-sizing: border-box;
}

.randrow-block-container {
    width: 100%;
    box-sizing: border-box;
}

.randrow-block-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
    box-sizing: border-box;
}

/* Column Gutter Styles — scoped to legacy .randrow-block-row only.
   The Gutenberg block system uses CSS gap (defined in style.css) and
   must NOT have negative margins here, which would consume container padding. */
.randrow-block-row.randrow-column-gutter-sm {
    margin-left: -5px;
    margin-right: -5px;
}

.randrow-block-row.randrow-column-gutter-sm > .randrow-col {
    padding-left: 5px;
    padding-right: 5px;
}

.randrow-block-row.randrow-column-gutter-md {
    margin-left: -10px;
    margin-right: -10px;
}

.randrow-block-row.randrow-column-gutter-md > .randrow-col {
    padding-left: 10px;
    padding-right: 10px;
}

.randrow-block-row.randrow-column-gutter-lg {
    margin-left: -15px;
    margin-right: -15px;
}

.randrow-block-row.randrow-column-gutter-lg > .randrow-col {
    padding-left: 15px;
    padding-right: 15px;
}

/* Row Gutter Styles */
.randrow-row-gutter-sm .randrow-block-row {
    margin-bottom: 10px;
}

.randrow-row-gutter-md .randrow-block-row {
    margin-bottom: 20px;
}

.randrow-row-gutter-lg .randrow-block-row {
    margin-bottom: 30px;
}

/* Divider Styles */
.randrow-top-divider {
    border-top: 1px solid #e0e0e0;
    padding-top: 20px;
}

.randrow-bottom-divider {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 20px;
}

/* Column Styles */
.randrow-col {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
}

.randrow-col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.randrow-col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.randrow-col-3 { flex: 0 0 25%; max-width: 25%; }
.randrow-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.randrow-col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.randrow-col-6 { flex: 0 0 50%; max-width: 50%; }
.randrow-col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.randrow-col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.randrow-col-9 { flex: 0 0 75%; max-width: 75%; }
.randrow-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.randrow-col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.randrow-col-12 { flex: 0 0 100%; max-width: 100%; }

/* Column Content */
.randrow-column-content {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Responsive Stack */
.randrow-responsive-stack {
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .randrow-responsive-stack {
        flex-direction: column;
    }
    
    .randrow-responsive-stack > .randrow-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px;
    }
    
    .randrow-responsive-stack > .randrow-col:last-child {
        margin-bottom: 0;
    }
}

/* Animations */
.randrow-fade-in {
    animation: randrowFadeIn 0.3s ease-in;
}

@keyframes randrowFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Utility Classes */
.randrow-text-center { text-align: center; }
.randrow-text-left { text-align: left; }
.randrow-text-right { text-align: right; }
.randrow-mt-20 { margin-top: 20px; }
.randrow-mb-20 { margin-bottom: 20px; }
.randrow-p-20 { padding: 20px; }