/* ==========================================================================
   Bootstrap 5 auf das UNVERÄNDERTE Contao-Galerie-Template (gallery_default)
   Bilder: fest 210 x 210 px, von der Mitte aus beschnitten.
   Contao-Markup:
   <div class="ce_gallery | content-gallery">
     <ul class="cols_3">
       <li class="row_0 col_0 ...">
         <figure class="image_container">
           <a href="..."><img ...></a>
           <figcaption class="caption">Text</figcaption>
         </figure>
       </li>
   Einbinden: Theme > Seitenlayout > "Eigene Stylesheets" (nach Bootstrap).
   ========================================================================== */

:root { --gallery-size: 210px; }

/* --- Bootstrap-Raster (wie .row.g-4), Umbruch nach verfügbarer Breite ------- */
.ce_gallery ul[class*="cols_"],
.content-gallery ul[class*="cols_"] {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;      /* Galerie zentriert, auch bei unvollständiger Reihe */
  margin: calc(-.5 * var(--bs-gutter-y)) calc(-.5 * var(--bs-gutter-x));
  padding: 0;
  list-style: none;
}

/* --- Jede Zelle ist genau so breit wie das Bild (210px + Gutter) ------------ */
.ce_gallery ul[class*="cols_"] > li,
.content-gallery ul[class*="cols_"] > li {
  float: none;                  /* Contao-Standard-Float neutralisieren */
  flex: 0 0 auto;
  width: calc(var(--gallery-size) + var(--bs-gutter-x));
  max-width: 100%;
  margin: 0;
  padding: calc(.5 * var(--bs-gutter-y)) calc(.5 * var(--bs-gutter-x));
}

/* --- Bilder 210 x 210, Zuschnitt von der Mitte aus -------------------------- */
.ce_gallery .image_container,
.content-gallery .image_container {
  width: 100%;
  margin: 0;
}

.ce_gallery .image_container a,
.content-gallery .image_container a { display: block; }

.ce_gallery .image_container img,
.content-gallery .image_container img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: var(--gallery-size);
  max-width: 100%;              /* nur auf sehr schmalen Displays kleiner */
  height: auto;
  aspect-ratio: 1 / 1;          /* bleibt quadratisch */
  object-fit: cover;
  object-position: center center;
  border-radius: 2px;
}

/* --- Bildunterschrift im Magazin-Stil; umbricht auf Bildbreite (210px) ------ */
.ce_gallery figcaption.caption,
.content-gallery figcaption.caption {
  max-width: var(--gallery-size);
  margin: .6rem auto 0;
  text-align: center;           /* Beschreibung zentriert */
  font-size: .8rem;
  font-style: italic;
  line-height: 1.4;
  color: #6c757d;               /* Bootstrap text-muted */
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}