/* ============================================================
 * blog.css — 博客模块样式（写文章入口 / 正文插图 / 多人共创）
 * 全站已取消投影：层次只用 1px 描边（--line）与半透明玻璃底来区分，
 * 本文件不写任何投影类效果。
 * 只使用 style.css 里已有的变量：--ink --ink-soft --muted --line
 * --brand --brand-strong --brand-line --brand-soft --r-sm --r-md --radius
 * ============================================================ */

/* ---- 「写文章」入口 ---- */
.blog-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.blog-head-text {
  min-width: 0;
}

.blog-masthead-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.blog-write-btn {
  flex: none;
  white-space: nowrap;
}

/* 窄屏下按钮里的文字一律不折行 */
.blog-nowrap {
  white-space: nowrap;
}

/* ---- 共创标记 ---- */
.blog-coauthor-tag {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--brand-line);
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 11.5px;
  line-height: 1.7;
  white-space: nowrap;
}

/* ---- 通用提示条（如「忽略了哪些用户名」） ---- */
.blog-note {
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--brand-line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

/* ---- 文章署名（作者 / 共创）---- */
.blog-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  font-size: 14px;
  line-height: 1.7;
}

.blog-byline-multi {
  border-color: var(--brand-line);
  background: var(--brand-soft, rgba(94, 212, 173, .12));
}

.blog-byline-role {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--chip-bg, rgba(0, 0, 0, .06));
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .5px;
}

.blog-byline-role-co {
  background: var(--brand);
  color: #fff;
}

.blog-byline-name {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

a.blog-byline-name:hover {
  color: var(--brand);
  text-decoration: underline;
}

.blog-byline-name-co {
  color: var(--brand-ink, var(--brand));
}

.blog-byline-plus,
.blog-byline-sep {
  color: var(--muted);
}

.blog-byline-names {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.blog-byline-tip {
  color: var(--muted);
  font-size: 12.5px;
}

/* ---- 被点名者的确认条 ---- */
.blog-invite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
}

.blog-invite-text {
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.blog-invite-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* ---- 正文插图 ---- */
.blog-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.blog-toolbar .btn {
  margin: 0;
}

.blog-toolbar-tip {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

/* ---- 封面图 ---- */
.blog-cover {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
}

.blog-cover-img {
  display: block;
  width: 168px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

/* 让 hidden 属性说话。.blog-cover-img 写了 display: block、按钮是 .btn（inline-flex），
   都会压过浏览器对 [hidden] 的默认 display: none——没选封面时便露出一个 16:9 的空框，
   src 为空还会按当前页地址去取图，于是显示成破图。与 .shop-cover-preview[hidden] 同一写法。 */
.blog-cover-img[hidden],
.blog-cover-actions [hidden] {
  display: none;
}

.blog-cover-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---- 点名共创 ---- */
.blog-coauthor-box input {
  max-width: 520px;
}

/* ---- 窄屏（≤620px）：不横向溢出，按钮不折行 ---- */
@media (max-width: 620px) {
  .blog-head-row {
    align-items: flex-start;
  }

  .blog-masthead-actions {
    justify-content: flex-start;
  }

  .blog-invite,
  .blog-cover {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-cover-img {
    width: 100%;
  }

  .blog-invite-actions,
  .blog-cover-actions,
  .blog-toolbar {
    width: 100%;
  }

  .blog-toolbar-tip {
    flex-basis: 100%;
  }
}