/* ============================================================================
   主站首页「快捷通道 / 专题专栏」补充样式（2026-10-19 第二版：按原版图还原）

   原版做法：两个板块都是后台传整张图——
     · 快捷通道：6 张 200×200 PNG，每格一个纯色底 + 白色实心图标 + 白字（字在图上）；
     · 专题专栏：4 张 260×420 竖版宣传图，3 张蓝色科技风 + 1 张橙红低多边形，
       竖排「黑字 + 白色粗描边」。
   现在：快捷通道换成 SVG —— 路径是用 potrace 直接从这 6 张母版图描摹出来的
   （temp/scripts/trace-ql-icons.py），viewBox 就是原图 200×200 坐标系，所以图标
   形状、大小、落点与母版逐像素一致，整格缩放也不走样；底色改 CSS 纯色。
   专题专栏的底纹按原图风格程序重画（无文字），标题由 HTML 竖排渲染。
   排布尺寸全按原版 CSS 规则来（1440 下格子 202×206、右列卡片 211×441）。

   配色一律挂在模板给的类名上（ql-c1…ql-c6 / tp-1…tp-4），不用 nth-child：
   Swiper 的 loop 会复制并重排 slide，按位置配色会把颜色配到别的条目上。
   ========================================================================== */

/* ── 快捷通道 ───────────────────────────────────────────────────────────────
   原版规则在 index.css：.enter_item{width:30%;margin-right:3%;margin-top:30px}，
   图片 width:100%（正方形）。这里只补「格子本体」的样子，尺寸不重复定义。       */
.enter_box .enter_item.ql-item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    /* 原版格子里是 <img>（inline），行盒会在图下多留约 4px，右列正是靠这 4px
       才撑到 441 高。这里显式补上，保证右列卡片高度和原版一致。 */
    margin-bottom: 4px;
    overflow: hidden;
    border-radius: 0;
    color: #fff;
    background-color: #2A82E4;
    background-image: none;
    container-type: inline-size;
}

/* 图标铺满整格：SVG 里的坐标就是原图 200×200 的像素，位置由路径本身决定 */
.enter_box .ql-ico {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
}

/* 文字位置：原图白字 bbox 在 y=129~142（200 高），即 64.5%~71% */
.enter_box .ql-txt {
    position: absolute;
    left: 0;
    right: 0;
    top: 63.5%;
    z-index: 1;
    font-size: clamp(9px, 1vw, 15px);      /* 老浏览器兜底：按容器宽度近似换算 */
    font-size: 7cqw;                       /* 原图白字高 14px/200，跟着格子宽度走 */
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0;
    text-align: center;
    color: #fff;
}

/* 纯色底：取自 6 张原图的采样值（原图是纯色，没有渐变） */
.enter_box .ql-item.ql-c1 { background-color: #5DC6D9; } /* 书记校长信箱 */
.enter_box .ql-item.ql-c2 { background-color: #2196F3; } /* 温馨电话 */
.enter_box .ql-item.ql-c3 { background-color: #FE9824; } /* 心理健康 */
.enter_box .ql-item.ql-c4 { background-color: #4C98D4; } /* 学子心声 */
.enter_box .ql-item.ql-c5 { background-color: #3E50B4; } /* 图书期刊 */
.enter_box .ql-item.ql-c6 { background-color: #2A82E4; } /* 访客预约 */

/* ── 专题专栏 ───────────────────────────────────────────────────────────────
   原版是 260×420 的竖图，但 img 被 height:100% 拉到与左侧快捷通道等高（1440 下
   是 211×441），也就是**纵向拉伸约 5%**，不是等比。这里照做：卡片高度跟随列高，
   底图 background-size:100% 100% 同样拉伸。 */
.enter_box .list_side.policy .topic-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;             /* 原版 h=441 = 左列 471 - .top30 的 30px */
    overflow: hidden;
    border-radius: 0;
    color: #fff;
    background-color: #012C99;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    container-type: inline-size;
}

/* 标题样式照原图：**黑字 + 白色粗描边**（不是白字黑边）。
   原图采样：诚聘英才填充 #3E3E3E、招标公告 #262972、合格评估 #2A2C75、信息公开 #000000，
   白边落在字形外侧约 3px / 51px 字 ≈ 0.06em/侧，故 text-stroke 取 0.12em（一半在外）。 */
.enter_box .list_side.policy .topic-title {
    position: relative;
    z-index: 1;
    writing-mode: vertical-rl;
    font-size: clamp(24px, 3.1vw, 63px);  /* 兜底：原图单字约 51px / 260 宽 */
    font-size: 21cqw;                     /* 字形墨迹宽 ≈ 原图 52/260 = 20% */
    line-height: 1.02;
    /* 原版字是烙在 260×420 图里的，再被拉伸到 441 高（纵向 ×1.05），
       单字实际是 42 宽 × 52.5 高。HTML 字形是方的，靠 scaleY 补上纵向比例。 */
    transform: scaleY(1.2);
    /* 用户要求：微软雅黑 + 字距放大。vertical-rl 下 letter-spacing 加在字与字之间
       （纵向），四个字的整体块会变高，但仍远小于 441 的卡片高度。 */
    font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", sans-serif;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: #000;
    /* paint-order 必须先描边、再填充：默认顺序是「先填充后描边」，0.1em 的白描边
       会沿着字形轮廓向内吃掉约一半笔画（中文粗体单字笔画本身才 4~5px），结果
       视觉上变成白字 + 细黑线。加上 paint-order 后白边只留在字形外侧。 */
    paint-order: stroke fill;
    -webkit-text-stroke: 0.12em #fff;
    text-shadow: 0 1px 5px rgba(0, 8, 24, .22);
}

/* 四张底图：按原版宣传图的风格程序重画（见 temp/scripts/draw-topic-bg.py），
   420×680 打包在模板 statics/images/ 下，不依赖后台上传的那几张图。
   background-color 取各自的平均色：底图晚一帧解码时先铺近似色，不会闪成统一的深蓝。 */
.enter_box .list_side.policy .topic-card.tp-1 {
    background-image: url("../images/topic-1.jpg?v=20261019f"); /* 诚聘英才：橙红低多边形 */
    background-color: #F18A53;
}

.enter_box .list_side.policy .topic-card.tp-2 {
    background-image: url("../images/topic-2.jpg?v=20261019f"); /* 招标公告：深海军蓝斜光带 + 点阵 */
    background-color: #05296A;
}

.enter_box .list_side.policy .topic-card.tp-3 {
    background-image: url("../images/topic-3.jpg?v=20261019f"); /* 合格评估：蓝底 + 右下放射亮线 */
    background-color: #0840A9;
}

.enter_box .list_side.policy .topic-card.tp-4 {
    background-image: url("../images/topic-4.jpg?v=20261019f"); /* 信息公开：深蓝流体波纹 */
    background-color: #0B3D87;
}

/* Swiper 初始化之前，slide 还是 index.css 里写死的 300px 宽，三张卡会以「撑满屏、
   字号按 300px 算」的中间态闪一下（cqw 跟着 300px 走）。初始化完成后 Swiper 会给
   容器加 swiper-container-initialized，那时再显示；万一 JS 没跑到，5s 后兜底显示。 */
.enter_box .list_side.policy .column_box {
    visibility: hidden;
    animation: topic-box-reveal 0s linear 5s forwards;
}

.enter_box .list_side.policy .column_box.swiper-container-initialized {
    visibility: visible;
    animation: none;
}

@keyframes topic-box-reveal {
    to { visibility: visible; }
}

/* 字色跟着底色走：橙红底用深灰，三张蓝底用深靛蓝/纯黑 */
.enter_box .list_side.policy .topic-card.tp-1 .topic-title { color: #3E3E3E; }
.enter_box .list_side.policy .topic-card.tp-2 .topic-title { color: #262972; }
.enter_box .list_side.policy .topic-card.tp-3 .topic-title { color: #2A2C75; }
.enter_box .list_side.policy .topic-card.tp-4 .topic-title { color: #000; }

/* ── 窄屏 ─────────────────────────────────────────────────────────────────
   原版 H5 里 .enter_item 仍是 30% 宽（3 列一行），只是去掉右间距；照旧。
   H5 没有「跟随左列等高」这回事，专题卡片回到图片本身的 260:420。              */
@media (max-width: 981px) {
    .enter_box .list_side.policy .topic-card {
        height: auto;
        aspect-ratio: 260 / 420;
    }
}