/* ============================================================
   广告位（主区横幅 / 右栏方块）
   ------------------------------------------------------------
   全站统一规格：
     · 主区横幅 1000 × 250（内页底部、首页中部）
     · 右栏方块 300 × 250（首页右栏）
   两种状态：
     · 已入驻 → 图片按容器裁剪（object-fit: cover），非标素材不会顶开版面
     · 招租   → 虚线框 + 尺寸 + 价格，高度与素材位一致，页面不会忽高忽低
   ============================================================ */

.st-adslot {
    padding: 12px;
}

/* 标题右侧的说明：位置名 + 价格 */
.st-adslot-note {
    margin-left: 2px;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.st-adslot .st-panel-tools { margin-left: auto; }

/* ---------------- 素材位 ---------------- */
.st-adslot-media {
    display: block;
    height: 250px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--muted-bg);
}
.st-adslot-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .35s var(--ease);
}
.st-adslot-media:hover img { transform: scale(1.012); }

/* ---------------- 主区大横幅（1000 × 250，严格 4:1） ----------------
   素材规格是 4:1，容器高度却写死 250（窄屏 170），视口一变宽高比就跟着变，
   cover 只能靠裁左右来填满：
     · 1440 下媒体位 956 × 250，裁掉两侧各 22px（还能忍）
     · 手机 390 下媒体位 350 × 170 = 2.06:1，要裁掉近一半宽度，
       1000 宽的素材只剩中间 515px，标题和二维码直接被切掉（2026-11-12 实测）
   所以横幅位改成「宽度决定高度」：padding-top 25% 就是 4:1，
   图片绝对定位铺满。任何宽度下都按原比例完整显示，
   非标素材仍由 object-fit: cover 兜底，不会顶开版面。 */
.st-adslot--banner .st-adslot-media {
    position: relative;
    height: auto;
    padding-top: 25%;
}
.st-adslot--banner .st-adslot-media img {
    position: absolute;
    top: 0;
    left: 0;
}

/* ---------------- 招租位 ---------------- */
.st-adslot-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 250px;
    padding: 16px;
    text-align: center;
    border-radius: var(--radius-lg);
    border: 1px dashed rgba(16, 24, 40, .18);
    background: var(--muted-bg);
    transition: border-color .2s var(--ease), background .2s var(--ease);
}
.st-adslot-empty i {
    font-size: 42px;
    line-height: 1;
    margin-bottom: 4px;
    color: var(--text-muted);
    opacity: .45;
}
.st-adslot-empty b {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-color);
    line-height: 1.5;
}
.st-adslot-empty span {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
}
.st-adslot-spot { font-size: 12.5px; }
.st-adslot-price { font-size: 11.5px; opacity: .85; }
.st-adslot-empty:hover { border-color: var(--theme-color); background: var(--theme-soft); }
.st-adslot-empty:hover b { color: var(--theme-color); }
.st-adslot-empty:hover i { color: var(--theme-color); opacity: .9; }

html[data-theme="dark"] .st-adslot-empty { border-color: rgba(255, 255, 255, .16); }

/* ---------------- 顶部横条（1000 × 90） ----------------
   90 高放不下竖排三行，招租态改成一行横排；素材位也收到 90。 */
.st-adslot--strip { padding: 10px 12px; }
.st-adslot--strip .st-panel-head { height: 24px; min-height: 24px; margin-bottom: 8px; }
.st-adslot--strip .st-adslot-media,
.st-adslot--strip .st-adslot-empty { height: 90px; }
.st-adslot--strip .st-adslot-empty {
    flex-direction: row;
    gap: 10px;
    padding: 0 16px;
}
.st-adslot--strip .st-adslot-empty i { font-size: 20px; margin: 0; }
.st-adslot--strip .st-adslot-empty b { font-size: 13px; }
.st-adslot--strip .st-adslot-empty span { font-size: 11.5px; }
.st-adslot--strip .st-adslot-price { opacity: .7; }

/* ---------------- 页脚条（1000 × 100） ----------------
   贴在页脚内层最上方，不套面板底色，只留一条可点图片 / 细虚线招租条。 */
.st-adslot--plain {
    padding: 0;
    margin: 0 auto 18px;
    max-width: 1000px;
    background: none;
    box-shadow: none;
    border-radius: 0;
}
.st-adslot--plain .st-adslot-media { height: 100px; }
.st-adslot--plain .st-adslot-empty {
    height: 100px;
    flex-direction: row;
    gap: 10px;
    padding: 0 16px;
    background: var(--muted-bg);
}
.st-adslot--plain .st-adslot-empty i { font-size: 22px; margin: 0; }
.st-adslot--plain .st-adslot-empty b { font-size: 13px; }
.st-adslot--plain .st-adslot-empty span { font-size: 11.5px; }

/* ---------------- 宫格（四格 / 左右两格） ----------------
   1000×250 一整条太大，拆成 4 格（480×120）或 2 格（480×250）更好卖：
   格子小、单价低，客户也更容易出素材。总高仍是 250，版面高度不变。 */
.st-adslot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.st-adslot-grid--4 .st-adslot-cell { height: 120px; }
.st-adslot-grid--2 .st-adslot-cell { height: 250px; }

.st-adslot-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    overflow: hidden;
    padding: 8px 10px;
    text-align: center;
    border-radius: var(--radius-lg);
    border: 1px dashed rgba(16, 24, 40, .18);
    background: var(--muted-bg);
    transition: border-color .2s var(--ease), background .2s var(--ease);
}
.st-adslot-cell.is-live { padding: 0; border: 0; background: none; }
.st-adslot-cell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .35s var(--ease);
}
.st-adslot-cell.is-live:hover img { transform: scale(1.015); }

.st-adslot-cell i { color: var(--text-muted); opacity: .45; line-height: 1; }
.st-adslot-cell b { font-weight: 400; color: var(--text-color); line-height: 1.4; }
.st-adslot-cell em { font-style: normal; color: var(--text-muted); line-height: 1.4; }
.st-adslot-cell .st-adslot-price { font-size: 11px; opacity: .8; }

/* 四格：格子矮，字号统一收一档，图标当点缀 */
.st-adslot--grid4 .st-adslot-cell i { font-size: 20px; margin-bottom: 1px; }
.st-adslot--grid4 .st-adslot-cell b { font-size: 12.5px; }
.st-adslot--grid4 .st-adslot-cell em { font-size: 11px; }

/* 左右两格：高度和大横幅一致，用大横幅那档字号，别让 250 高的格子显得空 */
.st-adslot--duo .st-adslot-cell i { font-size: 36px; margin-bottom: 4px; }
.st-adslot--duo .st-adslot-cell b { font-size: 15px; }
.st-adslot--duo .st-adslot-cell em { font-size: 12.5px; }
.st-adslot--duo .st-adslot-cell .st-adslot-price { font-size: 11.5px; }

.st-adslot-cell:hover { border-color: var(--theme-color); background: var(--theme-soft); }
.st-adslot-cell:hover b { color: var(--theme-color); }
.st-adslot-cell:hover i { color: var(--theme-color); opacity: .9; }
html[data-theme="dark"] .st-adslot-cell { border-color: rgba(255, 255, 255, .16); }

/* ---------------- 右栏方块（300 × 250） ----------------
   右栏只有 310 宽，去掉素材位的圆角内缩，让图尽量铺满卡片 */
.st-adslot--square { padding: 12px; }
.st-adslot--square .st-adslot-media,
.st-adslot--square .st-adslot-empty { height: 250px; }
.st-adslot--square .st-adslot-empty i { font-size: 34px; }
.st-adslot--square .st-adslot-empty b { font-size: 14px; }
.st-adslot--square .st-adslot-empty span { font-size: 11.5px; }
.st-adslot--square .st-adslot-note { font-size: 11.5px; }
.st-adslot--square .st-card-head { margin-bottom: 10px; }

/* ---------------- 窄屏 ----------------
   手机端右栏整体隐藏（见 star-components.css），主区横幅要跟着缩，
   否则一块 250 高的虚线框能占掉半屏。 */
@media (max-width: 768px) {
    .st-adslot { padding: 10px; }
    .st-adslot-media,
    .st-adslot-empty { height: 170px; }
    .st-adslot--strip .st-adslot-media,
    .st-adslot--strip .st-adslot-empty { height: 70px; }
    .st-adslot--strip .st-adslot-empty { gap: 6px; padding: 0 10px; }
    .st-adslot--strip .st-adslot-empty .st-adslot-price { display: none; }
    .st-adslot-empty i { font-size: 32px; }
    .st-adslot-empty b { font-size: 14px; }
    .st-adslot-empty span { font-size: 11.5px; }
    .st-adslot-note { display: none; }

    /* 手机主区只有 335，两列每格 160 宽，太高会显得空 */
    .st-adslot-grid { gap: 8px; }
    .st-adslot-grid--4 .st-adslot-cell { height: 90px; padding: 6px; }
    .st-adslot-grid--2 .st-adslot-cell { height: 150px; padding: 6px; }
    .st-adslot--grid4 .st-adslot-cell i { font-size: 16px; }
    .st-adslot--grid4 .st-adslot-cell b { font-size: 11.5px; }
    .st-adslot--grid4 .st-adslot-cell em { font-size: 10.5px; }
    .st-adslot--grid4 .st-adslot-cell .st-adslot-price { display: none; }
    .st-adslot--duo .st-adslot-cell i { font-size: 24px; }
    .st-adslot--duo .st-adslot-cell b { font-size: 12.5px; }
}