/* ============================================================
   PA Wedding — gallery masonry + lightbox  (Vetiver & Blush)
   Shared across variants. Loaded after styles.css so it wins.
   ============================================================ */

/* ---- Masonry gallery ---- */
/* always visible — the block is taller than the viewport, so the scroll-reveal
   threshold would never fire and leave it stuck at opacity 0 */
#gallery .gal{display:block;column-count:4;column-gap:14px;opacity:1!important;transform:none!important;}
#gallery .gal .gcell{display:block;break-inside:avoid;margin:0 0 14px;position:relative;
  border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--ivory-2);
  cursor:zoom-in;outline-offset:3px;}
#gallery .gal .gcell img{width:100%;height:auto;display:block;transition:transform .6s ease,filter .6s ease;}
#gallery .gal .gcell:hover img{transform:scale(1.045);filter:brightness(1.03);}
#gallery .gal .gcell::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(66,70,60,.22));opacity:0;transition:opacity .35s ease;}
#gallery .gal .gcell:hover::after{opacity:1;}
@media(max-width:900px){#gallery .gal{column-count:3;}}
@media(max-width:680px){#gallery .gal{column-count:2;column-gap:10px;}#gallery .gal .gcell{margin-bottom:10px;}}
@media(prefers-reduced-motion:reduce){#gallery .gal .gcell img{transition:none;}}

/* ---- Story portrait (fills the arched .story-art frame) ---- */
.story-art .story-photo{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 28%;display:block;}

/* ---- Lightbox ---- */
.pa-lb{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(38,40,33,.93);opacity:0;visibility:hidden;transition:opacity .35s ease;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.pa-lb.open{opacity:1;visibility:visible;}
.pa-lb img{max-width:92vw;max-height:86vh;border-radius:8px;object-fit:contain;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);transform:scale(.96);transition:transform .35s ease;}
.pa-lb.open img{transform:scale(1);}
.pa-lb .pa-x,.pa-lb .pa-nav{position:absolute;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#f5f0e6;background:rgba(245,240,230,.12);border:1px solid rgba(245,240,230,.25);
  border-radius:50%;line-height:1;transition:background .2s ease,transform .2s ease;}
.pa-lb .pa-x:hover,.pa-lb .pa-nav:hover{background:rgba(245,240,230,.26);}
.pa-lb .pa-x{top:20px;right:20px;width:46px;height:46px;font-size:26px;}
.pa-lb .pa-nav{top:50%;transform:translateY(-50%);width:54px;height:54px;font-size:32px;padding-bottom:4px;}
.pa-lb .pa-nav:hover{transform:translateY(-50%) scale(1.06);}
.pa-lb .pa-prev{left:20px;}
.pa-lb .pa-next{right:20px;}
.pa-lb .pa-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  color:rgba(245,240,230,.82);font-family:var(--label);letter-spacing:.22em;font-size:11px;}
.pa-lb:focus-visible,.pa-lb .pa-x:focus-visible,.pa-lb .pa-nav:focus-visible{outline:2px solid #f5f0e6;outline-offset:3px;}
@media(max-width:680px){
  .pa-lb .pa-nav{width:44px;height:44px;font-size:26px;}
  .pa-lb .pa-prev{left:8px;}.pa-lb .pa-next{right:8px;}
  .pa-lb .pa-x{top:12px;right:12px;}
}
@media(prefers-reduced-motion:reduce){.pa-lb,.pa-lb img{transition:none;}}