/* AIBID 内容层样式：首页最新文章区、Blog 列表页、文章详情页。
 *
 * ⚠️ 字号说明：设计稿里这些块是 7.5–9px，那是画板尺度。站内实测基准是
 *    正文 ≥10.5px、可点元素 ≥11px（低于此 Google 判「文字太小无法阅读」）。
 *    这里按基准写，不照抄画板数值。
 * ⚠️ 长串保护：跟 seo.css 同理 —— 德语复合词/长 URL 会撑破卡片，
 *    结构上用 overflow-wrap 封死，不靠「文案别写太长」。
 */

/* ── 首页：最新文章 ────────────────────────────────────── */
.home-news{
  margin:30px 0 24px;
  border-top:1px solid #ebe5df;
  padding-top:26px;
}
.home-news-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  margin-bottom:14px;
}
.home-news-head .k{
  font-size:10px;
  font-weight:800;
  letter-spacing:.13em;
  color:#ff6813;
}
.home-news-head h2{
  margin:7px 0 5px;
  font-size:22px;
  line-height:1.14;
  letter-spacing:-.035em;
}
.home-news-head p{
  margin:0;
  font-size:11px;
  line-height:1.6;
  color:#7d746d;
  max-width:60ch;
}
.home-news-more{
  flex:none;
  border:1px solid #e8e1db;
  background:#fff;
  border-radius:999px;
  padding:9px 15px;
  font-size:11px;
  font-weight:700;
  color:#4a443f;
  font-family:inherit;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
}
.home-news-more:hover{border-color:#ff6813;color:#ff6813}
.home-news-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;
}
.home-news-card{
  display:flex;
  flex-direction:column;
  border:1px solid #e9e2dc;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.home-news-card:hover{
  border-color:#f0c8ab;
  box-shadow:0 10px 26px -18px rgba(120,53,15,.4);
  transform:translateY(-1px);
}
.home-news-thumb{
  aspect-ratio:16/9;
  background:linear-gradient(135deg,#fdf3ec,#f6efe9);
  display:grid;
  place-items:center;
  font-size:10px;
  font-weight:700;
  color:#c9b8a9;
  overflow:hidden;
}
.home-news-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.home-news-copy{padding:12px}
.home-news-meta{
  font-size:10px;
  color:#a19891;
  margin-bottom:6px;
}
.home-news-copy h3{
  margin:0 0 7px;
  font-size:12.5px;
  line-height:1.38;
  letter-spacing:-.01em;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.home-news-copy p{
  margin:0;
  font-size:11px;
  line-height:1.58;
  color:#7f766f;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.home-news-link{
  display:inline-block;
  margin-top:9px;
  font-size:11px;
  font-weight:750;
  color:#ff6813;
}

/* ── Blog 列表页 ──────────────────────────────────────── */
.blog-hero{
  border:1px solid #e8ded6;
  border-radius:18px;
  background:radial-gradient(circle at 84% 10%,rgba(255,104,19,.10),transparent 28%),
             linear-gradient(135deg,#fff8f3 0%,#fff 62%);
  padding:22px 24px;
}
.blog-hero .k{font-size:10px;font-weight:800;letter-spacing:.13em;color:#ff6813}
.blog-hero h1{margin:8px 0 9px;font-size:30px;line-height:1.08;letter-spacing:-.04em}
.blog-hero p{margin:0;max-width:70ch;font-size:12px;line-height:1.65;color:#7d746d}

.blog-filterbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:20px 0 12px;
  flex-wrap:wrap;
}
.blog-filterbar h2{margin:0;font-size:15px;letter-spacing:-.02em}
.blog-chips{display:flex;gap:6px;flex-wrap:wrap}
.blog-chip{
  border:1px solid #e8e1db;
  background:#fff;
  border-radius:999px;
  padding:7px 11px;
  font-size:11px;
  color:#6d655e;
  text-decoration:none;
  white-space:nowrap;
}
.blog-chip:hover{border-color:#f0c8ab;color:#ff6813}
.blog-chip.active{background:#171717;border-color:#171717;color:#fff}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.blog-empty{
  grid-column:1/-1;
  border:1px dashed #ded6cf;
  border-radius:14px;
  background:#fff;
  padding:34px 22px;
  text-align:center;
}
.blog-empty strong{display:block;font-size:13px;margin-bottom:6px}
.blog-empty span{display:block;max-width:52ch;margin:0 auto;font-size:11px;line-height:1.6;color:#968d86}

/* ── 文章详情 ─────────────────────────────────────────── */
.article-shell{max-width:720px;margin:0 auto}
.article-crumb{font-size:11px;color:#9c938c;margin-bottom:10px}
.article-crumb a{color:#9c938c}
.article-crumb a:hover{color:#ff6813}
.article-shell h1{
  margin:0 0 12px;
  font-size:clamp(26px,4.4vw,38px);
  line-height:1.08;
  letter-spacing:-.04em;
}
.article-dek{margin:0 0 14px;font-size:13.5px;line-height:1.62;color:#6b635d}
.article-meta{font-size:11px;color:#a19891;margin-bottom:18px}
.article-hero{
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(135deg,#fdf3ec,#f6efe9);
  display:grid;
  place-items:center;
  color:#c9b8a9;
  font-size:12px;
  margin-bottom:22px;
}
.article-hero img{width:100%;height:100%;object-fit:cover;display:block}
.article-body{font-size:14px;line-height:1.75;color:#2a2522}
.article-body h2{margin:26px 0 9px;font-size:17px;letter-spacing:-.02em}
.article-body p{margin:0 0 14px}
.article-body ul,.article-body ol{margin:0 0 14px;padding-inline-start:20px}
.article-body li{margin:0 0 6px}
.article-body a{color:#ff6813;text-decoration:underline}

.article-related{margin-top:30px;border-top:1px solid #efece6;padding-top:18px}
.article-related h2{margin:0 0 11px;font-size:14px;letter-spacing:-.02em}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.related-item{
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid #e9e2dc;
  background:#fff;
  border-radius:12px;
  padding:11px;
  text-decoration:none;
  color:inherit;
  font-size:11.5px;
  font-weight:650;
}
.related-item:hover{border-color:#f0c8ab}
.related-item img{width:26px;height:26px;border-radius:7px;flex:none;object-fit:cover}
.related-item .go{margin-inline-start:auto;color:#ff6813;font-size:11px;flex:none}

.article-sources{margin-top:26px;border-top:1px solid #efece6;padding-top:16px}
.article-sources h2{margin:0 0 9px;font-size:13px;letter-spacing:-.02em}
.article-sources a{font-size:11.5px;color:#6b635d;text-decoration:underline;overflow-wrap:anywhere}
.article-sources a:hover{color:#ff6813}

/* 长串保护：德语复合词 / 长 URL 撑破卡片是结构问题，不是文案问题 */
.home-news-copy h3,.home-news-copy p,.home-news-meta,
.blog-hero h1,.blog-hero p,.blog-chip,
.article-shell h1,.article-dek,.article-body,.related-item{
  overflow-wrap:anywhere;
}

/* ── 深色模式 ─────────────────────────────────────────── */
body[data-dark="1"] .home-news{border-top-color:#2c2823}
body[data-dark="1"] .home-news-card,
body[data-dark="1"] .related-item,
body[data-dark="1"] .blog-chip,
body[data-dark="1"] .home-news-more{background:#1c1a17;border-color:#2f2a25;color:#e7e1da}
body[data-dark="1"] .home-news-copy p,
body[data-dark="1"] .home-news-meta,
body[data-dark="1"] .blog-hero p{color:#9d948b}
body[data-dark="1"] .blog-hero,
body[data-dark="1"] .article-hero,
body[data-dark="1"] .home-news-thumb{
  background:linear-gradient(135deg,#221e1a,#1a1815);
  border-color:#2f2a25;
}
body[data-dark="1"] .article-body{color:#e7e1da}
body[data-dark="1"] .blog-chip.active{background:#ff6813;border-color:#ff6813;color:#fff}

.home-news-card:focus-visible,.blog-chip:focus-visible,
.home-news-more:focus-visible,.related-item:focus-visible{
  outline:2px solid #ff6813;
  outline-offset:2px;
}

/* ── 响应式 ───────────────────────────────────────────── */
@media(max-width:1000px){
  .home-news-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .home-news{margin:24px 0 20px;padding-top:22px}
  .home-news-head{display:block}
  .home-news-head h2{font-size:18px}
  .home-news-more{margin-top:10px;display:inline-block}
  .home-news-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .home-news-copy{padding:10px}
  .home-news-copy h3{font-size:11.5px}
  .home-news-copy p{font-size:10.5px;-webkit-line-clamp:3}
  .blog-hero{padding:17px;border-radius:15px}
  .blog-hero h1{font-size:23px}
  .blog-filterbar{display:block}
  .blog-chips{margin-top:10px}
  .blog-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .article-body{font-size:13.5px}
}