/* Pictures and videos of a weibo on the classic weibo page (static/js/weibo_media.js): square tiles on black, video
   tiles with a play mark and their length, and the inline viewer (toolbar, stage, thumbnail strip) like weibo.com's. */
.weibo-media { margin-top: 12px; }
.weibo-media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; }
.weibo-media-grid[hidden] { display: none; }

.weibo-media button { font: inherit; letter-spacing: normal; text-transform: none; box-shadow: none; min-height: 0; line-height: normal; }
.weibo-media-tile {
    position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; width: 100%;
    margin: 0; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #000; cursor: zoom-in;
    transition: transform .5s;
}
.weibo-media-tile:hover { transform: perspective(1000px) translate3d(0, -10px, 30px); }
.weibo-media-tile:focus-visible { outline: 2px solid #ff8200; outline-offset: 2px; }
/* A picture fills the width; the face offset (percent of the width) moves it up, a picture without one stays centred. */
.weibo-media-tile.is-top { align-items: flex-start; }
.weibo-media .weibo-media-tile > img.weibo-media-image {
    position: relative; display: block; flex: none; width: 100%; height: auto; max-width: none; margin: 0; border-radius: 0;
}
/* Video tiles fill the square like weibo.com's. The theme forces `height: auto !important` on every img in the page
   column (#page_content_wrapper .inner .sidebar_content img), so these rules carry an id as well. */
#comments .weibo-media .weibo-media-tile > .weibo-media-cover,
.weibo-media .weibo-media-tile > .weibo-media-cover {
    display: block; width: 100%; height: 100% !important; max-width: none; margin: 0; border-radius: 0; object-fit: cover; background: #000;
}
.weibo-media-play {
    position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -16px 0 0 -10px; pointer-events: none;
    border-style: solid; border-width: 16px 0 16px 26px; border-color: transparent transparent transparent rgba(255, 255, 255, .85);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
}
.weibo-media-duration {
    position: absolute; right: 8px; bottom: 6px; color: #fff; font-size: 13px; line-height: 1; pointer-events: none;
    font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
.weibo-media-more {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
    background: rgba(0, 0, 0, .45); color: #fff; font-size: 1.5rem; font-weight: 700; font-style: oblique;
}

/* The inline viewer that replaces the grid when a tile is opened. Its size does not follow the window: a picture is at
   most 600px tall (PICTURE_HEIGHT in weibo_media.js) and as wide as the column allows. */
.weibo-viewer { margin-top: 4px; padding: 10px 14px 14px; border-radius: 10px; background: #f6f6f7; outline: none; }
.weibo-viewer-bar { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 10px; color: #4b5563; font-size: 14px; }
.weibo-viewer-bar button {
    display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 2px 12px; border: 0; border-left: 1px solid #d1d5db;
    background: none; color: inherit; cursor: pointer;
}
.weibo-viewer-bar button:first-child { padding-left: 0; border-left: 0; }
.weibo-viewer-bar button:hover { color: #ff8200; }
.weibo-viewer-bar button[hidden] { display: none; }
.weibo-viewer-bar button:focus-visible, .weibo-viewer-thumb:focus-visible, .weibo-viewer-nav:focus-visible, .weibo-viewer-scroll:focus-visible {
    outline: 2px solid #ff8200; outline-offset: 2px;
}
.weibo-viewer-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 120px; }
.weibo-viewer-slot { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; }
.weibo-media .weibo-viewer-slot > img {
    display: block; width: auto; height: auto; max-width: 100%; max-height: 600px; margin: 0; border-radius: 8px; cursor: zoom-out;
    transition: transform .3s;
}
.weibo-viewer-frame { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #000; }
.weibo-viewer-frame > video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.weibo-viewer-slot > .lumos-player, .weibo-viewer-slot > .weibo-viewer-frame { width: 100%; }
.weibo-viewer-nav {
    position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin: -20px 0 0; padding: 0; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .4); color: #fff; font-size: 24px; line-height: 40px; text-align: center; cursor: pointer;
    opacity: 0; transition: opacity .2s;
}
.weibo-viewer-nav.is-prev { left: 8px; }
.weibo-viewer-nav.is-next { right: 8px; }
.weibo-viewer-stage:hover .weibo-viewer-nav, .weibo-viewer-nav:focus-visible { opacity: 1; }
.weibo-viewer-nav[hidden] { display: none; }
.weibo-viewer-strip { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.weibo-viewer-strip[hidden] { display: none; }
.weibo-viewer-thumbs { position: relative; display: flex; flex: 1; gap: 8px; min-width: 0; padding: 2px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.weibo-viewer-thumbs::-webkit-scrollbar { display: none; }
.weibo-viewer-thumb {
    position: relative; flex: none; width: 72px; height: 72px; margin: 0; padding: 0; overflow: hidden; border: 2px solid transparent;
    border-radius: 6px; background: #000; opacity: .55; cursor: pointer; transition: opacity .2s;
}
.weibo-viewer-thumb:hover { opacity: .85; }
.weibo-viewer-thumb.is-active { border-color: #ff8200; opacity: 1; }
#comments .weibo-media .weibo-viewer-thumb > img, .weibo-media .weibo-viewer-thumb > img, .weibo-media .weibo-viewer-thumb > video {
    display: block; width: 100%; height: 100% !important; max-width: none; margin: 0; border-radius: 0; object-fit: cover;
}
.weibo-viewer-thumb .weibo-media-play { margin: -9px 0 0 -6px; border-width: 9px 0 9px 14px; }
.weibo-viewer-thumb .weibo-media-duration { right: 4px; bottom: 4px; font-size: 11px; }
.weibo-viewer-scroll {
    flex: none; width: 26px; height: 72px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: #e5e7eb; color: #374151;
    font-size: 18px; cursor: pointer;
}
.weibo-viewer-scroll[hidden] { display: none; }
.weibo-viewer-scroll.is-idle { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
    .weibo-media-tile, .weibo-viewer-slot > img, .weibo-viewer-thumb { transition: none; }
    .weibo-media-tile:hover { transform: none; }
}