/**
 * LAB Lite 站点自定义样式
 *
 * 本文件在 layout.min.css 之后加载，用于覆盖/补充主题样式。
 */

/* ==========================================================================
   卡片网格：修复文本长度不一致导致的栅格错位
   --------------------------------------------------------------------------
   Bootstrap 3 的栅格基于浮动。当卡片里的标题、摘要行数不同时列高参差不齐，
   后续卡片会被"卡"在上一行最短那列旁边，出现错位与空隙（例如第 4 项跑到第 3 列下方）。
   这里改用 flex 让同一行自动对齐，并限制文本最大行数。
   注意：只限制"最多几行"，不用 min-height 撑行——否则短标题/短摘要下方会留出空白，
        看起来像图片和文字之间间距过大。同行卡片的高度差由 flex 自动补齐。
   图片不施加任何尺寸约束，沿用主题自带的 img-responsive 按原图比例展示。
   用法：<div class="row card-grid">，标题加 card-title，
        正文加 card-text，分类/标签行加 card-meta。
   ========================================================================== */

.card-grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /* 列间距：主题默认 col 左右各 15px（列与列之间 30px），
       这里加大到左右各 20px（列与列之间 40px）。
       负 margin 与栏目 padding 取同值，整行左右边缘仍与容器对齐，不会整体内缩 */
    margin-left: -20px;
    margin-right: -20px;
}

.card-grid > * {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
    /* 纵向间距：主题只给 ≤768px 加了 sm-margin-b-50，桌面端行与行之间几乎为 0，
       这里统一补上。模板的 sm-margin-b-50 带 !important，覆盖时必须同样带 */
    margin-bottom: 50px !important;
}

/* 手机端沿用主题原来的 50px，避免小屏堆叠时间距过于松散 */
@media (max-width: 768px) {
    .card-grid > * {
        margin-bottom: 50px !important;
    }
}

/* 图片区：不施加任何尺寸约束，沿用主题自带的 img-responsive（max-width:100%; height:auto）
   按原图比例展示。
   曾用 padding-top:100% 强制 1:1 正方形，结果把卡片撑得过高、且会裁掉原图上下部分，
   已移除（模板里保留的 card-media 类现在仅作语义标记）。
   各卡片图片高度不一致由 flex 自动补齐，不会错位。 */

/* 标题最多两行，超出省略；不留 min-height，短标题自然收拢 */
.card-grid .card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    margin: 0 0 8px;
}

/* 分类/标签等辅助行 */
.card-grid .card-meta {
    line-height: 1.5;
    margin: 0 0 6px;
}

/* 摘要最多三行，超出省略 */
.card-grid .card-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   当前页面所在的一级菜单高亮
   主题的 layout.min.css 里：
     · .header .nav-item-hover.active { color:#fff } 被注释掉了
     · 下划线 :after 被 display:none !important 关掉
     · 只剩 @media(max-width:991px) 与 .page-on-scroll 里才有颜色
   结果是桌面端未滚动（header 透明）时，当前页对应的一级菜单完全看不出选中。
   这里补上与 hover 同色的常驻高亮。
   ========================================================================== */
.header .nav-item .nav-item-hover.active {
    color: #ff7d04 !important;
}

/* ==========================================================================
   详情页正文：后台「正文内容」富文本编辑器输出（.article-content）
   编辑器里的图片没有 img-responsive 类，这里保证图片自适应宽度、段落间距与主题一致
   ========================================================================== */
/* 统一正文色：编辑器里所有文本（标题、加粗、列表、表格、链接、裸文本…)一律 #333333，
   不管编辑器输出的是 h2/h3/span 还是别的什么标签。
   注意：从 Word / 网页里粘贴进编辑器的内容常带内联 style="color:…"，
        内联样式优先级高于任何选择器，所以这里必须带 !important 才能压住。
   副作用：正文里的 <a> 也会被拉平成 #333333（目前正文素材里还没有链接）。 */
.article-content,
.article-content * {
    color: #333333 !important;
}
.article-content {
    font-size: 15px;
    line-height: 1.9;
    word-break: break-word;
}
.article-content h2,
.article-content h3,
.article-content h4 {
    margin: 30px 0 15px;
    font-weight: 500;
    line-height: 1.4;
}
.article-content h2 { font-size: 26px; }
.article-content h3 { font-size: 20px; }
.article-content h4 { font-size: 16px; }
.article-content p {
    margin: 0 0 18px;
    line-height: 1.9;
}
.article-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 24px auto;
}
.article-content ul,
.article-content ol {
    margin: 0 0 18px;
    padding-left: 22px;
}
.article-content li { margin-bottom: 8px; }
/* 注：上面的统一正文色带 !important，会覆盖这里给链接的橙色；
   以后若想让正文里的链接单独着色，把上面的 !important 去掉即可 */
.article-content a { color: #ff7d04; }
.article-content a:hover { text-decoration: underline; }
.article-content blockquote {
    margin: 20px 0;
    padding: 10px 20px;
    border-left: 3px solid #ff7d04;
    background: #f7f8fa;
}
.article-content table {
    width: 100%;
    margin-bottom: 18px;
}
.article-content table th,
.article-content table td {
    padding: 8px 12px;
    border: 1px solid #e7e9ee;
}
@media (max-width: 767px) {
    .article-content h2 { font-size: 22px; }
    .article-content h3 { font-size: 18px; }
}

/* ==========================================================================
   招聘页「部门卡片」等高（about/join.html 的 .dept-grid）
   .pricing 是白底卡片（主题里 padding:70px 45px; background:#fff）。
   内容长短不一——部门描述有的 1 行有的 2 行、岗位条数 2~3 条不等——
   主题用浮动布局，各列白块就会高度参差、底部对不齐。
   这里把行改成 flex（保留 .row-space-1 原本的 1px 缝隙，卡片依旧紧挨），
   卡片高度撑满整行；再给「图标+标题+描述」一块一个最小高度，
   让下面的岗位列表从同一行开始。
   ========================================================================== */
.dept-grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.dept-grid > [class*="col-"] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.dept-grid .pricing {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
/* 图标+标题+描述：最小高度兜住「描述只有一行」的卡片，岗位列表起点才会对齐。
   内容比它高时会自然增高，不会截断文字 */
.dept-grid .pricing .margin-b-30 {
    min-height: 150px;
}
/* 岗位列表吃掉剩余空间，白块下沿（卡片底部）对齐 */
.dept-grid .pricing .pricing-list {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}