/* 看图组件 + 视频块 + 全屏查看器(atoms/media.html、partials/flb.html):社区动态与论坛共用同一份(用户 260929「同一个组件,行为一样」)。
   原 feed.css 的 .fpost .grid / .ph / .big 原样搬来,只把作用域换成组件根 .mg。 */
.mg .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.mg .grid.n1{grid-template-columns:1fr}.mg .grid.n1 .ph{aspect-ratio:16/10}
.mg .grid.n2{grid-template-columns:1fr 1fr}
.mg .ph{aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--surface-2);cursor:zoom-in;position:relative}
.mg .ph img{width:100%;height:100%;object-fit:cover;display:block}
/* 点开看图:舞台限高(70vh,最高 560px)、整图 contain 不裁;多图左右箭头 + 计数 + 缩略条 */
/* 就地看大图:清掉 weldworld.css 全局 .big(作品页主图框 1.33 比例 + overflow:hidden)的影响,
   否则舞台被截在 4:3 框里,左右箭头落到可见区下方、缩略条被裁掉 */
.mg .big{margin-top:6px;aspect-ratio:auto;overflow:visible;background:none;border-radius:0}
.mg .big .bar{font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:6px;margin-bottom:6px}
.mg .big .bar button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.mg .big .bar button:hover{color:var(--accent)}
.mg .big .bar i{font-style:normal;color:var(--line-strong)}
.mg .big .bar .cnt{margin-left:auto;color:var(--ink-3)}
.mg .big .stage{position:relative;border-radius:8px;overflow:hidden;background:var(--surface-2);height:min(70vh,560px);display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.mg .big .stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;cursor:zoom-in}
.mg .big .nav,.flb .nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:.85;transition:opacity .15s,background .15s}
.mg .big .nav:hover,.flb .nav:hover{opacity:1;background:rgba(0,0,0,.65)}
.mg .big .nav .ico,.flb .nav .ico{width:20px;height:20px}
.mg .big .nav.prev{left:8px}.mg .big .nav.next{right:8px}
.mg .big .thumbs{display:flex;gap:6px;margin-top:8px;overflow-x:auto;scrollbar-width:none}
.mg .big .thumbs::-webkit-scrollbar{display:none}
.mg .big .thumbs button{flex:none;width:56px;height:56px;padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;background:var(--surface-2);cursor:pointer;opacity:.6}
.mg .big .thumbs button.on{border-color:var(--accent);opacity:1}
.mg .big .thumbs img{width:100%;height:100%;object-fit:cover;display:block}
/* 动态视频(260928 版式 A):铺满卡片宽;横屏按比例,竖屏高 520 两侧留黑。点播放前只有封面,点了由 fvideo.js 挂播放器 */
.fvid{position:relative;margin-top:10px;border-radius:8px;overflow:hidden;background:#000;aspect-ratio:var(--ar,16/9);max-height:520px;width:100%}
.fvid.vt{aspect-ratio:auto;height:520px}
.fvid img{width:100%;height:100%;object-fit:contain;display:block}
.fvid .fvp{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.fvid .fvp:hover{background:rgba(0,0,0,.7)}.fvid .fvp svg{width:26px;height:26px;margin-left:3px}
.fvid.on .fvp,.fvid.on img{display:none}.fvid .xg{position:absolute;inset:0}
.fvid.wait{display:flex;align-items:center;justify-content:center;color:#ccc;font-size:13px}
@media(max-width:560px){.fvid.vt{height:auto;aspect-ratio:3/4}}
/* 全屏查看器:半透明黑底,左上角关闭 */
.flb{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.flb img{max-width:96vw;max-height:92vh;object-fit:contain}
.flb .cnt{position:absolute;top:22px;right:20px;color:#fff;font-size:14px;opacity:.85}
.flb .nav{width:44px;height:44px}.flb .nav.prev{left:16px}.flb .nav.next{right:16px}
@media(max-width:767px){.flb .nav{display:none}}  /* 手机上左右滑翻页 */
.flb .x{position:absolute;top:16px;left:16px;color:#fff;font-size:22px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.6);display:grid;place-items:center;border:0;cursor:pointer}
@media(min-width:768px){.mg .grid.n1 .ph{aspect-ratio:16/9}}
/* 上传条(atoms/media.html upstrip):原 feed.css 的 .compose .fmedia,发帖框与论坛共用 */
.fmedia{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fmedia .th{position:relative;width:72px;height:72px;border-radius:6px;overflow:hidden;background:var(--surface-3)}
.fmedia .th img{width:100%;height:100%;object-fit:cover}
.fmedia .x{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:14px;line-height:20px;cursor:pointer;padding:0}
.fmedia .vline{position:relative;display:flex;gap:8px;align-items:center;padding:8px 32px 8px 12px;border-radius:6px;background:var(--surface-3);font-size:13px;max-width:100%}
.fmedia .vline b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.fmedia .vline span{color:var(--ink-2);white-space:nowrap}
.fmedia .vline .x{top:50%;transform:translateY(-50%);right:6px}
.fmedia .upbar{position:relative;flex:1 1 200px;height:28px;border-radius:6px;background:var(--surface-3);overflow:hidden}
.fmedia .upbar i{position:absolute;inset:0 auto 0 0;background:var(--accent-soft,#EAF3FB);transition:width .2s}
.fmedia .upbar em{position:relative;font-style:normal;font-size:12px;line-height:28px;padding:0 10px;color:var(--ink-2)}