/* =============================================================================
 * mincore-columns: Multiflexible Spalten-Container (2-Spalter, 3-Spalter)
 * =============================================================================
 * Nutzt CSS Grid + Bridge-Tokens fuer Mandantenfarben.
 * FlexForm-Modifier: ratio, gap, valign, stack, bg, padding, fullwidth, rounded
 * -- LILY
 * ============================================================================= */

/* Base */
.mincore-columns {
    width: 100%;
    max-width: var(--mandant-container-max, var(--container-max-width, 1140px));
    margin-inline: auto;
    padding-inline: var(--min-brand-container-padding, 1.5rem);
}

.mincore-columns--fullwidth {
    max-width: none;
    padding-inline: 0;
}

.mincore-columns__row {
    display: grid;
    width: 100%;
}

/* =============================================================================
 * 2-Spalten Ratios
 * ============================================================================= */
.mincore-columns--2 .mincore-columns__row { grid-template-columns: 1fr 1fr; }

.mincore-columns--ratio-50-50 .mincore-columns__row { grid-template-columns: 1fr 1fr; }
.mincore-columns--ratio-33-66 .mincore-columns__row { grid-template-columns: 1fr 2fr; }
.mincore-columns--ratio-66-33 .mincore-columns__row { grid-template-columns: 2fr 1fr; }
.mincore-columns--ratio-25-75 .mincore-columns__row { grid-template-columns: 1fr 3fr; }
.mincore-columns--ratio-75-25 .mincore-columns__row { grid-template-columns: 3fr 1fr; }
.mincore-columns--ratio-40-60 .mincore-columns__row { grid-template-columns: 2fr 3fr; }
.mincore-columns--ratio-60-40 .mincore-columns__row { grid-template-columns: 3fr 2fr; }

/* =============================================================================
 * 3-Spalten Ratios
 * ============================================================================= */
.mincore-columns--3 .mincore-columns__row { grid-template-columns: 1fr 1fr 1fr; }

.mincore-columns--ratio-33-33-33 .mincore-columns__row { grid-template-columns: 1fr 1fr 1fr; }
.mincore-columns--ratio-25-50-25 .mincore-columns__row { grid-template-columns: 1fr 2fr 1fr; }
.mincore-columns--ratio-50-25-25 .mincore-columns__row { grid-template-columns: 2fr 1fr 1fr; }
.mincore-columns--ratio-25-25-50 .mincore-columns__row { grid-template-columns: 1fr 1fr 2fr; }
.mincore-columns--ratio-20-60-20 .mincore-columns__row { grid-template-columns: 1fr 3fr 1fr; }

/* =============================================================================
 * Gap (Spaltenabstand)
 * ============================================================================= */
.mincore-columns--gap-none .mincore-columns__row { gap: 0; }
.mincore-columns--gap-sm .mincore-columns__row { gap: 1rem; }
.mincore-columns--gap-md .mincore-columns__row { gap: 2rem; }
.mincore-columns--gap-lg .mincore-columns__row { gap: 3rem; }
.mincore-columns--gap-xl .mincore-columns__row { gap: 4rem; }

/* =============================================================================
 * Vertical Alignment
 * ============================================================================= */
.mincore-columns--valign-start .mincore-columns__row { align-items: start; }
.mincore-columns--valign-center .mincore-columns__row { align-items: center; }
.mincore-columns--valign-end .mincore-columns__row { align-items: end; }
.mincore-columns--valign-stretch .mincore-columns__row { align-items: stretch; }

/* =============================================================================
 * Background (Bridge-Token-kompatibel)
 * ============================================================================= */
.mincore-columns--bg-light {
    background-color: var(--min-brand-surface, var(--mandant-surface, #ffffff));
}
.mincore-columns--bg-dark {
    background-color: var(--min-brand-dark, #1a1a1a);
    color: var(--min-brand-text-on-dark, #ffffff);
}
.mincore-columns--bg-primary {
    background-color: var(--min-brand-primary, var(--mandant-primary, #2A7C43));
    color: var(--min-brand-text-on-dark, #ffffff);
}
.mincore-columns--bg-secondary {
    background-color: var(--min-brand-secondary, var(--mandant-secondary, #5C4033));
    color: var(--min-brand-text-on-dark, #ffffff);
}
.mincore-columns--bg-accent {
    background-color: var(--min-brand-accent, var(--mandant-accent, #F4A300));
    color: var(--min-brand-text, #1a1a1a);
}
.mincore-columns--bg-muted {
    background-color: var(--min-brand-muted-bg, #f3f4f6);
}

/* =============================================================================
 * Padding
 * ============================================================================= */
.mincore-columns--pad-sm { padding: 1rem; }
.mincore-columns--pad-md { padding: 2rem; }
.mincore-columns--pad-lg { padding: 3rem 2rem; }

/* =============================================================================
 * Rounded
 * ============================================================================= */
.mincore-columns--rounded {
    border-radius: var(--min-brand-radius-lg, 8px);
    overflow: hidden;
}

/* =============================================================================
 * Responsive: Mobile Stack
 * ============================================================================= */

/* Tablet breakpoint (768px) */
@media (max-width: 767px) {
    .mincore-columns--stack-tablet .mincore-columns__row {
        grid-template-columns: 1fr !important;
    }
    .mincore-columns--stack-reverse .mincore-columns__row {
        grid-template-columns: 1fr !important;
    }
    .mincore-columns--stack-reverse .mincore-columns__col--left {
        order: 2;
    }
    .mincore-columns--stack-reverse .mincore-columns__col--right {
        order: 1;
    }
}

/* Mobile breakpoint (480px) */
@media (max-width: 479px) {
    .mincore-columns--stack-mobile .mincore-columns__row {
        grid-template-columns: 1fr !important;
    }
}

/* Spalten-Kinder: verhindere Overflow */
.mincore-columns__col {
    min-width: 0;
    overflow-wrap: break-word;
}