/* === VAH NGG Fluid Fix – Minimal & UI-gesteuert === */

/* 1) Wrapper – Variablen (tile/gap/title-gap) kommen aus dem UI/PHP */
.ngg-fluid-fix{
  width:100%;
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* 2) Grid-Container – Spalten & horizontale Lücken (nur via --gap-normal) */
.ngg-fluid-fix :is(.nextgen_pro_grid_album, .ngg-pro-album__galleries, .ngg-albumoverview){
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(var(--tile-min), 1fr)) !important;
  gap: var(--gap-normal) !important;
  align-content:start !important;
  grid-auto-flow: row dense !important;
  margin:0 !important;
  padding:0 !important;
}

/* 2a) Sonderfall: exakt 1 oder 2 Items → linksbündig + kompakter Gap */
.ngg-fluid-fix :is(.nextgen_pro_grid_album, .ngg-pro-album__galleries, .ngg-albumoverview):not(:has(> :nth-child(2))){
  grid-template-columns: repeat(auto-fit, minmax(var(--tile-min), var(--tile-max))) !important;
  justify-content:start !important;
  gap: var(--gap-compact) !important;
}
.ngg-fluid-fix :is(.nextgen_pro_grid_album, .ngg-pro-album__galleries, .ngg-albumoverview):has(> :nth-child(2)):not(:has(> :nth-child(3))){
  grid-template-columns: repeat(auto-fit, minmax(var(--tile-min), var(--tile-max))) !important;
  justify-content:start !important;
  gap: var(--gap-compact) !important;
}

/* 3) Kachel – KEIN zusätzlicher gap (sonst doppelter Abstand zum Titel) */
.ngg-fluid-fix :is(.ngg-pro-album__gallery, .ngg-albumoverview > div, .ngg-album-gallery-link){
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  margin:0 !important;
  padding:0 !important;
  /* bewusst kein "gap" hier */
}

/* 4) Thumbnail unten bündig – Titel schließt direkt an */
.ngg-fluid-fix .nextgen_pro_grid_album :is(
  figure,
  .ngg-pro-album__gallery-thumbnail,
  .ngg-pro-album__thumbnail,
  .ngg-gallery-thumbnail-box
){
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

/* 5) Titel-Container – EINZIGE Quelle für Abstand oben (via --title-gap) */
.ngg-fluid-fix .nextgen_pro_grid_album :is(
  .ngg-pro-album__gallery-title,
  .ngg-album-gallery-title,
  .caption_link,
  figcaption
){
  display:block !important;
  margin:0 !important;
  margin-top: var(--title-gap) !important; /* UI: „Abstand Bild ↔ Titel (px)“ */
  line-height:1.25 !important;
  max-height:none !important;
  overflow:visible !important;
  white-space:normal !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* 5a) Nur wenn NGG per Inline-Style versteckt → sichtbar machen */
.ngg-fluid-fix .nextgen_pro_grid_album :is(
  .ngg-pro-album__gallery-title,
  .ngg-album-gallery-title,
  .caption_link,
  figcaption
)[style*="max-height:0"],
.ngg-fluid-fix .nextgen_pro_grid_album :is(
  .ngg-pro-album__gallery-title,
  .ngg-album-gallery-title,
  .caption_link,
  figcaption
)[style*="opacity:0"],
.ngg-fluid-fix .nextgen_pro_grid_album :is(
  .ngg-pro-album__gallery-title,
  .ngg-album-gallery-title,
  .caption_link,
  figcaption
)[style*="visibility:hidden"]{
  max-height:none !important;
  height:auto !important;
  opacity:1 !important;
  visibility:visible !important;
  display:block !important;
  position:static !important;
  transform:none !important;
  clip:auto !important;
  overflow:visible !important;
}

/* 6) Optional: Default-View (nicht Pro Grid) – falls du es nutzt */
.ngg-fluid-fix .ngg-albumoverview.default-view .ngg-album{
  border:none !important;
  padding:10px 0 10px !important;
}

/* Stabil: falls NGG/Theme am Bildcontainer inline Abstände setzt */
.ngg-fluid-fix .nextgen_pro_grid_album :is(
  figure,
  .ngg-pro-album__gallery-thumbnail,
  .ngg-pro-album__thumbnail,
  .ngg-gallery-thumbnail-box
)[style*="margin-bottom"]{
  margin-bottom:0 !important;
}
.ngg-fluid-fix .nextgen_pro_grid_album :is(
  figure,
  .ngg-pro-album__gallery-thumbnail,
  .ngg-pro-album__thumbnail,
  .ngg-gallery-thumbnail-box
)[style*="padding-bottom"]{
  padding-bottom:0 !important;
}