/* ============================================================
   Component Library
   :root tokens. Theme-ready.
   ============================================================ */

/* --- C15: LIGHTBOX GALLERY --- */
.lightbox-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.lightbox-gallery__thumb{position:relative;aspect-ratio:4/3;border-radius:var(--border-radius);overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color .2s,transform .2s}
.lightbox-gallery__thumb:hover{border-color:var(--color-link);transform:scale(1.03)}
.lightbox-gallery__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lightbox-gallery__thumb::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.25);opacity:0;transition:opacity .2s}
.lightbox-gallery__thumb:hover::after{opacity:1}

/* Lightbox overlay */
.lightbox{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s}
.lightbox--open{opacity:1;visibility:visible}
.lightbox__img{max-width:90vw;max-height:85vh;border-radius:var(--border-radius);box-shadow:0 8px 40px rgba(0,0,0,.5);transform:scale(.94);transition:transform .28s cubic-bezier(.4,0,.2,1);object-fit:contain}
.lightbox--open .lightbox__img{transform:scale(1)}
.lightbox__close,
.lightbox__prev,
.lightbox__next{position:absolute;z-index:2;background:rgba(255,255,255,.12);color:#fff;border:none !important;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;padding:0 !important;margin:0 !important}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover{background:rgba(255,255,255,.25);filter:none !important}
.lightbox__close{top:16px;inset-inline-end:16px;width:40px;height:40px;border-radius:50%;font-size:1.2rem}
.lightbox__prev,.lightbox__next{top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;font-size:1rem}
.lightbox__prev{inset-inline-start:16px}
.lightbox__next{inset-inline-end:16px}
.lightbox__counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.65);font-size:.78rem;font-family:'Consolas',monospace;pointer-events:none}