/* ==========================================================================
   选址参谋 · 首页轮播位
   加载方式：SiteHome::index() 的 $data['extraCss'] = array('css/banner.css')
   在 app.css 之后加载，只覆盖 .bcar / .bslide 这几个轮播专属选择器，
   不碰全局样式（app.css 有其它人在并行维护）。

   字号体系里的角色：首页轮播的标题与说明（只在小屏覆写）。轮播标题继承
   app.css 的 --fs-2xl(34px)，这里只在 ≤920px 把它压回 --fs-base：
   轮播高度是固定的，标题不降档就会把说明文字挤出可视区。
   ========================================================================== */

/* 全站统一 16:6：1920×720。app.css 里原来的 8:3 + max-height:400px 在
   1220 宽容器上会被压成 2.93:1（顶部/底部各被裁掉一截），这里按版式契约改正。
   max-height 一并取消——它会让「宽不变、高被截」，比例就不再是 16:6 了。 */
.bcar {
    aspect-ratio: 16 / 6;
    max-height: none;
    background: #0d141e;
    /* 图片没解码完时先铺底色，避免首屏出现一块白/透明 */
    isolation: isolate;
}

/* 老内核（微信内置浏览器、Safari < 15、部分安卓 WebView）不认 aspect-ratio，
   而 .bcar 的子元素全是 absolute，父级高度会直接塌成 0 —— 图在 DOM 里、
   src 也 200，但页面上一片空白，这正是「上传后前台不显示」最典型的形态。
   兜底：padding-top 的百分比按宽度算，37.5% 就等于 6/16。 */
@supports not (aspect-ratio: 16 / 6) {
    .bcar {
        height: 0;
        padding-top: 37.5%;
    }
}

.bslide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 图片解码期间的占位色，与 .bcar 同色，CLS 只发生在文字层 */
    background: #0d141e;
}

/* 文案区在小屏上会压住太多画面：16:6 在 390px 宽只有 219px 高 */
@media (max-width: 820px) {
    .bslide .bcap { padding: 22px 14px 12px; }
    .bslide .bcap b { font-size: var(--fs-base, 15px); }
    .bslide .bcap span { font-size: var(--fs-xs, 13px); }
}