/* 正文字号：主题 main.css 里 div.content 定为 18px，中文正文偏大，降到 16px。
   标题走 Bootstrap 的 rem（h1 2.5rem / h2 2rem），不随这里联动，所以层级反而更清楚。
   行高 1.625 对齐 unity.com/blog 正文（那边也是 16px 正文，段高反推约 26px 行高）。 */
#content-pane .content {
  font-size: 16px;
  line-height: 1.625;
}

/* 段间距 20px（1.25em），同 unity.com/blog 段落的 padding-bottom 值。
   那边用 padding、这里用 margin：连续段落的外边距会折叠成 20px，
   而末段的外边距能和容器一起收掉，不用再写 :last-child 去尾巴。 */
#content-pane .content p {
  margin-bottom: 1.25em;
}

/* 正文图片：自适应容器宽度并居中。
   主题自带的 main.css 没有任何 img 规则，不写这条的话 1080px 的原图会把版面撑破。 */
#content-pane .content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5rem auto;
}

/* 正文引用块：Bootstrap 的 reboot 把 blockquote 的默认缩进重置成了 margin:0 0 1rem 且无边框，
   不补这条样式的话，markdown 的 ">" 引用会和普通段落长得一模一样。
   上下 padding 只留 0.25rem：竖线（border-left）的高度等于内容加 padding，给多了竖线会比文字长一截。 */
#content-pane .content blockquote {
  margin: 0 0 1rem;
  padding: 0.25rem 1rem;
  border-left: 4px solid #d0d7de;
  color: #6a737d;
}

/* 上面那条 p 的段距会渗进引用块里，把竖线在文字下方又拉长 20px，这里清掉 */
#content-pane .content blockquote p {
  margin-bottom: 0;
}

/* Markdown 表格：Bootstrap 5 的 reboot 只给了 table 一个 border-collapse，
   边框和单元格内边距全靠 .table 那个类才生效——markdown 生成的裸 table 没有这个类，
   所以默认渲染出来是一坨没有分隔线的文字。这里补上 GitHub 风格的三条横线，
   配色沿用上面引用块的灰（#d0d7de / #6a737d），整站看起来是一套。 */
#content-pane .content table {
  width: 100%;
  margin: 0 0 1.5rem;
  border-collapse: collapse;
}

#content-pane .content th,
#content-pane .content td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d0d7de;
  text-align: left;
  vertical-align: top;
}

#content-pane .content th {
  background-color: #f6f8fa;
  font-weight: 600;
}

/* 单张图片缩小到四分之一宽度，配合上面的规则使用，用法：<img src="..." class="img-quarter"> */
#content-pane .content img.img-quarter {
  width: 25%;
}

/* 两张证书并排：整体在正文里居中，两张等宽。
   用法：<div class="cert-pair"><img ...><img ...></div> */
#content-pane .content .cert-pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
  margin: 2rem 0;
}

/* 等宽 + 去掉上面那条 auto 外边距，否则 flex 布局里两张图会被推开 */
#content-pane .content .cert-pair img {
  width: 25%;
  margin: 0;
}

/* 单位 logo 墙：用法是把若干 <img> 包在 <div class="logo-grid"> 里 */
#content-pane .content .logo-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin: 2rem 0;
}

/* 覆盖上面的居中规则：logo 墙里的图片交给 flex 排版，不要各自的上下外边距 */
#content-pane .content .logo-grid img {
  width: auto;
  max-width: 140px;
  max-height: 60px;
  margin: 0;
}

/* 横版「校徽 + 单位全称」组合标（长宽比约 4:1），套用上面 140px 的限宽后
   单位名字会缩到正文大小以下，单独放宽。用法：<img class="logo-wide"> */
#content-pane .content .logo-grid img.logo-wide {
  max-width: 280px;
  max-height: none;
}

/* 工商银行的组合标更扁（「ICBC + 铜钱 + 中国工商银行」约 7.6:1），
   同宽下高度只有上面那个的一半。再放宽一些补回视觉分量。
   min(..., 100%) 是给窄屏兜底：SVG 没有固有尺寸，只写死 px 会在手机上撑破容器。 */
#content-pane .content .logo-grid img.logo-icbc {
  max-width: min(360px, 100%);
}

/* 首页社交图标：不用图标字体，全部换成项目内的 SVG（CSS mask），能继承所在元素
   的颜色（currentColor）。simple-icons 的图形在 24×24 画布里有留白，SVG 的 viewBox
   已裁到内容边界，所以下面的盒子尺寸就等于图标可见尺寸。 */
.mask-icon {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.brand-bilibili {
  width: 1.01em;
  height: 0.9em;
  -webkit-mask-image: url("/images/icons/bilibili.svg");
  mask-image: url("/images/icons/bilibili.svg");
}

.brand-weixin {
  width: 1.08em;
  height: 0.88em;
  -webkit-mask-image: url("/images/icons/wechat.svg");
  mask-image: url("/images/icons/wechat.svg");
}

.brand-mail {
  width: 0.94em;
  height: 0.75em;
  -webkit-mask-image: url("/images/icons/mail.svg");
  mask-image: url("/images/icons/mail.svg");
}

.brand-rss {
  width: 0.9em;
  height: 0.9em;
  -webkit-mask-image: url("/images/icons/rss.svg");
  mask-image: url("/images/icons/rss.svg");
}

/* 小红书是「小红书」文字标，天然宽扁（约 2.8:1），单独给更宽的盒子 */
.brand-xiaohongshu {
  width: 1.7em;
  height: 0.607em;
  -webkit-mask-image: url("/images/xiaohongshu.svg");
  mask-image: url("/images/xiaohongshu.svg");
}

/* 各图标盒子高度不同（FA 字形 20px，小红书文字标更矮），行内基线对齐会让底边参差。
   用 flex 居中对齐，视觉重心一致。 */
#social-pane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

/* 微信、小红书这两个图标不跳转到外部站点（微信的 href 是页内锚点，小红书没有 href），
   会被 Bootstrap 的 a 默认规则影响（正文黑 + 下划线），这里统一回其它图标的颜色、去掉下划线。 */
.social a.social-static {
  color: #526d7a;
  text-decoration: none;
}

/* 点击微信图标弹出的公众号二维码（结构见 layouts/partials/social.html）。
   纯 CSS 的 :target 实现，不引 JS——主题只加载了 Bootstrap 的 CSS、没有 bundle.js，
   用不了 Bootstrap 的 Modal 组件。 */
.qr-modal {
  display: none;
}

.qr-modal:target {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1050;
  align-items: center;
  justify-content: center;
  padding: 1rem; /* 横屏手机（视口很矮）时给二维码留边距 */
}

/* 半透明遮罩兼「点空白关闭」：href="#" 把 URL 上的锚点清掉，:target 随之失效 */
.qr-modal .qr-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

/* 弹窗打开时锁住背景滚动（fixed 定位的弹窗自己不会跟着滚，但背后的正文会）。
   :has() 在内核较旧的浏览器里整条会被忽略，那时只是背景能跟着滚，功能不受影响。 */
body:has(.qr-modal:target) {
  overflow: hidden;
}

.qr-modal img {
  position: relative; /* 盖在遮罩之上 */
  width: min(260px, 72vw);
  /* 视口矮时按比例回缩，别把二维码顶出屏幕上下边。Bootstrap 全局是 border-box，
     所以 padding 也算在这个高度里。 */
  max-height: calc(100vh - 4rem);
  margin: 0;
  padding: 0.75rem;
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}