/**
 * 📏 Spacing & Flex-Layouts
 */

/* ═══════════════════════════════════════════════════════════
   LEGACY: Allgemeiner Container (fallback)
   ═══════════════════════════════════════════════════════════ */

.kachel-row {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    margin: 40px 0;
    background-color: transparent;
}

/* ═══════════════════════════════════════════════════════════
   VERTICAL LAYOUT (craftclon-Seite)
   ═══════════════════════════════════════════════════════════ */

.kachel-row-vertical {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .kachel-row-vertical {
        padding: 0 15px;
        gap: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════
   GRID LAYOUT (index-Seite - Image-Titel-Kacheln)
   ═══════════════════════════════════════════════════════════ */

.kachel-row-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    width: 100%;
    max-width: 1600px;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
    justify-items: center;  /* ← NEU: Items horizontal zentriert */
    align-items: start;      /* ← NEU: Items oben ausgerichtet */
}

/* Tablet: 2 Spalten */
@media (max-width: 1024px) {
    .kachel-row-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Mobile: 1 Spalte (untereinander) */
@media (max-width: 768px) {
    .kachel-row-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0 15px;
        justify-items: center;  /* ← WICHTIG: Auch mobile zentriert */
    }
}

/* ═══════════════════════════════════════════════════════════
   VIERTEL-KACHEL (für Grid-Items)
   ═══════════════════════════════════════════════════════════ */

.viertel-kachel-spacerbox {
    width: 100%;
    min-width: unset;
}

/* Legacy-Support für alte flex-Werte */
@media (min-width: 769px) {
    .kachel-row .viertel-kachel-spacerbox {
        flex: 0 0 22%;
        min-width: 250px;
    }
}

@media (max-width: 768px) {
    .kachel-row .viertel-kachel-spacerbox {
        flex: 0 0 45%;
    }
}

@media (max-width: 500px) {
    .kachel-row .viertel-kachel-spacerbox {
        flex: 0 0 95%;
    }
}

/* ═══════════════════════════════════════════════════════════
   FLEX UTILITY CLASSES (für wiederverwendbare Layouts)
   ═══════════════════════════════════════════════════════════ */

/* Flex Directions */
.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

/* Gap Sizes */
.gap-xs {
    gap: 8px;
}

.gap-sm {
    gap: 12px;
}

.gap-md {
    gap: 20px;
}

.gap-lg {
    gap: 30px;
}

.gap-xl {
    gap: 40px;
}

/* Justify Content */
.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-evenly {
    justify-content: space-evenly;
}

/* Align Items */
.items-start {
    align-items: flex-start;
}

.items-center {
    align-items: center;
}

.items-end {
    align-items: flex-end;
}

.items-stretch {
    align-items: stretch;
}

/* Flex Grow/Shrink */
.flex-1 {
    flex: 1 1 auto;
}

.flex-none {
    flex: none;
}

/* Width Utilities */
.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.h-screen {
    height: 100vh;
}