/* ── Content lightbox ────────────────────────────────────────── The expanded view content-lightbox.js opens for a clicked/activated figure image (Issue #76). A native supplies the modal/ backdrop/focus-trap/Escape-to-close behaviour for free; this only styles its contents - see components/media-picker.css for the same pattern already used by the Content Editor's Insert Media dialog. */ .content-figure__trigger { cursor: zoom-in; } /* Body scroll lock while the lightbox is open - native does not guarantee this on its own, since the page behind it can still be taller than the viewport. */ body.content-lightbox-open { overflow: hidden; } /* The dialog box itself, not just its ::backdrop, must be the full viewport - a native 's UA default is to size to its content and center via margin, which is what was capping the expanded media to a fixed ~1100px box regardless of screen size (Issue #76 follow-up). Overriding position/inset/margin/size here makes the dialog itself the flex container the media is centered within, independent of any article/content-column width - .content-lightbox is appended straight to (content-lightbox.js), never nested inside .markdown-content/.reading, so no such width is inherited either. */ .content-lightbox { position: fixed; inset: 0; margin: 0; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; padding: var(--space-6); display: flex; align-items: center; justify-content: center; background: transparent; border: none; } .content-lightbox::backdrop { background: rgb(0 0 0 / 0.8); } .content-lightbox__body { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); max-width: 100%; max-height: 100%; } .content-lightbox__body img, .content-lightbox__body video { display: block; width: auto; height: auto; max-width: 100%; /* Leaves room for the caption/close button rather than claiming the full dialog height - the figure fence's own size presets (which cap width, e.g. .content-figure--small) never apply here, since content-lightbox.js builds a fresh, unclassed element for the expanded view. */ max-height: calc(100vh - var(--space-6) * 2 - 3rem); object-fit: contain; border-radius: var(--radius-md); } .content-lightbox__caption { margin: 0; color: var(--color-background); font-size: var(--type-small-size, 0.875rem); text-align: center; } .content-lightbox__close { position: fixed; top: var(--space-5); right: var(--space-5); width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; line-height: 1; color: var(--color-background); background: rgb(0 0 0 / 0.4); border: none; border-radius: var(--radius-lg); cursor: pointer; } .content-lightbox__close:hover, .content-lightbox__close:focus-visible { background: rgb(0 0 0 / 0.6); } /* No open/close animation is introduced (native shows/hides instantly on its own), so there is nothing here for prefers-reduced-motion to need to suppress. */