/**
 * assets/article-body.css
 * Reviews, previews and news written in the new submission form
 * (body_format 1), on the older review and news pages: pictures, image
 * rows, carousels, videos and the full-screen viewer (from Gameroni's
 * article_body_assets.php; blog.css has the same rules for blog posts).
 */
.hg-article-body { line-height: 1.6; }
.hg-article-body p { margin: 0 0 1em; }
.hg-article-body h2, .hg-article-body h3 { border: 0; background: none; color: inherit; width: auto; max-width: none; padding: 0; margin: 1.4em 0 0.5em; }
.hg-article-body h2 { font-size: 1.4em; }
.hg-article-body h3 { font-size: 1.2em; }
.hg-article-body blockquote { margin: 1.2em 0; padding: 0.3em 1em; border-left: 3px solid #C9CFD8; color: #5B6470; }
.hg-article-body table { border-collapse: collapse; margin: 1.2em 0; width: 100%; }
.hg-article-body td, .hg-article-body th { border: 1px solid #E2E5EA; padding: 0.4em 0.6em; }
.hg-article-body .article-image { margin: 1.4em 0; text-align: center; }
.hg-article-body .article-image-frame { position: relative; display: inline-block; vertical-align: top; max-width: 100%; }
.hg-article-body .article-image img { max-width: 100%; height: auto; display: block; margin: 0 auto; cursor: zoom-in; border: 0; }
.hg-article-body .article-image figcaption { font-size: 0.9em; color: #5B6470; margin-top: 6px; text-align: center; }
.hg-article-body .article-image-row { display: flex; gap: 12px; margin: 1.4em 0; }
.hg-article-body .article-image-row .article-image { flex: 1; margin: 0; min-width: 0; }
.hg-article-body .article-image-row-frame { width: 100%; aspect-ratio: 16 / 9; background: #333; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.hg-article-body .article-image-row-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hg-article-body .article-image-carousel { margin: 1.4em 0; }
.hg-article-body .article-carousel-main { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; }
.hg-article-body .article-carousel-main-figure { margin: 0; flex: 1; max-width: 600px; }
.hg-article-body .article-carousel-main-figure-frame { width: 100%; aspect-ratio: 16 / 9; background: #333; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.hg-article-body .article-carousel-main-figure-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hg-article-body .article-carousel-prev, .hg-article-body .article-carousel-next { background: rgba(0,0,0,0.5); color: #fff; border: none; font-size: 24px; padding: 10px 16px; cursor: pointer; flex-shrink: 0; }
.hg-article-body .article-carousel-thumbs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.hg-article-body .article-carousel-thumb { width: 70px; height: 50px; object-fit: cover; cursor: pointer; border: 2px solid transparent; opacity: 0.6; }
.hg-article-body .article-carousel-thumb.is-active { border-color: #2390FF; opacity: 1; }
.hg-article-body .article-video-embed { position: relative; width: 100%; max-width: 600px; aspect-ratio: 16 / 9; margin: 1.4em auto; }
.hg-article-body .article-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.image-credit { position: absolute; top: 0; right: 0; max-width: 70%; padding: 3px 8px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 11px; line-height: 1.4; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom-left-radius: 4px; pointer-events: none; }
.image-credit[hidden] { display: none; }
.lightbox-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); display: none; align-items: center; justify-content: center; flex-direction: column; z-index: 1000; cursor: zoom-out; padding: 20px; box-sizing: border-box; }
.lightbox-frame { position: relative; line-height: 0; }
.lightbox-overlay img { max-width: 90vw; max-height: 85vh; object-fit: contain; }
.lightbox-caption { color: #eee; text-align: center; margin-top: 14px; font-size: 14px; max-width: 90vw; }
@media (max-width: 600px) { .hg-article-body .article-image-row { flex-direction: column; } }