@charset "UTF-8";
/*******************************
* 文件名：ad.css
* 所属模板：xiaok（小K风格导航）
* 创建时间：2026-09-29
* 作者：DHPro
* 功能描述：后台「广告管理」图片广告位 + 赞助商版块在 xiaok 下的样式承接
*   说明：广告结构由 module.php 的 echoAds() 输出（.content-item.xk-ad 卡片内放若干 .xk-ad-link），
*        复用 xiaok 现有毛玻璃卡片规格（r16 + blur12 + 白 75%），仅覆盖内边距为图片贴边留白。
*        后台广告图为任意尺寸，采用「固定版位框（1180:70）+ 图片自适应填满」策略：
*        同一位次上所有广告渲染成完全一致的矩形，大图小图都自适应版位。
*        同一广告位的多条广告共用一张卡片，卡片内图与图之间只留 8px 小间隙。
*        赞助商碎片 templates/_sponsor.php 为全站统一的内联浅色样式，此处仅补暗色模式覆盖
*        （利用 body.dark-mode 提高选择器权重，无需改动公共碎片）。
*******************************/

/* ===== 图片广告位 ===== */
/* 一张卡片承载同一广告位的全部广告（外壳由 module.php 的 echoAds() 统一包裹）。
   此前是「每条广告各包一张卡片」，两条广告的图片之间会留 36px 留白
   （12px 下内边距 + 10px 卡片间距 + 12px 上内边距 + 2px 上下边框），视觉上空旷。 */
.content-item.xk-ad {
    padding: 12px !important;
    text-align: center;
}
/* 【固定版位框】给广告位一个固定的长宽高，后台无论上传大图小图都由图片自适应填满，
   保证同一位次上所有广告渲染成完全一致的矩形（此前只统一宽度，高度随各图比例变化，
   同页两条广告高矮不一）。
   版位比例取系统默认横幅 1180:70（后台「广告管理」默认素材 bigimgad.png 的规格），
   宽度取内容区宽度、高度按比例换算：
     PC   内容区 1098px → 版位 1098×65.1
     移动 内容区  418px → 版位  418×24.8
   图片用 object-fit:cover 自适应裁剪填满版位：比例一致的素材（如 1180×70）零裁剪；
   比例不符的素材（如 830×70 → 11.86:1）会按版位比例裁掉上下各约 14px。
   若希望素材完整不裁剪、改为居中留白，把 cover 换成 contain 即可（一行改动）。 */
.xk-ad-link {
    display: block;
    width: 100%;
    aspect-ratio: 1180 / 70;
    overflow: hidden;
    border-radius: 10px;
    background: #f7fafc;
    line-height: 0;
}
/* 同一广告位内多条广告之间只留 8px 小间隙（第一条不带间距，避免卡片顶部多出空白）。
   想改成完全无缝把 8px 改为 0 即可。 */
.xk-ad-link + .xk-ad-link {
    margin-top: 8px;
}
.xk-ad-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

/* ===== 赞助商版块：对齐 xiaok 毛玻璃卡片规格 ===== */
/* 说明：公共碎片 templates/_sponsor.php 为全站 8 套模板共用的内联浅色样式（白底 + #eee 边 + r8），
   此处按 xiaok 既有 .content-item 规格覆写（rgba(255,255,255,.75) + blur(12px) + r16 +
   rgba(255,255,255,.6) 边 + 0 8px 32px 阴影），使组件与模板风格一致。
   选择器统一加 .dh-sponsor 前缀提权（0,2,1 > 碎片内联的 0,1,1），不依赖 !important。 */
.dh-sponsor .dh-sponsor-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a202c;
}
.dh-sponsor .dh-sponsor-list a,
.dh-sponsor .dh-sponsor-list .dh-sponsor-text {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
    color: #4a5568;
}
.dh-sponsor .dh-sponsor-list a:hover {
    border-color: rgba(74, 108, 247, 0.55);
    box-shadow: 0 8px 24px rgba(74, 108, 247, 0.14);
    color: #4a6cf7;
}

/* PC 版式：碎片默认 flex-basis 200px 会折行成「5 + 1」，且末行单项被拉伸到 max-width 280px，
   视觉上是孤儿行；改用 grid 等宽自适应，6 项排满一行、行数不足时也保持等宽不拉伸。 */
@media (min-width: 769px) {
    .dh-sponsor .dh-sponsor-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    .dh-sponsor .dh-sponsor-list li {
        max-width: none;
    }
}

/* ===== 赞助商版块暗色适配 ===== */
body.dark-mode .dh-sponsor-title {
    color: #e2e8f0;
}
body.dark-mode .dh-sponsor-list a,
body.dark-mode .dh-sponsor-list .dh-sponsor-text {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
    color: #a0aec0;
}
body.dark-mode .dh-sponsor-list a:hover {
    border-color: rgba(255, 255, 255, 0.20);
    color: #e2e8f0;
}

/* ===== 移动端 ===== */
@media (max-width: 768px) {
    /* 移动端广告拉到「不裁剪」的上限：收掉卡片左右内边距，版位 418px → 438px（+4.8%）。
       移动端广告宽 = 屏宽 440 − 卡片左右内边距 20px − 边框 2px，高度受横幅 1180:70 比例约束；
       再想变大只能调高版位比例，实测 1180:78 就会把横幅首字「顶」切掉一半，故到此为止。
       图片保留自身 8px 圆角，并靠 overflow:hidden 让卡片圆角参与裁切，
       避免贴边后图片直角戳出卡片圆角。 */
    .content-item.xk-ad {
        padding: 10px 0 !important;
        overflow: hidden;
    }
    .xk-ad-img {
        border-radius: 8px;
    }
}