/* Smart Mosaic Gallery – Frontend
 * Bento-/Mosaik-Grid: CSS Grid + grid-auto-flow:dense.
 * Responsiv ueber CONTAINER-Queries (reagiert auf die Breite des
 * Galerie-Containers, nicht des Viewports) -> passt in Sidebar,
 * Full-Width oder Elementor-Spalte gleichermassen korrekt.
 */

.smg-container {
  container-type: inline-size;
  container-name: smg;
  box-sizing: border-box;
  max-width: 100%;               /* nie breiter als der Elternbereich */
  padding: var(--smg-pad, 0);    /* Innenabstand (Darstellung) */
  margin: var(--smg-margin, 0);  /* Aussenabstand (Darstellung); kein width:100% -> kein Ueberlauf */
}

.smg {
  --smg-cols: 4;
  --smg-cols-tablet: 3;
  --smg-cols-mobile: 2;
  /* --smg-gap kommt vom Container (Darstellung), Fallback 8px. */
  /* Reihenhoehe = Spaltenbreite -> 1x1 und 2x2 sind echte Quadrate. */
  --smg-row: calc((100cqw - (var(--smg-cols) - 1) * var(--smg-gap, 8px)) / var(--smg-cols));

  display: grid;
  grid-template-columns: repeat(var(--smg-cols), 1fr);
  grid-auto-rows: var(--smg-row);
  grid-auto-flow: dense; /* fuellt Luecken automatisch -> lueckenloses Mosaik */
  gap: var(--smg-gap, 8px);
  margin: 0;
  padding: 0;
}

/* Kachelgroessen */
.smg-item { grid-column: span 1; grid-row: span 1; }
.smg-item--2x1 { grid-column: span 2; }
.smg-item--1x2 { grid-row: span 2; }
.smg-item--2x2 { grid-column: span 2; grid-row: span 2; }

.smg-item {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: var(--smg-radius, 10px);
  border: var(--smg-border, 0) solid var(--smg-border-color, transparent);
  background: #e9e7e2 no-repeat center / cover; /* Fallback-Farbe; JS legt den BlurHash darueber */
}

.smg-link { display: block; width: 100%; height: 100%; }

/* Hoehere Spezifitaet + !important -> Theme-Regeln koennen das Fuellen nicht aushebeln. */
.smg-item .smg-img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: 50% 50%; /* per-Bild ueberschrieben (Fokuspunkt) */
  display: block;
  transition: opacity .6s ease, transform .4s ease;
}
/* Einpassen statt Fuellen (fit="contain") -> ganzes Bild sichtbar, Rest = Platzhalter. */
.smg--fit-contain .smg-item .smg-img { object-fit: contain !important; }

/* Fade nur wenn JS aktiv ist (progressive enhancement) -> ohne JS bleibt das Bild sichtbar. */
.smg.is-enhanced .smg-img { opacity: 0; }
.smg.is-enhanced .smg-img.is-loaded { opacity: 1; }

/* Aktions-Kachel (Text + Link im Raster). Farben/Radius/Rahmen kommen von .smg-item. */
.smg-cta__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: clamp(10px, 6%, 30px);
  gap: .45em;
  text-decoration: none;
  color: inherit;
}
/* Eingestellte px-Groesse wird geehrt (nicht auf die Kachel-Inhaltsbreite gedeckelt);
   flex-shrink:0 verhindert vertikales Stauchen in der Flex-Spalte. */
.smg-cta__icon { display: block; max-width: none; flex-shrink: 0; height: auto; }
.smg-cta--left   .smg-cta__link { align-items: flex-start; text-align: left; }
.smg-cta--center .smg-cta__link { align-items: center;     text-align: center; }
.smg-cta--right  .smg-cta__link { align-items: flex-end;   text-align: right; }
/* vertikale Position des Textblocks */
.smg-cta--v-top    .smg-cta__link { justify-content: flex-start; }
.smg-cta--v-middle .smg-cta__link { justify-content: center; }
.smg-cta--v-bottom .smg-cta__link { justify-content: flex-end; }
/* feiner Trenner zwischen Ueberschrift und Text */
.smg-cta__divider {
  display: block;
  width: clamp(28px, 12%, 64px);
  height: 1px;
  background: currentColor;
  opacity: .5;
  margin: .35em 0;
}
.smg-cta__title { font-size: clamp(16px, 3.2cqw, 28px); font-weight: 600; line-height: 1.2; }
.smg-cta__text  { font-size: clamp(12px, 2cqw, 16px); line-height: 1.45; opacity: .9; }
.smg-cta__btn {
  margin-top: .3em;
  align-self: var(--smg-cta-btn-align, center);
  padding: .5em 1.15em;
  border: 1px solid currentColor;
  border-radius: 6px;
  font-size: clamp(12px, 1.8cqw, 15px);
  color: inherit;
  text-decoration: none;
  transition: opacity .2s ease;
}
@media (hover: hover) {
  a.smg-cta__btn:hover { opacity: .82; }
}
.smg-cta--left  .smg-cta__btn { align-self: flex-start; }
.smg-cta--right .smg-cta__btn { align-self: flex-end; }

/* Bildeffekt (Galerie-Ebene via .smg--fx-*) – gilt fuer Fotos UND Aktions-Kachel. */
.smg-cta__link { transition: transform .4s ease; }
@media (hover: hover) {
  .smg--fx-zoom .smg-item:hover .smg-img { transform: scale(1.06); }
  .smg--fx-zoom .smg-cta:hover .smg-cta__link { transform: scale(1.06); }
}
.smg--fx-grayscale .smg-img { filter: grayscale(1); transition: filter .3s ease, opacity .6s ease; }
.smg--fx-grayscale .smg-item:hover .smg-img { filter: grayscale(0); }
.smg--fx-grayscale .smg-cta { filter: grayscale(1); transition: filter .3s ease; }
.smg--fx-grayscale .smg-cta:hover { filter: grayscale(0); }

/* Hover-Overlay (Farbe/Transparenz per --smg-hover-bg) + optionales Icon */
.smg-ov {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--smg-hover-bg, transparent);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;   /* Klick geht durch zum Link */
  color: #fff;
}
.smg-item:hover .smg-ov,
.smg-link:focus-visible + .smg-ov { opacity: 1; }
.smg-ov__ico {
  width: 34px;
  height: 34px;
  fill: currentColor;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}

.smg-link:focus-visible {
  outline: 3px solid Highlight;
  outline-offset: -3px;
  border-radius: 10px;
}

/* Tablet: mittlere Containerbreite. Reihenhoehe an Tablet-Spalten koppeln -> weiter quadratisch. */
@container smg (max-width: 900px) {
  .smg {
    grid-template-columns: repeat(var(--smg-cols-tablet), 1fr);
    --smg-row: calc((100cqw - (var(--smg-cols-tablet) - 1) * var(--smg-gap, 8px)) / var(--smg-cols-tablet));
  }
}

/* Mobil: schmaler Container. Grosse Kacheln auf max. 2 Spalten begrenzen,
 * damit nichts ueber den Rand laeuft. */
@container smg (max-width: 600px) {
  .smg {
    grid-template-columns: repeat(var(--smg-cols-mobile), 1fr);
    --smg-row: calc((100cqw - (var(--smg-cols-mobile) - 1) * var(--smg-gap, 8px)) / var(--smg-cols-mobile));
  }
  .smg-item--2x1,
  .smg-item--2x2 { grid-column: span 2; }
}

/* Fallback fuer Browser OHNE Container-Query-Support (iOS < 16, aeltere Android).
 * Nur dort aktiv -> auf modernen Geraeten aendert sich nichts. */
@supports not (container-type: inline-size) {
  .smg { grid-auto-rows: clamp(90px, 22vw, 220px); }
  @media (max-width: 900px) {
    .smg { grid-template-columns: repeat(var(--smg-cols-tablet), 1fr); grid-auto-rows: 30vw; }
  }
  @media (max-width: 600px) {
    .smg { grid-template-columns: repeat(var(--smg-cols-mobile), 1fr); grid-auto-rows: 46vw; }
    .smg-item--2x1,
    .smg-item--2x2 { grid-column: span 2; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .smg-img, .smg-cta__link { transition: none; }
  .smg--fx-zoom .smg-item:hover .smg-img,
  .smg--fx-zoom .smg-cta:hover .smg-cta__link { transform: none; }
}

/* ---------- Lightbox ---------- */
smart-lightbox { display: contents; }

/* Seiten-Scroll sperren, solange die Lightbox offen ist -> kein Seiten-Scrollbalken. */
html.smg-lb-open { overflow: hidden; }

.smg-lb {
  inset: 0;
  margin: 0;
  border: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;      /* kein eigener Dialog-Scrollbalken */
  /* konfigurierbar: Farbe+Deckkraft (--smg-lb-bg) und Unschaerfe (--smg-lb-blur). */
  background: var(--smg-lb-bg, rgba(12, 12, 12, .9));
  -webkit-backdrop-filter: blur(var(--smg-lb-blur, 0px));
  backdrop-filter: blur(var(--smg-lb-blur, 0px));
  color: #fff;

  /* Effektive Werte (Desktop). min() = Sicherheitsnetz gegen zu grosse Eingaben
   * auf schmalen Schirmen -- greift nur, wenn der Wert wirklich zu gross ist. */
  --smg-arrow-size-c: min(var(--smg-arrow-size, 46px), 30vw);
  --smg-arrow-pad-c:  min(var(--smg-arrow-pad, 14px), 15vw);
  --smg-close-size-c: min(var(--smg-close-size, 40px), 30vw);
  --smg-close-pad-c:  min(var(--smg-close-pad, 16px), 15vw);
}

/* Mobil: eigene Werte aus der Galerie-Einstellung greifen. */
@media (max-width: 600px) {
  .smg-lb {
    --smg-arrow-size-c: min(var(--smg-arrow-size-m, 36px), 30vw);
    --smg-arrow-pad-c:  min(var(--smg-arrow-pad-m, 10px), 15vw);
    --smg-close-size-c: min(var(--smg-close-size-m, 36px), 30vw);
    --smg-close-pad-c:  min(var(--smg-close-pad-m, 10px), 15vw);
  }
}

.smg-lb::backdrop {
  background: transparent;
}
.smg-lb__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100dvh;   /* robuste volle Hoehe -> vertikal mittig auch auf Mobil */
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.smg-lb__img { display: block; margin: 0 auto; }  /* horizontal sicher mittig */
.smg-lb__fig { margin: 0; text-align: center; max-width: 92%; max-height: 88%; }
.smg-lb__img {
  max-width: 92%;
  max-height: 82vh;
  object-fit: contain;
  box-sizing: border-box;
  border-radius: var(--smg-lbimg-radius, 6px);  /* 0 = eckig */
  border: var(--smg-lbimg-border, 0);
  touch-action: pan-y pinch-zoom;
}
.smg-lb__cap {
  margin-top: 10px;
  font: 400 14px/1.4 system-ui, sans-serif;
  color: rgba(255, 255, 255, .82);
}
.smg-lb__btn {
  position: fixed;
  /* Groesse konfigurierbar; das Symbol skaliert automatisch mit (48 %). */
  width: var(--smg-arrow-size-c, 46px);
  height: var(--smg-arrow-size-c, 46px);
  font-size: calc(var(--smg-arrow-size-c, 46px) * .48);
  border: 0;
  border-radius: var(--smg-arrow-radius, 50%); /* 0 = eckig */
  background: var(--smg-arrow-bg, rgba(255, 255, 255, .14));
  color: var(--smg-arrow-color, #fff);
  cursor: pointer;
  display: grid; place-items: center;
  line-height: 1;
  transition: background-color .2s ease, color .2s ease;
}

/* SVG-Symbole: skalieren mit dem Button, Farbe folgt currentColor,
 * Strichstaerke exakt konfigurierbar (schriftunabhaengig). */
.smg-lb__ico {
  width: 55%;
  height: 55%;
  display: block;
  overflow: visible;
}
.smg-lb__ico path {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--smg-arrow-stroke, 2);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.smg-lb__close .smg-lb__ico path { stroke-width: var(--smg-close-stroke, 2); }

/* Pfeile: horizontaler Abstand vom Rand. */
.smg-lb__btn--prev { left: var(--smg-arrow-pad-c, 14px); }
.smg-lb__btn--next { right: var(--smg-arrow-pad-c, 14px); }

/* Vertikale Position der Pfeile (Klasse am Dialog). */
.smg-lb--pos-middle .smg-lb__btn--prev,
.smg-lb--pos-middle .smg-lb__btn--next { top: 50%; transform: translateY(-50%); }
.smg-lb--pos-top .smg-lb__btn--prev,
.smg-lb--pos-top .smg-lb__btn--next { top: var(--smg-arrow-pad-c, 14px); }
.smg-lb--pos-bottom .smg-lb__btn--prev,
.smg-lb--pos-bottom .smg-lb__btn--next { bottom: var(--smg-arrow-pad-c, 14px); }

/* Schliessen-Button: eigene Groesse/Abstand/Farben (nach .smg-lb__btn -> gewinnt). */
.smg-lb__close {
  top: var(--smg-close-pad-c, 16px);
  right: var(--smg-close-pad-c, 16px);
  width: var(--smg-close-size-c, 40px);
  height: var(--smg-close-size-c, 40px);
  font-size: calc(var(--smg-close-size-c, 40px) * .45);
  border-radius: var(--smg-close-radius, 50%); /* 0 = eckig */
  background: var(--smg-close-bg, rgba(255, 255, 255, .14));
  color: var(--smg-close-color, #fff);
}

/* Hover nur auf Geraeten mit echtem Hover -> auf Touch kein haengender Zustand.
 * Close nach Btn -> gleiche Spezifitaet, spaetere Regel gewinnt. */
@media (hover: hover) {
  .smg-lb__btn:hover {
    background: var(--smg-arrow-bg-h, rgba(255, 255, 255, .26));
    color: var(--smg-arrow-color-h, #fff);
  }
  .smg-lb__close:hover {
    background: var(--smg-close-bg-h, rgba(255, 255, 255, .26));
    color: var(--smg-close-color-h, #fff);
  }
}
.smg-lb__count {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  font: 400 13px/1 system-ui, sans-serif; color: rgba(255, 255, 255, .8);
}
.smg-lb__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Mobil: Lightbox randlos/bildschirmfuellend (Fullscreen-Look). */
@media (max-width: 600px) {
  .smg-lb__stage { padding: 0; }
  .smg-lb__fig { max-width: 100%; max-height: 100%; margin: 0; }
  .smg-lb__img { max-width: 100%; max-height: 100dvh; border-radius: 0; }
  /* Bildunterschrift als Overlay am unteren Rand -> beeinflusst die Bildgroesse nicht. */
  .smg-lb__cap {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    margin: 0;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(transparent, rgba(0, 0, 0, .72));
    text-align: center;
  }
}
/* Der Dialog im echten Vollbild (Fullscreen-API) fuellt ohnehin alles. */
.smg-lb:fullscreen { width: 100%; height: 100%; }
.smg-lb:fullscreen::backdrop { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .smg-lb__btn { transition: none; }
  ::view-transition-group(smg-lb),
  ::view-transition-old(smg-lb),
  ::view-transition-new(smg-lb) { animation: none !important; }
}