.article-gallery { clear: both; margin: 16px 0 28px; }
.article-gallery > ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.article-gallery > ul > li { min-width: 0; margin: 0; padding: 0; float: none; }
.article-gallery-link { display: block; border: 1px solid #dce3e9; border-radius: 9px; overflow: hidden; background: #f4f6f8; }
.article-gallery-link img { display: block; width: 100%; height: 160px; object-fit: contain; border: 0; }
.article-gallery-link:hover { border-color: #326c9d; box-shadow: 0 2px 8px #0002; }
.article-gallery-link:focus-visible, .article-attachments a:focus-visible { outline: 3px solid #e7aa20; outline-offset: 3px; }
.article-gallery-caption { display: block; font-size: 13px; line-height: 1.4; padding: 6px 2px; overflow-wrap: anywhere; }
.article-attachments ul { list-style: none; padding: 0; margin: 12px 0 24px; display: grid; gap: 9px; }
.article-attachments li { margin: 0; padding: 0; }
.article-attachments a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #dce3e9; border-radius: 9px; color: #18496d; text-decoration: none; background: #fff; }
.article-attachments a:hover { background: #f1f6fa; border-color: #8baac1; }
.article-file-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 48px; min-height: 48px; background: #e7f0f7; border-radius: 6px; font: bold 10px/1.2 Arial,sans-serif; overflow-wrap: anywhere; }
.article-file-info { flex: 1; min-width: 0; }
.article-file-name { display: block; font-weight: 600; overflow-wrap: anywhere; }
.article-file-meta { display: block; color: #62717e; font-size: 12px; margin-top: 3px; }
.article-file-open { font-size: 22px; }
.article-lightbox[hidden] { display: none !important; }
.article-lightbox { position: fixed; inset: 0; z-index: 100000; background: rgba(8,13,20,.96); display: flex; flex-direction: column; color: #fff; padding: 12px; box-sizing: border-box; }
.article-lightbox * { box-sizing: border-box; }
.article-lightbox-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 16px; min-height: 44px; }
.article-lightbox-original { color: #fff; font: 14px/1.4 Arial,sans-serif; text-decoration: underline; }
.article-lightbox button { width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff80; border-radius: 50%; background: #242d39; color: white; font: 32px/40px Arial,sans-serif; cursor: pointer; }
.article-lightbox button:focus-visible, .article-lightbox a:focus-visible { outline: 3px solid #ffce50; outline-offset: 3px; }
.article-lightbox button:disabled { opacity: .3; cursor: default; }
.article-lightbox-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; padding: 10px 56px; touch-action: pan-y pinch-zoom; }
.article-lightbox-image { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; }
.article-lightbox-previous, .article-lightbox-next { position: absolute; top: calc(50% - 22px); }
.article-lightbox-previous { left: 0; }
.article-lightbox-next { right: 0; }
.article-lightbox-status { position: absolute; top: 12px; left: 0; right: 0; text-align: center; font: 14px/1.5 Arial,sans-serif; pointer-events: none; }
.article-lightbox-caption { padding: 12px 8px; text-align: center; font: 14px/1.5 Arial,sans-serif; max-height: 20vh; overflow: auto; overflow-wrap: anywhere; margin: 0; }
@media (max-width: 480px) {
  .article-gallery > ul { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .article-gallery-link img { height: 130px; }
  .article-lightbox { padding: 8px; }
  .article-lightbox-stage { padding: 8px 0 56px; }
  .article-lightbox-previous, .article-lightbox-next { top: auto; bottom: 0; }
  .article-lightbox-previous { left: calc(50% - 56px); }
  .article-lightbox-next { right: calc(50% - 56px); }
}