/* =========================================================
   MandarinMiles · 工具页 / 博客页 样式
   ---------------------------------------------------------
   作用域 .mm-tools / .mm-blog（页面仍挂 .mm 设计系统作用域，
   因此 .mm .container / .mm .btn-primary / .mm .muted 等基础
   与按钮样式由 reader.css 提供）。这里只补充页面专属组件，
   配色全部取自 style.css 的 :root 令牌，保持全站一致。
   ========================================================= */

/* ---------- 通用页头（工具 / 博客共用观感） ---------- */
.mm-tools .page-head,
.mm-blog .page-head { padding: 54px 0 8px; }
.mm-tools .page-head { text-align: center; }
.mm-tools .breadcrumb,
.mm-blog .breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.mm-tools .breadcrumb a,
.mm-blog .breadcrumb a { color: var(--primary); }
.mm-tools .section-title,
.mm-blog .section-title { font-size: 38px; font-weight: 800; letter-spacing: -.02em; color: var(--primary-dark); margin: 0; }
.mm-tools .section-sub,
.mm-blog .section-sub { font-size: 16px; color: var(--muted); margin: 12px 0 0; }
.mm-tools .section-sub { max-width: 620px; margin-left: auto; margin-right: auto; }

/* ===================== Tools 页 ===================== */
.mm-tools .section { padding: 30px 0 64px; }
.mm-tools .tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mm-tools .card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 26px 24px; box-shadow: var(--shadow); }
.mm-tools .card h3 { font-size: 19px; font-weight: 800; color: var(--primary-dark); margin: 0 0 10px; }
.mm-tools .card p { font-size: 14px; color: var(--muted); margin: 0 0 16px; }
.mm-tools .tag { display: inline-block; font-size: 11.5px; font-weight: 700; background: var(--brand-tint); color: var(--primary); border-radius: 999px; padding: 3px 11px; margin: 0 6px 6px 0; }
.mm-tools .banner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--bg-grad); color: #fff; border-radius: 18px; padding: 28px 32px; margin-top: 28px; }
.mm-tools .banner h3 { font-size: 20px; font-weight: 800; margin: 0 0 6px; color: #fff; }
.mm-tools .banner p { font-size: 14px; opacity: .92; margin: 0; color: rgba(255, 255, 255, .92); }
.mm-tools .banner .btn-primary { background: var(--card); color: var(--primary); }
.mm-tools .banner .btn-primary:hover { background: var(--brand-tint); }

/* ===================== Blog 页 ===================== */
.mm-blog .blog-layout { display: grid; grid-template-columns: 1fr 300px; gap: 40px; padding-bottom: 64px; }
/* align-items: flex-start 是必须的：flex 容器默认 stretch，
   会把缩略图的 height:auto 拉成整行高度，aspect-ratio 失效（实测被拉成 120×108）。 */
.mm-blog .post-row { display: flex; align-items: flex-start; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--border); }
/* 缩略图比例：全站统一 3:2（--thumb-ratio）。原来 120×86（1.40），
   3:2 后为 120×80 —— 宽度不变、行高少 6px，画面与卡片不再有横向空档。 */
.mm-blog .post-thumb { flex: none; width: 120px; height: auto; aspect-ratio: var(--thumb-ratio); border-radius: 12px; background: linear-gradient(135deg, var(--brand-tint), #fff); }
/* 封面内容（.mm-thumb-bg / .mm-thumb-img / .mm-thumb-ph）统一由 assets/css/thumb.css 提供：
   全图 contain + 同图模糊留边；无图时补首字占位，不再是空白框。 */
.mm-blog .post-main { flex: 1; }
.mm-blog .post-meta { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.mm-blog .post-main h3 { font-size: 18px; font-weight: 800; margin: 0 0 6px; }
.mm-blog .post-main h3 a { color: var(--primary-dark); }
.mm-blog .post-main h3 a:hover { color: var(--primary); text-decoration: none; }
.mm-blog .post-main p { font-size: 14px; color: var(--muted); margin: 0; }

.mm-blog .blog-side .side-search { display: flex; gap: 10px; margin-bottom: 28px; }
.mm-blog .side-search input { flex: 1; min-width: 0; height: 42px; border: 1.5px solid var(--border); border-radius: 999px; padding: 0 14px; font-size: 14px; font-family: inherit; background: var(--card); color: var(--text); }
.mm-blog .side-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(17, 102, 240, .25); }
.mm-blog .side-title { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.mm-blog .blog-side ul a { color: var(--primary); }
.mm-blog .promo-card { position: relative; border-radius: 16px; overflow: hidden; background: var(--hero-grad); color: #fff; padding: 26px 22px; min-height: 150px; display: flex; align-items: flex-end; }
.mm-blog .promo-card h4 { font-size: 18px; font-weight: 800; margin: 0 0 6px; }
.mm-blog .promo-date { font-size: 13px; opacity: .9; margin: 0; }

/* ===================== 响应式 ===================== */
@media (max-width: 860px) {
  .mm-tools .tool-grid { grid-template-columns: 1fr; }
  .mm-blog .blog-layout { grid-template-columns: 1fr; }
  .mm-blog .post-thumb { width: 90px; height: auto; }
  .mm-tools .section-title,
  .mm-blog .section-title { font-size: 30px; }
}

/* ---------- 博客：特色图像 / 分类侧栏 / 阅读链接（home.php & blog.php） ---------- */
.mm-blog .post-thumb { overflow: hidden; }
.mm-blog .post-main h2 { font-size: 19px; font-weight: 800; margin: 0 0 6px; }
.mm-blog .post-main h2 a { color: var(--primary-dark); }
.mm-blog .post-main h2 a:hover { color: var(--primary); text-decoration: none; }
.mm-blog .post-more { font-size: 13px; font-weight: 800; color: var(--primary); }
.mm-blog .side-cats { list-style: none; padding: 0; margin: 0 0 24px; font-size: 14px; }
.mm-blog .side-cats li { margin: 6px 0; }
.mm-blog .side-cats span { color: var(--muted); font-size: 12px; }
.mm-blog .promo-card .btn-primary { margin-top: 12px; }
.mm-blog .nav-links { display: flex; gap: 6px; margin: 8px 0 40px; }
.mm-blog .nav-links a, .mm-blog .nav-links span { padding: 8px 14px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--card); font-size: 13px; font-weight: 700; color: var(--text); }
.mm-blog .nav-links .current { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---------- Tools：Live / Coming soon 标签（诚实标注，FTC/UCPD） ---------- */
.mm-tools .tag-live { background: var(--teal-tint); color: var(--accent-strong); }
.mm-tools .tag-soon { background: #F1F3F7; color: var(--muted); }
.mm-tools .card-link { font-size: 13px; font-weight: 800; color: var(--primary); }
.mm-tools .card-link:hover { text-decoration: underline; }