/* =========================================
   GALLERY MODULE - Phase 3 Namespaced
   ========================================= */

.ks-block-gallery {
    padding: var(--ks-spacing-lg) var(--ks-spacing-sm);
}

/* Base Container */
.ks-block-gallery__container {
    max-width: var(--ks-content-max-width);
    margin: 0 auto;
}

/* Base Gallery Grid Logic */
.ks-block-gallery {
    display: grid;
    gap: var(--ks-spacing-sm);
    padding: var(--ks-spacing-lg) var(--ks-spacing-sm);
    margin-inline: auto;
    width: 100%;
}

/* Explicit Column Layouts */
.ks-block-gallery--columns-1 {
    grid-template-columns: 1fr;
}

.ks-block-gallery--columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.ks-block-gallery--columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.ks-block-gallery--columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.ks-block-gallery--columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.ks-block-gallery--columns-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* Responsive Fallbacks (Mobile is usually 1 or 2 columns) */
@media (max-width: 768px) {
    .ks-block-gallery {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    /* Enforce single column on very small screens if desired, or let auto-fit handle it */
}

/* Size Modifiers (affecting the container width) */
.ks-block-gallery--size-full {
    max-width: 100%;
}

.ks-block-gallery--size-large {
    max-width: 75%;
}

.ks-block-gallery--size-medium {
    max-width: 50%;
}

.ks-block-gallery--size-small {
    max-width: 60%;
    /* Größer auf Desktop */
}

/* Erzwinge horizontales Layout bei 25% Größe (Desktop) */
.ks-block-gallery--size-small {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--ks-spacing-md);
    /* Mehr Abstand zwischen Bildern */
}

.ks-block-gallery--size-small .ks-block-gallery__item {
    flex: 1 1 0;
    /* Gleiche Größe für alle Items */
    min-width: 0;
    /* Verhindert Overflow */
}

/* Quadratische Bilder NUR wenn beschnitten (cropped) */
.ks-block-gallery--size-small.ks-block-gallery--cropped .ks-block-gallery__item img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Rechteckige Bilder vollständig anzeigen (nicht beschnitten) */
.ks-block-gallery--size-small:not(.ks-block-gallery--cropped) .ks-block-gallery__item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ks-block-gallery--size-small:not(.ks-block-gallery--cropped) .ks-block-gallery__item img {
    object-fit: contain;
    width: 100%;
    height: auto;
    max-height: 400px;
    /* Maximale Höhe für sehr hohe Bilder */
}

/* Responsive Breakpoints für size-small */
/* Große Desktops (> 1400px) */
@media (min-width: 1400px) {
    .ks-block-gallery--size-small {
        max-width: 55%;
    }
}

/* Standard Desktop (1200px - 1400px) */
@media (max-width: 1200px) {
    .ks-block-gallery--size-small {
        max-width: 65%;
    }
}

/* Kleine Desktops / Große Tablets (992px - 1200px) */
@media (max-width: 992px) {
    .ks-block-gallery--size-small {
        max-width: 75%;
    }
}

/* Tablets (768px - 992px) */
@media (max-width: 768px) {
    .ks-block-gallery--size-small {
        max-width: 85%;
    }
}

/* Kleine Tablets / Große Phones (576px - 768px) */
@media (max-width: 576px) {
    .ks-block-gallery--size-small {
        max-width: 100%;
        display: grid;
        flex-wrap: wrap;
        grid-template-columns: repeat(2, 1fr);
        /* 2 Spalten auf kleinen Tablets */
    }
}

/* Mobile Phones (< 576px) */
@media (max-width: 480px) {
    .ks-block-gallery--size-small {
        grid-template-columns: 1fr;
        /* 1 Spalte auf sehr kleinen Screens */
    }
}

/* Enforce max-width on mobile to be reasonable (e.g. 100% on small screens) */
@media (max-width: 768px) {

    .ks-block-gallery--size-large,
    .ks-block-gallery--size-medium {
        max-width: 100%;
    }
}

/* ============================================
   ALLGEMEINE IMAGE STYLING FÜR ALLE GRÖSSEN
   ============================================ */

/* Base Image Styling */
.ks-block-gallery__item img {
    width: 100%;
    height: auto;
    display: block;
    /* Removes bottom spacing */
    border-radius: var(--ks-border-radius-md);
    box-shadow: var(--ks-shadow-sm);
    transition: transform var(--ks-transition-fast);
}

/* Cropping Logic - NUR bei aktiviertem "Beschneiden" (für alle Größen außer size-small) */
.ks-block-gallery--cropped:not(.ks-block-gallery--size-small) .ks-block-gallery__item img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Nicht beschnittene Bilder - vollständig anzeigen (für alle Größen außer size-small) */
.ks-block-gallery:not(.ks-block-gallery--cropped):not(.ks-block-gallery--size-small) .ks-block-gallery__item img {
    object-fit: contain;
    height: auto;
}

.ks-block-gallery__item img:hover {
    transform: scale(1.02);
}