/* ============================================================
   df-single.css — Single post page styles, mirroring df-resources design
   Loaded in <head> so all styling applies BEFORE body renders.
   NO FOUC. Visual language = /resources page.
   ============================================================ */

/* Apply .df-resources design tokens to article wrapper */
.df-article{
  --ink:#0a0a0a; --ink-soft:#161616;
  --paper:#f6f6f4; --paper-2:#efefec;
  --line:#e1e1dd; --line-strong:#cfcfca;
  --muted:#6f6f6a; --muted-2:#9a9a94;
  --maxw:1200px;
  --pad-x:clamp(1.25rem,5vw,4rem);
  --sec-y:clamp(3.5rem,8vw,6.5rem);
  --ease:cubic-bezier(.16,1,.3,1);
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --display:"Archivo",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-family:var(--body);color:var(--ink);line-height:1.6;font-size:clamp(15px,1.05vw,17px);-webkit-font-smoothing:antialiased;
}
.df-article *{box-sizing:border-box}
.df-article img,.df-article svg{display:block;max-width:100%}
.df-article a{color:inherit;text-decoration:none}
.df-article ::selection{background:var(--ink);color:#fff}

/* ── Hide default FSE single-post chrome ── */
body.single .wp-block-cover{display:none !important}
body.single .thryvewp-single-post-image{display:none !important}
body.single .wp-block-post-comments-form{display:none !important}
body.single .wp-block-post-author{display:none !important}
body.single .wp-block-post-date{display:none !important}

/* ============================================================
   HERO — match /resources hero (black band, grid layout)
   ============================================================ */
.df-article .hero{background:var(--ink); color:#fff; overflow:hidden; padding-block:clamp(1.3rem,3.1vw,2.5rem); width:100%; margin:0}
.df-article .hero .wrap{max-width:1200px; margin-inline:auto; padding-inline:var(--pad-x); display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(1.3rem,3.3vw,2.7rem); align-items:center}
.df-article .hero .eyebrow{font-family:var(--mono); font-size:.55rem; letter-spacing:.22em; text-transform:uppercase; color:#b9b9b4; display:inline-flex; align-items:center; gap:.7rem; margin-bottom:.7rem}
.df-article .hero .eyebrow::before{content:""; width:34px; height:1px; background:#fff}
.df-article .hero h1{font-family:var(--display); font-weight:700; font-size:clamp(1.4rem,3.3vw,2.4rem); line-height:1.08; letter-spacing:-.02em; max-width:24ch; margin:0 0 .5rem; color:#fff}
.df-article .hero .lead{font-size:clamp(.7rem,1vw,.85rem); color:#e2e2de; line-height:1.4; max-width:72ch; margin:0}
.df-article .hero .meta{display:none}

/* Hero aside */
.df-article .hero-aside{border-left:1px solid rgba(255,255,255,.18); padding-left:clamp(.8rem,2vw,1.6rem)}
.df-article .hero-aside img{display:none}
.df-article .hero-aside .cap{display:none}
/* === 2026-08-25: 文章页 hero 右侧占位图（CSS 背景图。后台插入真 img 后会被 img 覆盖） === */
.df-article .hero-aside{
  background-image:url(/wp-content/uploads/2026/08/machines.jpg);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  min-height:clamp(180px,28vw,300px);
  border-left:0; padding-left:0; border-radius:8px;
}
@media(max-width:768px){
  .df-article .hero-aside{border-top:0; padding-top:0; min-height:clamp(160px,55vw,260px)}
}

/* ============================================================
   CATEGORY NAV — match /resources subnav EXACTLY (square chips, paper bg)
   ============================================================ */
.df-article .subnav{border-block:1px solid var(--line); background:var(--paper); width:100vw; margin-left:calc(50% - 50vw); padding:0}
.df-article .subnav .wrap.subnav-inner{max-width:1200px; margin-inline:auto; padding-block:1rem; padding-inline:var(--pad-x); display:flex; flex-wrap:wrap; gap:.6rem}
.df-article .chip{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; padding:.55rem 1rem; border:1px solid var(--line-strong); color:var(--ink-soft); display:inline-flex; align-items:center; transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease); text-decoration:none}
.df-article .chip:hover,.df-article .chip[aria-current]{background:var(--ink); color:#fff; border-color:var(--ink)}

/* ============================================================
   ARTICLE LAYOUT — reading column + sticky TOC sidebar
   ============================================================ */
.df-article .layout{max-width:var(--maxw); margin-inline:auto; padding:clamp(2.5rem,6vw,4.5rem) var(--pad-x); display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:clamp(2rem,5vw,4rem); align-items:start}
.df-article .article-body{padding:0; min-width:0}
.df-article .article-body p{font-family:var(--body); font-size:1.0625rem; color:var(--ink-soft); margin:0 0 1.25rem; line-height:1.7; max-width:68ch}
.df-article .article-body .lead-para{font-size:clamp(1.1rem,1.7vw,1.3rem); color:var(--ink); font-weight:500; line-height:1.55}
.df-article .article-body h2{font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,3.5vw,2.2rem); line-height:1.12; letter-spacing:-.02em; margin:2.6rem 0 1rem; color:var(--ink)}
.df-article .article-body h3{font-family:var(--display); font-weight:600; font-size:1.18rem; margin:1.8rem 0 .7rem; color:var(--ink)}
.df-article .article-body ul,.df-article .article-body ol{max-width:68ch; margin:0 0 1.25rem; padding-left:1.3rem; color:var(--ink-soft)}
.df-article .article-body li{margin-bottom:.5rem; font-size:1.0625rem; line-height:1.7}
.df-article .article-body a.inline{color:var(--ink); font-weight:600; border-bottom:1.5px solid var(--line-strong); transition:border-color .25s}
.df-article .article-body a.inline:hover{border-color:var(--ink)}
.df-article .article-body figure{margin:2rem 0}
.df-article .article-body figure img{width:100%; border-radius:10px; border:1px solid var(--line)}
.df-article .article-body figcaption{font-size:13px; line-height:1.5; color:var(--muted); margin-top:.6rem}

/* Sticky TOC sidebar */
.df-article .toc{position:sticky; top:94px; align-self:start}
.df-article .toc .toc-h{font:700 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem}
.df-article .toc ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.1rem; border-left:1px solid var(--line)}
.df-article .toc li a{display:block; padding:.5rem 0 .5rem 1rem; margin-left:-1px; border-left:2px solid transparent; font:500 14px/1.4 var(--body); color:var(--muted); transition:color var(--ease),border-color var(--ease); text-decoration:none}
.df-article .toc li a:hover,.df-article .toc li a.active{color:var(--ink); border-left-color:var(--ink)}

@media(max-width:980px){.df-article .layout{grid-template-columns:1fr}.df-article .toc{display:none}}

/* Key takeaways box */
.df-article .takeaways{background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--ink); border-radius:10px; padding:1.4rem 1.6rem; margin:0 0 2rem}
.df-article .takeaways .tk-h{font:700 12px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:.9rem}
.df-article .takeaways ul{list-style:none; padding:0; margin:0}
.df-article .takeaways li{position:relative; padding-left:1.5rem; margin-bottom:.6rem; color:var(--ink-soft); max-width:68ch; font-size:1rem; line-height:1.6}
.df-article .takeaways li::before{content:""; position:absolute; left:0; top:.55rem; width:8px; height:8px; background:var(--ink); border-radius:2px}

/* Comparison table */
.df-article .cmp{width:100%; border-collapse:collapse; margin:1.5rem 0 2rem; font-size:.95rem}
.df-article .cmp caption{text-align:left; font:600 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.8rem}
.df-article .cmp th,.df-article .cmp td{border:1px solid var(--line); padding:.85rem 1rem; text-align:left; vertical-align:top}
.df-article .cmp thead th{background:var(--ink); color:#fff; font:600 13px/1.3 var(--display); letter-spacing:.02em}
.df-article .cmp tbody th{background:var(--paper); font-weight:600; color:var(--ink)}

/* Pullquote */
.df-article .pullquote{border-left:4px solid var(--ink); padding:.4rem 0 .4rem 1.4rem; margin:2.4rem 0; font-family:var(--display); font-weight:600; font-size:clamp(1.25rem,2.4vw,1.7rem); line-height:1.3; color:var(--ink); max-width:42ch}

/* FAQ */
.df-article .faq{padding-block:var(--sec-y)}
.df-article .faq-grid{display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(2rem,6vw,5rem); align-items:start; max-width:1200px; margin-inline:auto; padding-inline:var(--pad-x)}
.df-article .faq .sec-head .eyebrow{font:700 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); display:inline-flex; gap:.7rem; align-items:center; margin-bottom:1rem}
.df-article .faq .sec-head .eyebrow::before{content:""; width:30px; height:1px; background:var(--ink)}
.df-article .faq .sec-head h2{font-size:clamp(1.8rem,4vw,2.6rem); margin:0 0 1rem; font-family:var(--display); font-weight:700; letter-spacing:-.02em}
.df-article .faq .sec-head p{color:var(--muted); max-width:42ch}
.df-article .faq-list{border-top:1px solid var(--line)}
.df-article .faq-item{border-bottom:1px solid var(--line)}
.df-article .faq-q{width:100%; text-align:left; background:none; border:0; cursor:pointer; font-family:var(--display); font-weight:600; font-size:1.04rem; color:var(--ink); padding:1.25rem 0; display:flex; justify-content:space-between; gap:1rem; align-items:center}
.df-article .faq-q .pm{flex:none; width:22px; height:22px; position:relative}
.df-article .faq-q .pm::before,.df-article .faq-q .pm::after{content:""; position:absolute; background:var(--ink); transition:.35s var(--ease)}
.df-article .faq-q .pm::before{top:10px; left:0; width:22px; height:2px}
.df-article .faq-q .pm::after{left:10px; top:0; width:2px; height:22px}
.df-article .faq-item.open .pm::after{transform:scaleY(0)}
.df-article .faq-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease); color:var(--muted); font-size:.97rem}
.df-article .faq-a p{padding-bottom:1.3rem; margin:0; max-width:64ch}

/* Author + CTA */
.df-article .author{padding:0 var(--pad-x) var(--sec-y)}
.df-article .author-card{display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:1.8rem; max-width:780px; margin-inline:auto}
.df-article .author-card .av{width:72px; height:72px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font:700 1.6rem/1 var(--display); flex:none}
.df-article .author-card .a-name{font:700 1.1rem/1.2 var(--display); color:var(--ink)}
.df-article .author-card .a-role{font:500 13px/1.4 var(--mono); letter-spacing:.04em; color:var(--muted); margin:.35rem 0 .6rem}
.df-article .author-card .a-bio{color:var(--ink-soft); font-size:.95rem; max-width:62ch; margin:0}

.df-article .cta{background:var(--ink); color:#fff; text-align:center; padding:clamp(3.5rem,8vw,6rem) var(--pad-x)}
.df-article .cta h2{color:#fff; max-width:22ch; margin:0 auto; font-size:clamp(1.8rem,4vw,2.6rem); font-family:var(--display); font-weight:700; letter-spacing:-.02em}
.df-article .cta p{color:#c9c9c5; margin:1rem auto 2rem; max-width:52ch}
.df-article .cta .acts{display:flex; flex-wrap:wrap; gap:1rem; justify-content:center}
.df-article .cta .btn{display:inline-flex; align-items:center; gap:.55rem; font-weight:600; font-size:.95rem; padding:.9rem 1.6rem; border:1.5px solid #fff; background:#fff; color:var(--ink); cursor:pointer; transition:transform .35s var(--ease)}
.df-article .cta .btn:hover{transform:translateY(-2px)}
.df-article .cta .btn--ghost{background:transparent; color:#fff}
.df-article .cta .btn--ghost:hover{background:#fff; color:var(--ink)}

/* Responsive */
@media(max-width:980px){
  .df-article .hero .wrap{grid-template-columns:1fr; gap:clamp(1.8rem,5vw,2.6rem)}
  .df-article .hero-aside{border-left:0; border-top:1px solid rgba(255,255,255,.18); padding-left:0; padding-top:1.6rem}
  .df-article .faq-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .df-article .hero h1{font-size:clamp(1.6rem,7vw,2.2rem)}
  .df-article .subnav .wrap.subnav-inner{gap:6px; padding-block:.7rem}
  .df-article .chip{padding:.45rem .85rem; font-size:11px}
  .df-article .author-card{grid-template-columns:1fr; text-align:center; justify-items:center}
  .df-article .cmp{display:block; border:0}
}

/* === 2026-08-08: 文章页 hero 右侧特色图显示 + 纯块正文居中(不影响手工 df-article 的 hello-world) === */
.df-article .hero-aside img{display:block;width:100%;height:auto;border-radius:10px;object-fit:cover}
.df-article > .entry-content > p,
.df-article > .entry-content > h2,
.df-article > .entry-content > h3,
.df-article > .entry-content > h4,
.df-article > .entry-content > ul,
.df-article > .entry-content > ol,
.df-article > .entry-content > figure,
.df-article > .entry-content > blockquote,
.df-article > .entry-content > div:not(.df-article){max-width:760px;margin-inline:auto;padding-inline:var(--pad-x)}

/* Restore WordPress Image block alignment after the article-wide figure margin reset. */
.df-article .article-body figure.wp-block-image.aligncenter,
.df-article > .entry-content > figure.wp-block-image.aligncenter{
  display:table;
  width:fit-content;
  max-width:100%;
  margin:2rem auto;
}
.df-article .article-body figure.wp-block-image.aligncenter img,
.df-article > .entry-content > figure.wp-block-image.aligncenter img{
  display:block;
  max-width:100%;
}
/* Older editor content can put the alignment class on the image or its link. */
.df-article .article-body img.aligncenter,
.df-article .article-body a.aligncenter,
.df-article .article-body a.aligncenter img,
.df-article > .entry-content > img.aligncenter,
.df-article > .entry-content > a.aligncenter,
.df-article > .entry-content > a.aligncenter img{
  display:block;
  margin-left:auto;
  margin-right:auto;
}
/* The live template adds an extra content wrapper, so do not depend on it here. */
.df-article figure.wp-block-image.aligncenter{
  display:table !important;
  width:fit-content !important;
  max-width:100%;
  margin:2rem auto !important;
}
.df-article figure.wp-block-image.aligncenter img{
  display:block;
  max-width:100%;
}
@media (max-width:760px){
  .df-article .article-body figure.wp-block-image.aligncenter,
  .df-article > .entry-content > figure.wp-block-image.aligncenter{display:block;width:100%;}
  .df-article figure.wp-block-image.aligncenter{
    display:table !important;
    width:fit-content !important;
    margin:1.5rem auto !important;
  }
}