/**
 * Fluid Elements Styles
 * 
 * Flexible Flexbox-based grid without column restrictions
 * 
 * @package MMVC
 * @since 2.3.0
 */

/* Container */
.mm-fluid-elements {
    width: 100%;
    margin: 0 auto;
}

.mm-fluid-elements-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
}

/* Horizontal alignment of tiles per row (justify-content) */
.mm-fluid-elements.mm-fluid-elements--align-start .mm-fluid-elements-wrapper {
    justify-content: flex-start;
}

.mm-fluid-elements.mm-fluid-elements--align-center .mm-fluid-elements-wrapper {
    justify-content: center;
}

.mm-fluid-elements.mm-fluid-elements--align-end .mm-fluid-elements-wrapper {
    justify-content: flex-end;
}

/*
 * Inner alignment per tile — sichtbar auch bei „vollen“ Zeilen,
 * wo justify-content allein keinen freien Platz hat.
 */
.mm-fluid-elements.mm-fluid-elements--align-start .mm-fluid-element {
    text-align: start;
}

.mm-fluid-elements.mm-fluid-elements--align-start .mm-fluid-element .icon-box {
    align-items: flex-start;
}

.mm-fluid-elements.mm-fluid-elements--align-center .mm-fluid-element {
    text-align: center;
}

.mm-fluid-elements.mm-fluid-elements--align-center .mm-fluid-element .icon-box {
    align-items: center;
}

.mm-fluid-elements.mm-fluid-elements--align-end .mm-fluid-element {
    text-align: end;
}

.mm-fluid-elements.mm-fluid-elements--align-end .mm-fluid-element .icon-box {
    align-items: flex-end;
}

.mm-fluid-element[class*="unradius-"] {
    overflow: hidden;
}

.mm-fluid-element.mm-fluid-element--has-theme-bg {
    padding: 1.25rem;
    box-sizing: border-box;
}

/* Individual Element */
.mm-fluid-element {
    box-sizing: border-box;
    /* Flex-Item: ohne min-width: 0 kann Inhalt die Kachel über die Spaltenbreite drücken */
    min-width: 0;
}

.mm-fluid-element .icon-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
}

.mm-fluid-element .icon-box-content {
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

.mm-fluid-element .icon-box-heading {
    max-width: 100%;
}

/*
 * Uncode / globale Typo: Überschriften haben oft margin-top (z. B. 27px).
 * Im Kachel-Layout soll die erste Zeile ohne zusätzlichen Abstand oben sitzen.
 */
.mm-fluid-element h1,
.mm-fluid-element h2,
.mm-fluid-element h3,
.mm-fluid-element h4,
.mm-fluid-element h5,
.mm-fluid-element h6,
.mm-fluid-element .h1,
.mm-fluid-element .h2,
.mm-fluid-element .h3,
.mm-fluid-element .h4,
.mm-fluid-element .h5,
.mm-fluid-element .h6 {
    margin-top: 0;
    /* Lange Wörter / Zeichenketten ohne Leerzeichen (z. B. mit Schrägstrich) umbrechen */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mm-fluid-element .text-top-reduced {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Gap Sizes - Using Flexbox gap property */
.mm-fluid-elements.gap-small .mm-fluid-elements-wrapper {
    gap: 12px;
}

.mm-fluid-elements.gap-medium .mm-fluid-elements-wrapper {
    gap: 24px;
}

.mm-fluid-elements.gap-large .mm-fluid-elements-wrapper {
    gap: 36px;
}

/* Desktop Layout (>= 960px) */
@media (min-width: 960px) {
    /* 3 Elements per Row */
    .mm-fluid-elements.desktop-3 .mm-fluid-element {
        width: calc((100% - (24px * 2)) / 3);
    }
    .mm-fluid-elements.gap-small.desktop-3 .mm-fluid-element {
        width: calc((100% - (12px * 2)) / 3);
    }
    .mm-fluid-elements.gap-large.desktop-3 .mm-fluid-element {
        width: calc((100% - (36px * 2)) / 3);
    }
    
    /* 4 Elements per Row */
    .mm-fluid-elements.desktop-4 .mm-fluid-element {
        width: calc((100% - (24px * 3)) / 4);
    }
    .mm-fluid-elements.gap-small.desktop-4 .mm-fluid-element {
        width: calc((100% - (12px * 3)) / 4);
    }
    .mm-fluid-elements.gap-large.desktop-4 .mm-fluid-element {
        width: calc((100% - (36px * 3)) / 4);
    }
    
    /* 5 Elements per Row */
    .mm-fluid-elements.desktop-5 .mm-fluid-element {
        width: calc((100% - (24px * 4)) / 5);
    }
    .mm-fluid-elements.gap-small.desktop-5 .mm-fluid-element {
        width: calc((100% - (12px * 4)) / 5);
    }
    .mm-fluid-elements.gap-large.desktop-5 .mm-fluid-element {
        width: calc((100% - (36px * 4)) / 5);
    }
    
    /* 6 Elements per Row */
    .mm-fluid-elements.desktop-6 .mm-fluid-element {
        width: calc((100% - (24px * 5)) / 6);
    }
    .mm-fluid-elements.gap-small.desktop-6 .mm-fluid-element {
        width: calc((100% - (12px * 5)) / 6);
    }
    .mm-fluid-elements.gap-large.desktop-6 .mm-fluid-element {
        width: calc((100% - (36px * 5)) / 6);
    }
}

/* Tablet Layout (570px - 959px) */
@media (min-width: 570px) and (max-width: 959px) {
    /* 2 Elements per Row */
    .mm-fluid-elements.tablet-2 .mm-fluid-element {
        width: calc((100% - 24px) / 2);
    }
    .mm-fluid-elements.gap-small.tablet-2 .mm-fluid-element {
        width: calc((100% - 12px) / 2);
    }
    .mm-fluid-elements.gap-large.tablet-2 .mm-fluid-element {
        width: calc((100% - 36px) / 2);
    }
    
    /* 3 Elements per Row */
    .mm-fluid-elements.tablet-3 .mm-fluid-element {
        width: calc((100% - (24px * 2)) / 3);
    }
    .mm-fluid-elements.gap-small.tablet-3 .mm-fluid-element {
        width: calc((100% - (12px * 2)) / 3);
    }
    .mm-fluid-elements.gap-large.tablet-3 .mm-fluid-element {
        width: calc((100% - (36px * 2)) / 3);
    }
    
    /* 4 Elements per Row */
    .mm-fluid-elements.tablet-4 .mm-fluid-element {
        width: calc((100% - (24px * 3)) / 4);
    }
    .mm-fluid-elements.gap-small.tablet-4 .mm-fluid-element {
        width: calc((100% - (12px * 3)) / 4);
    }
    .mm-fluid-elements.gap-large.tablet-4 .mm-fluid-element {
        width: calc((100% - (36px * 3)) / 4);
    }
}

/* Mobile Layout (< 570px) */
@media (max-width: 569px) {
    /* 1 Element per Row (full width) */
    .mm-fluid-elements.mobile-1 .mm-fluid-element {
        width: 100%;
    }
    
    /* 2 Elements per Row */
    .mm-fluid-elements.mobile-2 .mm-fluid-element {
        width: calc((100% - 24px) / 2);
    }
    .mm-fluid-elements.gap-small.mobile-2 .mm-fluid-element {
        width: calc((100% - 12px) / 2);
    }
    .mm-fluid-elements.gap-large.mobile-2 .mm-fluid-element {
        width: calc((100% - 36px) / 2);
    }
    
    /* Reduce gaps on mobile for better readability */
    .mm-fluid-elements.gap-large .mm-fluid-elements-wrapper {
        gap: 24px;
    }
}

/* Icon Box Enhancements for Fluid Layout */
.mm-fluid-element .icon-box-icon {
    margin-bottom: 18px;
}

.mm-fluid-element .icon-box-heading {
    margin-bottom: 12px;
}

/* Text size options - using Uncode classes */
.mm-fluid-element .text-top-reduced {
    /* Default styling - inherits from theme */
}

.mm-fluid-element .text-lead {
    /* Large text - Uncode styling applies */
}

.mm-fluid-element .text-small {
    /* Small text - Uncode styling applies */
}

/* Elements without image - remove top spacing */
.mm-fluid-element .icon-box:not(.icon-media-image) .icon-box-content {
    padding-top: 0;
}

/* Ensure consistent alignment for mixed content (with/without images) */
.mm-fluid-element .icon-box:not(.icon-media-image) {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}