/* ===========================================
   百站联盟 CMS — 全局响应式样式
   自适应 手机/平板/桌面 三种断点
   =========================================== */

/* ── 基础重置 ── */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; line-height:1.6; }

/* ── 容器 ── */
.container { max-width:1200px; margin:0 auto; padding:0 15px; }
.detail-layout { max-width:1200px; margin:0 auto; padding:20px 15px 40px; }

/* ── 响应式栅格 ── */
.row { display:flex; flex-wrap:wrap; gap:20px; }
.col-main { flex:1; min-width:0; }
.col-sidebar { width:300px; flex-shrink:0; }

/* ── 视频卡片网格 ── */
.vod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:12px; }
.vod-card { background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.06); transition:.2s; }
.vod-card:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.1); }
.vod-card .poster { aspect-ratio:3/4; overflow:hidden; background:#f5f5f5; }
.vod-card .poster img { width:100%; height:100%; object-fit:cover; }
.vod-card .info { padding:8px 10px; }
.vod-card .info h3 { font-size:.85rem; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vod-card .info p { font-size:.72rem; color:#999; margin:2px 0 0; }

/* ── 详情页主体+侧栏 ── */
.detail-main-sidebar { display:flex; gap:20px; flex-wrap:wrap; }
.detail-main { flex:1; min-width:0; }
.detail-sidebar { width:280px; flex-shrink:0; }

/* ── 视频信息卡片 ── */
.vod-info-card { background:#fff; border-radius:12px; padding:24px; box-shadow:0 2px 12px rgba(0,0,0,.06); display:flex; gap:24px; flex-wrap:wrap; margin-bottom:20px; }
.vod-info-card .poster-wrap { width:220px; flex-shrink:0; }
.vod-info-card .poster-wrap img { width:100%; border-radius:8px; }
.vod-info-card .info-wrap { flex:1; min-width:250px; }
.vod-info-card h1 { font-size:1.4rem; margin-bottom:10px; }
.vod-info-card .meta { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.vod-info-card .desc { color:#555; line-height:1.8; font-size:.9rem; margin-bottom:14px; }

/* ── 剧集列表 ── */
.episode-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:6px; }
.episode-item { display:block; padding:5px 6px; text-align:center; background:#f0f2f5; color:#333; border-radius:4px; font-size:.78rem; text-decoration:none; transition:.15s; }
.episode-item:hover { background:#1a73e8; color:#fff; }
.episode-item.active { background:#1a73e8; color:#fff; font-weight:600; }

/* ── 线路标签 ── */
.source-tabs { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.source-tab { padding:5px 14px; border-radius:4px; border:1px solid #ddd; background:#f8f9fa; color:#333; cursor:pointer; font-size:.82rem; transition:.15s; }
.source-tab:hover { border-color:#1a73e8; }
.source-tab.active { background:#1a73e8; color:#fff; border-color:#1a73e8; }

/* ── 通用卡片 ── */
.card { background:#fff; border-radius:12px; padding:20px; box-shadow:0 2px 12px rgba(0,0,0,.06); margin-bottom:20px; }
.card h2 { font-size:1.1rem; margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid #1a73e8; }

/* ── 演员网格 ── */
.actor-grid { display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; }
.actor-item { text-align:center; flex-shrink:0; width:80px; text-decoration:none; }
.actor-item .avatar { width:60px; height:60px; border-radius:50%; overflow:hidden; margin:0 auto 6px; }
.actor-item .avatar img { width:100%; height:100%; object-fit:cover; }
.actor-item .name { font-size:.8rem; color:#333; }

/* ── 排行榜 ── */
.ranking-list { list-style:none; padding:0; margin:0; }
.ranking-item { padding:6px 0; border-bottom:1px solid #f0f0f0; }
.ranking-item a { display:flex; align-items:center; gap:10px; text-decoration:none; }
.ranking-num { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; flex-shrink:0; }
.ranking-num.top3 { background:#ff5722; color:#fff; }
.ranking-num.normal { background:#bbb; color:#fff; }
.ranking-item .thumb { width:40px; height:56px; border-radius:4px; overflow:hidden; flex-shrink:0; }
.ranking-item .thumb img { width:100%; height:100%; object-fit:cover; }
.ranking-item .r-info { flex:1; min-width:0; }
.ranking-item .r-info h3 { font-size:.8rem; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#333; }
.ranking-item .r-info p { font-size:.7rem; color:#999; margin:2px 0 0; }

/* ── 演员详情 ── */
.actor-info-card { background:#fff; border-radius:12px; padding:24px; box-shadow:0 2px 12px rgba(0,0,0,.06); display:flex; gap:30px; flex-wrap:wrap; margin-bottom:20px; }
.actor-info-card .avatar-wrap { width:200px; flex-shrink:0; }
.actor-info-card .avatar-wrap .img-box { width:180px; height:240px; border-radius:8px; overflow:hidden; margin:0 auto; background:#f0f0f0; }
.actor-info-card .avatar-wrap .img-box img { width:100%; height:100%; object-fit:cover; }
.actor-info-card .info-wrap { flex:1; min-width:280px; }
.actor-info-card .info-wrap h1 { font-size:1.5rem; margin-bottom:16px; }
.actor-meta-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px 20px; }
.actor-meta-grid span { font-size:.88rem; color:#555; }
.actor-meta-grid i { width:18px; color:#999; margin-right:4px; }

/* ── Tab 切换 ── */
.actor-tabs { display:flex; border-bottom:2px solid #f0f0f0; }
.actor-tab { padding:12px 24px; border:none; background:none; cursor:pointer; font-size:.9rem; color:#666; border-bottom:2px solid transparent; transition:.15s; }
.actor-tab:hover { color:#1a73e8; }
.actor-tab.active { color:#1a73e8; font-weight:600; border-bottom-color:#1a73e8; }

/* ── Badge 标签 ── */
.badge { display:inline-block; padding:3px 8px; border-radius:4px; font-size:.8rem; }
.badge-primary { background:#1a73e8; color:#fff; }
.badge-info { background:#17a2b8; color:#fff; }
.badge-secondary { background:#6c757d; color:#fff; }
.badge-warning { background:#ffc107; color:#333; }

/* ── 文章网格 ── */
.article-grid { display:grid; gap:10px; }
.article-item { display:flex; gap:12px; padding:10px; background:#f8f9fa; border-radius:8px; text-decoration:none; transition:.15s; }
.article-item:hover { background:#eef1f5; }
.article-item .thumb { width:80px; height:60px; flex-shrink:0; border-radius:4px; overflow:hidden; }
.article-item .thumb img { width:100%; height:100%; object-fit:cover; }
.article-item .a-info { flex:1; }
.article-item .a-info h3 { font-size:.9rem; margin:0 0 4px; color:#333; }
.article-item .a-info p { font-size:.8rem; color:#999; margin:0; }

/* ── 文章详情 ── */
.article-body { background:#fff; border-radius:12px; padding:30px; box-shadow:0 2px 12px rgba(0,0,0,.06); }
.article-body h1 { font-size:1.6rem; margin-bottom:16px; }
.article-body .meta { color:#999; font-size:.85rem; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #eee; }
.article-body .content { line-height:1.9; font-size:1rem; }
.article-body .content img { max-width:100%; height:auto; border-radius:6px; margin:10px 0; }

/* ── 导航 ── */
.detail-header-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; background:#fff; border-radius:8px; padding:12px 20px; box-shadow:0 1px 4px rgba(0,0,0,.06); flex-wrap:wrap; gap:8px; }
.detail-header-nav a { margin-right:16px; font-size:13px; color:#666; text-decoration:none; }
.detail-header-nav a:hover { color:#1a73e8; }

/* ── 搜索表单 ── */
.search-bar { display:flex; gap:8px; flex-wrap:wrap; width:100%; }
.search-bar input { padding:6px 12px; border:1px solid #ddd; border-radius:4px; flex:1; min-width:150px; font-size:.88rem; }
.search-bar button { padding:6px 16px; background:#1a73e8; color:#fff; border:none; border-radius:4px; cursor:pointer; }

/* ── 分页 ── */
.pagination { display:flex; gap:4px; justify-content:center; flex-wrap:wrap; margin-top:20px; }
.pagination a, .pagination span { padding:6px 12px; border:1px solid #ddd; border-radius:4px; color:#333; text-decoration:none; font-size:.85rem; }
.pagination a:hover { background:#1a73e8; color:#fff; border-color:#1a73e8; }
.pagination .active { background:#1a73e8; color:#fff; border-color:#1a73e8; }

/* ── ============ 移动端 ============ ── */
@media(max-width:768px) {
    .detail-layout { padding:10px 10px 30px; }
    .col-sidebar { display:none; }
    .detail-sidebar { display:none; }
    .vod-info-card { padding:15px; gap:15px; }
    .vod-info-card .poster-wrap { width:140px; }
    .vod-info-card h1 { font-size:1.1rem; }
    .vod-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; }
    .vod-card .info { padding:6px 8px; }
    .vod-card .info h3 { font-size:.8rem; }
    .card { padding:14px; }
    .detail-header-nav { padding:10px 14px; }
    .detail-header-nav a { margin-right:10px; font-size:12px; }
    .episode-grid { grid-template-columns:repeat(auto-fill,minmax(60px,1fr)); gap:4px; }
    .episode-item { padding:4px 4px; font-size:.72rem; }
    .actor-info-card { padding:15px; gap:15px; }
    .actor-info-card .avatar-wrap { width:120px; }
    .actor-info-card .avatar-wrap .img-box { width:110px; height:150px; }
    .actor-info-card .info-wrap h1 { font-size:1.2rem; }
    .actor-meta-grid { grid-template-columns:1fr 1fr; gap:6px; }
    .actor-tab { padding:10px 14px; font-size:.82rem; }
    .article-body { padding:16px; }
    .article-body h1 { font-size:1.2rem; }
}

@media(max-width:480px) {
    .vod-info-card .poster-wrap { width:100% !important; text-align:center; }
    .vod-info-card .poster-wrap img { max-width:200px; }
    .vod-info-card .info-wrap { min-width:100% !important; }
    .vod-grid { grid-template-columns:repeat(2,1fr); }
    .actor-meta-grid { grid-template-columns:1fr; }
    .actor-tabs { overflow-x:auto; white-space:nowrap; }
    .source-tabs { overflow-x:auto; flex-wrap:nowrap; }
}