/* ===== Slickpix: Gutenberg Gallery – Stil "Masonry" (final) ===== */

:root {
  --spx-masonry-gap: 16px;   /* vertikal + horizontaler Abstand */
  --spx-masonry-radius: 0;
}

/* 1) Core/Grid/Flex radikal abschalten, Columns aktivieren */
.wp-block-gallery.is-style-masonry,
.wp-block-gallery.has-nested-images.is-style-masonry,
ul.wp-block-gallery.is-style-masonry {
  display: block !important;                 /* statt grid/flex */
  column-gap: var(--spx-masonry-gap) !important;
  column-fill: balance;
  box-sizing: border-box;
  /* Außen-Gutter: macht links/rechts „Luft“ */
  padding-inline: calc(var(--spx-masonry-gap) / 2) !important;
  margin-inline: 0 !important;
  gap: 0 !important;
  justify-content: initial !important;
  align-items: initial !important;
  overflow: visible;
}

/* 2) Spaltenanzahl via WP-Spaltenoption */
.wp-block-gallery.is-style-masonry.columns-1 { column-count: 1; }
.wp-block-gallery.is-style-masonry.columns-2 { column-count: 2; }
.wp-block-gallery.is-style-masonry.columns-3 { column-count: 3; }
.wp-block-gallery.is-style-masonry.columns-4 { column-count: 4; }
.wp-block-gallery.is-style-masonry.columns-5 { column-count: 5; }
.wp-block-gallery.is-style-masonry.columns-6 { column-count: 6; }

/* 3) Items freistellen: keine Breiten/Zwang aus Core/Theme */
.wp-block-gallery.is-style-masonry .wp-block-image,
.wp-block-gallery.is-style-masonry figure,
.wp-block-gallery.is-style-masonry li.wp-block-image {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  inline-size: auto !important;
  margin: 0 0 var(--spx-masonry-gap) 0 !important;
  padding: 0 !important;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  box-sizing: border-box;
}

/* 4) echter horizontaler Gutter je Spalte */
.wp-block-gallery.is-style-masonry .wp-block-image,
.wp-block-gallery.is-style-masonry figure,
.wp-block-gallery.is-style-masonry li.wp-block-image {
  /* halber Gutter links/rechts, damit insgesamt column-gap + Außen-Gutter entsteht */
  padding-inline: calc(var(--spx-masonry-gap) / 2) !important;
}

/* 5) Bilder füllen Spalte vollständig */
.wp-block-gallery.is-style-masonry .wp-block-image > img,
.wp-block-gallery.is-style-masonry .wp-block-image > a > img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  border-radius: var(--spx-masonry-radius);
}

/* 6) Cropping neutralisieren (sonst gleiche Höhen) */
.wp-block-gallery.is-style-masonry.is-cropped .wp-block-image img {
  height: auto !important;
  object-fit: unset !important;
}

/* 7) Captions */
.wp-block-gallery.is-style-masonry .wp-element-caption {
  display: block;
  margin-top: 6px;
}

/* 8) Responsive Tweaks */
@media (max-width: 768px) {
  .wp-block-gallery.is-style-masonry { column-count: 2; }
  .wp-block-gallery.is-style-masonry.columns-1 { column-count: 1; }
}
@media (max-width: 480px) {
  .wp-block-gallery.is-style-masonry { column-count: 1; }
}