.work-gallery { min-width:0; width:100%; }
.work-gallery__main { margin:0; }
.work-gallery__main button { display:block; width:100%; padding:0; border:0; background:transparent; cursor:zoom-in; }
.work-gallery__main img { width:100%; height:min(65vh,700px); object-fit:contain; }
.work-gallery figcaption { white-space:pre-wrap; overflow-wrap:anywhere; margin:12px 0; font-size:.85rem; }
.work-gallery__thumbnails { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0 32px; }
.work-gallery__thumbnails button { width:90px; height:90px; padding:5px; border:1px solid rgba(19,36,92,.25); background:rgba(255,255,255,.18); cursor:pointer; }
.work-gallery__thumbnails button[aria-pressed="true"] { border:2px solid #3e70dc; }
.work-gallery__thumbnails img { width:100%; height:100%; object-fit:contain; }
.work-gallery__dialog { box-sizing:border-box; width:min(1600px,96vw); max-width:96vw; height:94vh; height:94dvh; max-height:94dvh; padding:12px; color:#13245c; background:#f7faff; border:1px solid #a6b1cf; }
.work-gallery__dialog[open] { display:flex; flex-direction:column; gap:10px; }
.work-gallery__dialog::backdrop { background:rgba(10,20,40,.85); }
.work-gallery__controls { display:flex; flex:none; gap:8px; flex-wrap:wrap; align-items:center; font-size:.75rem; }
.work-gallery__dialog button { font:inherit; font-size:.75rem; min-height:32px; padding:5px 10px; border:1px solid rgba(19,36,92,.25); background:transparent; color:inherit; cursor:pointer; }
.work-gallery__dialog button:hover { background:rgba(19,36,92,.06); }
.work-gallery__dialog figure { flex:1; min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto; margin:0; }
.work-gallery__dialog figcaption { max-height:18dvh; overflow:auto; margin:8px 0 0; font-size:.75rem; line-height:1.5; }
.work-gallery__dialog figcaption:empty { display:none; }
.work-gallery__dialog img { width:100%; height:100%; min-height:0; object-fit:contain; }
.work-gallery button:focus-visible { outline:2px solid #3e70dc; outline-offset:4px; }
@media(max-width:600px) { .work-gallery__thumbnails button { width:72px; height:72px; } }

.work-information { scroll-margin-top:100px; }

/* Natural image height avoids letterboxing above landscape works on phones. */
@media (max-width: 800px) {
  .work-gallery__main img { width:100%; height:auto; }
}

@media (pointer:coarse) { .work-gallery__dialog button { min-width:44px; min-height:44px; } }
@media(max-width:600px) { .work-gallery__dialog { padding:8px; } .work-gallery__controls { gap:6px; } }