#photo-dialog{border:0;padding:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;background:#f8fafc;color:#172b35;position:fixed;inset:0;margin:0;z-index:12000;font-family:system-ui}
#photo-dialog::backdrop{background:#102724cc}#photo-dialog *{box-sizing:border-box}
.photo-bar{height:90px;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dae4e2;background:white;gap:16px}
.photo-bar h2{font:600 24px Georgia,serif;margin:0 0 3px}.photo-bar p{font-size:13px;color:#64748b;margin:0}
#photo-dialog button{cursor:pointer}.photo-button{border:1px solid #cbd5e1;border-radius:24px;padding:10px 18px;background:white;color:#172b35;font-weight:600;min-height:44px}
#photo-dialog button:focus-visible{outline:3px solid #0d9488;outline-offset:4px}
#photo-grid{height:calc(100dvh - 90px);overflow:auto;padding:28px 32px 40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-content:start;grid-auto-rows:max-content}
.photo-tile{padding:0;border:0;text-align:left;background:white;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px #1027240d}
.photo-tile img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:filter .15s}.photo-tile:hover img{filter:brightness(.93)}.photo-tile span{display:block;padding:10px 14px;font-size:13px;color:#475569}
#photo-viewer{height:calc(100dvh - 90px);background:#10201f;position:relative;display:flex;align-items:center;justify-content:center;padding:24px 80px 52px}
#photo-full{max-height:100%;max-width:100%;object-fit:contain}.photo-arrow{position:absolute;top:calc(50% - 24px);width:48px;height:48px;border-radius:50%;background:#ffffff25;border:1px solid #ffffff50;color:white;font-size:30px}#photo-prev{left:16px}#photo-next{right:16px}#photo-position{position:absolute;bottom:16px;color:#dce8e6;font-size:14px}#photo-back{margin-right:12px}
#photo-dialog [hidden]{display:none!important}
#photo-dialog .photo-bar>div:last-child{flex-shrink:0} @media(min-width:701px) and (max-width:1024px){#photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:700px){.photo-bar{height:100px;padding:12px 16px}.photo-bar h2{font-size:20px}.photo-bar p{max-width:190px}.photo-button{padding:9px 12px}#photo-grid{height:calc(100dvh - 100px);padding:16px;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.photo-tile span{padding:8px;font-size:12px}#photo-viewer{height:calc(100dvh - 100px);padding:20px 12px 76px}.photo-arrow{top:auto;bottom:16px}#photo-position{bottom:30px}#photo-back{margin:0 8px 0 0} .photo-bar:has(#photo-back:not([hidden])){height:124px;flex-wrap:wrap;align-content:center;gap:8px}.photo-bar:has(#photo-back:not([hidden]))>div:first-child{width:100%}.photo-bar:has(#photo-back:not([hidden])) h2{font-size:18px}.photo-bar:has(#photo-back:not([hidden])) p{display:none}#photo-viewer{height:calc(100dvh - 124px)}}