/* 手机端整体美化（≤ 768px）。<link media="(max-width: 768px)"> 加载，电脑端不下载也不阻塞渲染（Modules/Common/SiteUI/SiteUI.php）。
   后台「额外 CSS」在主题样式之后加载，这里的选择器都加了 html body 前缀，保证能盖过它 */

/* ---------- 0. 全局：左右留白、卡片间距统一 ---------- */
/* 左右留白：主题在 #content 上只留了 6px，卡片几乎贴边；统一加到 10px */
html body #content.site-content { margin-left: 10px !important; margin-right: 10px !important; }
/* 首页横幅贴满屏幕两边，不跟着留白 */
html body #html-box-abc { margin-left: -10px !important; margin-right: -10px !important; }
html body #html-box-abc, html body #html-box-abc .image-container { border-radius: 0 !important; }
html body .box.b2-radius, html body .widget.box { border-radius: 14px !important; }
html body .widget-area section + section, html body .sidebar .widget + .widget { margin-top: 12px !important; }

/* ---------- 1. 顶部导航 ---------- */
html body .site-header .header-banner-left .ym-menu ul.menu { justify-content: space-between; padding: 0 2px; }
/* 主题给每个菜单项留了 18px 右边距，四项放不下、「友链」被挤出屏幕；间距交给 space-between */
html body .site-header .header-banner-left .ym-menu ul.menu > li { margin-right: 0 !important; }
html body .site-header .header-banner-left .ym-menu ul.menu > li > a { padding: 4px 9px !important; border-radius: 999px; font-size: 13.5px; white-space: nowrap; }

/* ---------- 2. 首页横幅：原来按图片比例只有 170px 高、副标题挤没了；改成固定高度裁切，人物居中偏右 ---------- */
html body #html-box-abc .image-container { height: clamp(280px, 62vw + 70px, 430px); }
html body #html-box-abc .image-container > img,
html body #html-box-abc .image-container picture img {
  width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: none !important;
  object-fit: cover; object-position: 64% 30%;
}
html body #html-box-abc .image-container .centered-text { top: 46%; width: 100%; padding: 0 16px; box-sizing: border-box; }
html body #html-box-abc .image-container .centered-text h2 { font-size: 32px !important; letter-spacing: .22em !important; padding-left: .22em; }
html body #html-box-abc .image-container .centered-text h3 { font-size: 14px !important; margin-top: 14px !important; padding-top: 12px; }
html body #html-box-abc .image-container svg.waves { height: 42px !important; min-height: 0 !important; }

/* ---------- 3. 首页「最新文章」：模块标题条、文章卡片紧凑一些，一屏多看两篇 ---------- */
html body .post-modules-top { padding: 12px 14px !important; margin-bottom: 12px !important; }
html body .post-modules-top .module-title { font-size: 17px !important; }

html body #post-item-latestarticles .post-list-item { margin: 0 0 10px !important; }
html body #post-item-latestarticles .post-list-item .item-in {
  margin: 0 !important; padding: 12px !important; gap: 12px; align-items: stretch;
  border-radius: 14px !important;
}
html body #post-item-latestarticles .post-module-thumb.mobile-show {
  flex: none; width: 116px !important; height: auto !important; margin: 0 !important; align-self: center;
}
html body #post-item-latestarticles .post-module-thumb.mobile-show > .b2-radius { padding-top: 72% !important; border-radius: 10px !important; overflow: hidden; }
html body #post-item-latestarticles .post-module-thumb.mobile-show img { transition: transform .3s ease; }
html body #post-item-latestarticles .post-list-item:active .post-module-thumb.mobile-show img { transform: scale(1.04); }
html body #post-item-latestarticles .post-info { flex: 1; min-width: 0; padding: 0 !important; justify-content: space-between; gap: 6px; }
html body #post-item-latestarticles .post-info h2 { margin: 0 !important; font-size: 15px !important; line-height: 1.45 !important; font-weight: 700; }
html body #post-item-latestarticles .post-info h2 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body #post-item-latestarticles .post-list-cat a { font-size: 11px !important; padding: 1px 8px !important; line-height: 18px !important; }
html body #post-item-latestarticles .post-list-meta-box { font-size: 12px !important; }

/* 页码 */
html body .b2-pager { margin: 4px 0 4px !important; gap: 6px; }
html body .b2-pager .b2-pager-btn { min-width: 36px; height: 36px; }

/* ---------- 4. 首页侧边栏小工具（手机上排在文章下面） ---------- */
html body #custom_html-3 img { display: block; border-radius: 14px; }
html body #custom_html-3 .textwidget, html body #custom_html-3 section { margin: 0 !important; padding: 0 !important; }

/* ---------- 5. 文章页 ---------- */
/* 标题下的信息胶囊：小一号、间距收紧 */
html body.single .single-article .post-meta ul { gap: 6px !important; row-gap: 6px !important; }
html body.single .single-article .post-meta li { margin: 0 !important; }
html body.single .single-article .post-meta li > span,
html body.single .single-article .post-meta li > a,
html body.single .single-article .post-meta .post-list-cat-item { font-size: 12px !important; padding: 2px 9px !important; line-height: 20px !important; }
/* 上一篇 / 下一篇：标题两行截断 */
html body.single .post-pre-next h2 { font-size: 14px !important; line-height: 1.45 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 相关文章：标题 13.5px，元信息小一点 */
html body.single .related-posts .related-posts-item h2 { font-size: 13.5px !important; line-height: 1.45 !important; }
html body.single .related-posts .realte-post-meta { font-size: 11.5px !important; }
html body.single .related-posts-title { padding: 12px 14px 0 !important; }

/* ---------- 6. 页脚：原来四栏全部竖排（约 850px 高）；改成两栏，统计一行四个 ---------- */
html body .ytea-footer { grid-template-columns: 1fr 1fr !important; gap: 22px 16px !important; padding: 24px 4px 8px !important; }
html body .ytea-footer > div:first-child { grid-column: 1 / -1; text-align: center; }
html body .ytea-footer > div:first-child p { margin-bottom: 4px; }
html body .ytea-footer > div:last-child { grid-column: 1 / -1; }
html body .ytea-footer h3 { font-size: 14px !important; margin-bottom: 8px !important; }
html body .ytea-footer li { line-height: 1.9 !important; }
html body .ytea-footer .yf-stats { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
html body .ytea-footer .yf-stat { padding: 8px 2px !important; text-align: center; }
html body .ytea-footer .yf-stat b { font-size: 16px !important; }
html body .ytea-footer .yf-stat span { font-size: 11px !important; }
html body #colophon .footer-bottom { padding-top: 14px !important; font-size: 12px; line-height: 1.9; }
/* 版权 / 备案：原来每项一行、间距很大；改成居中紧凑排列 */
html body #colophon .footer-bottom-left { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 10px; }
html body #colophon .footer-bottom-left .copyright { flex-basis: 100%; text-align: center; }
html body #colophon .footer-bottom-left .b2-dot { display: none; }
html body #colophon .footer-bottom-left a, html body #colophon .footer-bottom-right { line-height: 1.7 !important; font-size: 12px; }
html body #colophon .footer-bottom-right { margin-top: 4px; opacity: .7; }

/* ---------- 文章页顶部（续） ---------- */
/* 作者行：原来是一整条灰底色块；改成透明底 + 细分隔线，头像圆一点 */
html body.single .single-article .post-user-info {
  background: transparent !important; padding: 10px 0 12px !important; margin: 4px 0 0 !important;
  border-radius: 0 !important;
}
html body.single .single-article .post-user-info .avatar,
html body.single .single-article .post-user-info img.avatar { width: 32px !important; height: 32px !important; border-radius: 50% !important; }
html body.single .single-article .post-user-info .post-user-name b { font-size: 14px; }
/* 过时提示：「提示」标签放到第一行行首，文字不再被挤成一窄条 */
html body.single .entry-content .ytea-outdated { display: block !important; padding: 10px 12px !important; font-size: 13.5px !important; line-height: 1.75 !important; }
html body.single .entry-content .ytea-outdated b { display: inline-block !important; margin: 0 8px 0 0 !important; vertical-align: 1px; }

/* ---------- 分类 / 标签 / 作者页 ---------- */
/* 横幅和工具条：#content 已经留了左右边距，这里不再额外缩进（原来叠加后右边超出屏幕 6px） */
html body.archive .ytea-term-hero { margin: 12px 0 0 !important; }
html body.archive .tax-header, html body.archive .tax-header .wrapper, html body.archive .tax-header .tax-info { padding: 0 !important; width: auto !important; max-width: 100% !important; }
html body.archive .tax-header .tax-info { gap: 8px; }
html body.archive .tax-header a.fliter-button { padding: 0 14px !important; flex: none; }
/* 文章卡片：两列太窄（每张 150px，标题折三行），改成和首页一样的横排列表 */
html body.archive .post-1 ul.b2_gap { display: block !important; margin: 0 !important; }
html body.archive .post-1 .post-list-item { width: 100% !important; padding: 0 0 10px !important; }
html body.archive .post-1 .post-list-item > .item-in {
  flex-direction: row !important; align-items: center; gap: 12px; height: auto !important; margin: 0 !important; padding: 12px !important;
  border-radius: 14px !important;
}
html body.archive .post-1 .post-module-thumb { flex: none; width: 116px !important; height: auto !important; padding: 0 !important; border-radius: 10px; }   /* A2 用 padding-top 撑图片比例，横排时要去掉 */
html body.archive .post-1 .post-module-thumb .thumb-link { position: static !important; display: block !important; width: 100%; height: auto !important; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; }
html body.archive .post-1 .post-module-thumb .thumb-link picture,
html body.archive .post-1 .post-module-thumb .thumb-link img { position: static !important; display: block; width: 100% !important; height: 100% !important; object-fit: cover; }
html body.archive .post-1 .post-info { flex: 1; min-width: 0; padding: 0 !important; gap: 4px; }
html body.archive .post-1 .post-info h2 { margin: 0 !important; font-size: 15px !important; line-height: 1.45 !important; font-weight: 700; }
html body.archive .post-1 .post-info h2 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body.archive .post-1 .post-excerpt { display: none !important; }
html body.archive .post-1 .post-list-meta-box { margin: 0 !important; }
html body.archive .post-1 .post-info .list-footer { margin-top: 2px !important; padding: 6px 0 0 !important; border-top: 0 !important; font-size: 12px; }
html body.archive .post-1 .item-in:hover { transform: none; }