.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.95); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 99999 }
.lightbox:not(.hidden) { opacity: 1; pointer-events: auto }
.lightbox-content { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; max-height: 100vh; overflow: hidden; touch-action: pan-y }
.lightbox-wrapper { width: 100%; max-height: 85vh; overflow: hidden; position: relative }
.lightbox-image { width: 100%; height: auto; object-fit: contain; transition: transform 0.35s ease, opacity 0.35s ease; will-change: transform, opacity; user-select: none }
.lightbox-caption { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); color: #f2f2f2; font-size: 1rem; text-align: center; padding: 8px 12px; background: rgba(0,0,0,0.4); border-radius: 6px; max-width: 90%; pointer-events: none; font-weight: 600 }
.lightbox button { position: absolute; background: rgba(0,0,0,0.5); color: white; border: none; font-size: 2.2rem; cursor: pointer; border-radius: 6px; padding: 0.3em 0.6em; transition: background 0.2s; z-index: 100000 }
.lightbox button:hover { background: rgba(255,255,255,0.2) }
.lightbox .close { position: fixed; font-size: 2rem !important; top: 20px; right: 10px }
.lightbox .prev { top: 50%; left: 30px; transform: translateY(-50%) }
.lightbox .next { top: 50%;right: 30px; transform: translateY(-50%) }

body.dimmed #page-content { opacity: 0.3; pointer-events: none; user-select: none; transition: opacity 0.4s ease; }
body.dimmed #header, body.dimmed .site-footer { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease }

@media screen and (max-width: 39.9375em) {
    .lightbox .prev, .lightbox .next { display: none }
    .lightbox-caption { position: fixed }
}