/* ==========================================================================
   Estate Sale Connect — long-form article components
   The guides were written with a lot of bespoke component classes. Rather
   than rewriting the copy, these rules re-home those classes on the new
   design tokens, grouped into families: cards, callouts, checklists, FAQs.
   ========================================================================== */

/* ---------- Card families ---------- */
.value-card, .step-card, .standard-card, .option-card,
.green-flag-card, .red-flag-card, .consideration-item,
.example-item, .quick-stat, .documentation-box {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  margin-block: var(--sp-5);
}
.value-card > *:first-child, .step-card > *:first-child,
.standard-card > *:first-child, .option-card > *:first-child,
.green-flag-card > *:first-child, .red-flag-card > *:first-child,
.consideration-item > *:first-child, .example-item > *:first-child,
.documentation-box > *:first-child { margin-top: 0; }

.value-card h3, .step-card h3, .standard-card h3, .option-card h3,
.green-flag-card h3, .red-flag-card h3, .consideration-item h3,
.documentation-box h3, .documentation-box h4 {
  margin-top: 0; margin-bottom: var(--sp-3); font-size: var(--step-1);
  border-top: 0; padding-top: 0;
}

.green-flag-card { border-left: 3px solid var(--ok-600); }
.red-flag-card   { border-left: 3px solid var(--err-600); }
.red-flag-icon   { font-size: 1.1rem; margin-right: .4rem; }

/* Numbers and values get the display face */
.value-card-number, .step-number, .quick-stat-number, .value-range, .example-value {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--accent-700);
  font-variation-settings: 'opsz' 48;
  line-height: 1.1;
}
.value-card-number, .quick-stat-number { font-size: var(--step-3); display: block; margin-bottom: var(--sp-2); }
.step-number {
  font-size: var(--step-2);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; flex: none;
  border-radius: 50%;
  background: var(--accent-50); border: 1px solid var(--accent-100);
  margin-bottom: var(--sp-3);
}
.value-range, .example-value { font-size: var(--step-1); }

/* ---------- Grids ---------- */
.red-flag-grid, .green-flag-grid, .standards-grid, .related-grid, .question-checklist {
  display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr;
  margin-block: var(--sp-6);
}
@media (min-width: 700px) {
  .red-flag-grid, .green-flag-grid, .standards-grid, .related-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}
.red-flag-grid > *, .green-flag-grid > *, .standards-grid > * { margin-block: 0; }

.standard-icon, .checklist-icon, .tip-icon { font-size: 1.35rem; line-height: 1; flex: none; }

/* ---------- Callouts ---------- */
.warning-box, .tip-box, .expert-tip, .highlight-box, .alert,
.communication-tip, .summary-box {
  margin-block: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  border-left-width: 3px;
  background: var(--paper-sunk);
  font-size: var(--step-0);
}
.warning-box > *:first-child, .tip-box > *:first-child, .expert-tip > *:first-child,
.highlight-box > *:first-child, .alert > *:first-child,
.communication-tip > *:first-child, .summary-box > *:first-child { margin-top: 0; }
.warning-box > *:last-child, .tip-box > *:last-child, .expert-tip > *:last-child,
.highlight-box > *:last-child, .alert > *:last-child,
.communication-tip > *:last-child, .summary-box > *:last-child { margin-bottom: 0; }

.warning-box h2, .warning-box h3, .warning-box h4,
.tip-box h2, .tip-box h3, .tip-box h4,
.expert-tip h3, .expert-tip h4,
.highlight-box h3, .highlight-box h4,
.alert h3, .alert h4,
.summary-box h2, .summary-box h3, .summary-title {
  margin-top: 0; margin-bottom: var(--sp-3);
  border-top: 0; padding-top: 0;
  font-size: var(--step-1);
}

.warning-box, .alert-warning { background: var(--accent-50); border-color: var(--accent-100); border-left-color: var(--accent-600); }
.tip-box, .expert-tip, .alert-tip, .communication-tip { background: var(--sage-50); border-color: var(--sage-100); border-left-color: var(--sage-600); }
.highlight-box, .summary-box { background: var(--brand-50); border-color: var(--brand-100); border-left-color: var(--brand-600); }

.alert-header, .checklist-header, .tip-content > strong:first-child {
  display: flex; align-items: center; gap: var(--sp-3);
  font-weight: 650; color: var(--ink);
}
.alert-header { margin-bottom: var(--sp-3); }

.tip-content { flex: 1; }
.expert-tip, .communication-tip { display: flex; gap: var(--sp-4); align-items: flex-start; }

/* ---------- Checklists ---------- */
.checklist {
  margin-block: var(--sp-6);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-raised);
}
.checklist-header {
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--rule);
}
.checklist-title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; color: var(--ink); }
.checklist-items { padding: var(--sp-2) var(--sp-5) var(--sp-4); }
.checklist-item {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--rule);
}
.checklist-item:last-child { border-bottom: 0; }
.checkbox {
  flex: none; width: 20px; height: 20px; margin-top: 3px;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
}
.checklist-content { flex: 1; min-width: 0; }
.checklist-label { font-weight: 650; color: var(--ink); display: block; margin-bottom: .15rem; }
.checklist-desc { font-size: var(--step--1); color: var(--ink-mute); line-height: 1.55; }

/* ---------- In-article FAQ ---------- */
.faq-title { font-size: var(--step-3); margin-bottom: var(--sp-5); }
.faq-item { padding-block: var(--sp-5); border-bottom: 1px solid var(--rule); }
.faq-item:first-of-type { border-top: 1px solid var(--rule); }
.faq-question {
  font-family: var(--font-display);
  font-size: var(--step-1); font-weight: 600; color: var(--ink);
  line-height: 1.3; margin-bottom: var(--sp-3);
}
.faq-answer { color: var(--ink-mute); }

/* ---------- Article-specific chrome ---------- */
.article-meta, .blog-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  font-size: var(--step--2); color: var(--ink-mute);
  margin-top: var(--sp-5);
}
.print-section { display: none; }

.article-toc {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-8);
}
.article-toc h2 {
  font-family: var(--font-sans); font-size: var(--step--2);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
  border: 0; padding: 0; margin: 0 0 var(--sp-4);
}
.article-toc ol { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--step--1); }
.article-toc a { color: var(--ink-body); text-decoration: none; }
.article-toc a:hover { color: var(--accent-700); text-decoration: underline; text-underline-offset: 3px; }

/* Related guides at the foot of a post */
.next-reads { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); }
@media (min-width: 700px) { .next-reads { grid-template-columns: repeat(3, 1fr); } }