:root{
  --g-gap: 16px;
  --g-radius: 12px;
  --g-shadow: 0 6px 18px rgba(0,0,0,.08);
  --g-focus: 0 0 0 3px rgba(140,110,68,.35);
  --items-per-view: 3;
}

.pidi-galerie{
  padding: 32px var(--edge) 48px;
  box-sizing: border-box;
  margin-top: 16px;
  --gallery-h: clamp(320px, 60vh, 860px);
}

.gallery{
  max-width: clamp(320px, 96vw, 1440px);
  margin: 0 auto;
  position: relative;
}

.gallery-viewport{
  position: relative;          
  overflow: hidden;
  outline: none;
  border-radius: 16px;
  touch-action: pan-y;
  height: var(--gallery-h);
}

.gallery-viewport::before,
.gallery-viewport::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: clamp(24px, 6vw, 64px);
  pointer-events: none;
  z-index: 1; 
}
.gallery-viewport::before{
  left:0;
  background: linear-gradient(to right, var(--bg, #f8f7f2), rgba(248,247,242,0));
}
.gallery-viewport::after{
  right:0;
  background: linear-gradient(to left, var(--bg, #f8f7f2), rgba(248,247,242,0));
}

.gallery-viewport:focus-visible{ box-shadow: var(--g-focus); }

.gallery-track{
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  gap: var(--g-gap);
  will-change: transform;

  height: 100%;
  align-items: stretch;
}

.gallery-item{
  flex: 0 0 auto;
  width: calc((100% - (var(--items-per-view) - 1) * var(--g-gap)) / var(--items-per-view));
  height: 100%; 
}
.gallery-item figure{
  margin: 0;
  border-radius: var(--g-radius);
  overflow: hidden;
  box-shadow: var(--g-shadow);
  background: #eee;
  cursor: zoom-in;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;

  height: 100%; 
  display: grid;
  place-items: center;
}
.gallery-item img{
  display:block;
  width:100%;
  height:100%;             
  object-fit: cover;       
  transition: transform .6s ease;
}
.gallery-item:hover img{ transform: scale(1.02); }

.gallery-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(248,247,242,.9);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
  z-index: 2; 
}
.gallery-btn:hover{ background:#fff; transform: translateY(-50%) scale(1.05); }
.gallery-btn:active{ transform: translateY(-50%) scale(.98); }
.gallery-btn.prev{ left: -6px; }
.gallery-btn.next{ right: -6px; }


.lb{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.75);
  display: none;
  align-items: center; justify-content: center;
  z-index: 2000;
}
.lb.open{ display: flex; }
.lb__img{
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.lb__close, .lb__nav{
  position: absolute; color: #fff; border: none; background: transparent;
  font-size: 28px; line-height: 1; cursor: pointer;
}
.lb__close{ top: 16px; right: 20px; }
.lb__nav.prev{ left: 18px; top: 50%; transform: translateY(-50%); }
.lb__nav.next{ right: 18px; top: 50%; transform: translateY(-50%); }

@media (min-width: 1440px){
  :root{ --items-per-view: 4; } 
}
@media (max-width: 1024px){
  :root{ --items-per-view: 3; }
}
@media (max-width: 768px){
  :root{ --items-per-view: 1; }
  .gallery-btn{ display:none; } 
}
@media (max-width: 480px){
  :root{ --items-per-view: 1; }
}