.photo-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),392px)); gap:24px; margin:20px 0; }
.photo-card { margin:0; background:#fff; border:1px solid #d5e2e7; border-radius:12px; overflow:hidden; }
.photo-open { display:block; cursor:zoom-in; }
.photo-open:focus-visible { outline:3px solid #19748b; outline-offset:-3px; }
.photo-card img { display:block; width:100%; height:auto; }
.photo-card figcaption { padding:12px 16px; color:#17364a; font-weight:600; overflow-wrap:anywhere; }
.photo-hint { color:#526779; font-size:.95rem; margin-top:16px; }
.photo-viewer { position:fixed; inset:0; margin:0; padding:0; width:100vw; max-width:none; height:100vh; height:100dvh; max-height:none; border:0; background:#101e2a; color:#fff; }
.photo-viewer:not([open]) { display:none; }
.photo-viewer[open] { display:flex; flex-direction:column; }
.photo-viewer::backdrop { background:#101e2a; }
.photo-viewer-bar { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; padding:12px; flex-shrink:0; background:#172e3d; }
.photo-viewer button { border:1px solid #7e9eae; background:#203e50; color:white; border-radius:8px; min-width:44px; min-height:44px; padding:8px 14px; font:inherit; cursor:pointer; }
.photo-viewer button:focus-visible { outline:3px solid #ffd07c; outline-offset:2px; }
.photo-viewer button:disabled { opacity:.45; cursor:default; }
.photo-viewer output { min-width:65px; text-align:center; }
.photo-viewer-stage { flex:1; min-height:0; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; user-select:none; cursor:grab; }
.photo-viewer-stage:active { cursor:grabbing; }
.photo-viewer-stage img { max-width:100%; max-height:100%; width:auto; height:auto; flex-shrink:0; object-fit:contain; transform-origin:center; pointer-events:none; user-select:none; }
.photo-viewer-caption { padding:12px 20px; text-align:center; background:#172e3d; overflow-wrap:anywhere; flex-shrink:0; max-height:25%; overflow:auto; }
.photo-viewer-caption p { font-size:.85rem; color:#c9dce7; margin:4px 0 0; }
@media print { .photo-viewer,.photo-hint { display:none!important; } .photo-gallery { display:block; } .photo-card { display:inline-block; width:45%; vertical-align:top; margin:0 2% 12px 0; break-inside:avoid; } }