/* KNN 广告位管理 —— 前台样式 */

/* ---------- 通用容器 ---------- */
.knn-ad-box {
    position: relative;
    margin: 20px auto;
    max-width: 100%;
    text-align: center;
    overflow: hidden;
    /* 注意：不能在这里设 line-height:0——会继承到广告内容内部，
       纯文字 HTML 广告的行盒被压成 0、多行文字互相重叠。 */
}

/* 只压缩容器自身的行内空隙，不碰广告内容 */
.knn-ad-box__inner {
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
    font-size: 0;
    line-height: 0;
}

/* 广告内容是块级元素时恢复文字排版 */
.knn-ad-box__inner > * {
    font-size: 14px;
    line-height: 1.6;
}

.knn-ad-box__inner > * {
    max-width: 100%;
}

/* 主题是图片懒加载方案，广告里的图片同样处理 */
.knn-ad-box img {
    max-width: 100%;
    height: auto;
}

/* 「广告」合规标识：左上角小角标 */
.knn-ad-box__label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 3px 7px;
    font-size: 11px;
    line-height: 1.2;
    color: #fff;
    background: rgba(0, 0, 0, .42);
    border-bottom-right-radius: 4px;
    letter-spacing: 1px;
    pointer-events: none;
    user-select: none;
}

/* ---------- 顶部 / 底部横幅 ---------- */
.knn-ad-top {
    margin: 14px auto;
    text-align: center;
}

.knn-ad-bottom {
    margin: 22px auto 10px;
}

/* ---------- 信息流 ---------- */
/* .media-list 是主题卡片容器（首页 .knn-home-media 是 grid 布局） */
.knn-ad-feed {
    grid-column: 1 / -1;   /* grid 布局时占满整行 */
    width: 100%;
    margin: 14px 0;
}

.knn-home-layout-list .knn-ad-feed,
.media-list:not(.knn-home-media) .knn-ad-feed {
    grid-column: auto;
}

/* ---------- 懒加载占位 ---------- */
.knn-ad-lazy {
    min-height: 1px; /* 保留容器，进入视口后填充 */
}

.knn-ad-lazy.is-loading {
    opacity: .6;
}

/* ---------- 暗色模式（knn-theme 用 body.dark-mode 切换） ---------- */
body.dark-mode .knn-ad-box__label {
    background: rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .92);
}

body.dark-mode .knn-ad-feed {
    /* 卡片列表在暗色下的间距微调 */
    margin: 14px 0;
}

/* ---------- 个人广告（自有图片 + 链接） ---------- */
.knn-ad-own {
    display: block;
    max-width: 100%;
    line-height: 0;
}

.knn-ad-own__link {
    display: block;
    line-height: 0;
    border-radius: 10px;
    overflow: hidden;
    transition: opacity .2s ease, transform .2s ease;
}

.knn-ad-own__link:hover {
    opacity: .88;
    transform: translateY(-1px);
}

.knn-ad-own__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    background: #f3f4f6;
}

/* 信息流里的个人广告：贴住卡片圆角 */
.knn-ad-box--own.knn-ad-box--feed {
    margin: 16px auto;
}

.knn-ad-box--own .knn-ad-box__inner {
    max-width: 100%;
}

/* 顶/底部横幅：图太矮时给个最小高度，避免空荡 */
.knn-ad-box--own.knn-ad-box--banner .knn-ad-own {
    min-height: 60px;
}

/* 深色模式：图片未加载时的占位色 */
body.dark-mode .knn-ad-own__img {
    background: #262a31;
}

@media (max-width: 640px) {
    .knn-ad-box--own {
        margin: 14px auto;
    }
    .knn-ad-own__link:hover {
        transform: none;
    }
}