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

/* 1) Wrapper */
.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))),
.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;
}

/* 4) Thumbnail unten bündig – Titel schließt direkt an (kein padding-bottom-Reset!) */
.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;
}

/* 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;
  line-height:1.25 !important;
  max-height:none !important;
  overflow:visible !important;
  white-space:normal !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* 6) Default-View (optional) */
.ngg-fluid-fix .ngg-albumoverview.default-view .ngg-album{
  border:none !important;
  padding:10px 0 10px !important;
}

/* 7) Stabilisierung gegen Inline-Abstände */
.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;
}

/* 8) Farben über Variablen mit Alpha */
.ngg-fluid-fix .nextgen_pro_grid_album .caption_link a,
.ngg-fluid-fix .nextgen_pro_grid_album .ngg-pro-album__gallery-title a,
.ngg-fluid-fix .nextgen_pro_grid_album .ngg-album-gallery-title a{
  color: color-mix(in srgb,
           var(--nggff-title-color) var(--title-color-alpha, 100%),
           transparent
         ) !important;
}
.ngg-fluid-fix .nextgen_pro_grid_album .caption_link a:hover,
.ngg-fluid-fix .nextgen_pro_grid_album .caption_link a:focus,
.ngg-fluid-fix .nextgen_pro_grid_album .caption_link a:active,
.ngg-fluid-fix .nextgen_pro_grid_album .ngg-pro-album__gallery-title a:hover,
.ngg-fluid-fix .nextgen_pro_grid_album .ngg-pro-album__gallery-title a:focus,
.ngg-fluid-fix .nextgen_pro_grid_album .ngg-pro-album__gallery-title a:active,
.ngg-fluid-fix .nextgen_pro_grid_album .ngg-album-gallery-title a:hover,
.ngg-fluid-fix .nextgen_pro_grid_album .ngg-album-gallery-title a:focus,
.ngg-fluid-fix .nextgen_pro_grid_album .ngg-album-gallery-title a:active{
  color: color-mix(in srgb,
           var(--nggff-title-hover) var(--title-hover-alpha, 100%),
           transparent
         ) !important;
}


/* 9) Kompaktmodus für 1–2 Kacheln */
.ngg-fluid-fix .nggff-compact{
  grid-template-columns: repeat(auto-fit, minmax(var(--tile-min), var(--tile-max))) !important;
  justify-content: start !important;
  gap: var(--gap-compact) !important;
}

/* 10) Nie Ellipsis bei Titeln */
.ngg-fluid-fix .nextgen_pro_grid_album :is(
  .ngg-pro-album__gallery-title,
  .ngg-album-gallery-title,
  .caption_link
){
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-height: none !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}
.ngg-fluid-fix .nextgen_pro_grid_album :is(
  .ngg-pro-album__gallery-title a,
  .ngg-album-gallery-title a,
  .caption_link a
){
  display: inline !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.ngg-fluid-fix .nextgen_pro_grid_album .caption_link::after{
  content: none !important;
}

/* 11) Leere Titel ausblenden */
.nextgen_pro_grid_album .caption_link:empty,
.nextgen_pro_grid_album .ngg-pro-album__gallery-title:empty,
.nextgen_pro_grid_album .ngg-album-gallery-title:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 12) Grid-Kinder: eigene Außenabstände neutralisieren */
.ngg-fluid-fix .nextgen_pro_grid_album > * { margin:0 !important; }
.ngg-fluid-fix .nextgen_pro_grid_album :is(
  .ngg-pro-album__gallery,
  .ngg-album-gallery-link,
  .ngg-pro-album__gallery-wrap,
  .ngg-pro-album__gallery-container
){ margin:0 !important; }

/* 14) Verlinktes Bild block-level (robust) */
.ngg-fluid-fix .nextgen_pro_grid_album a > img{
  display:block !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 auto !important;
}


/* Passepartout/Rahmen fürs Bild (hast du schon) */
.ngg-fluid-fix{
  --thumb-pad: 10px;
  --thumb-bg: #fff;
  --thumb-border-size: 2px;
  --thumb-border-color: #c00;

  /* NEU: Passepartout/Rahmen NUR für den Titel */
  --title-pad: 8px;             /* Innenabstand um den Text */
  --title-bg: #ffffff;          /* Hintergrundfläche Titel */
  --title-border-size: 2px;     /* sichtbarer Ring */
  --title-border-color: #c00;   /* Farbe des Rahmens */
  --title-radius: 6px;          /* optional: abgerundet */
  --title-gap-top: var(--title-gap, 4px); /* Abstand Bild→Titel */
}

/* Rahmen/Hintergrund NUR ums Thumbnail */
@supports (color: color-mix(in srgb, #000 0%, transparent)){
  .ngg-fluid-fix .nextgen_pro_grid_album figure,
  .ngg-fluid-fix .nextgen_pro_grid_album .ngg-pro-album__thumbnail,
  .ngg-fluid-fix .nextgen_pro_grid_album .ngg-pro-album__gallery-thumbnail,
  .ngg-fluid-fix .nextgen_pro_grid_album .ngg-gallery-thumbnail-box{
    background: color-mix(in srgb, var(--thumb-bg,transparent) var(--thumb-bg-alpha,100%), transparent) !important;
    box-shadow: 0 0 0 var(--thumb-border-size,0)
                color-mix(in srgb, var(--thumb-border-color,transparent) var(--thumb-border-alpha,100%), transparent)
                inset !important;
  }
}


/* (Optional – falls das Bild direkt verlinkt ist: rund mitnehmen) */
.ngg-fluid-fix .nextgen_pro_grid_album a:has(> img),
.ngg-fluid-fix .nextgen_pro_grid_album a:has(> picture > img){
  border-radius: var(--thumb-radius, 0) !important;
  overflow: hidden !important;
}


/* Titel-Rahmen/Hintergrund – unabhängig vom Bild */
.ngg-fluid-fix .nextgen_pro_grid_album :is(
  .caption_link,
  .ngg-pro-album__gallery-title,
  .ngg-album-gallery-title
){
  /* Abstand zum Bild */
  margin-top: var(--title-gap-top, 4px) !important;

  /* sichtbare Box um den Text */
  display:block !important;
  box-sizing:border-box !important;

  padding-inline: var(--title-pad, 0) !important;
  background: var(--title-bg, transparent) !important;
  background-clip: padding-box !important;
  box-shadow: 0 0 0 var(--title-border-size, 0) var(--title-border-color, transparent) inset !important;
  border:0 !important;
  border-radius: var(--title-radius, 0) !important;
}

@supports (color: color-mix(in srgb, #000 0%, transparent)){
  .ngg-fluid-fix .nextgen_pro_grid_album :is(
    .caption_link,
    .ngg-pro-album__gallery-title,
    .ngg-album-gallery-title
  ){
    background: color-mix(in srgb, var(--title-bg,transparent) var(--title-bg-alpha,100%), transparent) !important;
    box-shadow: 0 0 0 var(--title-border-size,0)
                color-mix(in srgb, var(--title-border-color,transparent) var(--title-border-alpha,100%), transparent)
                inset !important;
  }
}

/* Link im Titel neutral lassen (damit der Rahmen am Container bleibt) */
.ngg-fluid-fix .nextgen_pro_grid_album :is(
  .caption_link a,
  .ngg-pro-album__gallery-title a,
  .ngg-album-gallery-title a
){
  display:inline !important;
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  padding:0 !important;
}

/* Optional: Hover-Effekt NUR für die Titel-Box (zart) */
.ngg-fluid-fix .nextgen_pro_grid_album :is(
  .caption_link,
  .ngg-pro-album__gallery-title,
  .ngg-album-gallery-title
):hover{
  box-shadow: 0 0 0 var(--title-border-size, 0) color-mix(in srgb, var(--title-border-color, #000) 80%, transparent) inset !important;
}

/* Optional: Wenn der Titel leer ist, auch die Box ausblenden */
.nextgen_pro_grid_album :is(.caption_link, .ngg-pro-album__gallery-title, .ngg-album-gallery-title):empty{
  display:none !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}