/* Progressive enhancement: original image links remain usable without scripts. */
.image-viewer-link { display: block; color: var(--deep); }
.image-viewer-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.image-viewer-label { display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-height: 44px; padding: 8px 12px; font-size: 12px; line-height: 1.5; text-decoration: underline; text-underline-offset: 4px; background: var(--surface); }
.image-viewer-label > span { font-size: 19px; text-decoration: none; }
html.image-viewer-open { overflow: hidden; }
.image-viewer-dialog { width: min(1200px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: clamp(16px, 3vw, 28px); border: 1px solid var(--line); background: var(--white); color: var(--deep); overflow: auto; }
.image-viewer-dialog:not([open]) { display: none; }
.image-viewer-dialog::backdrop { background: rgb(0 12 42 / .82); }
.image-viewer-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 14px; }
.image-viewer-header h2 { margin: 0; align-self: center; font-size: clamp(20px, 3vw, 30px); line-height: 1.25; }
.image-viewer-close { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--blue); border-radius: 0; background: var(--white); color: var(--deep); font: inherit; font-size: 13px; cursor: pointer; }
.image-viewer-close > span { font-size: 24px; line-height: 1; }
.image-viewer-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.image-viewer-figure { margin: 0; }
.image-viewer-figure > img { display: block; width: 100%; height: min(65vh, 760px); max-height: calc(100vh - 220px); max-height: calc(100dvh - 220px); min-height: 100px; object-fit: contain; padding: 8px; background: var(--surface); }
.image-viewer-figure > figcaption { margin-top: 14px; font-size: 13px; line-height: 1.6; }
/* No opening, zoom or closing animation, including reduced-motion preferences. */
@media (max-width: 767px) {
  .image-viewer-figure > img { width: auto; max-width: 100%; height: auto; min-height: 0; max-height: calc(100vh - 220px); max-height: calc(100dvh - 220px); margin-inline: auto; }
}
@media (max-width: 400px) { .image-viewer-header { gap: 12px; } .image-viewer-close { gap: 6px; padding-inline: 8px; } }