/* 频道卡片：首页（index.php）和分类页（fenlei.php）共用一套
 *
 * 依赖页面里定义的 CSS 变量：
 *   --卡片底色 --卡片边框 --正文
 * 使用约定：
 *   外层容器（.fenqu-mianban 或 .fenlei-mianban）需要 counter-reset: 卡片编号;
 *   有台标的卡片加 .youbiao，白字标再多加一个 .qianbiao
 */

/* 频道卡片 */
.pindao-ka {
    position: relative;
    background-color: var(--卡片底色);
    border: 1px solid var(--卡片边框);
    border-bottom: 2px solid var(--卡片边框);
    border-radius: 5px;
    padding: 10px 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(90, 80, 60, .08);
    transition: transform .3s, border-color .3s, box-shadow .3s;
}
.pindao-ka:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(90, 80, 60, .14);
    border-bottom-color: var(--正文);
}
.pindao-ka a {
    text-decoration: none;
    color: var(--正文);
    font-size: 18px;
    display: block;
    letter-spacing: 2px;
}
.pindao-ka a::before {
    counter-increment: 卡片编号;
    content: counter(卡片编号) ". ";
}
/* 整张卡片都能点：<a> 只覆盖文字区，右内边距里的台标原本点不到，
   用一个铺满卡片的透明层把点击和手型光标带过去 */
.pindao-ka a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
/* 有台标的行：台标当背景铺在右边，高度撑满整行（台标是 300×180，宽度按比例跟着高度走）
   距右边留 20px；padding-right 也要多留 20px，不然台标会压到文字 */
.pindao-ka.youbiao {
    background-image: var(--标);
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: auto 100%;
    padding-left: 15px;
    padding-right: 114px;
}
/* 白色/浅色字标（CCTV、山西、南宁、苏州4K 等）先垫一块深绿底，不然米色上看不清；
   衬底贴住卡片右边缘，台标在衬底里再缩进 20px。
   5.6em = 台标宽（5:3）+ 20px 缩进；再 +20px 让衬底左边多出一圈余量，
   不然带白色台名的宽图会顶到衬底左边缘、看起来被切掉 */
.pindao-ka.qianbiao {
    background-image: var(--标), linear-gradient(#293730, #293730);
    background-repeat: no-repeat, no-repeat;
    background-position: right 20px center, right center;
    background-size: auto 100%, calc(5.6em + 20px) 100%;
}
/* 衬底比台标宽 20px，右边留白也跟着加，长台名不会压到衬底上 */
.pindao-ka.qianbiao { padding-right: 134px; }

@media screen and (max-width: 768px) {
    .pindao-ka { padding: 8px 12px; margin-bottom: 12px; }
    .pindao-ka.youbiao { padding-left: 12px; padding-right: 102px; }
    .pindao-ka.qianbiao { padding-right: 122px; }
    .pindao-ka a { font-size: 16px; letter-spacing: 1px; }
}

@media screen and (max-width: 576px) {
    .pindao-ka a { font-size: 15px; }
}