/*
 * author-box.css — 作者框样式的**自有实现**，用于替换商业插件 molongui-authorship-pro
 * 的 author-box.596e.min.css（83,718 B）。
 *
 * 为什么可以这么小：CSS 覆盖率实测，那 83,718 B 里**真正命中页面的只有 2,624 B（3.1%）**。
 * 其余是该插件为它支持的十几种版式准备的，本站一种都没用到。
 *
 * 本文件**不是把它的代码抄过来**，而是照渲染结果重写的等效实现：
 * 同样的盒模型、同样的断点行为、同样的间距。验收判据是像素比对，不是"看起来差不多"。
 *
 * 版式（与原件一致）：
 *   · 容器查询：窄于 600px 竖排居中，宽于 600px 横排左对齐
 *   · 头像不伸缩，右侧留 20px；资料区占满剩余
 *   · 标题带点线下边框；简介与上方间隔 20px
 */

.m-a-box {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.m-a-box,
.m-a-box *,
.m-a-box *::before,
.m-a-box *::after { box-sizing: border-box; }

.m-a-box-container {
  container-name: author-box-container;
  container-type: inline-size;
}

.m-a-box-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  padding: 20px;
}
.m-a-box-content-top,
.m-a-box-content-middle,
.m-a-box-content-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

.m-a-box-item { align-self: center; }

.m-a-box-avatar { flex: 0 0 auto; }
.m-a-box-avatar img {
  display: block;
  max-width: inherit !important;
  margin: 0 auto;
}
.m-a-box-avatar-url { text-decoration: none !important; }

.m-a-box-data { flex: 1 0; margin-top: 20px; }
.m-a-box-data .m-a-box-name { margin: 0; text-align: center; }
/* ⚠️ **同一条选择器，上游有两个声明，我们只抄了一个。**
   原件（molongui Pro 的 author-box.min.css）在这里写的是
   `margin:0 !important; text-align:center !important;` ——
   漏掉后一半的净效果：作者名标题被内联的 `.m-a-box-name * {text-align:left}`
   （Elementor 逐文设置，两侧都有）压回左对齐，横向偏 29px。
   除此之外一切相同（作者框高 616、文档高 2977 两侧逐值一致），
   整页只差 0.403% —— 小到很容易被读成"渲染噪声"。
   钉住它的是 `layout-diff` 报出的**唯一一个移动的元素**，
   以及去线上问 CDP「到底是哪条规则赢了」。
   ⇒ **重写一个组件时，判据不是"看起来一样"，是逐条对上游那条规则的全部声明。** */
.m-a-box-data .m-a-box-name > :first-child { margin: 0 !important; text-align: center !important; }
.m-a-box-data .m-a-box-bio { margin-top: 20px; }

.m-a-box-profile .m-a-box-content-top { width: 100%; }
.m-a-box-profile .m-a-box-content-top .m-a-box-profile-title {
  width: 100%;
  margin-bottom: 20px;
  padding-bottom: 2px;
  border-bottom: 1px dotted #333;
  font-size: 18px;
  text-align: left;
}

a.m-a-box-name-url,
a.m-icon-container,
.m-a-box-meta a { border: none; box-shadow: none; }

/* 清除浮动的辅助类，原件用 !important 压过主题样式，此处保持一致 */
.molongui-clearfix {
  display: block !important;
  width: 100% !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  clear: both !important;
}

@container author-box-container (min-width: 600px) {
  .m-a-box-content-top,
  .m-a-box-content-middle,
  .m-a-box-content-bottom { flex-direction: row; flex-wrap: nowrap; }

  .m-a-box-avatar {
    flex: 0 0 auto;
    align-self: center;
    padding: 0 20px 0 0;
    min-width: auto;
  }
  .m-a-box-data { flex: 1 0; margin-top: 0; }
  /* ⚠️ 宽屏这一档必须**用同样的强度**翻回来。
     上面那条 `> :first-child { text-align:center !important }` 是照上游抄的，
     而它在所有宽度都生效 ⇒ 只写容器上的 `text-align:left`（无 !important）
     压不过它，宽屏的作者名会被钉成居中，横向偏 +100px。
     实测：线上在 390 宽居中、在 ≥760 左对齐 —— 两档都要照着做，
     **只对上一档是"修好了一半"，而另一半此前是对的**。 */
  .m-a-box-data .m-a-box-name,
  .m-a-box-data .m-a-box-name > :first-child { text-align: left !important; }
}

/* 🔴 多作者：每位作者之间 4rem 间距，最后一位不加。
   **这两条原来整个漏抄了**，而它的后果不是"少一条规则"——
   等价对账在正确的载体页上报出 **32 条"值不同"，全是高度类，差值恒为 64px**
   （4rem @ 16px 根字号），从文章外壳一路传到每一层容器。
   ⚠️ `:last-of-type` 那条同样承重：少了它，最后一位作者下面会多出 64px 空白。
   ⚠️ 用 `rem` 不用 `px`：原件就是 `4rem`，跟随根字号 —— 换成 64px 在别的根字号下就分叉了。
   （发现它的过程本身也值得记：此前 author-box 的验证选错了载体页——
    作者**归档**页上的 molongui 标记来自文章列表，不是作者框本身，
    于是两个窄宽度报「两侧都是空差集」，**是空洞保护把选页错误顶出来的**。） */
.m-a-box-profile .m-a-box-profile-multiauthor {
  width: 100%;
  margin-bottom: 4rem;
}
.m-a-box-profile .m-a-box-profile-multiauthor:last-of-type {
  margin-bottom: 0;
}