/* gal-a: "Swipe gallery" for section#work. Loaded after theme-silas3.css.
   Photos are never cropped: each frame takes the photo's own ratio (from the
   img width/height attributes). Video tab keeps 9:16 reels. */

#work{overflow-x:clip;--gal-edge:max(var(--gutter),calc((100vw - 1320px)/2));--gal-gap:12px;--gal-h:clamp(340px,35vw,520px);--gal-r:14px}

/* ---------- section rhythm (phones: tighter) ---------- */
@media (max-width:899px){
  #work{padding-block:3.25rem 3rem}
  #work .sec-head{margin-bottom:1.25rem}
  #work h2{margin-bottom:.5rem}
  #work .sec-foot{margin-top:1.5rem;padding-top:1.25rem}
}

/* ---------- chips: one row, never wrap ---------- */
#work .filters{
  flex-wrap:nowrap;gap:.5rem;margin-bottom:1rem;
  overflow-x:auto;overflow-y:hidden;
  margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);
  scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
#work .filters::-webkit-scrollbar{display:none}
#work .chip{flex:none;white-space:nowrap;min-height:44px;padding:0 .85rem;scroll-snap-align:start;font-size:.9rem}
#work .filters{gap:.4rem}
@media (min-width:900px){
  #work .filters{overflow:visible;margin-inline:0;padding-inline:0;margin-bottom:1.75rem}
  #work .chip{padding:0 1.35rem;font-size:1rem}
}

/* ---------- the rail ---------- */
#work .gallery:not(.gallery--video){
  display:flex!important;grid-template-columns:none;
  gap:var(--gal-gap);
  counter-reset:gal;
  overflow-x:auto;overflow-y:hidden;
  margin-inline:calc(50% - 50vw);
  padding:4px var(--gal-edge);
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--gal-edge);
  overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
#work .gallery:not(.gallery--video)::-webkit-scrollbar{display:none}
#work .gallery:not(.gallery--video) .gallery__item{
  flex:0 0 min(88vw,520px);width:min(88vw,520px);max-width:none;
  grid-column:auto;scroll-snap-align:start;counter-increment:gal;
}
#work .gallery:not(.gallery--video) .gallery__item[data-pos]{grid-column:auto}

/* true ratio: frame has no forced ratio, image decides */
#work .gallery:not(.gallery--video) .shot__frame{
  aspect-ratio:auto;height:auto;border-radius:0;background:var(--graphite-2);
}
#work .gallery:not(.gallery--video) .shot__frame picture{display:block;width:100%;height:auto}
#work .gallery:not(.gallery--video) .shot__img{display:block;width:100%;height:auto;object-fit:cover}

/* ---------- card: caption + counter on a soft bottom gradient ---------- */
#work .shot{position:relative;overflow:hidden;border-radius:var(--gal-r);isolation:isolate}
#work .shot:focus-visible{outline:3px solid var(--mint);outline-offset:-3px}
#work .shot__label{
  position:absolute;left:0;right:0;bottom:0;margin:0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem;
  padding:2.75rem .9rem .8rem;
  background:linear-gradient(to top,rgb(12 12 12 / .82) 0%,rgb(12 12 12 / .6) 45%,rgb(12 12 12 / 0) 100%);
  color:#fff;font-size:.875rem;font-weight:500;letter-spacing:.005em;line-height:1.25;
  text-transform:none;pointer-events:none;
  text-shadow:0 1px 2px rgb(0 0 0 / .35);
}
#work .gallery[style*="--gal-total"]:not(.gallery--video) .shot__label::after{
  content:counter(gal) " / " var(--gal-total,"");
  flex:none;font-size:.75rem;font-weight:600;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;color:#fff;
  padding:.2rem .55rem;border-radius:999px;background:rgb(255 255 255 / .16);
  border:1px solid rgb(255 255 255 / .35);
}

/* ---------- desktop: equal-height rail, widths follow the photos ---------- */
@media (min-width:900px){
  #work .gallery:not(.gallery--video) .gallery__item{flex:none;width:auto}
  #work .gallery:not(.gallery--video) .shot{display:block;height:var(--gal-h)}
  #work .gallery:not(.gallery--video) .shot__frame{height:100%;width:auto}
  #work .gallery:not(.gallery--video) .shot__frame picture{width:auto;height:100%}
  #work .gallery:not(.gallery--video) .shot__img{width:auto;height:100%;max-width:none}
  #work .shot__label{font-size:.9375rem;padding:3.5rem 1.15rem 1rem}
  #work .gallery:not(.gallery--video) .shot__label{opacity:.98}
}

/* ---------- video tab: 9:16 reels. Phones: swipe rail; desktop keeps the grid ---------- */
#work .gallery--video .shot__frame{border-radius:0}
#work .gallery--video .shot__img{object-fit:cover}
#work .gallery--video .shot__label{padding-top:2.5rem}
@media (max-width:899px){
  #work .gallery--video{
    display:flex!important;grid-template-columns:none!important;
    max-width:none!important;margin:0 calc(-1*var(--gutter))!important;
    gap:var(--gal-gap)!important;padding:4px var(--gutter);
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
    overscroll-behavior-x:contain;scrollbar-width:none;scroll-behavior:smooth;
  }
  #work .gallery--video::-webkit-scrollbar{display:none}
  #work .gallery--video .gallery__item{
    flex:0 0 min(56vw,260px)!important;width:min(56vw,260px)!important;scroll-snap-align:start;
  }
}
@media (min-width:900px){
  #work .gallery--video .shot__label{font-size:.875rem}
  #work .gallery--video{max-width:1100px!important;margin-inline:auto!important}
}

/* ---------- controls (injected by gal-a.js) ---------- */
#work .gal-controls{display:flex;align-items:center;gap:1rem;margin-top:.9rem}
#work .gal-controls[hidden]{display:none}
#work .gal-track{position:relative;flex:1;height:3px;border-radius:3px;background:rgb(255 255 255 / .18);overflow:hidden}
#work .gal-thumb{position:absolute;top:0;bottom:0;left:0;width:30%;border-radius:3px;background:var(--mint)}
#work .gal-btns{display:none;gap:.5rem}
#work .gal-btn{
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid rgb(255 255 255 / .3);background:rgb(255 255 255 / .08);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
}
#work .gal-btn:hover{background:rgb(255 255 255 / .18)}
#work .gal-btn:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
#work .gal-btn[disabled]{opacity:.35;cursor:default}
#work .gal-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:900px) and (hover:hover){
  #work .gal-btns{display:flex}
  #work .gal-controls{margin-top:1.25rem}
}

@media (prefers-reduced-motion:reduce){
  #work .gallery,#work .gallery--video{scroll-behavior:auto!important}
  #work .shot:hover .shot__img{transform:none}
  #work .gal-thumb{transition:none}
}