/**
 * 组词频道 /zuci/
 * - 首页：居中标题+搜索（同词语频道头，无米字格、无共xxx）；下方左导览 / 右分类
 * - 详情：首中尾分栏、词条网格、分页
 * - 分类页：左右分列，右侧本类字 + 相关词语/成语
 */

/* 首页头：错误提示（居中，与 channel-head 一致） */
.zuci-search-err {
    margin: 8px 0 0;
    color: var(--cinnabar);
    font-size: 15px;
    text-align: center;
}

/* ---------- 双栏主体：左导览 / 右分类 ---------- */
.zuci-layout {
    display: grid;
    gap: 20px;
    padding: 12px 0 28px;
    align-items: start;
}

.zuci-side {
    display: grid;
    gap: 14px;
}

.zuci-side__block {
    padding: 14px 14px 16px;
    background: var(--paper-2);
    border: 1px solid var(--line);
}

.zuci-side__h {
    margin: 0 0 10px;
    font-family: var(--font-kai);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
}

/* 侧栏分类：手机横向滑，桌面竖排 */
.zuci-side__nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.zuci-side__nav a {
    flex: none;
    min-height: 44px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
}

.zuci-side__nav a:hover {
    border-color: var(--azurite);
    color: var(--azurite);
}

.zuci-side__nav a.is-on {
    border-color: var(--azurite);
    background: var(--azurite);
    color: #fff;
    font-weight: 600;
}

.zuci-side__nav a.is-on:hover {
    background: var(--azurite-deep);
    border-color: var(--azurite-deep);
    color: #fff;
}

/* 侧栏热门：固定 4 列 */
.zuci-chip-grid--side {
    gap: 6px;
}

.zuci-chip-grid--side .zuci-chip {
    min-height: 40px;
    font-size: 1.15rem;
    font-weight: 600;
}

.zuci-main__head h1 {
    margin: 0 0 6px;
    font-family: var(--font-kai);
    font-size: clamp(1.6rem, 3.5vw, 2rem);
    font-weight: 700;
}

.zuci-side__tools {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.zuci-side__tools a {
    display: flex;
    align-items: center;
    min-height: 40px;
    color: var(--azurite);
    text-decoration: none;
    font-size: 15px;
}

.zuci-side__tools a:hover {
    text-decoration: underline;
}

/* 字芯片墙 */
.zuci-chip-wall {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.zuci-chip {
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-kai);
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
}

.zuci-chip:hover {
    border-color: var(--azurite);
    color: var(--azurite);
    background: color-mix(in srgb, var(--paper-2) 70%, #fff);
}

/* 分类卡内：固定 4 列，最多约 4 行预览 */
.zuci-chip-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.zuci-chip-grid .zuci-chip {
    width: 100%;
    min-width: 0;
    padding: 0;
}

/* 分类页本类汉字：格子收窄（更贴字） */
.zuci-chip-grid--tight {
    gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
}

.zuci-chip-grid--tight .zuci-chip {
    min-width: 44px;
    min-height: 44px;
    width: auto;
    padding: 0 6px;
    font-size: 1.2rem;
    font-weight: 600;
}

.zuci-main__head {
    margin: 0 0 14px;
}

.zuci-main__head h2 {
    margin: 0 0 6px;
    font-family: var(--font-kai);
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 700;
}

.zuci-main__head p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

/* 分类卡片网格：主栏内再分列 */
.zuci-cat-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

.zuci-cat-card {
    padding: 14px 14px 12px;
    background: var(--paper-2);
    border: 1px solid var(--line);
}

.zuci-cat-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.zuci-cat-card__head h3 {
    margin: 0;
    font-family: var(--font-kai);
    font-size: 1.15rem;
    font-weight: 700;
}

.zuci-cat-card__head h3 a {
    color: inherit;
    text-decoration: none;
}

.zuci-cat-card__head h3 a:hover {
    color: var(--azurite);
}

.zuci-cat-card__n {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
}

.zuci-cat-card__more {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin-top: 10px;
    font-size: 14px;
    color: var(--azurite);
    text-decoration: none;
}

.zuci-cat-card__more:hover {
    text-decoration: underline;
}

/* FAQ 放主栏底部 */
.zuci-main .zuci-faq {
    margin-top: 22px;
    padding: 16px 16px 18px;
    background: var(--paper-2);
    border: 1px solid var(--line);
}

.zuci-faq h2 {
    margin: 0 0 10px;
    font-family: var(--font-kai);
    font-size: clamp(1.15rem, 2.8vw, 1.35rem);
}

.zuci-faq p {
    margin: 0;
    color: var(--ink);
    line-height: 1.75;
}

/* ---------- 字详情（保留） ---------- */
.zuci-detail {
    padding-bottom: 28px;
}

.zuci-detail__head {
    margin-bottom: 0;
}

/* 开头/中间/结尾：上下间距一致 */
.zuci-pos-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding: 16px 0;
    margin: 0;
}

.zuci-pos-tabs .filter-chip {
    flex: none;
}

.zuci-block {
    margin: 0 0 28px;
}

.zuci-block__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 12px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.zuci-block__head h2 {
    margin: 0;
    font-family: var(--font-kai);
    font-size: clamp(1.15rem, 2.8vw, 1.35rem);
    font-weight: 700;
}

.zuci-block__count {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
}

.zuci-words.related {
    gap: 8px 10px;
}

.zuci-words.related a {
    min-height: 44px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
}

.zuci-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 0 16px;
}

.zuci-pager__info {
    color: var(--muted);
    font-size: 15px;
}

.zuci-cat-link {
    color: inherit;
    text-decoration: none;
}

.zuci-cat-link:hover {
    color: var(--azurite);
}

.zuci-more {
    margin: 10px 0 0;
    text-align: right;
    font-size: 15px;
}

.zuci-more a {
    color: var(--azurite);
    text-decoration: none;
}

.zuci-more a:hover {
    text-decoration: underline;
}

/* ---------- 手机：隐藏占位大的侧栏热门 / FAQ，分类横滑 ---------- */
@media (max-width: 767px) {
    /* 60 热门字会把主题内容顶出首屏，手机直接隐藏（Pad/桌面仍显示） */
    .zuci-side__block--hot {
        display: none !important;
    }

    .zuci-main .zuci-faq {
        display: none;
    }

    /*
     * 关键：横滑导航子项 nowrap 时，父级默认 min-width:auto 会按内容撑开整页，
     * 导致右侧被裁切、字格「只剩左半边」。整条链路上强制 min-width:0 + 限宽。
     */
    .zuci-layout,
    .zuci-side,
    .zuci-main,
    .zuci-side__block,
    .zuci-cat-card,
    .zuci-cat-grid {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .zuci-layout {
        /* 勿设 width:100%，否则会盖掉 .wrap 的左右留白（min(100%-32px)） */
        padding: 8px 0 20px;
        gap: 14px;
        overflow-x: clip;
    }

    /* 分类页：主内容先出，分类切换放下方，避免首屏被导航占满 */
    .zuci-layout--cat {
        display: flex;
        flex-direction: column;
    }

    .zuci-layout--cat .zuci-main {
        order: 1;
    }

    .zuci-layout--cat .zuci-side {
        order: 2;
    }

    .zuci-side__block {
        padding: 10px 12px 12px;
        overflow: hidden; /* 约束内部横滑，不向外撑宽 */
    }

    /* 分类：单行横滑（子项 flex:none，触控 ≥44px） */
    .zuci-side__nav {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        padding-bottom: 4px;
    }

    .zuci-side__nav a {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 0 12px;
        font-size: 14px;
    }

    .zuci-main__head {
        margin: 0 0 10px;
        text-align: center; /* 手机标题/导语居中 */
    }

    .zuci-main__head h1 {
        font-size: 1.45rem;
    }

    .zuci-main__head p {
        font-size: 13px;
    }

    /* 主题卡字格：栅格内 min-width:0，避免 4×44 再被外层 min-width 撑破 */
    .zuci-chip-grid {
        gap: 6px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
        max-width: 100%;
    }

    .zuci-chip-grid .zuci-chip {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        font-size: 1.1rem;
    }

    .zuci-chip-grid--tight {
        gap: 5px;
        grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    }

    .zuci-chip-grid--tight .zuci-chip {
        min-width: 44px;
        min-height: 44px;
        width: auto;
        font-size: 1.1rem;
    }

    .zuci-cat-card {
        padding: 12px;
        overflow: hidden;
    }

    .zuci-cat-card__head h3 {
        font-size: 1.05rem;
    }

    .zuci-block {
        margin: 0 0 20px;
        min-width: 0;
        max-width: 100%;
    }

    .zuci-words.related {
        gap: 6px 8px;
    }

    .zuci-words.related a {
        min-height: 44px;
        padding: 6px 10px;
        font-size: 14px;
    }

    /* 搜索条：窄屏允许换行，避免输入框+按钮撑破 */
    .zuci-home-head .channel-search {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 底栏「更多」允许折行，避免撑破 */
    .channel-foot .lead {
        line-height: 1.7;
        word-break: break-word;
    }
}

/* Pad：双栏初现 */
@media (min-width: 768px) {
    .zuci-layout {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: 22px;
    }

    .zuci-side__nav {
        flex-direction: column;
        overflow-x: visible;
    }

    .zuci-side__nav a {
        width: 100%;
        box-sizing: border-box;
    }

    .zuci-side {
        position: sticky;
        top: 72px;
    }

    .zuci-cat-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Pad 起字芯片略放大 */
    .zuci-chip {
        min-width: 48px;
        min-height: 48px;
        font-size: 1.35rem;
    }

    .zuci-chip-wall {
        gap: 8px;
    }

    .zuci-chip-grid {
        gap: 8px;
    }

    .zuci-chip-grid .zuci-chip {
        min-height: 48px;
        font-size: 1.35rem;
    }

    .zuci-chip-grid--tight {
        gap: 6px;
        grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    }

    .zuci-chip-grid--tight .zuci-chip {
        min-width: 48px;
        min-height: 48px;
        font-size: 1.3rem;
    }

    .zuci-words.related {
        gap: 10px 12px;
    }
}

/* 桌面：侧栏略宽，分类三列，字更大更清晰 */
@media (min-width: 1025px) {
    .zuci-layout {
        grid-template-columns: 228px minmax(0, 1fr);
        gap: 28px;
    }

    .zuci-cat-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .zuci-chip {
        min-width: 52px;
        min-height: 52px;
        padding: 0 12px;
        font-size: 1.5rem;
        font-weight: 700;
    }

    .zuci-chip-wall {
        gap: 10px;
    }

    .zuci-chip-grid {
        gap: 10px;
    }

    .zuci-chip-grid .zuci-chip {
        min-height: 52px;
        font-size: 1.5rem;
        font-weight: 700;
    }

    .zuci-chip-grid--tight {
        gap: 8px;
        grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    }

    .zuci-chip-grid--tight .zuci-chip {
        min-width: 52px;
        min-height: 52px;
        font-size: 1.4rem;
        font-weight: 700;
    }

    .zuci-cat-card {
        padding: 16px 16px 14px;
    }

    .zuci-cat-card__head h3 {
        font-size: 1.25rem;
    }

    .zuci-words.related {
        gap: 10px 14px;
    }

    .zuci-pos-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}