.acg-gallery{
  --acg-cols:4;
  --acg-gap:26px;
  --acg-radius:16px;
  --acg-ratio:4 / 3;
  display:grid;
  grid-template-columns:repeat(var(--acg-cols),minmax(0,1fr));
  gap:var(--acg-gap);
  width:100%;
}
.acg-card{
  position:relative;
  appearance:none;
  border:0;
  padding:0;
  margin:0;
  width:100%;
  aspect-ratio:var(--acg-ratio);
  overflow:hidden;
  border-radius:var(--acg-radius);
  background:#eef1f4;
  cursor:zoom-in;
  box-shadow:0 1px 1px rgba(10,22,40,.04);
  transform:translateZ(0);
  isolation:isolate;
}
.acg-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .48s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}
.acg-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.16) 100%);
  opacity:.18;
  transition:opacity .3s ease, background .3s ease;
  pointer-events:none;
}
.acg-expand{
  position:absolute;
  left:50%;
  top:50%;
  width:60px;
  height:60px;
  display:grid;
  place-items:center;
  transform:translate(-50%,-46%) scale(.9);
  border-radius:17px;
  color:#143f7a;
  background:rgba(255,255,255,.95);
  border:2px solid rgba(20,63,122,.8);
  box-shadow:0 10px 35px rgba(8,30,65,.22), inset 0 0 0 2px rgba(255,255,255,.65);
  opacity:0;
  transition:opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.acg-card:hover img,.acg-card:focus-visible img{transform:scale(1.035)}
.acg-card:hover .acg-shade,.acg-card:focus-visible .acg-shade{opacity:1;background:rgba(8,24,46,.12)}
.acg-card:hover .acg-expand,.acg-card:focus-visible .acg-expand{opacity:1;transform:translate(-50%,-50%) scale(1)}
.acg-card:focus-visible{outline:3px solid #1d63c9;outline-offset:3px}

.acg-lightbox{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(7,12,20,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease, visibility .22s ease;
}
.acg-lightbox.is-open{opacity:1;visibility:visible}
.acg-lb-stage{position:relative;max-width:min(94vw,1600px);max-height:90vh;display:flex;align-items:center;justify-content:center;}
.acg-lb-img{display:block;max-width:100%;max-height:86vh;width:auto;height:auto;object-fit:contain;border-radius:10px;box-shadow:0 24px 80px rgba(0,0,0,.4)}
.acg-lb-caption{position:absolute;left:50%;bottom:-42px;transform:translateX(-50%);max-width:min(900px,80vw);color:#fff;text-align:center;font:500 14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;opacity:.86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acg-lb-btn{position:fixed;appearance:none;border:0;background:rgba(255,255,255,.1);color:#fff;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;cursor:pointer;transition:background .2s ease,transform .2s ease;backdrop-filter:blur(8px)}
.acg-lb-btn:hover{background:rgba(255,255,255,.18);transform:scale(1.04)}
.acg-lb-close{right:24px;top:24px}.acg-lb-prev{left:24px;top:50%;transform:translateY(-50%)}.acg-lb-next{right:24px;top:50%;transform:translateY(-50%)}
.acg-lb-prev:hover,.acg-lb-next:hover{transform:translateY(-50%) scale(1.04)}
.acg-lb-count{position:fixed;left:24px;top:24px;color:#fff;background:rgba(255,255,255,.09);border-radius:999px;padding:9px 13px;font:600 13px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body.acg-no-scroll{overflow:hidden!important}

@media (max-width:1100px){.acg-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.acg-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:max(12px,calc(var(--acg-gap)*.65))}.acg-expand{width:52px;height:52px;border-radius:15px}}
@media (max-width:520px){.acg-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.acg-card{border-radius:min(var(--acg-radius),12px)}.acg-expand{display:none}.acg-lightbox{padding:14px}.acg-lb-btn{width:42px;height:42px;border-radius:12px}.acg-lb-close{right:12px;top:12px}.acg-lb-prev{left:10px}.acg-lb-next{right:10px}.acg-lb-count{left:12px;top:12px}.acg-lb-caption{bottom:-36px;max-width:88vw;font-size:12px}}
@media (prefers-reduced-motion:reduce){.acg-card img,.acg-expand,.acg-lightbox,.acg-lb-btn{transition:none!important}}
