.post-media { min-width:0; margin:0 0 14px; }
.post-media[hidden] { display:none; }
.post-media-open { display:block; width:100%; padding:0; border:1px solid var(--border-light); border-radius:8px; overflow:hidden; background:var(--bg-subtle); cursor:zoom-in; aspect-ratio:16 / 9; }
.post-media-open img { display:block; width:100%; height:100%; object-fit:contain; }
.post-media figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; margin-top:6px; color:var(--text-light); font-size:10px; line-height:1.6; }
.post-media-open:focus-visible { outline:3px solid var(--palette-blue); outline-offset:3px; }
.post-media-dialog { box-sizing:border-box; width:min(1000px, calc(100vw - 40px)); max-width:calc(100vw - 40px); max-height:calc(100dvh - 40px); margin:auto; padding:18px; border:1px solid var(--border-light); border-radius:12px; background:var(--bg-surface); color:var(--text-main); overflow:auto; box-shadow:0 24px 80px #00304930; }
.post-media-dialog::backdrop { background:#003049b0; }
.post-media-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.post-media-dialog-label { color:var(--text-muted); font-size:12px; line-height:1.7; }
.post-media-dialog-close { flex-shrink:0; min-width:64px; min-height:44px; padding:8px 12px; border:1px solid var(--border-light); border-radius:7px; color:var(--text-main); background:var(--bg-subtle); cursor:pointer; font-size:13px; }
.post-media-dialog-image { display:block; width:100%; max-height:calc(100dvh - 200px); object-fit:contain; background:var(--bg-subtle); border-radius:6px; }
.post-media-dialog-image[hidden] { display:none; }
.post-media-dialog-error { margin:18px 0; color:var(--text-muted); font-size:13px; }
.post-media-dialog-original { display:inline-flex; align-items:center; min-height:44px; margin-top:8px; font-size:13px; }
.post-media-dialog button:focus-visible, .post-media-dialog a:focus-visible { outline:3px solid var(--palette-blue); outline-offset:3px; }
@media (max-width:640px) {
  .post-media-dialog { width:calc(100vw - 24px); max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:12px; }
  .post-media-dialog-image { max-height:calc(100dvh - 180px); }
}
