/* ===== Learning Center / Blog additions (built on top of style.css tokens) ===== */

.breadcrumb{
  font-family:var(--font-mono);font-size:13.4px;color:var(--mist-dim);
  padding-top:110px;letter-spacing:0.03em;
}
.breadcrumb a{color:var(--mist);}
.breadcrumb a:hover{color:var(--gold);}

/* ---- Blog index hero ---- */
/* 110px clears the fixed nav — see the note on .about-layout */
.blog-hero{padding:110px 0 var(--space-8);}
.blog-hero h1{font-size:clamp(26px, 2vw + 16px, 42.6px);line-height:1.35;max-width:760px;margin:var(--space-4) 0 var(--space-4);}
.blog-hero p{color:var(--mist);max-width:620px;font-size:17.4px;}

/* ---- category filter row (visual only, static) ---- */
.cat-row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:var(--space-7) 0 var(--space-7);}
.cat-pill{
  font-family:var(--font-mono);font-size:13.4px;color:var(--mist);
  border:1px solid var(--line-strong);padding:8px 16px;letter-spacing:0.02em;
}
.cat-pill.active{color:var(--ink);background:var(--gold);border-color:var(--gold);}

.section--flush-top{padding-top:0;}

/* ---- article card grid ---- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.post-card{
  background:var(--panel);padding:0 0 var(--space-6);display:flex;flex-direction:column;min-height:100%;
  position:relative;transition:background .2s;
}
.post-thumb{width:100%;aspect-ratio:5/2;overflow:hidden;border-bottom:1px solid var(--line);}
.post-thumb img{width:100%;height:100%;display:block;object-fit:cover;}
.post-card .p-cat,.post-card h3,.post-card .p-desc,.post-card .p-foot{padding-left:var(--space-6);padding-right:var(--space-6);}
.post-card .p-cat{margin-top:var(--space-5);}
.post-card.live:hover{background:var(--card-hi);}
.post-card .p-cat{font-family:var(--font-mono);font-size:12.3px;color:var(--gold);letter-spacing:0.08em;margin-bottom:var(--space-4);}
.post-card h3{font-size:19px;line-height:1.5;margin-bottom:var(--space-4);font-weight:600;font-family:var(--font-heading);flex-grow:1;}
.post-card .p-desc{font-size:14.6px;color:var(--mist);margin-bottom:var(--space-4);}
.post-card .p-foot{display:flex;justify-content:space-between;align-items:center;font-size:13.4px;color:var(--mist-dim);margin-top:auto;}
.badge-soon{
  font-family:var(--font-mono);font-size:11.8px;color:var(--mist-dim);
  border:1px solid var(--line-strong);padding:3px 9px;letter-spacing:0.04em;
}
.badge-live{
  font-family:var(--font-mono);font-size:11.8px;color:var(--gold);
  border:1px solid var(--gold-line);padding:3px 9px;letter-spacing:0.04em;
}
/* 指南只有四篇，三列会剩一张孤零零的卡片；两列刚好两行。 */
.post-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:1200px){.post-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:768px){.post-grid{grid-template-columns:1fr;}}

/* ---- article page ---- */
.article-header{padding:26px 0 0;max-width:820px;}
.article-header--flush{padding-top:0;max-width:100%;}
.article-header .eyebrow{margin-bottom:var(--space-4);}
.article-header h1{font-size:clamp(24px, 1.8vw + 14px, 38.1px);line-height:1.42;margin-bottom:var(--space-4);}
.article-hook{font-size:18.5px;color:var(--mist);margin-bottom:var(--space-5);}
.article-meta{display:flex;gap:var(--space-4);flex-wrap:wrap;font-family:var(--font-mono);font-size:13.4px;color:var(--mist-dim);border-top:1px solid var(--line);padding-top:var(--space-4);}

.article-hero{max-width:820px;margin:var(--space-6) 0;border:1px solid var(--line);overflow:hidden;aspect-ratio:5/2;}
.article-hero img{width:100%;height:100%;display:block;object-fit:cover;}

.article-body{max-width:760px;padding-bottom:var(--space-8);}
.article-body h2{font-size:clamp(20px, 1vw + 15px, 25.8px);margin:var(--space-8) 0 var(--space-4);line-height:1.4;}
.article-body p{color:var(--mist);font-size:17.4px;margin-bottom:var(--space-4);}
.article-body p strong{color:var(--ivory);font-weight:600;}
.article-body ul{margin:0 0 var(--space-5) 0;list-style:none;}
.article-body ul li{position:relative;padding-left:22px;color:var(--mist);font-size:16.8px;margin-bottom:var(--space-2);}
.article-body ul li::before{content:'—';position:absolute;left:0;color:var(--gold);}

.case-box{
  background:var(--card);border:1px solid var(--line);border-left:2px solid var(--gold);
  padding:var(--space-6) var(--space-6);margin:var(--space-6) 0;
}
.case-box .case-label{font-family:var(--font-mono);font-size:12.3px;color:var(--gold);letter-spacing:0.08em;margin-bottom:var(--space-3);}
.case-box p{color:var(--mist);font-size:16.2px;margin-bottom:var(--space-2);}
.case-box p:last-child{margin-bottom:0;}
.case-box strong{color:var(--ink);}
.case-box .case-note{font-size:12.9px;color:var(--mist-dim);margin-top:var(--space-3);margin-bottom:0;}

.diagram-frame{
  border:1px solid var(--line);background:var(--panel-2);
  padding:var(--space-7) var(--space-6);margin:var(--space-7) 0;
}
.diagram-frame .d-cap{font-family:var(--font-mono);font-size:12.3px;color:var(--mist-dim);letter-spacing:0.05em;margin-top:var(--space-4);text-align:center;}
.diagram-frame svg{width:100%;height:auto;display:block;}

.pull-quote{
  font-family:var(--font-heading);font-size:24.6px;color:var(--gold);
  line-height:1.6;border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line);
  padding:var(--space-7) 0;margin:var(--space-8) 0;text-align:center;
}

/* 这块 CTA 出现在三种页面上，但它在文章页和指南页是 .article-body 的兄弟节点，
   而 .article-body 的阅读栏只有 760px，外面那层 wrap 却有 1216px。不设上限的
   话，正文、引文、相关阅读都收在 760 里，只有这块横着铺满 1216，右边多出
   456px，一眼就看得出来是歪的。
   默认按阅读栏宽度收住；首页 FAQ 末尾和服务总览页那两处各自在自己的 wrap 里，
   要跟所在栏同宽，用 id 放开。 */
.article-cta{
  background:var(--gold-soft);border:1px solid var(--gold-line);
  padding:var(--space-7) var(--space-6);margin:var(--space-8) 0 8px;display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);flex-wrap:wrap;
  max-width:760px;
}
.article-cta#guides-inline{max-width:none;}
.article-cta p{color:var(--mist);font-size:15.7px;margin:0;max-width:440px;}
.article-cta h4{font-size:20.2px;color:var(--ivory);margin-bottom:var(--space-2);font-family:var(--font-heading);}

.article-nav{
  display:flex;justify-content:space-between;gap:var(--space-5);border-top:1px solid var(--line);
  padding:var(--space-7) 0;max-width:760px;flex-wrap:wrap;
}
.article-nav a{font-size:15.1px;color:var(--mist);}
.article-nav a:hover{color:var(--gold);}

.related{padding:var(--space-7) 0 var(--space-9);}
.related h4{font-family:var(--font-mono);font-size:13.4px;color:var(--mist-dim);letter-spacing:0.08em;margin-bottom:var(--space-5);text-transform:uppercase;}
.related-list{list-style:none;max-width:760px;}
.related-list li{border-top:1px solid var(--line);padding:0;font-size:16.2px;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);}
.related-list li:last-child{border-bottom:1px solid var(--line);}
.related-list li a{flex:1;padding:var(--space-4) 0;color:var(--mist);transition:color .2s;}
.related-list li a:hover{color:var(--gold);}
.related-list .related-arrow{font-size:14px;color:var(--mist-dim);white-space:nowrap;flex-shrink:0;}
.related-list li a:hover ~ .related-arrow{color:var(--gold);}

@media (max-width:768px){
  .article-cta{flex-direction:column;align-items:flex-start;}
}

/* ---- About page: story column + the US-landmarks artwork ------------
   The story runs in a 760px measure inside a 1280px wrap, which left the
   whole right-hand side empty. The artwork now lives there, stuck to the
   viewport so it stays in frame for the length of the read. */
.about-layout{
  /* the nav is fixed and paints over the page. The breadcrumb used to carry
     this clearance; with it gone the layout reserves it itself. */
  padding-top:110px;
  display:grid;
  /* Proportions taken from Alex's mock-up: the artwork holds roughly 45% of
     the content width and sits close against the measure — it carries its own
     white margin, so a wide gutter only makes it look stranded. */
  grid-template-columns:minmax(0, 1.24fr) minmax(0, 1fr);
  gap:var(--space-3);
  align-items:start;
}
.about-copy{min-width:0;}
.about-portrait{
  /* dropped to the level of the opening paragraph rather than the headline —
     the h1 wants the top of that column to itself */
  margin:var(--space-9) 0 0;min-width:0;
  position:sticky;top:110px;
  align-self:start;
}
.about-portrait picture,
.about-portrait img{display:block;width:100%;height:auto;}

@media (max-width:1024px){
  /* below this the side column is too narrow for the artwork to read —
     it moves above the story at a comfortable size instead. (1024, not 1200:
     a 1190px-wide laptop window still has room for both columns.) */
  .about-layout{grid-template-columns:minmax(0,1fr);gap:0;}
  /* stacked, it belongs above the story rather than orphaned at the foot */
  .about-portrait{position:static;order:-1;max-width:620px;margin:var(--space-4) 0 var(--space-6) 0;}
}
@media (max-width:768px){
  .about-portrait{max-width:100%;}
}