/* Лайтбокс */
body.lb-open { overflow:hidden; }
.lb { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; }
.lb[hidden] { display: none !important; }
.lb__backdrop { position:absolute; inset:0; background: rgba(0,0,0,.8); backdrop-filter: blur(1px); }
.lb__figure { position: relative; margin: 0; max-width: 92vw; max-height: 92vh; display: grid; grid-template-areas:
"prev img close next"
"caption caption caption caption"; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; }
.lb__img { grid-area: img; max-width: 92vw; max-height: 82vh; border-radius: 12px; box-shadow: 0 14px 60px rgba(0,0,0,.55); background:#0b0d10; }
.lb__caption { grid-area: caption; text-align: center; font-size: 14px; color:#cbd5e1; margin-top: 6px; min-height: 1.2em; }


.lb__btn { position: relative; z-index: 1; border: 0; background: rgba(20,24,30,.55); color:#fff; padding: 10px 14px; cursor: pointer; border-radius: 12px; font-size: 26px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.lb__btn:hover { background: rgba(36,42,52,.75); }
.lb__prev { grid-area: prev; }
.lb__next { grid-area: next; }
.lb__close { grid-area: close; font-size: 28px; padding: 10px 14px; }


.lb.is-loading .lb__figure::after { content: "Загрузка…"; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.65); color:#fff; font-size: 12px; letter-spacing:.02em; }
.lb.is-closing { animation: lbFade .15s ease reverse both; }
.lb.is-open { animation: lbFade .15s ease both; }
@keyframes lbFade { from { opacity: 0 } to { opacity: 1 } }