/*
 * 杂志主题样式
 *
 * 视觉刻意与默认主题拉开距离（深色报头、红色强调、通栏卡片网格、无侧边栏），
 * 便于后台切换模板时肉眼验证。
 * 性能约定与默认主题一致：图片 aspect-ratio 锁位防 CLS，首屏图 eager+high。
 */

:root {
    --zq-ink: #16181d;
    --zq-paper: #ffffff;
    --zq-muted: #6b7280;
    --zq-line: #e6e6e6;
    --zq-accent: #c62828;
    --zq-radius: 4px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #f5f5f5;
    color: var(--zq-ink);
    font: 16px/1.7 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
        -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--zq-accent);
}

img {
    max-width: 100%;
    height: auto;
}

.wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    left: 8px;
    top: 8px;
    z-index: 99;
    padding: 8px 14px;
    background: var(--zq-ink);
    color: #fff;
}

/* ── 报头 ───────────────────────────────────────────── */

.masthead {
    background: var(--zq-ink);
    color: #fff;
}

.masthead__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 16px;
    padding: 22px 16px 18px;
}

.masthead__logo {
    display: flex;
    align-items: center;
    height: 44px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 1px;
}

.masthead__logo img {
    max-height: 44px;
    width: auto;
}

.masthead__tagline {
    margin: 0;
    color: #b9bdc6;
    font-size: 14px;
}

.ribbon {
    border-top: 1px solid #2c2f36;
    background: var(--zq-ink);
}

.ribbon__list {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ribbon__link {
    display: block;
    padding: 12px 16px;
    color: #e8eaee;
    font-size: 15px;
}

.ribbon__link:hover {
    color: #fff;
}

.ribbon__link.active {
    color: #fff;
    box-shadow: inset 0 -3px 0 var(--zq-accent);
}

/* ── 主体 ───────────────────────────────────────────── */

.main {
    padding: 24px 16px 56px;
}

.home-title {
    margin: 8px 0 24px;
    font-size: 30px;
    letter-spacing: 1px;
}

.page-head {
    margin-bottom: 8px;
}

.page-title {
    margin: 8px 0 12px;
    font-size: 32px;
    line-height: 1.3;
}

.page-intro {
    margin: 0 0 28px;
    color: var(--zq-muted);
}

.block {
    margin-bottom: 40px;
}

.block__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-size: 20px;
}

.block__title::before {
    content: "";
    width: 4px;
    height: 20px;
    background: var(--zq-accent);
}

/* ── 头条 ───────────────────────────────────────────── */

.hero {
    display: grid;
    gap: 0;
    overflow: hidden;
    border-radius: var(--zq-radius);
    background: var(--zq-paper);
}

@media (min-width: 820px) {
    .hero {
        grid-template-columns: 1.2fr 1fr;
    }
}

.hero__thumb {
    display: block;
    background: #eee;
}

/* 比例锁死：与模板 width=1200 height=675 一致 */
.hero__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 240px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.hero__body {
    padding: 22px 24px;
}

.hero__kicker {
    margin: 0 0 10px;
    color: var(--zq-accent);
    font-size: 13px;
    font-weight: 700;
}

.hero__title {
    margin: 0 0 12px;
    font-size: 26px;
    line-height: 1.4;
}

.hero__excerpt {
    margin: 0;
    color: #45484f;
}

/* ── 卡片网格 ───────────────────────────────────────── */

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 620px) {
    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 980px) {
    .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--zq-radius);
    background: var(--zq-paper);
}

.card__thumb {
    display: block;
    background: #eee;
}

/* 比例锁死：与模板 width=640 height=360 一致 */
.card__thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 18px 18px;
}

.card__cat {
    margin: 0 0 8px;
    color: var(--zq-accent);
    font-size: 12px;
    font-weight: 700;
}

.card__title {
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.5;
}

.card__excerpt {
    margin: 0 0 12px;
    color: #55585f;
    font-size: 14px;
}

.card__meta {
    display: flex;
    gap: 14px;
    margin: auto 0 0;
    color: #9aa0a6;
    font-size: 13px;
}

/* ── 文章页 ─────────────────────────────────────────── */

.article {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 20px 32px;
    border-radius: var(--zq-radius);
    background: var(--zq-paper);
}

.article__cat {
    margin: 0 0 10px;
    color: var(--zq-accent);
    font-size: 13px;
    font-weight: 700;
}

.article__title {
    margin: 0 0 14px;
    font-size: 30px;
    line-height: 1.4;
}

.article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--zq-line);
    color: var(--zq-muted);
    font-size: 14px;
}

.article__cover {
    margin: 0 0 24px;
    overflow: hidden;
    border-radius: var(--zq-radius);
    background: #eee;
}

/* 比例锁死：与模板 width=1200 height=675 一致 */
.article__cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.entry-content {
    font-size: 17px;
    line-height: 1.95;
    word-wrap: break-word;
}

.entry-content h2 {
    margin: 34px 0 16px;
    padding-left: 10px;
    border-left: 4px solid var(--zq-accent);
    font-size: 22px;
}

.entry-content h3 {
    margin: 26px 0 12px;
    font-size: 19px;
}

.entry-content p {
    margin: 0 0 18px;
}

.entry-content blockquote {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-left: 4px solid var(--zq-line);
    background: #fafafa;
    color: var(--zq-muted);
}

.entry-content pre {
    padding: 14px 16px;
    overflow-x: auto;
    border-radius: var(--zq-radius);
    background: var(--zq-ink);
    color: #e7e9ec;
}

.article-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--zq-line);
}

.article-nav__link {
    display: flex;
    flex-direction: column;
    max-width: 48%;
    font-size: 14px;
}

.article-nav__link--next {
    text-align: right;
    margin-left: auto;
}

.article-nav__label {
    color: var(--zq-muted);
    font-size: 12px;
}

.article-nav__title {
    font-weight: 600;
}

/* ── 面包屑 ─────────────────────────────────────────── */

.crumbs {
    padding: 12px 0 4px;
}

.crumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--zq-muted);
}

.crumbs__item + .crumbs__item::before {
    content: "›";
    margin-right: 8px;
    color: #b0b4bb;
}

/* ── 分页 ───────────────────────────────────────────── */

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 28px;
}

.pagination__link,
.pagination__current,
.pagination__off,
.pagination__gap {
    min-width: 38px;
    padding: 7px 12px;
    border: 1px solid var(--zq-line);
    border-radius: var(--zq-radius);
    background: #fff;
    font-size: 14px;
    text-align: center;
}

.pagination__current {
    border-color: var(--zq-accent);
    background: var(--zq-accent);
    color: #fff;
}

.pagination__off,
.pagination__gap {
    border-color: transparent;
    background: transparent;
    color: #9aa0a6;
}

/* ── 页脚 ───────────────────────────────────────────── */

.colophon {
    padding: 36px 0 0;
    background: var(--zq-ink);
    color: #c3c7cf;
    font-size: 14px;
}

.colophon__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 28px;
}

@media (min-width: 800px) {
    .colophon__inner {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }
}

.colophon__title {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #2c2f36;
    color: #fff;
    font-size: 16px;
}

.colophon__text {
    margin: 0 0 8px;
}

.rank {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: rank;
}

.rank__item {
    counter-increment: rank;
    padding: 8px 0;
    border-bottom: 1px dashed #2c2f36;
}

.rank__item:last-child {
    border-bottom: 0;
}

.rank__item::before {
    content: counter(rank);
    display: inline-block;
    width: 22px;
    margin-right: 8px;
    color: var(--zq-accent);
    font-weight: 700;
}

.rank--plain .rank__item::before {
    content: "·";
    width: auto;
    margin-right: 6px;
    color: #7f858e;
}

.rank__item a:hover {
    color: #fff;
}

.colophon__bottom {
    padding: 16px;
    border-top: 1px solid #2c2f36;
    text-align: center;
    font-size: 13px;
}

.colophon__copy {
    margin: 0;
}

/* ── 404 ────────────────────────────────────────────── */

.notfound__back {
    margin: 0 0 32px;
}

.btn {
    display: inline-block;
    padding: 11px 22px;
    border-radius: var(--zq-radius);
    background: var(--zq-accent);
    color: #fff;
}

.btn:hover {
    opacity: 0.9;
    color: #fff;
}

/* ── 标签云 ────────────────────────────────────────────── */

.tag-cloud {
    margin: 0 0 24px;
}

.tag-cloud__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tag-cloud__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--zq-line);
    border-radius: 999px;
    color: var(--zq-ink);
    font-size: 14px;
}

.tag-cloud__link:hover {
    border-color: var(--zq-accent);
    color: var(--zq-accent);
}

.tag-cloud__link.active {
    background: var(--zq-accent);
    border-color: var(--zq-accent);
    color: #fff;
}

.tag-cloud__count {
    color: var(--zq-muted);
    font-size: 12px;
}

.tag-cloud__link.active .tag-cloud__count {
    color: #f3d0d0;
}

/* ── 栏目专题富内容块（移植自 saas 主题，复用杂志配色）── */
.section { padding: 36px 0; }
.section__title { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 22px; }
.section__title::before { content: ""; width: 4px; height: 22px; background: var(--zq-accent); }
.section__lead { max-width: 760px; margin: 0 0 24px; color: var(--zq-muted); font-size: 15px; }

.steps__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.step-card { background: var(--zq-paper); border: 1px solid var(--zq-line); border-radius: var(--zq-radius); padding: 22px 20px; }
.step-card__num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: var(--zq-accent); color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 12px; }
.step-card__title { margin: 0 0 8px; font-size: 17px; color: var(--zq-ink); }
.step-card__desc { margin: 0; color: var(--zq-muted); font-size: 14px; line-height: 1.7; }

.advantage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.advantage-card { background: var(--zq-paper); border: 1px solid var(--zq-line); border-top: 3px solid var(--zq-accent); border-radius: var(--zq-radius); padding: 22px 20px; }
.advantage-card__title { margin: 0 0 8px; font-size: 17px; color: var(--zq-ink); }
.advantage-card__desc { margin: 0; color: var(--zq-muted); font-size: 14px; line-height: 1.7; }

.cat-effects { background: #f5f5f5; border-top: 1px solid var(--zq-line); border-bottom: 1px solid var(--zq-line); }
.effects-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.effect-card { background: var(--zq-paper); border: 1px solid var(--zq-line); border-radius: var(--zq-radius); padding: 20px; text-align: center; }
.effect-card__value { display: block; font-size: 26px; font-weight: 700; color: var(--zq-accent); }
.effect-card__label { display: block; color: var(--zq-muted); font-size: 13px; margin-top: 2px; }
.effect-card__desc { margin: 10px 0 0; color: var(--zq-muted); font-size: 13px; line-height: 1.6; }

.scenario-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.scenario-card { background: var(--zq-paper); border: 1px solid var(--zq-line); border-radius: var(--zq-radius); padding: 20px; }
.scenario-card__title { margin: 0 0 8px; font-size: 16px; color: var(--zq-ink); }
.scenario-card__desc { margin: 0; color: var(--zq-muted); font-size: 14px; line-height: 1.7; }

.faq__list { display: flex; flex-direction: column; gap: 10px; }
.faq__item { background: var(--zq-paper); border: 1px solid var(--zq-line); border-radius: var(--zq-radius); padding: 4px 16px; }
.faq__q { cursor: pointer; padding: 14px 0; font-weight: 600; color: var(--zq-ink); position: relative; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--zq-accent); }
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__a { padding: 0 0 16px; color: var(--zq-muted); font-size: 14px; line-height: 1.8; }

/* ── 富内容块 移动端适配 ── */
@media (max-width: 900px) {
    .steps__list, .advantage-grid, .effects-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .steps__list, .advantage-grid, .effects-grid, .scenario-grid { grid-template-columns: 1fr; }
    .section { padding: 28px 0; }
}

/* ⚠️ 手改追加段（2026-09-16 s81 · 网格末行居中）
   原 .steps__list/.advantage-grid/.effects-grid 为固定列数 grid（3/3/4 列），
   n 非列数整数倍时末行靠左留空（实测 5 项→末行 2 项、4 项→末行 1 项，右侧空一整格）。
   改 flex + justify-content:center 后末行居中；n 为整行倍数时视觉零变化。
   重跑 scripts/build_theme_css.py 重建本文件时需保留本段。 */
.steps__list, .advantage-grid, .effects-grid,
.scenario-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.steps__list, .advantage-grid { gap: 18px; }
/* ⚠️ 2026-09-17 修正：这里原本写成 `.steps__list, .advantage-grid, .effects-grid { gap: 18px }`，
   把基线为 16px 的 effects-grid 间距覆盖成 18px，而下方 calc 仍按 48(=3×16) 计算，
   4 个卡片的总宽比容器多 6px → 4 列被挤成 3 列 + 1 列（/moments-ad、/continuous-reach、
   /case 三页实测 cols 4 → 3）。移除 effects-grid 后 gap 回落基线 16px，4 列恢复。 */
.scenario-grid { gap: 16px; }
.steps__list > *, .advantage-grid > * {
    flex: 0 1 calc((100% - 36px) / 3); max-width: calc((100% - 36px) / 3); min-width: 0;
}
.effects-grid > * {
    flex: 0 1 calc((100% - 48px) / 4); max-width: calc((100% - 48px) / 4); min-width: 0;
}
.scenario-grid > * {
    flex: 0 1 calc((100% - 16px) / 2); max-width: calc((100% - 16px) / 2); min-width: 0;
}
@media (max-width: 900px) {
    .steps__list > *, .advantage-grid > *, .effects-grid > * {
        flex: 0 1 calc((100% - 18px) / 2); max-width: calc((100% - 18px) / 2);
    }
}
@media (max-width: 600px) {
    .steps__list > *, .advantage-grid > *, .effects-grid > *, .scenario-grid > * {
        flex: 0 1 100%; max-width: 100%;
    }
}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:inherit}
@media (max-width:720px){
  .ribbon .wrap{display:flex;justify-content:flex-end;align-items:center}
  .nav-toggle{display:block}
  .ribbon__list{display:none}
  .ribbon{position:relative}
  .ribbon__list.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--zq-ink);box-shadow:0 12px 30px rgba(0,0,0,.2);z-index:60}
  .ribbon__list.open .ribbon__item a{padding:13px 16px;border-top:1px solid rgba(255,255,255,.08)}
  .ribbon__list.open .ribbon__item:first-child a{border-top:0}
}