/* ========================================================================== Life at Intellinez — event grid card, detail-page gallery, and lightbox. New components (no equivalent existed in the original static site); built from the same design tokens/classes as everything else (.card, .content-card, .btn, .glass, --radius-*, --primary) rather than inventing a new visual language. ========================================================================== */ /* Archive card: image + name only, no excerpt/meta row. */ .event-card .content-card-body { padding: 1.125rem 1.25rem; } .event-card .content-card-title { font-size: 1rem; } .event-grid-load-more, .content-grid-load-more { display: flex; justify-content: center; margin-top: 2.5rem; } /* ---------- Detail-page gallery ---------- */ .event-gallery-grid { margin-top: 0; } .event-gallery-item { display: flex; flex-direction: column; text-align: left; border: 1px solid hsl(var(--border) / 0.5); background: hsl(var(--card)); border-radius: var(--radius-xl); overflow: hidden; padding: 0; cursor: pointer; font: inherit; color: inherit; transition: border-color 0.2s ease, transform 0.2s ease; } .event-gallery-item:hover { border-color: hsl(var(--primary) / 0.4); transform: translateY(-2px); } .event-gallery-item:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; } .event-gallery-item-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .event-gallery-item-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .event-gallery-item-title { padding: 0.625rem 0.875rem; font-size: 0.8125rem; font-weight: 500; color: hsl(var(--muted-foreground)); line-height: 1.4; } /* ---------- Lightbox ---------- */ .event-lightbox { position: fixed; inset: 0; /* Must clear WordPress's own #wpadminbar (z-index: 99999, unconditional on the frontend when logged in) as well as .site-header — moved to a direct child of at runtime (see event-gallery.js) so no ancestor's stacking context can trap it either. */ z-index: 999999; display: flex; align-items: center; justify-content: center; background: hsl(220 25% 6% / 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 2rem; } .event-lightbox[hidden] { display: none; } body.event-lightbox-open { overflow: hidden; } .event-lightbox-figure { max-width: min(90vw, 1100px); max-height: 85vh; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin: 0; } .event-lightbox-image { max-width: 100%; max-height: 75vh; object-fit: contain; border-radius: var(--radius-lg); box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5); } .event-lightbox-caption { color: hsl(0 0% 100% / 0.85); font-size: 0.9375rem; text-align: center; } .event-lightbox-counter { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: hsl(0 0% 100% / 0.6); font-size: 0.8125rem; } .event-lightbox-close, .event-lightbox-nav { position: absolute; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: hsl(0 0% 100% / 0.1); border: 1px solid hsl(0 0% 100% / 0.2); color: hsl(0 0% 100%); cursor: pointer; transition: background 0.2s ease; } .event-lightbox-close:hover, .event-lightbox-nav:hover { background: hsl(0 0% 100% / 0.2); } .event-lightbox-close .icon, .event-lightbox-nav .icon { width: 1.25rem; height: 1.25rem; } .event-lightbox-close { top: 1.5rem; right: 1.5rem; } .event-lightbox-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); } .event-lightbox-next { right: 1.5rem; top: 50%; transform: translateY(-50%); } @media (max-width: 767px) { .event-lightbox { padding: 1rem; } .event-lightbox-close { top: 0.75rem; right: 0.75rem; } .event-lightbox-prev { left: 0.5rem; } .event-lightbox-next { right: 0.5rem; } .event-lightbox-close, .event-lightbox-nav { width: 2.25rem; height: 2.25rem; } }