/* ==========================================================================
   帮助中心 · 门户版区块样式
   落点：web/static/portal/helper.css
   由帮助族 5 个区块件各自注册（同页多件注册同一文件由框架去重）。
   旧版依赖 school-static/css/helper.css + layui 树样式 —— 换门户壳后
   chrome 归站点页头，页面内容全部走本文件（颜色用 --c-* token，换肤生效）。
   ========================================================================== */

.ph-hbanner,
.ph-hdocs,
.ph-hhot,
.ph-htree,
.ph-hcontent,
.ph-harticle,
.ph-hsearch { box-sizing: border-box; }
.ph-hbanner *, .ph-hdocs *, .ph-hhot *, .ph-htree *,
.ph-hcontent *, .ph-harticle *, .ph-hsearch * { box-sizing: border-box; }

/* ── 页头横幅（旧 header .help_search 降格为区块）── */
.ph-hbanner {
    background: linear-gradient(135deg, var(--c-primary, #f89b38) 0%, color-mix(in srgb, var(--c-primary) 70%, #fff) 100%);
    padding: var(--sp-8, 48px) var(--sp-4, 16px);
}
.ph-hbanner__in {
    width: 100%;
    max-width: var(--layout-container-max, 1200px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--sp-6, 32px);
    flex-wrap: wrap;
}
.ph-hbanner__t {
    font-size: var(--fs-2xl, 28px);
    font-weight: var(--fw-bold, 700);
    color: #fff;
    margin: 0;
}
.ph-hbanner__form {
    display: flex;
    flex: 1 1 320px;
    max-width: 560px;
}
.ph-hbanner__input {
    flex: 1;
    height: 44px;
    padding: 0 var(--sp-3, 12px);
    border: 0;
    border-radius: var(--radius-md, 8px) 0 0 var(--radius-md, 8px);
    font-size: var(--fs-sm, 14px);
    color: var(--c-text, #1f2329);
    outline: none;
}
.ph-hbanner__go {
    width: 56px;
    border: 0;
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
    background-color: var(--c-surface, #fff);
    color: var(--c-primary, #f89b38);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ph-hbanner__go:hover { background-color: color-mix(in srgb, var(--c-surface, #fff) 88%, var(--c-primary)); }

/* ── 首页 · 帮助文档卡片网格 ── */
.ph-hdocs {
    width: 100%;
    max-width: var(--layout-container-max, 1200px);
    margin: 0 auto;
    padding: var(--sp-6, 32px) var(--layout-gutter, 24px) 0;
}
.ph-hdocs__head h2 {
    font-size: var(--fs-lg, 18px);
    font-weight: var(--fw-semibold, 600);
    margin: 0 0 var(--sp-4, 16px);
    padding-left: var(--sp-2, 8px);
    border-left: 4px solid var(--c-primary, #f89b38);
}
.ph-hdocs__grid {
    display: grid;
    /* ⚠ `minmax(0,1fr)`：默认 `1fr` 的 `min-width:auto` 会被 nowrap 长标题撑爆轨道
       （实测首页卡片区列宽失衡）⇒ 必须显式收到 0，长文本才走省略号。 */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4, 16px);
}
@media (max-width: 1024px) { .ph-hdocs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ph-hdocs__grid { grid-template-columns: minmax(0, 1fr); } }
.ph-hdoccard {
    background-color: var(--c-surface, #fff);
    border: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent);
    border-radius: var(--radius-md, 8px);
    padding: var(--sp-4, 16px);
    min-height: 148px;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s ease, transform .2s ease;
}
.ph-hdoccard:hover {
    box-shadow: 0 4px 16px rgba(0, 9, 13, .08);
    transform: translateY(-2px);
}
.ph-hdoccard__t {
    display: flex;
    align-items: center;
    gap: var(--sp-1, 4px);
    font-size: var(--fs-sm, 14px);
    font-weight: var(--fw-semibold, 600);
    color: var(--c-text, #1f2329);
    text-decoration: none;
    margin-bottom: var(--sp-3, 12px);
}
.ph-hdoccard__t:hover { color: var(--c-primary-text, #d97b1e); }
.ph-hdoccard__icon { width: 18px; height: 18px; object-fit: contain; }
.ph-hdoccard__list { list-style: none; margin: 0; padding: 0; flex: 1; }
.ph-hdoccard__list li { margin-bottom: var(--sp-2, 8px); }
.ph-hdoccard__list a {
    display: block;
    font-size: var(--fs-sm, 14px);
    color: var(--c-text-secondary, #666);
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ph-hdoccard__list a:hover { color: var(--c-primary-text, #d97b1e); }
.ph-hdoccard__more {
    align-self: flex-end;
    font-size: var(--fs-xs, 12px);
    color: var(--c-text-tertiary, #999);
    text-decoration: none;
}
.ph-hdoccard__more:hover { color: var(--c-primary-text, #d97b1e); }
.ph-hdoccard__none {
    margin: auto 0 0;
    font-size: var(--fs-sm, 14px);
    color: var(--c-text-tertiary, #999);
}

/* ── 首页 · 热门问题 ── */
.ph-hhot {
    width: 100%;
    max-width: var(--layout-container-max, 1200px);
    margin: 0 auto;
    padding: var(--sp-6, 32px) var(--layout-gutter, 24px) var(--sp-8, 48px);
}
.ph-hhot__head h2 {
    font-size: var(--fs-lg, 18px);
    font-weight: var(--fw-semibold, 600);
    margin: 0 0 var(--sp-4, 16px);
    padding-left: var(--sp-2, 8px);
    border-left: 4px solid var(--c-primary, #f89b38);
}
.ph-hhot__list {
    list-style: none;
    margin: 0;
    padding: var(--sp-4, 16px);
    display: grid;
    /* 同 `.ph-hdocs__grid`：`minmax(0,1fr)` 挡住 nowrap 长标题把中列撑爆 */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-2, 8px) var(--sp-5, 20px);
    background-color: var(--c-surface, #fff);
    border: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent);
    border-radius: var(--radius-md, 8px);
}
@media (max-width: 900px) { .ph-hhot__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ph-hhot__list { grid-template-columns: minmax(0, 1fr); } }
.ph-hhot__list a {
    display: flex;
    align-items: center;
    gap: var(--sp-1, 4px);
    font-size: var(--fs-sm, 14px);
    color: var(--c-text-secondary, #666);
    text-decoration: none;
    min-width: 0;
}
.ph-hhot__list a span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}
.ph-hhot__list a:hover { color: var(--c-primary-text, #d97b1e); }
.ph-hhot__list em {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--c-primary, #f89b38);
}

/* ── 分类页 / 详情页 · 左栏树 ── */
.ph-hlayout {
    width: 100%;
    max-width: var(--layout-container-max, 1200px);
    margin: 0 auto;
    padding: var(--sp-6, 32px) var(--layout-gutter, 24px) var(--sp-8, 48px);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-5, 20px);
}
@media (max-width: 900px) { .ph-hlayout { flex-direction: column; } }
.ph-htree {
    flex: 0 0 260px;
    background-color: var(--c-surface, #fff);
    border: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent);
    border-radius: var(--radius-md, 8px);
    padding: var(--sp-4, 16px) 0;
}
@media (max-width: 900px) { .ph-htree { flex-basis: auto; width: 100%; } }
.ph-htree__title {
    font-size: var(--fs-md, 15px);
    font-weight: var(--fw-semibold, 600);
    margin: 0 0 var(--sp-3, 12px);
    padding: 0 var(--sp-4, 16px);
}
.ph-htree__list, .ph-htree__sub { list-style: none; margin: 0; padding: 0; }
.ph-htree__sub { padding-left: var(--sp-4, 16px); }
.ph-htree__item a {
    display: flex;
    align-items: center;
    gap: var(--sp-1, 4px);
    padding: 8px var(--sp-4, 16px);
    font-size: var(--fs-sm, 14px);
    color: var(--c-text, #1f2329);
    text-decoration: none;
}
.ph-htree__item--l2 > a, .ph-htree__item--l3 > a { color: var(--c-text-secondary, #666); }
.ph-htree__item a:hover { color: var(--c-primary-text, #d97b1e); background-color: color-mix(in srgb, var(--c-primary) 6%, transparent); }
.ph-htree__item.is-on > a {
    color: var(--c-primary-text, #d97b1e);
    font-weight: var(--fw-semibold, 600);
    background-color: color-mix(in srgb, var(--c-primary) 10%, transparent);
}
.ph-htree__icon { width: 15px; height: 15px; object-fit: contain; }

/* ── 分类页 · 右栏内容 ── */
.ph-hcontent {
    flex: 1;
    min-width: 0;
    background-color: var(--c-surface, #fff);
    border: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent);
    border-radius: var(--radius-md, 8px);
    padding: var(--sp-5, 20px) var(--sp-6, 24px);
    min-height: 480px;
}
.ph-hlist { list-style: none; margin: 0; padding: 0; }
.ph-hlist li {
    padding: 10px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--c-text) 6%, transparent);
}
.ph-hlist li:last-child { border-bottom: 0; }
.ph-hlist a {
    font-size: var(--fs-sm, 14px);
    color: var(--c-text-secondary, #666);
    text-decoration: none;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ph-hlist a:hover { color: var(--c-primary-text, #d97b1e); }
.ph-hgroup { margin-top: var(--sp-5, 20px); }
.ph-hgroup__t {
    font-size: var(--fs-md, 15px);
    font-weight: var(--fw-semibold, 600);
    margin: 0 0 var(--sp-2, 8px);
}
.ph-hcontent__none {
    margin: var(--sp-6, 32px) 0;
    text-align: center;
    color: var(--c-text-tertiary, #999);
    font-size: var(--fs-sm, 14px);
}

/* ── 详情页 · 文章 ── */
.ph-harticle {
    flex: 1;
    min-width: 0;
    background-color: var(--c-surface, #fff);
    border: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent);
    border-radius: var(--radius-md, 8px);
    padding: var(--sp-5, 20px) var(--sp-6, 24px);
}
.ph-harticle__title { font-size: var(--fs-xl, 20px); font-weight: var(--fw-bold, 700); margin: 0 0 var(--sp-2, 8px); }
.ph-harticle__time { font-size: var(--fs-xs, 12px); color: var(--c-text-tertiary, #999); margin: 0 0 var(--sp-4, 16px); }
.ph-harticle__body { font-size: var(--fs-sm, 14px); line-height: 1.8; color: var(--c-text, #1f2329); }
.ph-harticle__body img { max-width: 100%; height: auto; }
.ph-harticle__faq { margin-top: var(--sp-6, 32px); }
.ph-harticle__faq h2 {
    font-size: var(--fs-lg, 18px);
    margin: 0 0 var(--sp-3, 12px);
    padding-bottom: var(--sp-2, 8px);
    border-bottom: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent);
}
.ph-hqa { margin-bottom: var(--sp-5, 20px); }
.ph-hqa__t { font-size: var(--fs-md, 15px); margin: 0 0 var(--sp-1, 4px); }
.ph-hqa__t a { color: var(--c-text, #1f2329); text-decoration: none; }
.ph-hqa__t a::before { content: '#'; color: var(--c-primary, #f89b38); margin-right: 5px; }
.ph-hqa__c { font-size: var(--fs-sm, 14px); line-height: 1.7; color: var(--c-text-secondary, #666); margin: 0; }
.ph-hqa.is-on .ph-hqa__t a, .ph-hqa.is-on .ph-hqa__c { color: var(--c-primary-text, #d97b1e); }

/* ── 搜索页 ── */
.ph-hsearch {
    width: 100%;
    max-width: var(--layout-container-max, 1200px);
    margin: 0 auto;
    padding: var(--sp-6, 32px) var(--layout-gutter, 24px) var(--sp-8, 48px);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-5, 20px);
}
@media (max-width: 900px) { .ph-hsearch { flex-direction: column; } }
.ph-hsearch__aside { flex: 0 0 240px; }
@media (max-width: 900px) { .ph-hsearch__aside { width: 100%; flex-basis: auto; } }
.ph-hsearch__cats { list-style: none; margin: 0; padding: 0; }
.ph-hsearch__cats li { margin-bottom: var(--sp-3, 12px); }
.ph-hsearch__cats a {
    display: flex;
    align-items: center;
    gap: var(--sp-1, 4px);
    font-size: var(--fs-sm, 14px);
    color: var(--c-text, #1f2329);
    text-decoration: none;
}
.ph-hsearch__cats a:hover, .ph-hsearch__cats a.is-on { color: var(--c-primary-text, #d97b1e); }
.ph-hsearch__icon { width: 18px; height: 18px; object-fit: contain; }
.ph-hsearch__main {
    flex: 1;
    min-width: 0;
    background-color: var(--c-surface, #fff);
    border: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent);
    border-radius: var(--radius-md, 8px);
    padding: var(--sp-5, 20px) var(--sp-6, 24px);
}
.ph-hsearch__num {
    margin: 0 0 var(--sp-4, 16px);
    padding-bottom: var(--sp-3, 12px);
    border-bottom: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent);
    font-size: var(--fs-sm, 14px);
    color: var(--c-text-tertiary, #999);
}
.ph-hsearch__list { list-style: none; margin: 0; padding: 0; }
.ph-hsearch__list > li { padding: var(--sp-3, 12px) 0; border-bottom: 1px solid color-mix(in srgb, var(--c-text) 6%, transparent); }
.ph-hsearch__list a {
    display: flex;
    align-items: center;
    gap: var(--sp-1, 4px);
    font-size: var(--fs-md, 15px);
    color: var(--c-text, #1f2329);
    text-decoration: none;
}
.ph-hsearch__list a:hover { color: var(--c-primary-text, #d97b1e); }
.ph-hsearch__list em {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--c-primary, #f89b38);
}
.ph-hsearch__excerpt {
    margin-top: var(--sp-2, 8px);
    font-size: var(--fs-sm, 14px);
    line-height: 1.7;
    color: var(--c-text-secondary, #666);
    max-height: 4.4em;
    overflow: hidden;
}
.ph-hsearch__excerpt img { max-width: 100%; height: auto; }
.ph-hsearch__empty {
    padding: var(--sp-6, 32px) 0;
    text-align: center;
    color: var(--c-text-tertiary, #999);
    font-size: var(--fs-sm, 14px);
    border-bottom: 0;
}
.ph-hsearch__pager { margin-top: var(--sp-4, 16px); display: flex; justify-content: flex-end; gap: var(--sp-1, 4px); }
.ph-hsearch__pg {
    min-width: 32px;
    height: 32px;
    padding: 0 var(--sp-1, 4px);
    border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent);
    border-radius: var(--radius-sm, 6px);
    background-color: var(--c-surface, #fff);
    color: var(--c-text-secondary, #666);
    font-size: var(--fs-sm, 14px);
    cursor: pointer;
}
.ph-hsearch__pg:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary-text); }
.ph-hsearch__pg.is-on { background-color: var(--c-primary, #f89b38); border-color: var(--c-primary); color: #fff; }
.ph-hsearch__pg:disabled { opacity: .45; cursor: default; }