/* Smooth Gallery — marquee with arrow + filter controls */

.sg-wrap{
  --sg-w:300px;
  --sg-h:380px;
  --sg-gap:12px;
  --sg-speed:60s;
  --sg-radius:0px;
  --sg-copies:2;
  position:relative;width:100%;box-sizing:border-box;
}
.sg-wrap *,.sg-wrap *::before,.sg-wrap *::after{box-sizing:border-box;}

/* ===== Header ===== */
.sg-header{display:flex;flex-direction:column;margin-bottom:28px;}

/* Arrows above filters */
.sg-arrows{display:flex;align-items:center;gap:8px;}
.sg-arrows-above{margin-bottom:12px;}
.sg-arrows-pos-right{justify-content:flex-end;}
.sg-arrows-pos-left{justify-content:flex-start;}
.sg-arrows-pos-center{justify-content:center;}

/* Arrows inline (inside filter row, pushed right) */
.sg-arrows-inline{margin-left:auto;padding:0 8px;}

/* Filter bar */
.sg-filters{
  position:relative;
  display:flex;align-items:stretch;
  border-top:1px solid rgba(0,0,0,.15);
  border-bottom:1px solid rgba(0,0,0,.15);
  scroll-behavior:smooth;
  overflow-y:hidden;
}
.sg-filter{
  position:relative;background:transparent;border:0;
  padding:18px 20px;font:inherit;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:#888;cursor:pointer;white-space:nowrap;
  transition:background-color .25s ease,color .25s ease;
}
.sg-filter:hover{color:#1a1a1a;}
.sg-filter.is-active{color:#1a1a1a;}

/* Overflow modes — controlled by prefix_class on .sg-wrap */

/* Auto: stretch when room, scroll when not (JS toggles .is-overflowing) */
.sg-wrap.sg-overflow-auto .sg-filters,
.sg-overflow-auto .sg-wrap .sg-filters{overflow-x:auto;flex-wrap:nowrap;}
.sg-wrap.sg-overflow-auto .sg-filter,
.sg-overflow-auto .sg-wrap .sg-filter{flex:1;}
.sg-wrap.sg-overflow-auto .sg-filters.is-overflowing .sg-filter,
.sg-overflow-auto .sg-wrap .sg-filters.is-overflowing .sg-filter{flex:0 0 auto;}

/* Scroll: always horizontal scroll */
.sg-wrap.sg-overflow-scroll .sg-filters,
.sg-overflow-scroll .sg-wrap .sg-filters{overflow-x:auto;flex-wrap:nowrap;}
.sg-wrap.sg-overflow-scroll .sg-filter,
.sg-overflow-scroll .sg-wrap .sg-filter{flex:0 0 auto;}

/* Wrap: multi-line */
.sg-wrap.sg-overflow-wrap .sg-filters,
.sg-overflow-wrap .sg-wrap .sg-filters{flex-wrap:wrap;}
.sg-wrap.sg-overflow-wrap .sg-filter,
.sg-overflow-wrap .sg-wrap .sg-filter{flex:0 0 auto;}

/* Fit: force squish (current behavior) */
.sg-wrap.sg-overflow-fit .sg-filters,
.sg-overflow-fit .sg-wrap .sg-filters{overflow:hidden;flex-wrap:nowrap;}
.sg-wrap.sg-overflow-fit .sg-filter,
.sg-overflow-fit .sg-wrap .sg-filter{flex:1;min-width:0;}

/* Filters Per View: JS applies equal widths only when --sg-fpv is greater than 0.
   When --sg-fpv is 0, filters keep natural text width and the device width decides how many fit. */
.sg-wrap.sg-fpv .sg-filters{overflow-x:auto;flex-wrap:nowrap;}
.sg-wrap.sg-fpv .sg-filter{overflow:hidden;text-overflow:ellipsis;}

/* Keep horizontal filter scrolling/swiping enabled, but hide the browser scrollbar. */
.sg-filters{
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.sg-filters::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

/* Active underline indicator */
.sg-filters.has-uline .sg-filter::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;
  height:1px;background:transparent;
  transition:background-color .25s ease;
}
.sg-filters.has-uline .sg-filter.is-active::after{background:#1a1a1a;}

/* Underline width: match text instead of full button width */
.sg-wrap.sg-uline-text .sg-filters.has-uline .sg-filter::after{
  left:35%;right:35%;
}

/* Arrow buttons */
.sg-arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:0;background:transparent;
  color:#1a1a1a;cursor:pointer;border-radius:50%;padding:0;
  transition:background-color .2s ease,color .2s ease,transform .2s ease;
}
.sg-arrow:hover{background-color:rgba(0,0,0,.05);}
.sg-arrow svg{width:16px;height:16px;display:block;}

/* ===== Rows / Track ===== */
.sg-rows{display:flex;flex-direction:column;gap:var(--sg-gap);overflow:hidden;}
.sg-row{overflow:hidden;width:100%;}
.sg-track{
  display:flex;width:max-content;
  animation:sg-scroll var(--sg-speed) linear infinite;
  will-change:transform;
}
.sg-row[data-dir="right"] .sg-track{animation-direction:reverse;}

@keyframes sg-scroll{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(calc(-100% / var(--sg-copies)),0,0);}
}

.sg-wrap.sg-pause-hover .sg-row:hover .sg-track,
.sg-wrap.is-offscreen .sg-track{animation-play-state:paused;}

/* Items */
.sg-item{
  flex:0 0 var(--sg-w);height:var(--sg-h);margin-right:var(--sg-gap);
  position:relative;overflow:hidden;cursor:pointer;
  border-radius:var(--sg-radius);background:#eee;
  transition:flex-basis .55s ease,opacity .4s ease,margin .55s ease;
}
.sg-item.is-hidden{flex-basis:0;opacity:0;margin-right:0;pointer-events:none;}
.sg-item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s ease;
}
.sg-item:hover img{transform:scale(1.04);}

/* ===== Lightbox ===== */
.sg-lb{
  position:fixed;inset:0;background:rgba(10,10,10,.94);z-index:99999;
  display:none;align-items:center;justify-content:center;opacity:0;
  transition:opacity .25s ease;
}
.sg-lb.is-open{display:flex;opacity:1;}
.sg-lb > img{max-width:92vw;max-height:88vh;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.sg-lb-btn{
  position:absolute;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,transform .2s ease;
}
.sg-lb-btn:hover{background:rgba(255,255,255,.2);}
.sg-lb-close{top:20px;right:20px;}
.sg-lb-prev{left:24px;top:50%;transform:translateY(-50%);}
.sg-lb-next{right:24px;top:50%;transform:translateY(-50%);}
.sg-lb-prev:hover,.sg-lb-next:hover{transform:translateY(-50%) scale(1.05);}

/* ===== Responsive ===== */
@media (max-width:768px){
  .sg-filter{padding-left:14px;padding-right:14px;}
}

@media (prefers-reduced-motion:reduce){
  .sg-track{animation:none;}
  .sg-item,.sg-item img{transition:none;}
}