/* ============================================================
 * 竖版剧海报卡 — 公共组件 (drama-card.css)
 * 全站「剧」展示的统一单元，复用：首页 / 会员 / 已开通会员 / 分类 / 搜索结果。
 *   .drama-grid   （2 列网格）
 *   .drama-card   （单卡：封面 .cover + 信息 .info）
 *
 * 统一规则（单一事实来源）：
 *   1. 网格：2 列等宽，间距 16px×12px，左右 20px 留白。
 *   2. 封面：3:4 竖版海报，等比裁剪 + 圆角（var(--radius-sm)）。
 *   3. 角标：右上角 .tag-hot（热剧 / 红色）或 .tag-pick（精选 / VIP，金色）。
 *   4. 热度：封面右下角 .views（火焰 + 数值），底部 .views-overlay 渐变压底。
 *   5. 剧名：固定两行，超出才显示省略号（-webkit-line-clamp）。
 *   6. 标签：单行排布，容器放不下时由 tags.js 从末尾丢弃（fit）。
 *
 * 不属此组件：排行榜 .rank-item、历史 .history-item（横向列表行，保持各自布局）。
 * ============================================================ */

.drama-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 12px; padding: 0 20px 28px;
}
.drama-card {
    background: transparent;
    display: flex; flex-direction: column;
    min-width: 0;                     /* 让两张卡在 1fr 轨道里真正等宽，避免被标签数量撑宽 */
}
.drama-card .cover {
    position: relative; aspect-ratio: 3/4; overflow: hidden;
    margin-bottom: 6px; border-radius: var(--radius-sm);
}
.drama-card .cover img {
    width: 100%; height: 100%; object-fit: cover;
}
.tag-hot {
    position: absolute; top: 0; right: 0;
    background: linear-gradient(135deg, #FF4B6B, #FF2B4A); color: #fff;
    font-size: 9px; padding: 2px 6px; font-weight: 500;
    border-bottom-left-radius: var(--radius-sm);
}
.tag-pick {                                            /* 精选 / VIP 角标（金色），结构与 .tag-hot 一致 */
    position: absolute; top: 0; right: 0;
    background: linear-gradient(135deg, #FFE082, #FFA726); color: #4A3000;
    font-size: 9px; padding: 2px 6px; font-weight: 600;
    border-bottom-left-radius: var(--radius-sm);
}
.views-overlay {
    position: absolute; bottom: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}
.views {
    position: absolute; bottom: 4px; right: 6px;
    font-size: 10px; color: #fff; font-weight: 500;
    display: flex; align-items: center; gap: 2px;
}
.drama-card .info { padding: 0 2px; display: flex; flex-direction: column; gap: 6px; }
.drama-card .title {
    font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.3;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;  /* 两行预留，超出省略 */
    overflow: hidden; word-break: break-word;                                   /* 无空格的长剧名也能在两行内折行 */
}
.drama-card .tags {
    display: flex; flex-wrap: nowrap; overflow: hidden; gap: 4px;   /* 单行；放不下的由 tags.js 丢弃 */
}