/**
 * 首页幻灯（slider-2）—— 移动端改成通栏单图轮播
 *
 * ── 需求 ──────────────────────────────────────────────────────────
 * 移动端首屏现在是「左边一张大图 + 右边两张小图」，三张挤在一屏。
 * 改成通栏一张、可左右滑动；显示文章标题，不显示作者和时间。
 *
 * ── 父主题的结构（Modules/Templates/Modules/Sliders.php::slider_2）──
 *
 *   .slider-2                     display:flex，inline style="width:..;max-width:100%"
 *     .slider-in-out              inline style="width:{c_left}%;margin-right:{gap}px"
 *       .slider-in-out-row        inline style="height:100%;width:100%"
 *         .slider-in.carousel     data-flickity=...，position:absolute 铺满
 *           .flickity-viewport
 *             .slider-2-carousel  × N（前 N-2 篇）
 *               .slider-info
 *                 a.link-block          整块可点
 *                 img.slider-img        object-fit:cover
 *                 .slider-info-box      标题区（移动端被父主题 display:none）
 *                   .slider-cat           分类小标（本版隐藏）
 *                   h2                    标题
 *                   .slider-user          作者+时间（移动端父主题已 display:none）
 *     .slider-2-bottom            inline style="width:{c_right}%"，右边两张小图
 *
 * ⚠️ 宽高全是**服务端 PHP 打的 inline style**，不是 JS。
 *    inline 样式压过任何选择器，所以下面改尺寸的地方必须用 !important。
 *
 * ⚠️ 最容易踩的坑：**整块的高度是右边那一列撑起来的。**
 *    .slider-in-out 自己没有高度，是 flex 项被拉伸到和 .slider-2-bottom 一样高；
 *    而 .slider-2-bottom 里两张小图用的是 padding-top 百分比的比例盒子。
 *    所以一旦把右列 display:none，左边这块会直接塌成 0 高 ——
 *    必须同时给 .slider-in-out-row 补一个比例盒子。
 *
 * ── 关于 Flickity ────────────────────────────────────────────────
 * 不需要调用 resize()。Flickity 给单元格写的 inline style 是
 * max-width:100% + left:百分比，宽度本身由 CSS 的 width:100% 决定 ——
 * 全是相对值，容器一变宽它们自动跟着走。
 * 线上注入实测：改完 3 个单元格立刻变成 477×268 并各就各位。
 */

@media screen and (max-width: 768px) {

/* =========================================================================
 * 一、通栏单图
 * ====================================================================== */

/* 右边两张小图收起 */
.slider-2 .slider-2-bottom {
    display: none !important;
}

/*
 * 左边这块吃满整行。
 * margin-right 除了 inline 的 6px，父主题 mobile.css:1028 还写了
 * `.slider-2 .slider-in-out{margin-right:6px!important}`，所以这里也得 !important。
 */
.slider-2 .slider-in-out {
    width: 100% !important;
    margin-right: 0 !important;
}

/*
 * 补回高度（见文件头部的坑）。
 *
 * 用 height:0 + padding-top 百分比的老办法，而不是 aspect-ratio ——
 * 百分比内边距是按**包含块的宽度**算的，没有循环依赖，且老浏览器全支持。
 *
 * ── 48% 是怎么定的 ────────────────────────────────────────────────
 * 先试过 56.25%（16:9），在 504px 视口下高 268px —— 太占屏。
 *
 * 改版前那块的高度是 176px（由右列两张小图的比例盒子撑出来的，
 * 与容器宽度无关，所以是个固定值）。通栏之后高度必须跟着宽度走，
 * 取 48% 正好让常见手机宽度落回同一个观感：
 *
 *   390px 视口 → 内容区约 366px → 高 176px   ← 和改版前一样
 *   430px 视口 → 内容区约 406px → 高 195px
 *
 * 图源实测 1280×682（比例 1.88），48% 是 2.08 ——
 * 上下各裁掉约 5%，object-fit:cover 下不明显。
 */
.slider-2 .slider-in-out-row {
    height: 0 !important;
    padding-top: 48%;
}

/* =========================================================================
 * 二、标题
 * ====================================================================== */

/*
 * 父主题 mobile.css:1002 把整个标题区藏了：`.slider-info-box{display:none}`。
 * 权重只有 (0,0,1,0)，这里两段就够压过去。
 */
.slider-2 .slider-info-box {
    display: flex;
    padding: 12px 14px 13px;
    /*
     * 父主题给的遮罩是 rgba(9,15,29,.4) → transparent。
     * 通栏之后图片更大更亮，.4 压不住白字，加深到 .78 并把渐变拉长。
     */
    background: linear-gradient(to top, rgba(9, 15, 29, .78), rgba(9, 15, 29, .32) 55%, transparent);
}

.slider-2 .slider-info-box h2 {
    margin: 0;
    /* 父版是 22px，通栏后一行放不下几个字，收到 16px 并限制两行 */
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
 * 分类小标不显示 —— 只留标题。
 * 它在父主题里是 .slider-info-box 的第一个子元素，跟标题一起被
 * 那条 display:none 藏着；上面把整个 .slider-info-box 放出来之后，
 * 它会一起冒出来，所以要单独再藏一次。
 */
.slider-2 .slider-info-box .slider-cat {
    display: none;
}

/*
 * 作者与时间：父主题 mobile.css:1301 已经 display:none 了，
 * 这里再钉一次 —— 上面把 .slider-info-box 放出来之后，
 * 万一父主题哪天改了那条，作者时间会跟着冒出来。
 */
.slider-2 .slider-user {
    display: none !important;
}

/* =========================================================================
 * 三、翻页圆点
 *
 * 父主题给的是 .module-sliders .flickity-page-dots{top:12px;right:20px}，
 * 位置本来就合适（右上角压在图上），移动端只是被藏了，放出来即可。
 * ====================================================================== */

.module-sliders .flickity-page-dots {
    display: block;
}

}