/**
 * ============================================================================
 * ST Gallery - CSS Column Masonry Layout (OHNE Cropping!)
 * ============================================================================
 * 
 * Beschreibung: Echtes Masonry-Layout mit CSS Columns, Bilder in natürlicher Größe
 * Version: 2025.11.10.164500
 * Autor: WDSB-Webdesign
 * 
 * Features:
 * - CSS Column-based Masonry Layout
 * - Responsive Margins (20px bei 380px VP -> 140px bei 1680px VP)
 * - Max-Breite 1400px, zentriert
 * - Keine Crops - Bilder behalten natürliche Proportionen
 * - Integration mit WDSB Extended Gallery Selection System
 * 
 * ============================================================================
 */

/* ============================================================================
 * MASONRY CONTAINER mit dynamischen Margins
 * ============================================================================ */

.st-gallery-masonry-container {
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0;
}

/* ============================================================================
 * MASONRY WRAPPER - CSS Columns für echtes Masonry-Layout
 * ============================================================================ */

.st-gallery-masonry-wrapper {
  column-count: 4;
  column-gap: 5px;
  padding: 0;
  margin: 0;
}

/* ============================================================================
 * MASONRY ITEMS (Bilder) - Natürliche Proportionen
 * ============================================================================ */

.st-masonry-item {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 0 5px 0;
  padding: 0;
  
  /* Verhindert dass Items über Spalten umbrechen */
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* Links im Masonry-Item */
.st-masonry-item a {
  display: block;
  width: 100%;
  position: relative;
}

/* Bilder im Masonry-Item - KEIN Cropping, natürliche Größe */
.st-masonry-item img,
.st-masonry-item a img,
.st-galerie-item-img img,
.st-gallery-masonry-wrapper img {
  display: block;
  width: 100%;
  height: auto !important;
  max-width: 100%;
  max-height: none !important;
  min-height: auto !important;
  margin: 0;
  padding: 0;
  border-radius: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hover-Effekt für Bilder */
.st-masonry-item:hover img {
  opacity: 0.9;
}

/* ============================================================================
 * RESPONSIVE BREAKPOINTS
 * ============================================================================ */

/* Large Desktop (>= 1400px) - 4 Spalten */
@media (min-width: 1400px) {
  .st-gallery-masonry-wrapper {
    column-count: 4;
    column-gap: 5px;
  }
  
  .st-masonry-item {
    margin-bottom: 5px;
  }
}

/* Desktop (992px - 1399px) - 3 Spalten */
@media (max-width: 1399px) and (min-width: 992px) {
  .st-gallery-masonry-wrapper {
    column-count: 3;
    column-gap: 5px;
  }
  
  .st-masonry-item {
    margin-bottom: 5px;
  }
}

/* Tablet (768px - 991px) - 2 Spalten */
@media (max-width: 991px) and (min-width: 768px) {
  .st-gallery-masonry-wrapper {
    column-count: 2;
    column-gap: 5px;
  }
  
  .st-masonry-item {
    margin-bottom: 5px;
  }
}

/* Mobile (452px - 767px) - 2 Spalten */
@media (max-width: 767px) and (min-width: 452px) {
  .st-gallery-masonry-wrapper {
    column-count: 2;
    column-gap: 5px;
  }
  
  .st-masonry-item {
    margin-bottom: 5px;
  }
}

/* Sehr kleine Screens (< 452px) - 1 Spalte */
@media (max-width: 451px) {
  .st-gallery-masonry-wrapper {
    column-count: 1;
    column-gap: 0;
  }
  
  .st-masonry-item {
    margin-bottom: 5px;
  }
}

/* ============================================================================
 * SELECTION OVERLAY - Integration mit wdsb_eg_selection.css
 * ============================================================================ */

/* 
 * Die Selection-Buttons (.st-gallery-select) werden automatisch vom
 * wdsb_eg_selection.js Script hinzugefügt und über wdsb_eg_selection.css
 * gestylt. Hier nur notwendige Positionierungs-Anpassungen.
 */

.st-masonry-item {
  /* Stelle sicher dass absolute Positionierung der Buttons funktioniert */
  position: relative;
}

/* Ausgewählte Items hervorheben (optional) */
.st-masonry-item.st-gallery-selected img {
  border: 3px solid #68B42D;
  box-shadow: 0 0 15px rgba(104, 180, 45, 0.5);
}

/* ============================================================================
 * PRINT STYLES
 * ============================================================================ */

@media print {
  .st-masonry-item {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  .st-gallery-select {
    display: none !important;
  }
  
  .st-gallery-masonry-wrapper {
    column-count: 2;
    column-gap: 10px;
  }
}

/* ============================================================================
 * LOADING STATE (optional)
 * ============================================================================ */

.st-gallery-masonry-wrapper.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

.st-masonry-item img[loading="lazy"] {
  /* Platzhalter während Bilder laden */
  min-height: 200px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}