/**
 * BossX 通用 pic-list 网格布局
 *
 * PHP 渲染 {列表影片} 输出结构：
 * <ul class="pic-list">
 *   <li class="movie-item">
 *     <a class="pic-img" href="..."><img><span class="score">...</span><span class="tips">...</span></a>
 *     <div class="movie-info-row">
 *       <h3 class="movie-title"><a>...</a></h3>
 *       <div class="movie-meta-row"><span class="meta-item">...</span></div>
 *       <p class="movie-blurb">...</p>
 *       <div class="movie-cast"><span class="cast-item">...</span></div>
 *     </div>
 *   </li>
 * </ul>
 *
 * 此文件提供通用网格布局，模板自带的同名 CSS 规则优先级更高可覆盖。
 * BossX Team - 2026-03-30
 */

/* ===== 网格容器 ===== */
ul.pic-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ===== 列表项 ===== */
ul.pic-list li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ===== 海报链接 ===== */
ul.pic-list .pic-img {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    text-decoration: none;
    background: #1a1a2e;
}

/* ===== 海报图片 ===== */
ul.pic-list .pic-img img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    display: block;
    border-radius: 6px;
    transition: transform 0.3s;
}

ul.pic-list .pic-img:hover img {
    transform: scale(1.03);
}

/* ===== 评分标签 ===== */
ul.pic-list .pic-img .score {
    position: absolute;
    top: 6px;
    left: 6px;
    background: #e2d703;
    color: #111;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    z-index: 2;
}

/* ===== 备注标签（HD/更新集数） ===== */
ul.pic-list .pic-img .tips {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #fff;
    font-size: 11px;
    padding: 12px 8px 4px;
    z-index: 2;
}

/* ===== 影片信息行 ===== */
ul.pic-list .movie-info-row {
    padding: 6px 0 0;
}

/* ===== 影片标题 ===== */
ul.pic-list .movie-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

ul.pic-list .movie-title a {
    text-decoration: none;
    color: inherit;
}

ul.pic-list .movie-title a:hover {
    opacity: 0.8;
}

/* ===== 元信息（年份/地区） ===== */
ul.pic-list .movie-meta-row {
    display: flex;
    gap: 8px;
    font-size: 12px;
    opacity: 0.7;
    margin-top: 2px;
}

ul.pic-list .meta-item {
    white-space: nowrap;
}

/* ===== 简介 ===== */
ul.pic-list .movie-blurb {
    font-size: 12px;
    opacity: 0.6;
    margin: 4px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== 演职人员 ===== */
ul.pic-list .movie-cast {
    font-size: 11px;
    opacity: 0.5;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

ul.pic-list .cast-item {
    margin-right: 8px;
}

/* ===== 响应式布局 ===== */
@media (max-width: 1200px) {
    ul.pic-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 900px) {
    ul.pic-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    ul.pic-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 10px;
    }
}

/* ===== 空状态 ===== */
ul.pic-list:empty {
    display: none;
}