/* =========================================================
   Datei: assets/css/emp-gallery-layouts.css
   Zweck: Zentrale Layout-Styles für Galerie (grid / masonry / slider)
   Hinweis:
   - Diese Datei ist absichtlich "layout-only" (keine Farben/Typo).
   - Sie soll in Singles + Archives gleichermaßen funktionieren.
   - Erwartetes Markup:
       <div class="emp-gallery-wrapper layout-grid|layout-masonry|layout-slider">
         <button|a|div class="emp-gallery-item ..."><img ...></button>
       </div>
   ========================================================= */

/* =========================================================
   Basis
   ========================================================= */

.emp-gallery-wrapper{
  width: 100%;
  box-sizing: border-box;
}

.emp-gallery-item{
  position: relative;
  box-sizing: border-box;
}

/* Bilder immer sauber */
.emp-gallery-item img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   GRID
   ========================================================= */

.emp-gallery-wrapper.layout-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

.emp-gallery-wrapper.layout-grid .emp-gallery-item{
  width: 100%;
  aspect-ratio: 4 / 3;  /* einheitliche Kacheln */
  overflow: hidden;
}

/* =========================================================
   MASONRY (CSS Columns)
   ========================================================= */

.emp-gallery-wrapper.layout-masonry{
  column-count: 3;
  column-gap: 12px;
}

.emp-gallery-wrapper.layout-masonry .emp-gallery-item{
  display: inline-block;          /* wichtig für columns */
  width: 100%;
  margin: 0 0 12px 0;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  overflow: hidden;
}

/* Masonry: Bilder dürfen variieren – wenn dein Template 'large' lädt, passt das gut */
.emp-gallery-wrapper.layout-masonry .emp-gallery-item img{
  height: auto;                   /* nicht erzwingen */
}

/* =========================================================
   SLIDER (horizontal scroll)
   ========================================================= */

.emp-gallery-wrapper.layout-slider{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.emp-gallery-wrapper.layout-slider::-webkit-scrollbar{
  height: 10px;
}
.emp-gallery-wrapper.layout-slider::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
}
.emp-gallery-wrapper.layout-slider::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
}

.emp-gallery-wrapper.layout-slider .emp-gallery-item{
  flex: 0 0 240px;                /* Kartenbreite */
  aspect-ratio: 4 / 3;
  scroll-snap-align: start;
  overflow: hidden;
}

.emp-gallery-wrapper.layout-slider .emp-gallery-item img{
  height: 100%;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 980px){
  .emp-gallery-wrapper.layout-grid{
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .emp-gallery-wrapper.layout-masonry{
    column-count: 2;
  }

  .emp-gallery-wrapper.layout-slider .emp-gallery-item{
    flex-basis: 220px;
  }
}

@media (max-width: 640px){
  .emp-gallery-wrapper.layout-grid{
    grid-template-columns: 1fr;   /* sauber auf Mobile */
  }

  .emp-gallery-wrapper.layout-masonry{
    column-count: 1;
  }

  .emp-gallery-wrapper.layout-slider{
    gap: 10px;
    padding-bottom: 10px;
  }

  .emp-gallery-wrapper.layout-slider .emp-gallery-item{
    flex-basis: 200px;
  }
}