/* =========================================================
   模板一 · 星河日报站群模板
   Figma: GEO内容矩阵网站(开发) — node 2-32 / 2013-55
   设计基准宽 1920，内容区 1280(首页) / 1216(正文页)
   ========================================================= */

:root {
  --ink-strong: #3b3b3b;      /* LOGO / 卡片标题 */
  --ink-title: #404040;       /* 正文主标题/正文文字 */
  --ink-desc: #666666;        /* 卡片摘要 */
  --ink-meta: #ababab;        /* 日期/作者 */
  --ink-date: #afafaf;        /* 报头英文日期 */
  --line: rgba(0, 0, 0, 0.1); /* 分隔线 */
  --brand-red: #ef0000;       /* 推荐阅读红 */
  --media-gray: #d4d4d4;      /* 图片占位底 */
  --footer-bg: #f6f6f6;
  --content-max: 1280px;
  --paper-max: 1216px;
  --font-cn: -apple-system, BlinkMacSystemFont, "PingFang SC",
             "Source Han Sans CN", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  --font-en: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: var(--font-cn);
  color: var(--ink-title);
  background: #fff;
  line-height: 1.5;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ---------- 布局容器 ---------- */
.container { width: 100%; margin: 0 auto; }

/* 首页内容容器：中心最大 1280 */
.container--wide { max-width: var(--content-max); }

/* 正文页容器：中心最大 1216 */
.container--paper { max-width: var(--paper-max); }

/* =========================================================
   首页 · 模板一（node 2-32）
   ========================================================= */
.page-home { background: #fff; }

/* 顶栏 LOGO：与画布一致 padding 30 上/下 */
.site-header { padding: 30px 0; }
.header-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #606060;
  flex: 0 0 auto;
}
.brand-text {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.21;
  color: #606060;
  letter-spacing: 0;
}

/* 今日资讯栏目区：画布 Frame34 padding 50 上下 */
.section-today { padding: 50px 0 0; }

/* 首页两栏：左卡片区自适应 / 右栏 326，间距 80（与正文页侧栏一致） */
.home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 326px;
  gap: 80px;
  align-items: start;
}

/* 首页右栏：与左栏「今日资讯」标题同高 */
.home-aside {
  padding-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 60px;
  min-width: 0;
}

/* 首页榜单标题允许折行（最多两行），避免长标题被截断 */
.home-aside .rank-list li a {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 首页「产品推广」列表：无序号，长标题两行折行 */
.promo-list { display: flex; flex-direction: column; gap: 20px; }
.promo-list li a {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-strong);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.promo-list li a:hover { color: var(--brand-red); }

.section-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  color: #000;
  font-family: var(--font-cn);
}
.section-rule {
  margin-top: 30px;
  height: 1px;
  background: var(--line);
}

/* 卡片网格：3 列 x 413 宽，间距 ≈20
   上边距与右栏红线对齐：
   右栏 = 50(padding-top) + 33.6(标题 24×1.4) + 20(aside-block gap) = 103.6 → 红线位置
   左栏 = 50(padding-top) + 48(标题 32×1.5) = 98 → margin-top 取 6，卡片上边缘即落在红线上 */
.card-grid {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 卡片图：画布 373×209.81 圆角4，cover */
.card-media {
  display: block;
  width: 100%;
  aspect-ratio: 373 / 209.81;
  border-radius: 4px;
  overflow: hidden;
  background: var(--media-gray);
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.card:hover .card-media img { transform: scale(1.05); }

.card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.375;
  color: var(--ink-strong);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-title a:hover { color: #000; }

.card-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-meta);
}
.card-meta .dot { width: 2px; height: 2px; border-radius: 50%; background: var(--ink-meta); }

.card-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.571;
  letter-spacing: 0.01em;
  color: var(--ink-desc);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================================
   正文页 · 通用正文模版（node 2013-55）
   ========================================================= */
.page-article { background: #fff; }

/* 报头区：Frame2 padding 80 上 */
.paper-header { padding-top: 80px; }

/* masthead：左右两端 星河日报 | 日期 */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.paper-title {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.21;
  letter-spacing: -0.05em;
  color: var(--ink-strong);
  white-space: nowrap;
}
.paper-date { text-align: right; }
.paper-date-en {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  font-family: var(--font-en);
  font-size: 10px;
  line-height: 1.62;
  color: var(--ink-date);
  white-space: nowrap;
}
.paper-date p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-date);
  font-family: var(--font-cn);
  margin-top: -3px;
}

/* 报头双线：3px 主 + 4px 间距 + 1px 细 */
.header-rule { margin-top: 40px; display: flex; flex-direction: column; gap: 4px; }
.rule-thick { display: block; height: 3px; background: var(--ink-strong); }
.rule-thin { display: block; height: 1px; background: var(--ink-strong); }

/* 双栏布局：左 810 / 右 326，间距 80 */
.article-layout {
  margin-top: 65px;
  display: grid;
  grid-template-columns: 810px 1fr;
  gap: 80px;
  align-items: start;
}

.article-main {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 主图 810×484.48 */
.hero-image {
  width: 100%;
  aspect-ratio: 810 / 484.48;
  border-radius: 0;
  overflow: hidden;
  background: var(--media-gray);
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; }

/* 标题区 */
.article-title-block { display: flex; flex-direction: column; gap: 20px; }
.article-title-block h2 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-title);
}
.article-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-meta);
}

.divider { height: 1px; background: var(--line); width: 100%; }

/* 分节正文 */
/* .article-body { display: flex; flex-direction: column; gap: 32px; }
.article-body { display: flex; flex-direction: column; gap: 20px; }
.article-body h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-title);
}
.article-body p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink-title);
}
/* 首段按画布放大到 17px/1.647 */
/* .article-body.lead p { font-size: 17px; line-height: 1.647; } */ 

/* ===== 文章正文样式（完整优化版） ===== */



/* 相关内容 */
.related-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.related-box h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-title);
}
.related-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  row-gap: 20px;
}
.related-list li {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.related-list li:hover { color: var(--brand-red); cursor: pointer; }

/* ---------- 右侧栏 ---------- */
.article-aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 60px;
  min-width: 0;
}

.aside-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.aside-title { display: flex; align-items: center; gap: 8px; }
.title-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 推荐阅读 icon 红色徽记 / 猜你喜欢 透明徽记 */
.icon-red,
.icon-gray {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}
.icon-red {
  background-image: url("../img/fire.png");
  background-size: 24px 24px;
}
.icon-gray {
  background-image: url("../img/star.png");
  background-size: 24px 24px;
}

.aside-title h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: var(--ink-title);
}

/* 红色下划线：红段 130 + 灰延伸 */
.aside-underline { display: flex; width: 100%; height: 2px; }
.u-red { width: 130px; height: 2px; background: var(--brand-red); flex: 0 0 auto; }
.u-gray { flex: 1; height: 2px; background: var(--line); }

/* 排行榜 */
.rank-list { display: flex; flex-direction: column; gap: 20px; }
.rank-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.rank {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.rank-1 { background: #ee7f7f; }
.rank-2 { background: #f69e5b; }
.rank-3 { background: #ffd778; }
.rank-4, .rank-5, .rank-6, .rank-7 { background: #d9d9d9; }
.rank-list li a {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.rank-list li a:hover { color: var(--brand-red); }

/* 猜你喜欢卡片 */
.like-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.like-media {
  width: 100%;
  aspect-ratio: 326.11 / 139.76;
  border-radius: 4px;
  overflow: hidden;
  background: var(--media-gray);
}
.like-media img { width: 100%; height: 100%; object-fit: cover; }
.like-info { display: flex; flex-direction: column; gap: 5px; }
.like-info h5 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.375;
  color: var(--ink-title);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.like-info h5:hover { color: var(--brand-red); cursor: pointer; }
.like-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-meta);
}

/* ---------- 页脚 ---------- */
.site-footer {
  margin-top: 80px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--footer-bg);
}
.site-footer p {
  font-size: 10px;
  color: var(--ink-title);
}

/* =========================================================
   响应式
   ========================================================= */
@media (max-width: 1400px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1100px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  /* 首页两栏在窄屏改为上下排列 */
  .home-layout { grid-template-columns: 1fr; gap: 50px; }
  .home-aside { padding-top: 0; }
}

@media (max-width: 700px) {
  .site-header { padding: 20px 0; }
  .section-today { padding-top: 32px; }
  .section-title { font-size: 24px; }
  .card-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }

  .paper-header { padding-top: 40px; }
  .masthead { flex-direction: column; align-items: flex-start; gap: 16px; }
  .paper-date { text-align: left; }
  .paper-date-en { justify-content: flex-start; flex-wrap: wrap; }
  .paper-title { font-size: 34px; }
  .article-title-block h2 { font-size: 24px; }
  .article-body h3 { font-size: 18px; }
  .related-list { grid-template-columns: 1fr; row-gap: 14px; }
  .article-aside { gap: 40px; }
  .site-footer { margin-top: 48px; }
}

@media (max-width: 360px) {
  .paper-date-en { flex-direction: column; gap: 0; }
}
/* ===== 彻底重置正文所有样式（覆盖所有层级） ===== */

/* 1. 段落样式（无误，保留） */
.article-body p,
.article-body #js_content p,
.article-body .rich_media_content p,
.article-body section p,
#js_content.rich_media_content p {
    font-size: 18px !important;
    line-height: 1.8 !important;
    margin: 28px 0 !important;
    /* margin-block-start: 0 !important;
    margin-block-end: 0.75em !important; */
    padding: 0 !important;
    color: #3b3b3b !important;
    font-weight: 400 !important;
    font-family: inherit !important;
}

/* 2. 正文容器（保留） */
.article-body,
.article-body #js_content,
.article-body .rich_media_content,
#js_content.rich_media_content {
    font-size: 18px !important;
    line-height: 1.8 !important;
    /* max-width: 760px !important;
    margin: 0 auto !important;
    padding: 0 20px !important; */
    color: #3e3e3e !important;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

/* 3. 移除内层 section 额外边距（保留） */
.article-body section,
.article-body #js_content section,
.article-body .rich_media_content section,
#js_content.rich_media_content section {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;    /* 新增：强制占满 */
    max-width: 100% !important; /* 新增 */
}

/* ===== 4. 图片强制占满文字宽度（强化版） ===== */
/* 1. 所有可能包含图片的块级父容器强制宽度 100% */
.article-body #js_content div,
.article-body #js_content section,
.article-body #js_content figure,
.article-body #js_content p,
.article-body .rich_media_content div,
.article-body .rich_media_content section,
.article-body .rich_media_content figure,
.article-body .rich_media_content p,
#js_content.rich_media_content div,
#js_content.rich_media_content section,
#js_content.rich_media_content figure,
#js_content.rich_media_content p {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;    /* 防止某些浏览器默认最小宽度 */
    padding: 0 !important;
    margin: 28px 0 !important;
    box-sizing: border-box !important;
}

/* 2. 图片本身强制宽度 100%，覆盖内联样式 */
.article-body img,
.article-body #js_content img,
.article-body .rich_media_content img,
#js_content.rich_media_content img {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    display: block !important;
    visibility: visible !important;
    margin: 1.5em 0 !important;
    border-radius: 6px !important;
}

/* 5. 文章标题（保留） */
.article-title-block h2 {
    font-size: 38px !important;
    line-height: 1.2 !important;
}

/* 6. 响应式适配（保留） */
@media (max-width: 768px) {
    .article-body p,
    .article-body #js_content p,
    .article-body .rich_media_content p,
    #js_content.rich_media_content p {
        font-size: 16px !important;
        margin-block-end: 0.75em !important;
    }
    .article-body,
    .article-body #js_content,
    .article-body .rich_media_content,
    #js_content.rich_media_content {
        font-size: 16px !important;
        padding: 0 16px !important;
    }
    .article-title-block h2 {
        font-size: 28px !important;
    }
}

@media (max-width: 480px) {
    .article-body p,
    .article-body #js_content p,
    .article-body .rich_media_content p,
    #js_content.rich_media_content p {
        font-size: 15px !important;
    }
    .article-body,
    .article-body #js_content,
    .article-body .rich_media_content,
    #js_content.rich_media_content {
        font-size: 15px !important;
        padding: 0 12px !important;
    }
    .article-title-block h2 {
        font-size: 24px !important;
    }
}