/* Walker — Project Gallery: Filmstrip (drag + inertia, no wheel override) */

.walker-project-gallery{
  --gap: 20px;     /* space between images */
  --fade: 80px;    /* width of edge fades */
  --max-h: 600px;  /* cap image height */
  position: relative;
  width: 100%;
  overflow: hidden;         /* keep the strip’s overflow internal */
  box-sizing: border-box;
}

/* Horizontally scrolling strip */
.walker-project-gallery .wpg-viewport{
  display: flex;
  align-items: center;
  gap: var(--gap);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px var(--fade);
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  touch-action: pan-x;      /* allow horizontal pan; wheel remains vertical for page */
  user-select: none;
  box-sizing: border-box;
}

/* During drag we want immediate response (no CSS smoothing) */
.walker-project-gallery .wpg-viewport.is-dragging{
  scroll-behavior: auto;
}

.walker-project-gallery .wpg-viewport:active{ cursor: grabbing; }

/* Hide internal scrollbar UI */
.walker-project-gallery .wpg-viewport::-webkit-scrollbar{ height: 0; }
.walker-project-gallery .wpg-viewport{ scrollbar-width: none; } /* Firefox */

.walker-project-gallery .wpg-item{ flex: 0 0 auto; }
.walker-project-gallery .wpg-snap{ display: block; }

/* HARD RESET to avoid theme-rounded corners / cropping */
.walker-project-gallery .wpg-item,
.walker-project-gallery .wpg-snap,
.walker-project-gallery img{
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

/* Natural image sizing: NOT cropped */
.walker-project-gallery .wpg-snap img{
  display: block;
  height: auto !important;
  width: auto !important;          /* let width follow aspect ratio */
  max-height: var(--max-h) !important;
  max-width: none !important;
  object-fit: contain !important;  /* if any size is forced elsewhere */
  -webkit-user-drag: none;
  user-select: none;
  box-shadow: none;                /* remove any theme shadow if present */
}

/* Edge fades (only visible when more content exists) */
.walker-project-gallery .wpg-fade{
  position: absolute;
  top: 0; bottom: 0;
  width: var(--fade);
  pointer-events: none;
  opacity: 0;                 /* toggled by JS */
  transition: opacity .2s ease;
  z-index: 2;
}
.walker-project-gallery .wpg-fade::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}
.walker-project-gallery .wpg-fade-left{ left:0; }
.walker-project-gallery .wpg-fade-right{ right:0; }
.walker-project-gallery .wpg-fade-right::before{ transform: rotate(180deg); }

/* Arrows (overlay) — optional */
.walker-project-gallery .wpg-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 56px; height: 56px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.9);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  color: #333; font-size: 28px; line-height: 1;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease, opacity .15s ease;
}
.walker-project-gallery .wpg-nav:hover{ background:#fff; transform: translateY(-50%) scale(1.05); }
.walker-project-gallery .wpg-prev{ left: 14px; }
.walker-project-gallery .wpg-next{ right: 14px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .walker-project-gallery .wpg-nav{ transition: none; }
}