/* ============================================================
   Szabitrans — gallery page styles (gallery.css)
   Layered on top of site.css. Only the gallery-specific components
   (hero, category strips, thumbnails, filters, lightbox, intro veil);
   tokens, header, footer, cursor and background video come from site.css.
   ============================================================ */

/* page head */
.gallery-hero{padding:calc(var(--header-h) + 3rem) 0 1.5rem;text-align:center}
.gallery-hero h1{font-size:clamp(2.6rem,6vw,4.2rem);text-transform:none;font-family:var(--font-display);font-weight:500;letter-spacing:-.02em}
.gallery-hero h1 .accent{color:var(--accent)}
.gallery-hero p{color:var(--text-muted);max-width:60ch;margin:.75rem auto 0}
.gallery-hero .rule{width:54px;height:2px;background:var(--accent);margin:1.25rem auto 0;border-radius:2px}

/* category rows */
.cat{padding:1.5rem 0 2.5rem;scroll-margin-top:calc(var(--header-h) + 1rem)}
.cat-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:1rem;padding-bottom:.85rem;border-bottom:1px solid rgba(255,255,255,.10)}
.cat-head h2{font-size:clamp(1.3rem,3vw,2rem);text-transform:none;font-family:var(--font-display);font-weight:500;display:flex;align-items:center;gap:.7rem}
.cat-head h2::before{content:"";width:4px;height:1.05em;background:var(--accent);border-radius:2px;flex:none}
.cat-head .count{color:var(--text-muted);font-family:var(--font-head);font-size:.9rem;letter-spacing:1px}
.cat.highlight .cat-head h2{color:var(--accent-hover)}
.cat.highlight{outline:2px solid rgba(204,31,31,.5);outline-offset:8px;border-radius:var(--radius-lg);transition:outline-color 1s ease}
.cat[hidden]{display:none}

.strip{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.75rem;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
.strip::-webkit-scrollbar{height:8px}
.strip::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}
.thumb{flex:0 0 auto;width:clamp(220px,32vw,340px);aspect-ratio:4/3;border-radius:18px;overflow:hidden;
  scroll-snap-align:start;position:relative;cursor:pointer;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);box-shadow:0 14px 36px rgba(0,0,0,.34);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .35s var(--ease-out)}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.thumb:hover{transform:translateY(-6px);border-color:rgba(204,31,31,.55);box-shadow:0 20px 46px rgba(0,0,0,.5)}
.thumb:hover img{transform:scale(1.08)}
.thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 60%,rgba(0,0,0,.45));opacity:0;transition:opacity .3s}
.thumb:hover::after{opacity:1}
.thumb::before{content:"+";position:absolute;z-index:2;top:50%;left:50%;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:rgba(204,31,31,.92);color:#fff;font-size:2rem;font-weight:300;line-height:1;
  opacity:0;transform:translate(-50%,-50%) scale(.6);
  transition:opacity .3s var(--ease-out),transform .35s var(--ease-out);pointer-events:none}
.thumb:hover::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cat-empty{color:var(--text-muted);font-style:italic;padding:1.5rem;border:1px dashed var(--border);border-radius:var(--radius-lg)}

/* category filter chips */
.gallery-filters{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:2rem}
.gchip{font-family:var(--font-display);font-size:.9rem;letter-spacing:.01em;color:var(--text-soft);
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);border-radius:50px;
  padding:.62rem 1.15rem;min-height:48px;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .2s}
.gchip:hover{transform:translateY(-2px);border-color:rgba(204,31,31,.5)}
.gchip.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* Step 15 — mobile gallery polish: tighter chip gap + edge padding & a next-thumb peek so the strip reads as swipeable */
@media (max-width:600px){
  .gallery-filters{gap:.5rem}
  .strip{padding-inline:1rem;scroll-padding-left:1rem}
  .thumb{width:min(78vw,300px)}
}

/* lightbox — reparented to <body> in gallery.js so position:fixed always
   resolves against the viewport (never a transformed .page-enter ancestor).
   Height uses dvh/svh so the image fits inside the *visible* viewport even
   while the mobile browser toolbar is showing. */
.lightbox{position:fixed;inset:0;height:100dvh;z-index:9000;background:rgba(10,10,10,.94);display:none;
  align-items:center;justify-content:center;flex-direction:column;padding:1rem;
  padding-top:max(1rem,env(safe-area-inset-top));padding-bottom:max(1rem,env(safe-area-inset-bottom))}
@supports (height:100svh){.lightbox{height:100svh}}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:78dvh;object-fit:contain;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.6);cursor:zoom-in;transition:transform .35s var(--ease-out)}
@supports (height:100svh){.lightbox img{max-height:78svh}}
.lightbox.zoomed img{cursor:zoom-out;transform:scale(1.8)}
/* mobile: leave room for the caption + close/nav buttons so the photo is
   ALWAYS fully on screen, never clipped or pushed off the top */
@media (max-width:600px){.lightbox img{max-width:94vw;max-height:68svh}.lightbox.zoomed img{transform:scale(1.5)}}
.lb-caption{margin-top:1rem;font-family:var(--font-head);letter-spacing:1px;color:#fff;font-size:1rem;text-align:center}
.lb-caption .accent{color:var(--accent-hover)}
.lb-btn{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;transition:background .2s,transform .2s}
.lb-btn:hover{background:var(--accent)}
.lb-btn svg{width:26px;height:26px;stroke:#fff}
.lb-prev{left:max(1rem,3vw)}.lb-next{right:max(1rem,3vw)}
.lb-close{position:absolute;top:1.25rem;right:max(1rem,3vw);width:48px;height:48px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.25);font-size:1.8rem;color:#fff;display:grid;place-items:center}
.lb-close:hover{background:var(--accent);transform:rotate(90deg);transition:transform .3s}
@media (max-width:600px){.lb-btn{width:46px;height:46px}.lb-prev{left:.5rem}.lb-next{right:.5rem}}

/* entrance veil */
#g-intro{position:fixed;inset:0;z-index:5000;background:#1b1b1b;pointer-events:none}
.g-reveal{opacity:0;transform:translateX(-40px);will-change:opacity,transform}
@media (prefers-reduced-motion:reduce){#g-intro{display:none!important}}