/**
 * bw-ads-manager 前端广告尺寸约束体系 + 交互层
 *
 *   每个挂载位置一套「最大宽 × 最大高」硬上限 + 分档响应式（对齐大厂广告联盟通用尺寸），
 *   杜绝广告在 4K/超宽屏被无限拉伸、在窄屏被压扁，且不影响站内其他内容的版式。
 *
 * ============================================================================
 * 一、尺寸令牌（对齐主流广告联盟 IAB 标准位）
 * ----------------------------------------------------------------------------
 *  位置                        PC  标准位        PC 上限(最大宽×最大高)   ≤1024 中屏      ≤640 移动端
 *  --------------------------  --------------   ---------------------   ------------   --------------
 *  全站通栏 banner              970×250         970 × 250                 728×90        320×100
 *  内容首尾条幅 single          970×250         970 × 200                 728×90        320×100
 *  侧栏位 sidebar               300×250         300 × 250（等比 6:5）      300×250       满宽 6:5
 *  列表卡片位 card              300×250 /3:4    300 × 400（3:4）         240×320       满宽 3:4
 *  联盟代码位 code              由代码自决      100% × 420（可滚动）      100%×380      100%×400
 *
 *  设计原则：
 *   1. 宽度用 min(100%, 上限) —— 宽屏不拉伸，窄屏不溢出；
 *   2. 高度用 clamp(下限, vw 比例, 上限) —— 窄屏不塌陷，宽屏不超上限；
 *   3. 图片统一 object-fit:cover + object-position:center —— 任何尺寸都不变形；
 *   4. 图文发布广告（图片 + 标题 + 描述）整体受同一上限约束，文字区限高不撑破；
 *   5. 联盟广告代码高度不可控 → 不裁切（裁切会被联盟判为无效展示），
 *      改为限高 + 纵向滚动兜底，并保留原始代码结构。
 * ============================================================================
 */

/* ==========================================================================
 * 1. 通用容器：宽度自适应父级，永不溢出
 * ======================================================================== */

.bwads-slot-wrap {
    position: relative;
    display: block;
    width: min(100%, var(--bwads-max-w, 100%));
    max-width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    border-radius: 0.5rem;
    /* 独立格式化上下文，避免广告内部样式污染站内 */
    isolation: isolate;
    contain: layout paint;
}

.bwads-ad-cover {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* 尺寸类既可能落在 .bwads-slot-wrap 上，也可能落在 .bwads-ad-cover 上
   （代码模式没有封面、招商位封面内是虚线占位，两种嵌套都要撑满父级）。
   故：尺寸类元素自身是 .bwads-slot-wrap 时，其直接子级统一撑满。 */
.bwads-slot-wrap > astro-ads {
    display: block;
}

.bwads-slot-wrap > .bwads-ad-cover,
.bwads-slot-wrap > astro-ads,
.bwads-slot-wrap > astro-ads > .bwads-ad-cover {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-width: 0;
}

.bwads-ad-cover > img,
.bwads-ad-cover img.bwads-ad-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 无跳转链接的公益性广告：整图可点，打开排期弹层 */
.bwads-ad-clickable {
    cursor: pointer;
}

/* ==========================================================================
 * 2. 位置类：全站通栏（banner_top / banner_bottom）
 *    PC 970×250 上限；中屏降为 728×90；移动 320×100
 * ======================================================================== */

.bwads-size-banner {
    --bwads-max-w: 970px;
    width: min(100%, var(--bwads-max-w));
    height: clamp(72px, 9vw, 250px);
}

@media (min-width: 1025px) {
    .bwads-size-banner {
        max-height: 250px;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    /* 平板/小屏笔记本：728×90 标准位 */
    .bwads-size-banner {
        height: clamp(64px, 8vw, 90px);
    }
}

@media (max-width: 640px) {
    /* 移动端：320×100 上下通栏标准位 */
    .bwads-size-banner {
        height: clamp(56px, 15vw, 100px);
    }
}

/* ==========================================================================
 * 3. 位置类：详情页内容首尾条幅（work/blog single top/bottom）
 *    高度比全站通栏更收敛，避免把正文挤走
 * ======================================================================== */

.bwads-size-single {
    --bwads-max-w: 970px;
    width: min(100%, var(--bwads-max-w));
    height: clamp(80px, 10vw, 200px);
}

@media (min-width: 1025px) {
    .bwads-size-single {
        max-height: 200px;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .bwads-size-single {
        height: clamp(64px, 8vw, 90px);
    }
}

@media (max-width: 640px) {
    .bwads-size-single {
        height: clamp(56px, 15vw, 100px);
    }
}

/* ==========================================================================
 * 4. 位置类：侧栏位（sidebar_right_ad）
 *    300×250（6:5）标准位，宽高都锁死上限
 * ======================================================================== */

.bwads-size-sidebar {
    --bwads-max-w: 300px;
    width: min(100%, var(--bwads-max-w));
    aspect-ratio: 6 / 5;
    max-height: 250px;
}

@media (max-width: 768px) {
    /* 侧栏在窄屏塌为满宽，但仍受 6:5 与 250px 高度上限约束 */
    .bwads-size-sidebar {
        width: min(100%, 300px);
        max-height: 250px;
    }
}

/* ==========================================================================
 * 5. 位置类：列表卡片位（*_list_grid）
 *    随列表列宽自适应，但整体不超过 300×400（3:4）
 * ======================================================================== */

.bwads-size-card {
    --bwads-max-w: 300px;
    width: min(100%, var(--bwads-max-w));
    aspect-ratio: 3 / 4;
    max-height: 400px;
}

@media (max-width: 640px) {
    .bwads-size-card {
        width: 100%;
        aspect-ratio: 4 / 5;
        max-height: none;
    }
}

/* 列表网格里的广告卡片：跟随 masonry 卡片宽度 */
.bw-ad-slot--card .bwads-slot-wrap {
    --bwads-max-w: 100%;
    border-radius: 0.75rem;
}

/* ==========================================================================
 * 6. 联盟广告代码位（管理员后台自行粘贴的第三方广告代码）
 *    兼容要点：
 *      · 不套固定比例、不裁切 —— 联盟代码自带 iframe/高度，裁切会被判无效展示；
 *      · 只约束「不超过父容器宽」+「限高兜底」，超出部分纵向滚动；
 *      · 保留管理员原始代码结构与脚本（由 BWADS_Frontend 原样 echo）。
 * ======================================================================== */

.bwads-code-slot {
    display: block;
    width: min(100%, var(--bwads-code-max-w, 970px));
    max-width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: var(--bwads-code-max-h, 420px);
    /* 联盟代码容器：给代码一个明确的定位上下文，避免 absolute 逃逸 */
    position: relative;
    text-align: center;
    contain: layout;
}

.bwads-code-slot > * {
    max-width: 100%;
}

/* 通栏位里的联盟代码：更矮的上限（对齐 banner 位） */
.bwads-size-banner .bwads-code-slot,
.bwads-size-single .bwads-code-slot {
    --bwads-code-max-w: 100%;
    --bwads-code-max-h: 250px;
}

@media (min-width: 641px) and (max-width: 1024px) {
    .bwads-size-banner .bwads-code-slot,
    .bwads-size-single .bwads-code-slot {
        --bwads-code-max-h: 90px;
    }
}

@media (max-width: 640px) {
    .bwads-size-banner .bwads-code-slot,
    .bwads-size-single .bwads-code-slot {
        --bwads-code-max-h: 100px;
    }
}

/* 列表卡 / 侧栏位里的联盟代码：跟随位置比例 */
.bwads-size-card .bwads-code-slot,
.bwads-size-sidebar .bwads-code-slot {
    --bwads-code-max-w: 100%;
    --bwads-code-max-h: 100%;
}

/* ==========================================================================
 * 7. 图文发布广告（平台自营：图片 + 主标题 + 副描述）
 *    兼容要点：文案层必须受与图片位同一上限约束，标题/描述限行数，
 *    绝不能因为文案过长把广告位撑破版式。
 * ======================================================================== */

.bwads-textmeta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    width: 100%;
    max-width: var(--bwads-meta-max-w, 100%);
    margin: 0 auto;
    padding: 0.375rem 0.0625rem 0;
    min-width: 0;
}

.bwads-textmeta-title {
    width: 100%;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    font-weight: 500;
    color: #374151;
    /* 标题最多 1 行 */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}

.bwads-textmeta-desc {
    width: 100%;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #a3a3a3;
    /* 描述最多 2 行 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}

.dark .bwads-textmeta-title,
:root.dark .bwads-textmeta-title,
.dark .bwads-textmeta-title:where(.dark *) {
    color: #d4d4d8;
}

.dark .bwads-textmeta-desc,
:root.dark .bwads-textmeta-desc,
.dark .bwads-textmeta-desc:where(.dark *) {
    color: #52525b;
}

/* 侧栏/列表卡里的图文：标题描述更紧凑 */
.bwads-size-sidebar .bwads-textmeta,
.bwads-size-card .bwads-textmeta {
    --bwads-meta-max-w: 100%;
}

.bwads-size-sidebar .bwads-textmeta-title,
.bwads-size-card .bwads-textmeta-title {
    font-size: 0.8125rem;
}

.bwads-size-sidebar .bwads-textmeta-desc,
.bwads-size-card .bwads-textmeta-desc {
    font-size: 0.6875rem;
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

/* ==========================================================================
 * 8. 动态注入容器兜底（history: 旧版无 CSS 定义导致压扁）
 * ======================================================================== */

.bw-dynamic-ad-slot {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.bw-ad-slot--card .work-item-card {
    width: 100%;
    min-width: 0;
}

/* ==========================================================================
 * 9. 交互层：广告角标 + hover 订购按钮
 *    history: 旧实现用 Tailwind 的 group-hover:opacity-100，
 *      但插件模板不在主题 content 扫描范围 → 样式从未生成 → hover 无按钮。
 *      改用插件自有类名 + 原生 :hover，任何页面/任何主题都必定生效。
 * ======================================================================== */

/* 右上角「广告」角标 */
.bwads-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    max-width: 5rem;
    height: 1.125rem;
    padding: 0 0.375rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    line-height: 1;
    font-weight: 500;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* 右上角「占位」角标（招商虚线位，橙色区分于真实广告） */
.bwads-badge--placeholder {
    background: rgba(245, 158, 11, 0.92);
}

/* 左下角 hover 订购按钮（真实广告 / 占位图 / 招商位通用） */
.bwads-hover-btn {
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100% - 4rem);
    height: 2rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: 9999px;
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    cursor: pointer;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease-out, transform 0.25s ease-out, background-color 0.2s;
}

.bwads-hover-btn:hover {
    background: rgba(0, 0, 0, 0.55);
}

/* hover 显示：任一层祖先被鼠标经过即显示 */
.bwads-ad-hoverable:hover .bwads-hover-btn,
.bwads-slot-wrap:hover .bwads-hover-btn,
.bw-dynamic-ad-slot:hover .bwads-hover-btn,
.bwads-ad-cover:hover .bwads-hover-btn,
.bwads-ad-hoverable:focus-within .bwads-hover-btn {
    opacity: 1;
    transform: translateY(0);
}

/* 触屏（hover 不可用）：常驻显示，保证可点 */
@media (hover: none) {
    .bwads-hover-btn {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
 * 10. 招商虚线位（无任何广告时的默认展示）
 *     需求：虚线边框 + 浅灰图片图标 + 「广告虚位以待」居中，
 *           角标固定右上、订购按钮固定左下（hover 才出现）。
 * ======================================================================== */

.bwads-placeholder {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 72px;
    border: 1.5px dashed #d4d4d8;
    border-radius: 0.5rem;
    background: #fafafa;
    color: #a1a1aa;
    overflow: hidden;
    transition: border-color 0.25s ease-out, background-color 0.25s ease-out;
}

/* 尺寸类落在 .bwads-ad-cover 上时（占位/自营图片位），虚线占位块撑满封面 */
.bwads-ad-cover > .bwads-placeholder {
    height: 100%;
    min-height: inherit;
}

.dark .bwads-placeholder,
.bwads-placeholder:where(.dark *) {
    border-color: #3f3f46;
    background: #18181b;
    color: #52525b;
}

.bwads-placeholder:hover {
    border-color: #a1a1aa;
    background: #f4f4f5;
}

.dark .bwads-placeholder:hover {
    border-color: #52525b;
    background: #27272a;
}

/* 浅灰图片图标（内联 SVG，随文字颜色变化） */
.bwads-placeholder-icon {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0 auto;
    opacity: 0.75;
}

@media (min-width: 641px) {
    .bwads-placeholder-icon {
        width: 2.25rem;
        height: 2.25rem;
    }
}

/* 图标 + 文案居中纵列 */
.bwads-placeholder-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    text-align: center;
}

.bwads-placeholder-title {
    font-size: 0.75rem;
    line-height: 1.2;
    font-weight: 500;
    white-space: nowrap;
}

.bwads-placeholder-price {
    font-size: 0.6875rem;
    line-height: 1.2;
    opacity: 0.8;
    white-space: nowrap;
}

@media (max-width: 640px) {
    /* 移动端空间紧张：只保留主文案，价格在按钮里已包含 */
    .bwads-placeholder-price {
        display: none;
    }
}

/* ==========================================================================
 * 11. 极端小屏兜底（≤360px）：进一步收敛，避免挤爆版式
 * ======================================================================== */

@media (max-width: 360px) {
    .bwads-size-banner,
    .bwads-size-single {
        height: clamp(48px, 16vw, 72px);
    }

    .bwads-placeholder-title {
        font-size: 0.6875rem;
    }

    .bwads-hover-btn {
        height: 1.75rem;
        font-size: 0.6875rem;
        padding: 0 0.5rem;
    }
}