/* PA Event Gallery: stacked photo bundle + full-screen viewer */

.pa-eg { --n:#003860; --n2:#00203a; --g:#d5943a; --g3:#f0bd73; --line:#e4e9f0; font-family:'DM Sans',system-ui,sans-serif; width:100%; }

/* ---- the bundle ---- */
.pa-eg-stack { position:relative; display:block; width:100%; aspect-ratio:4 / 3.3; padding:0; margin:6px 0 22px; border:0; background:none; cursor:pointer; perspective:900px; }
.pa-eg-card { position:absolute; inset:0 6% 6% 6%; display:block; border-radius:18px; overflow:hidden; background:#e9edf3; border:6px solid #fff;
  box-shadow:0 22px 40px -22px rgba(0,36,63,.65),0 2px 6px rgba(0,36,63,.12); transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease; transform-origin:50% 90%; }
.pa-eg-card img { width:100%; height:100%; object-fit:cover; display:block; }
.pa-eg-c3 { transform:rotate(-8deg) translate(-4%,4%) scale(.93); z-index:1; filter:saturate(.9); }
.pa-eg-c2 { transform:rotate(6deg) translate(4%,2%) scale(.96); z-index:2; }
.pa-eg-c1 { transform:rotate(0); z-index:3; }
.pa-eg-stack:hover .pa-eg-c3, .pa-eg-stack:focus-visible .pa-eg-c3 { transform:rotate(-13deg) translate(-12%,5%) scale(.95); }
.pa-eg-stack:hover .pa-eg-c2, .pa-eg-stack:focus-visible .pa-eg-c2 { transform:rotate(10deg) translate(12%,3%) scale(.97); }
.pa-eg-stack:hover .pa-eg-c1, .pa-eg-stack:focus-visible .pa-eg-c1 { transform:translateY(-6px) scale(1.01); box-shadow:0 30px 50px -22px rgba(0,36,63,.75),0 2px 6px rgba(0,36,63,.12); }
.pa-eg-stack:focus-visible { outline:3px solid var(--g); outline-offset:6px; border-radius:20px; }
.pa-eg-count { position:absolute; z-index:4; left:calc(6% + 14px); bottom:calc(6% + 14px); display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px;
  background:rgba(0,32,58,.88); color:#fff; font-weight:600; font-size:13px; letter-spacing:.01em; backdrop-filter:blur(4px); }

/* ---- mini strip ---- */
.pa-eg-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0 0 18px; }
.pa-eg-th { position:relative; padding:0; border:0; border-radius:12px; overflow:hidden; aspect-ratio:1; cursor:pointer; background:#e9edf3; transition:transform .25s ease,box-shadow .25s ease; }
.pa-eg-th img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.pa-eg-th:hover { transform:translateY(-3px); box-shadow:0 14px 24px -14px rgba(0,36,63,.6); }
.pa-eg-th:hover img { transform:scale(1.06); }
.pa-eg-th:focus-visible { outline:3px solid var(--g); outline-offset:2px; }
.pa-eg-more { position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,32,58,.66); color:#fff; font-weight:700; font-size:20px; }
.pa-eg-open { display:inline-flex; align-items:center; gap:10px; padding:12px 22px; border:0; border-radius:999px; cursor:pointer; background:var(--n); color:#fff; font-family:inherit; font-weight:600; font-size:14.5px;
  box-shadow:0 14px 26px -14px rgba(0,56,96,.8); transition:background .2s,transform .2s; }
.pa-eg-open:hover { background:var(--g); transform:translateY(-2px); }
.pa-eg-open:focus-visible { outline:3px solid var(--g); outline-offset:3px; }

/* ---- viewer ---- */
.pa-egv { position:fixed; inset:0; z-index:2147483000; display:flex; flex-direction:column; background:rgba(0,10,20,.985); color:#fff; font-family:'DM Sans',system-ui,sans-serif; opacity:0; visibility:hidden; transition:opacity .25s ease,visibility .25s; }
.pa-egv.is-open { opacity:1; visibility:visible; }
.pa-egv-top { display:flex; align-items:center; gap:14px; padding:16px 22px; }
.pa-egv-title { flex:1; min-width:0; font-weight:700; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pa-egv-chips { display:flex; gap:8px; flex-wrap:wrap; }
.pa-egv-chip { padding:7px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; font:600 13px 'DM Sans',sans-serif; cursor:pointer; }
.pa-egv-chip.is-on { background:var(--g3); border-color:var(--g3); color:#10243a; }
.pa-egv-count { font-weight:600; font-size:13.5px; color:rgba(255,255,255,.75); white-space:nowrap; }
.pa-egv-x { width:42px; height:42px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; font-size:22px; line-height:1; cursor:pointer; }
.pa-egv-x:hover { background:var(--g); }
.pa-egv-stage { position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:0 74px; }
.pa-egv-img { max-width:100%; max-height:100%; object-fit:contain; border-radius:10px; box-shadow:0 30px 60px -20px rgba(0,0,0,.8); transition:opacity .2s; }
.pa-egv-img.is-swap { opacity:0; }
.pa-egv-nav { position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:24px; cursor:pointer; transition:background .2s; }
.pa-egv-nav:hover { background:var(--g); }
.pa-egv-prev { left:16px; } .pa-egv-next { right:16px; }
.pa-egv-rail { display:flex; gap:8px; overflow-x:auto; padding:14px 22px 20px; scrollbar-width:thin; }
.pa-egv-rail button { flex:0 0 auto; width:76px; height:56px; padding:0; border:2px solid transparent; border-radius:8px; overflow:hidden; cursor:pointer; background:#0b2a45; opacity:.6; transition:opacity .2s,border-color .2s; }
.pa-egv-rail button img { width:100%; height:100%; object-fit:cover; display:block; }
.pa-egv-rail button:hover { opacity:.9; }
.pa-egv-rail button.is-on { opacity:1; border-color:var(--g3); }
.pa-egv button:focus-visible { outline:3px solid var(--g3); outline-offset:2px; }
body.pa-egv-lock { overflow:hidden; }

@media (max-width:700px) {
  .pa-egv-stage { padding:0 8px; }
  .pa-egv-nav { width:42px; height:42px; background:rgba(0,0,0,.5); }
  .pa-egv-prev { left:8px; } .pa-egv-next { right:8px; }
  .pa-egv-top { padding:12px 14px; flex-wrap:wrap; }
  .pa-egv-rail button { width:62px; height:46px; }
}
@media (prefers-reduced-motion:reduce) { .pa-eg-card,.pa-eg-th,.pa-eg-th img,.pa-eg-open,.pa-egv,.pa-egv-img { transition:none !important; } }