/* ============================================================ Towns of Europe — lightbox enhancement for .gallery-grid Link once per page (in , after site.css): This does NOT redefine .gallery-grid (site.css already owns that). It only adds the click-to-enlarge overlay and a few polish touches to the existing anchor-wrapped thumbnails. ============================================================ */ /* Polish on the existing grid thumbnails (optional, subtle) */ .gallery-grid a { display: block; overflow: hidden; border-radius: 2px; transition: transform .15s ease, box-shadow .15s ease; } .gallery-grid a:hover, .gallery-grid a:focus-visible { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.25); outline: none; } .gallery-grid a:focus-visible { outline: 3px solid #008C45; outline-offset: 2px; } /* --- Lightbox overlay --- */ .gl-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.9); padding: 24px; } .gl-lightbox.is-open { display: flex; } .gl-figure { margin: 0; display: flex; flex-direction: column; align-items: center; } .gl-figure img { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: 2px; box-shadow: 0 6px 30px rgba(0,0,0,.5); } .gl-caption { color: #fff; font-family: 'Lato', system-ui, sans-serif; font-size: 1rem; margin-top: 12px; text-align: center; min-height: 1.2em; } .gl-btn { position: absolute; background: rgba(0,0,0,.4); border: 0; color: #fff; font-size: 2rem; line-height: 1; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; } .gl-btn:hover, .gl-btn:focus-visible { background: rgba(0,0,0,.75); outline: none; } .gl-btn:focus-visible { box-shadow: 0 0 0 3px #008C45; } .gl-close { top: 18px; right: 18px; font-size: 1.6rem; } .gl-prev { left: 18px; top: 50%; transform: translateY(-50%); } .gl-next { right: 18px; top: 50%; transform: translateY(-50%); } .gl-count { position: absolute; top: 22px; left: 22px; color: #fff; font-family: 'Lato', system-ui, sans-serif; font-size: .95rem; opacity: .85; } @media (max-width: 480px) { .gl-btn { width: 44px; height: 44px; font-size: 1.6rem; } .gl-prev { left: 8px; } .gl-next { right: 8px; } } body.gl-locked { overflow: hidden; }