/* ════════════════════════════════════════════════════════════════════════════
   Gallery pages (gallery.php, gallery-single.php). Scoped to .gx.
   Every photo is shown whole: when its shape doesn't match the box, a blurred
   copy of the same photo fills the empty space.
   ════════════════════════════════════════════════════════════════════════════ */
.gx { padding-bottom:56px; }
.gx a { color:inherit; text-decoration:none; }
.gx-hd { padding:32px 0 22px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:26px; }
.gx-h1 { margin:0; font-size:clamp(26px, 3.4vw, 38px); line-height:1.15; font-weight:800; letter-spacing:-.02em; color:var(--white); }
.gx-h2 { margin:0 0 18px; font-size:22px; font-weight:800; letter-spacing:-.01em; color:var(--white); }
.gx-sub { margin:8px 0 0; font-size:15.5px; color:var(--muted); }
.gx-empty { padding:60px 0; text-align:center; color:var(--muted); }

/* Album grid */
.gx-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px 22px; }
.gx-grid.four { grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px 18px; }
.gx-card { display:flex; flex-direction:column; gap:8px; min-width:0; }
.gx-card.big { }
.gx-pic { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#06161c; }
.gx-pic::before { content:""; position:absolute; inset:-20px; background:var(--src) center/cover no-repeat; filter:blur(18px) brightness(.55); }
.gx-pic img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:transform .4s ease; }
.gx-card:hover .gx-pic img { transform:scale(1.03); }
.gx-n { position:absolute; right:10px; bottom:10px; z-index:1; display:inline-flex; align-items:center; gap:6px; padding:4px 9px; background:rgba(0,20,26,.78); color:#fff; font-size:12.5px; font-weight:700; }
.gx-t { font-size:17px; line-height:1.3; font-weight:800; color:var(--white); letter-spacing:-.01em; transition:color .15s; }

.gx-card:hover .gx-t { color:var(--accent); }
.gx-m { font-size:13px; color:var(--muted); }
.gx-card:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }

/* Album page — Cinematic */
.gx-cine-hd { max-width:820px; margin:0 auto; padding:26px 0 30px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.gx-crumb { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; font-size:13px; color:var(--muted); margin-bottom:22px; }
.gx-crumb a:hover { color:var(--accent); }
.gx-crumb span:last-child { color:var(--white); font-weight:700; }
.gx-kick { font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.gx-cine-h1 { margin:10px 0 0; font-size:clamp(32px, 5vw, 58px); line-height:1.04; font-weight:800; letter-spacing:-.03em; color:var(--white); }
.gx-cine-hd .gx-m { margin-top:12px; }
.gx-desc { margin:18px 0 0; max-width:62ch; font-size:16.5px; line-height:1.7; color:rgba(221,227,234,.78); }

.gx-stage { position:relative; width:100%; aspect-ratio:21/9; overflow:hidden; background:#000; }
.gx-slide { position:absolute; inset:0; margin:0; opacity:0; transition:opacity .45s ease; cursor:zoom-in; }
.gx-slide.on { opacity:1; z-index:1; }
.gx-slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.gx-arrow { position:absolute; top:50%; z-index:3; transform:translateY(-50%); width:48px; height:48px; display:none; align-items:center; justify-content:center; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; transition:background .15s; }
.gx-arrow:hover { background:var(--accent); color:#002530; }
.gx-arrow.l { left:14px; } .gx-arrow.r { right:14px; }
.gx-close { position:absolute; top:14px; right:14px; z-index:3; width:44px; height:44px; display:none; align-items:center; justify-content:center; border:0; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; }
.gx-close:hover { background:var(--accent); color:#002530; }

.gx-bar { display:flex; align-items:center; gap:14px; padding-top:18px; }
.gx-count { font-size:15px; font-weight:800; color:var(--white); letter-spacing:.04em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.gx-count i { font-style:normal; font-weight:600; color:var(--muted); }
.gx-line { flex:1; height:2px; background:rgba(255,255,255,.12); position:relative; overflow:hidden; }
.gx-line b { position:absolute; left:0; top:0; bottom:0; background:var(--accent); transition:width .35s ease; }
.gx-round { flex:none; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.22); border-radius:50%; background:transparent; color:#fff; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.gx-round:hover { background:var(--accent); border-color:var(--accent); color:#002530; }
.gx-round:focus-visible, .gx-arrow:focus-visible, .gx-close:focus-visible, .gx-th:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.gx-thumbs { display:flex; gap:10px; margin-top:16px; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent; }
.gx-th { position:relative; flex:0 0 136px; aspect-ratio:16/10; padding:0; border:0; background:#06161c; cursor:pointer; overflow:hidden; opacity:.45; transition:opacity .2s; }
.gx-th::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--accent); transform:scaleX(0); transition:transform .25s; }
.gx-th img { width:100%; height:100%; object-fit:cover; display:block; }
.gx-th:hover { opacity:.85; }
.gx-th.on { opacity:1; }
.gx-th.on::after { transform:scaleX(1); }

/* Full screen */
html.gx-lock, html.gx-lock body { overflow:hidden; }
.gx-view.full { position:fixed; inset:0; z-index:9998; background:#000; display:flex; flex-direction:column; padding:12px 12px 8px; }
.gx-view.full .gx-stage { flex:1; aspect-ratio:auto; }
.gx-view.full .gx-slide { cursor:default; }
.gx-view.full .gx-arrow, .gx-view.full .gx-close { display:inline-flex; }
.gx-view.full .gx-bar { padding-top:10px; }
.gx-view.full #gxFull, .gx-view.full .gx-nav { display:none; }
.gx-view.full .gx-thumbs { justify-content:center; margin-top:10px; }

.gx-more { margin-top:52px; padding-top:26px; border-top:1px solid rgba(255,255,255,.1); }
.gx-404 { text-align:center; padding:90px 0; }
.gx-back { display:inline-block; margin-top:20px; color:var(--accent); font-weight:700; }

@media (max-width:1100px) {
  .gx-stage { aspect-ratio:16/9; }
  .gx-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .gx-grid.four { grid-template-columns:repeat(2, minmax(0,1fr)); }

}
@media (max-width:640px) {
  .gx-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
  .gx-grid.four { grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 12px; }
  .gx-grid.four .gx-t { font-size:14.5px; }

  .gx-hd { padding-top:22px; }
  .gx-th { flex-basis:88px; }
  .gx-stage { aspect-ratio:4/3; margin:0 -12px; width:calc(100% + 24px); }
  .gx-view.full .gx-stage { margin:0; width:100%; }
  .gx-bar { gap:10px; } .gx-round { width:40px; height:40px; }
  .gx-cine-hd { padding:18px 0 22px; }
  .gx-desc { font-size:15.5px; }

}
@media (prefers-reduced-motion: reduce) { .gx-slide, .gx-pic img { transition:none; } }
.gx-view.full .gx-stage { margin:0; width:100%; }