/* =========================================================== Image Gallery + Lightbox — reusable across pages Include this file once per page: =========================================================== */ /* --- Thumbnail grid (optional, style your own grid if you already have one) --- */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .gallery img { width: 100%; height: 160px; object-fit: cover; border-radius: 6px; cursor: pointer; display: block; transition: transform 0.15s ease; } .gallery img:hover { transform: scale(1.2); } /* --- Lightbox overlay --- */ .lightbox-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); display: none; align-items: center; justify-content: center; z-index: 9999; opacity: 0; transition: opacity 0.2s ease; } .lightbox-overlay.active { display: flex; opacity: 1; } /* --- Image + caption container --- */ .lightbox-content { position: relative; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; } .lightbox-content img { max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: 4px; user-select: none; -webkit-user-drag: none; } .lightbox-caption { color: #eee; margin-top: 10px; font-size: 0.95rem; text-align: center; max-width: 80vw; min-height: 1.2em; } .lightbox-counter { color: #aaa; font-size: 0.85rem; margin-top: 4px; } /* --- Close button --- */ .lightbox-close { position: absolute; top: -40px; right: 0; background: none; border: none; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; padding: 4px 10px; } .lightbox-close:hover { color: #ff5c5c; } /* --- Prev / Next buttons --- */ .lightbox-nav { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.1); border: none; color: #fff; font-size: 2rem; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; } .lightbox-nav:hover { background: rgba(255, 255, 255, 0.25); } .lightbox-prev { left: 20px; } .lightbox-next { right: 20px; } /* Hide nav buttons if gallery has only 1 image (set via JS by adding this class) */ .lightbox-nav.hidden { display: none; } /* --- Loading state while image loads (prevents flash) --- */ .lightbox-content.loading img { opacity: 0.3; } /* --- Mobile adjustments --- */ @media (max-width: 600px) { .lightbox-nav { width: 40px; height: 40px; font-size: 1.5rem; } .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } .lightbox-close { top: -36px; font-size: 1.6rem; } } /* --- Body scroll lock (JS adds this class to when lightbox opens) --- */ body.lightbox-open { overflow: hidden; }