/*
Theme Name: GeneratePress 子主题
Template: generatepress
*/

/* ============================================================
 * 【样式说明】
 * 截断类——只控制文字截断/加粗，不影响字体大小、颜色等其他设置
 *    · zx-jd      单行截断（显示"..."）
 *    · zx-jc      第一条加粗（不截断）
 *    · zx-jdjc    单行截断 + 第一条加粗
 *    · zx-2jd     双行截断
 *    · twzx-2jd   图文资讯的双行截断
 *
 * 使用位置：GenerateBlocks 编辑器的「高级 → CSS类名」
 * ============================================================ */

/* =======================================================
 * zx-jd：单行截断
 * 效果：文字超过一行时，末尾显示"..."
 * 用法：给文字/标题所在的容器加类名 zx-jd
 * ======================================================= */
.zx-jd .gb-text a,
.zx-jd .gb-headline-text a {
    display: block !important;            /* 让a标签变成块级元素，text-overflow才能生效 */
    white-space: nowrap !important;       /* 禁止换行，强制一行显示 */
    overflow: hidden !important;          /* 超出部分隐藏 */
    text-overflow: ellipsis !important;   /* 超出的文字用"..."代替 */
    max-width: 100% !important;           /* 宽度不超过父容器 */
}

/* =======================================================
 * zx-jc：第一条加粗
 * 效果：只让循环器里的第1条标题变粗体
 * 用法：给循环器容器加类名 zx-jc
 * 前提：.gb-loop-item 必须是其父元素的第一个子元素
 *       若 Looper 容器开头有标题/分隔线等其他块，:first-child 不会匹配
 *       可改用 :first-of-type 提升兼容性
 * ======================================================= */
.zx-jc .gb-loop-item:first-child .gb-text a,
.zx-jc .gb-loop-item:first-child .gb-headline-text a {
    font-weight: 700 !important;          /* 字体加粗，400=正常 700=粗 */
}

/* =======================================================
 * zx-jdjc：单行截断 + 第一条加粗（组合版）
 * 效果：所有标题单行"..."，第1条额外加粗
 * 用法：给循环器容器加类名 zx-jdjc
 * ======================================================= */

/* 截断部分（同 zx-jd） */
.zx-jdjc .gb-text a,
.zx-jdjc .gb-headline-text a {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* 加粗部分（同 zx-jc） */
.zx-jdjc .gb-loop-item:first-child .gb-text a,
.zx-jdjc .gb-loop-item:first-child .gb-headline-text a {
    font-weight: 700 !important;
}

/* =======================================================
 * zx-2jd：双行截断
 * 效果：文字超过两行时，第二行末尾自动显示"..."
 * 用法：给文字/标题所在的容器加类名 zx-2jd
 * 适用：标题较长、需要两行展示的场景
 * 说明：-webkit-line-clamp 会自动添加省略号，
 *       无需写 text-overflow: ellipsis（在 -webkit-box 模式下无效）
 * ======================================================= */
.zx-2jd .gb-text a,
.zx-2jd .gb-headline-text a {
    display: -webkit-box !important;          /* 启用 webkit 弹性盒模型，line-clamp 才能生效 */
    -webkit-line-clamp: 2 !important;         /* 最多显示2行 */
    -webkit-box-orient: vertical !important;  /* 内容垂直排列 */
    overflow: hidden !important;              /* 超出隐藏 */
    max-width: 100% !important;
}

/* =======================================================
 * twzx-2jd：图文资讯双行截断
 * 效果：图片卡片里的标题，超过两行时显示"..."
 * 用法：给图文资讯的图片容器加类名 twzx-2jd
 * 说明：仅作用于 .gb-text a，不影响普通列表
 * ======================================================= */
.twzx-2jd .gb-text a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-width: 100% !important;
}