/* Babska Strefa · stage F: the salon's own photos. Section 02 becomes a filterable gallery in the same arched
   frames, with a lightbox; section 06 gets Sabina's portrait. hero.css, site.css, site-d.css, site-e.css stay untouched. */

/* ---------- 02 · filter: the try-on's pill buttons, as one row ---------- */
.work-filter{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(36px,4.6vw,56px) 0 0}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:38px;padding:9px 16px;border-radius:999px;border:1px solid rgba(244,230,223,.28);background:none;font:500 13px/1 var(--f-body);color:var(--text-secondary);cursor:pointer;transition:background-color .4s var(--ease-out),color .4s var(--ease-out),border-color .4s var(--ease-out)}
.chip:hover{border-color:rgba(244,230,223,.6);color:var(--text-primary)}
.chip[aria-pressed="true"]{background:var(--text-primary);border-color:var(--text-primary);color:var(--canvas)}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (pointer:coarse){.chip{min-height:44px}}

/* ---------- 02 · the gallery: same arched frames, wrapped and centred so a short category sits in the middle ---------- */
.frames.gallery{--cols:6;--g:clamp(10px,1.2vw,18px);--low:clamp(14px,2.4vw,36px);display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(30px,4.4vw,64px) var(--g);margin-top:clamp(28px,3.4vw,40px)}
.frames.gallery .frame{flex:0 0 calc((100% - (var(--cols) - 1)*var(--g))/var(--cols));transform:none;transition:opacity .45s var(--ease-out),scale .45s var(--ease-out),translate .7s var(--ease-out)}
/* the staggered rhythm follows the visible order, not the markup (site-f.js sets .p2 / .p3) */
.frames.gallery .frame.p2{translate:0 var(--low)}
.frames.gallery .frame.out{opacity:0;scale:.96}
.frames.gallery .frame[hidden]{display:none}
.frame-open{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:var(--panel);cursor:zoom-in;color:inherit}
.frame-open img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:scale 1.2s var(--ease-out)}
.frame-open:hover img{scale:1.04}
.frame-open:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.frame-tag{position:absolute;left:50%;bottom:14px;translate:-50% 0;padding:6px 11px;border-radius:999px;background:rgba(23,8,18,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:400 9px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-primary);opacity:0;transition:opacity .5s var(--ease-out),translate .5s var(--ease-out)}
.frame-open:hover .frame-tag,.frame-open:focus-visible .frame-tag{opacity:1;translate:-50% -3px}
@media (hover:none){.frame-tag{opacity:1}}
@media (max-width:1100px){
  .frames.gallery{--cols:3;--low:24px}
  .frames.gallery .frame.p2{translate:none}
  .frames.gallery .frame.p3{translate:0 var(--low)}
}
@media (max-width:560px){
  .frames.gallery{--cols:2;--low:22px;row-gap:34px}
  .frames.gallery .frame.p3{translate:none}
  .frames.gallery .frame.p2{translate:0 var(--low)}
  .frame-tag{bottom:10px;padding:5px 9px}
  .work-filter{gap:6px}
  .chip{padding:9px 11px;gap:6px}
}

/* ---------- 02 · lightbox: the photo alone on the night, nothing else competes ---------- */
html.lb-lock{overflow:hidden}
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--text-primary);overflow:hidden}
.lb[open]{display:grid;place-items:center}
.lb::backdrop{background:rgba(16,5,9,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px;padding:0 88px}
.lb-img{display:block;width:auto;height:auto;max-width:min(100%,1400px);max-height:calc(100dvh - 132px);border-radius:22px;border:1px solid rgba(201,168,143,.28);background:var(--panel);transition:opacity .35s var(--ease-out)}
.lb-img.swap{opacity:0}
.lb[open] .lb-fig{animation:lb-in .55s var(--ease-out)}
@keyframes lb-in{from{opacity:0;transform:translateY(14px) scale(.985)}}
.lb-cap{display:flex;gap:18px;font:400 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--szampan)}
.lb-count{color:var(--text-secondary)}
.lb-btn{position:absolute;display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid rgba(244,230,223,.28);background:rgba(23,8,18,.5);color:var(--text-primary);cursor:pointer;transition:border-color .4s var(--ease-out),background-color .4s var(--ease-out)}
.lb-btn:hover{border-color:rgba(244,230,223,.7);background:rgba(23,8,18,.8)}
.lb-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lb-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.lb-prev{left:24px;top:50%;translate:0 -50%}
.lb-next{right:24px;top:50%;translate:0 -50%}
.lb-close{right:24px;top:24px}
@media (max-width:720px){
  .lb-fig{padding:0 12px;gap:14px}
  .lb-img{max-height:calc(100dvh - 190px);border-radius:16px}
  .lb-prev,.lb-next{top:auto;bottom:22px;translate:none}
  .lb-prev{left:calc(50% - 64px)}
  .lb-next{right:calc(50% - 64px)}
  .lb-close{right:14px;top:14px}
  .lb-cap{position:absolute;left:0;right:0;top:30px;justify-content:center}
}

/* ---------- 06 · Sabina's portrait in the main photo slot ---------- */
.photo>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.photo:has(>picture){background:var(--panel)}

/* ---------- reduced motion: filtering and the lightbox simply swap ---------- */
@media (prefers-reduced-motion: reduce){
  .frames.gallery .frame,.frame-open img,.frame-tag,.lb-img{transition:none}
  .frame-open:hover img{scale:none}
  .lb[open] .lb-fig{animation:none}
}