/*
 * Spalten fuer Bild-Galerien aus fluid_styled_content (Elemente "Bilder" und
 * "Text & Medien"), seit 06.10.2026.
 *
 * Die Einstellung "Anzahl der Spalten" im Backend war bis dahin wirkungslos:
 * Das Sitepackage bindet die Ausgabe von fluid_styled_content ein, aber nicht
 * deren Styling - alle Bilder standen untereinander. Diese Datei stellt sie
 * nebeneinander, so wie es im Backend steht.
 *
 * NUR fuer zwei und mehr Spalten. Einspaltige Galerien (fast alle auf der
 * Seite) bleiben pixelgenau wie vorher - gemessen am 06.10.2026 an /ueber-uns:
 * Eine erste Fassung, die figure und img allgemein anfasste, machte die Seite
 * 61 px kuerzer.
 *
 * Eigene Datei statt Aenderung in style.css: style.css ist aus Resources/Public/Scss
 * gebaut, ein neuer Build waere nicht sicher byte-gleich mit dem alten.
 */

.ce-gallery:not([data-ce-columns="1"]) .ce-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.ce-gallery:not([data-ce-columns="1"]) .ce-row:last-child {
    margin-bottom: 0;
}

.ce-gallery:not([data-ce-columns="1"]) .ce-column {
    min-width: 0;
}

.ce-gallery[data-ce-columns="2"] .ce-column { flex: 0 0 calc((100% - 12px) / 2); }
.ce-gallery[data-ce-columns="3"] .ce-column { flex: 0 0 calc((100% - 24px) / 3); }
.ce-gallery[data-ce-columns="4"] .ce-column { flex: 0 0 calc((100% - 36px) / 4); }
.ce-gallery[data-ce-columns="5"] .ce-column { flex: 0 0 calc((100% - 48px) / 5); }
.ce-gallery[data-ce-columns="6"] .ce-column { flex: 0 0 calc((100% - 60px) / 6); }
.ce-gallery[data-ce-columns="7"] .ce-column { flex: 0 0 calc((100% - 72px) / 7); }
.ce-gallery[data-ce-columns="8"] .ce-column { flex: 0 0 calc((100% - 84px) / 8); }

.ce-gallery:not([data-ce-columns="1"]) .ce-column figure {
    margin: 0;
}

.ce-gallery:not([data-ce-columns="1"]) .ce-column img {
    display: block;
    width: 100%;
    height: auto;
}

/* Auf dem Handy waeren drei und mehr Spalten Briefmarken: dort hoechstens zwei. */
@media (max-width: 575.98px) {
    .ce-gallery:not([data-ce-columns="1"]) .ce-column {
        flex-basis: calc((100% - 12px) / 2);
    }
}