/* =========================================================
   style.css —— 响应式博客样式
   ========================================================= */

:root {
  --primary: #2f77e7;
  --primary-dark: #1f5fd0;
  --text: #1f2430;
  --text-2: #5a6472;
  --muted: #8b94a3;
  --bg: #f4f6fa;
  --card: #ffffff;
  --border: #e6eaf1;
  --radius: 12px;
  --shadow-sm: 0 1px 3px rgba(20, 30, 50, .06);
  --shadow-md: 0 6px 18px rgba(20, 30, 50, .10);
  --maxw: 1080px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--primary-dark); text-decoration: none; }
img { max-width: 100%; height: auto; border: 0; }

/* ---------------- 通用容器 ---------------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px;
}

/* ---------------- 头部 ---------------- */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
header .logo { display: flex; align-items: center; flex: 0 0 auto; }
header .logo svg { height: 34px; width: auto; display: block; }
header .site-name { display: flex; align-items: center; color: var(--text); }
header .site-name h1,
header .site-name p {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
}

/* ---------------- 广告 / 头图 ---------------- */
.article-img {
  max-width: var(--maxw);
  margin: 16px auto 0;
  padding: 0 16px;
}
.article-img img {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ---------------- 文章列表（带缩略图） ---------------- */
ul.article-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
ul.article-list > li {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 10px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .22s ease, transform .22s ease;
}
ul.article-list > li:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* 缩略图 */
.thumb {
  flex: 0 0 130px;
  width: 130px;
  height: 88px;
  border-radius: 9px;
  overflow: hidden;
  background: #e9edf3;
  display: block;
  position: relative;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.thumb:hover img { transform: scale(1.06); }

/* 文字区 */
.item-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.item-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item-title a { color: inherit; }
.item-title a:hover { color: var(--primary); }
.item-meta {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
}
.item-meta a { color: var(--primary); }

/* 宽屏两列 */
@media (min-width: 880px) {
  ul.article-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  ul.article-list > li { padding: 12px; }
  .thumb { flex-basis: 148px; width: 148px; height: 98px; }
  .item-title { font-size: 17px; }
}

/* 小屏 */
@media (max-width: 480px) {
  body { font-size: 14.5px; }
  .thumb { flex-basis: 98px; width: 98px; height: 68px; }
  .item-title { font-size: 15px; -webkit-line-clamp: 3; }
  header .site-name h1,
  header .site-name p { font-size: 17px; }
  header .logo svg { height: 28px; }
}

/* ---------------- 面包屑 ---------------- */
.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  font-size: 13px;
  color: var(--muted);
}
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before {
  content: "/";
  margin: 0 8px 0 2px;
  color: #c9ced6;
}
.breadcrumb li a { color: var(--muted); }
.breadcrumb li a:hover { color: var(--primary); }

/* ---------------- 正文 ---------------- */
.content {
  margin-top: 16px;
  padding: 18px 16px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow-wrap: break-word;
  word-break: break-word;
}
.content h1 {
  margin: 0 0 12px;
  font-size: 21px;
  line-height: 1.45;
}
.content .meta-line {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--muted);
}
.content .meta-line a { color: var(--primary); }

.qa-item {
  margin: 14px 0;
  padding: 14px 16px;
  background: #fbfcfe;
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow-sm);
}
.qa-item .question {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.5;
  color: #1b4fa8;
}
.qa-item .answer { margin: 0; color: var(--text-2); }
.qa-item img { margin: 10px 0; border-radius: 10px; }

@media (min-width: 880px) {
  .content { padding: 26px 30px; }
  .content h1 { font-size: 25px; }
  .qa-item .question { font-size: 18px; }
}

/* ---------------- 侧栏区块 ---------------- */
.related-categories,
.recent-articles {
  margin-top: 16px;
  padding: 16px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.related-categories h2,
.recent-articles h2 {
  margin: 0 0 12px;
  font-size: 16px;
  padding-left: 10px;
  border-left: 4px solid var(--primary);
  line-height: 1.3;
}
.related-categories ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.related-categories ul li a {
  display: inline-block;
  padding: 5px 12px;
  font-size: 13.5px;
  background: #eef3fd;
  border-radius: 999px;
  color: var(--primary);
}
.related-categories ul li a:hover { background: var(--primary); color: #fff; }

.recent-articles ul.article-list { margin-top: 0; }
.recent-articles ul.article-list > li { padding: 8px; }
.recent-articles .thumb { flex-basis: 92px; width: 92px; height: 62px; }
.recent-articles .item-title { font-size: 14.5px; -webkit-line-clamp: 2; }
@media (min-width: 880px) {
  .recent-articles ul.article-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recent-articles .thumb { flex-basis: 110px; width: 110px; height: 74px; }
}

/* ---------------- 表单页 ---------------- */
.form-page h1 {
  max-width: 680px;
  margin: 20px auto 0;
  padding: 0 16px;
  font-size: 20px;
  line-height: 1.5;
}
.form-page .msg {
  max-width: 680px;
  margin: 12px auto 0;
  padding: 0 16px;
  font-size: 14px;
}
.form-page .page-link {
  max-width: 680px;
  margin: 10px auto 0;
  padding: 0 16px;
  font-size: 14px;
  color: var(--text-2);
  overflow-wrap: break-word;
}
.form-page form {
  max-width: 680px;
  margin: 16px auto 0;
  padding: 20px 16px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.form-page form p { margin: 0 0 16px; }
.form-page label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
}
.form-page input[type="text"],
.form-page input[type="number"],
.form-page textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: #fbfcfe;
  border: 1px solid var(--border);
  border-radius: 9px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-page textarea { resize: vertical; min-height: 110px; line-height: 1.7; }
.form-page input:focus,
.form-page textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(47, 119, 231, .12);
}
.form-page button {
  display: inline-block;
  padding: 11px 30px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: background .2s, transform .1s;
}
.form-page button:hover { background: var(--primary-dark); }
.form-page button:active { transform: scale(.98); }

/* ---------------- 页脚 ---------------- */
footer {
  max-width: var(--maxw);
  margin: 24px auto 0;
  padding: 20px 16px 28px;
  text-align: center;
  font-size: 13px;
  line-height: 2;
  color: var(--muted);
}
footer a { color: var(--muted); }
footer a:hover { color: var(--primary); }

/* ---------------- 打印 ---------------- */
@media print {
  header, footer, .article-img, .related-categories, .recent-articles { display: none; }
  body { background: #fff; }
}