/* Fenva Precision — enriched Resources post components
   Shared by every post-*.html and finish-library.html.
   Built on the canonical _sample-post depth. Spacing tokens used:
   --space-10 (40px) for h2 top, --space-8 (32px) for callout margins.
   NOTE: there is no --space-7 / --space-9 in the scale. */

/* ---- Article shell ---- */
.post-article { max-width: 920px; }
.post-article .lead-p {
  font-size: var(--text-lg); color: var(--fg-2); line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--border);
}
.post-article h2 {
  font-size: var(--text-h4); color: var(--fg-1);
  margin-top: var(--space-10); margin-bottom: var(--space-4); letter-spacing: var(--tracking-snug);
}
.post-article h3 {
  font-size: var(--text-lg); color: var(--fg-1);
  margin-top: var(--space-6); margin-bottom: var(--space-2); letter-spacing: var(--tracking-snug);
}
.post-article p { color: var(--fg-2); line-height: var(--leading-relaxed); margin-bottom: var(--space-3); text-wrap: pretty; }
.post-article p > strong, .post-article li > strong { color: var(--fg-1); }
.post-article ul.dense {
  margin: var(--space-3) 0 var(--space-2); padding-left: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.post-article ul.dense li { color: var(--fg-2); line-height: var(--leading-snug); }

/* ---- Language block toggle (EN default, 中文 via body.lang-cn) ---- */
.post-zh { display: none; }
body.lang-cn .post-en { display: none; }
body.lang-cn .post-zh { display: block; }

/* ---- Spec / comparison tables (fenva-components .spec-table) get breathing room ---- */
.post-article .spec-table-wrap { margin: var(--space-5) 0 var(--space-2); }
.post-article .fig-note { font-size: var(--text-xs); color: var(--fg-3); margin-top: var(--space-3); margin-bottom: var(--space-2); }

/* ---- Swatch / photo grid ---- */
.swatch-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-4); margin: var(--space-5) 0 var(--space-2);
}
.swatch { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: #fff; box-shadow: var(--shadow-xs); }
.swatch img, .swatch .ph { display: block; width: 100%; height: 168px; object-fit: cover; }
.swatch .ph { background: repeating-linear-gradient(135deg, var(--slate-100) 0 9px, var(--slate-50) 9px 18px); display: grid; place-items: center; }
.swatch .ph::after { content: "photo"; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--slate-400); }
.swatch .ph[data-ph]::after { content: attr(data-ph); }
.swatch figcaption { font-size: var(--text-sm); color: var(--fg-2); padding: 10px 12px; font-family: var(--font-mono); border-top: 1px solid var(--border); }

/* ---- Callouts ---- */
.post-callout {
  background: var(--blue-50); border: 1px solid var(--blue-100); border-left: 3px solid var(--accent-500);
  border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); margin: var(--space-8) 0;
  color: var(--fg-1); line-height: var(--leading-relaxed);
}
.post-callout strong { color: var(--blue-700); }
/* "From our floor" — neutral/shop variant to differentiate from the blue buyer callout */
.post-callout.floor {
  background: var(--slate-50); border-color: var(--border-strong); border-left-color: var(--slate-700);
}
.post-callout.floor strong { color: var(--slate-700); }

/* ---- Drawing-callout box (how to call it out) ---- */
.drawing-note {
  font-family: var(--font-mono); font-size: var(--text-sm);
  background: var(--slate-50); border: 1px solid var(--border); border-left: 3px solid var(--blue-900);
  border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); margin: var(--space-5) 0;
  color: var(--fg-1); line-height: 1.8;
}
.drawing-note .c { color: var(--fg-3); }

/* ---- Inline SVG diagram figure ---- */
.post-fig { margin: var(--space-5) 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); background: #fff; }
.post-fig svg { display: block; }

/* ---- CTA + keyword meta ---- */
.post-cta {
  margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center;
}
.post-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.post-meta .kw {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--blue-700);
  background: var(--blue-50); border: 1px solid var(--blue-100); padding: 3px 9px; border-radius: var(--radius-pill);
}