/**
 * Version: 2025.12.31.152037
 * Autor: Willi da Silva Borges - WDSB Webdesign
 */

/* Standard: echte Masonry-Positionierung via masonry.js (absolute items) */
.wdsb-grid-masonry {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
}

.wdsb-grid-masonry .wdsb-grid-item {
  box-sizing: border-box;
  margin-bottom: var(--wgm-gap, 20px);
  /* Breite wird per JavaScript individuell gesetzt basierend auf data-wgm-span */
  /* Fallback nur für den Fall, dass JS noch nicht gelaufen ist */
  width: var(--wgm-base-item-width, 360px);
}

.wdsb-grid-masonry .wdsb-grid-item > * {
  max-width: 100%;
}

/* Sizer/Gutter-Elemente (Masonry liest Breiten aus CSS) */
.wdsb-grid-masonry .wgm-sizer {
  width: var(--wgm-base-item-width, 360px);
}

.wdsb-grid-masonry .wgm-gutter {
  width: var(--wgm-gap, 20px);
}

.wdsb-grid-masonry .wgm-sizer,
.wdsb-grid-masonry .wgm-gutter {
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

/* Hinweis: Responsive Spalten werden per JS (Sizer-Breite) umgesetzt. */

/* Fallback: wenn Masonry-JS fehlt, bleibt die View nutzbar. */
.wdsb-grid-masonry--fallback {
  display: grid;
  grid-template-columns: repeat(var(--wgm-cols, 1), minmax(0, 1fr));
  gap: var(--wgm-gap, 20px);
}

.wdsb-grid-masonry--fallback .wdsb-grid-item {
  width: auto !important;
  margin-bottom: 0;
}

.wdsb-grid-masonry--fallback .wgm-sizer,
.wdsb-grid-masonry--fallback .wgm-gutter {
  display: none;
}

/* ============================================================
   Image-only Mode
   Wenn ein Item ein Bild hat: Global-Text (views-field-nothing) ausblenden
   ============================================================ */
.wdsb-grid-masonry .wdsb-grid-item.wgm-has-image .views-field-nothing {
  display: none;
}

.wdsb-grid-masonry .wdsb-grid-item img,
.wdsb-grid-masonry .wdsb-grid-item.wgm-has-image .views-field-field-image img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}

.wdsb-grid-masonry .wdsb-grid-item figure,
.wdsb-grid-masonry .wdsb-grid-item picture {
  display: block;
  max-width: 100%;
  margin: 0;
}

/* Image gallery mode: CSS Columns, not row/grid-like Masonry positioning. */
.wdsb-grid-masonry--css-columns {
  column-count: var(--wgm-cols, 3);
  column-gap: var(--wgm-gap, 5px);
  display: block !important;
  font-size: 0;
  height: auto !important;
  line-height: 0;
  position: static !important;
}

.wdsb-grid-masonry--css-columns .wgm-sizer,
.wdsb-grid-masonry--css-columns .wgm-gutter {
  display: none !important;
}

.wdsb-grid-masonry--css-columns .wdsb-grid-item {
  break-inside: avoid;
  display: inline-block !important;
  margin: 0 0 var(--wgm-gap, 5px);
  padding: 0;
  position: static !important;
  transform: none !important;
  width: 100% !important;
}

.wdsb-grid-masonry--css-columns .views-field,
.wdsb-grid-masonry--css-columns .field-content,
.wdsb-grid-masonry--css-columns a {
  display: block;
  font-size: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
}

.wdsb-grid-masonry--css-columns .wdsb-grid-item img {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  object-fit: unset !important;
  width: 100% !important;
}

@media (max-width: 1024px) {
  .wdsb-grid-masonry--css-columns {
    column-count: var(--wgm-cols-tablet, 2);
  }
}

@media (max-width: 768px) {
  .wdsb-grid-masonry--css-columns {
    column-count: var(--wgm-cols-mobile, 1);
  }
}

/* Views kann mehrwertige Bildfelder als einen einzigen Field-Wert ausgeben.
   Dann darf dieses Sammel-Item nicht als einzelne Masonry-Kachel laufen. */
.wdsb-grid-masonry .wdsb-grid-item:has(.views-field-field-image-gallery .field-content a:nth-of-type(2) img) {
  width: 100% !important;
}

.wdsb-grid-masonry .views-field-field-image-gallery .field-content:has(a:nth-of-type(2) img) {
  display: block !important;
  width: 100%;
  column-count: var(--wgm-cols, 3);
  column-gap: var(--wgm-gap, 20px);
  font-size: 0;
  line-height: 0;
}

.wdsb-grid-masonry .views-field-field-image-gallery .field-content:has(a:nth-of-type(2) img) > a {
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--wgm-gap, 20px);
  padding: 0;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  font-size: initial;
  line-height: normal;
}

.wdsb-grid-masonry .views-field-field-image-gallery .field-content:has(a:nth-of-type(2) img) > a img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}

@media (max-width: 1024px) {
  .wdsb-grid-masonry .views-field-field-image-gallery .field-content:has(a:nth-of-type(2) img) {
    column-count: 2;
  }
}

@media (max-width: 768px) {
  .wdsb-grid-masonry .views-field-field-image-gallery .field-content:has(a:nth-of-type(2) img) {
    column-count: 1;
  }
}