/* ==========================================================================
   blog-legacy.css — the CSS contract

   Post bodies in the database contain hand-written HTML that references theme
   CSS classes. Sixty-two posts depend on the rules below. A from-scratch
   stylesheet without them does not error; it renders every article as unstyled
   soup, silently.

   Loaded only on post views (see inc/enqueue.php), which means:
     - the new design system cannot break the articles
     - the articles cannot constrain the new design system

   Ported from the previous theme's shared.css lines 1096-1391, with every
   var(--*) reference rewritten onto the 2026 tokens. Body copy inherits the
   contrast lift from #7a95c0 to #93accf, so long-form reading goes from 6.37:1
   to 8.36:1 without any markup change.

   Widget rules are scoped under .article-inner so they cannot leak into the
   surrounding chrome.

   Deprecation path: as articles are re-authored this file shrinks. It does not
   have to be permanent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Article body
   -------------------------------------------------------------------------- */
.article-body { padding: var(--s-8) var(--s-8); background: var(--bg); }
.article-inner { max-width: 720px; margin-inline: auto; }

.article-inner > * + * { margin-top: 0; }

.article-inner p {
  font-size: 1.0625rem;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: var(--s-5);
}
.article-inner h2 {
  font-family: var(--display);
  font-size: var(--step-3);
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.2;
  margin: var(--s-8) 0 var(--s-4);
}
.article-inner h3 {
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.25;
  margin: var(--s-6) 0 var(--s-3);
}
.article-inner strong { color: var(--text); font-weight: 600; }
.article-inner em { font-style: italic; }

/* wpautop wraps the hand-written widget markup in post bodies and leaves
   orphaned </p> tags behind. The HTML parser turns each orphan into an empty
   <p>, which then collects the paragraph margin above and opens a gap inside
   the widget. Visible on the live site today, at the foot of every pipeline
   step. Filtering the content to fix it would mean rewriting 62 post bodies at
   render time; hiding the empties costs one rule and touches nothing. */
.article-inner p:empty { display: none; }
.article-inner p:has(> br:only-child) { display: none; }

.article-inner ul {
  list-style: none;
  margin: var(--s-4) 0 var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.article-inner ul li {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.75;
  padding-left: var(--s-5);
  position: relative;
}
.article-inner ul li::before {
  content: '\2013';
  position: absolute;
  left: 0;
  color: var(--accent-text);
}

.article-inner ol {
  margin: var(--s-4) 0 var(--s-5) var(--s-5);
  list-style: decimal;
}
.article-inner ol li {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: var(--s-2);
  padding-left: var(--s-2);
}
.article-inner ol li::marker { color: var(--accent-text); }

.article-inner blockquote {
  border-left: 3px solid var(--accent);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  margin: var(--s-6) 0;
  font-family: var(--display);
  font-size: var(--step-2);
  font-style: italic;
  color: var(--text);
  line-height: 1.5;
}

.article-inner a {
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-deep);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.article-inner a:hover { color: var(--text-strong); border-color: var(--accent); }

.article-inner img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r);
  border: 1px solid var(--line);
  margin: var(--s-6) 0;
}
.article-inner figure { margin: var(--s-6) 0; }
.article-inner figcaption {
  margin-top: var(--s-3);
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.article-inner code {
  background: var(--surface);
  padding: 0.15em 0.4em;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  font-size: 0.88em;
  color: var(--accent-text);
}
.article-inner pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-5);
  margin: var(--s-6) 0;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.6;
}
.article-inner pre code { background: none; border: none; padding: 0; color: var(--text); }

/* Wide content must scroll inside its own container, never the page body. */
.article-inner table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-6) 0;
  font-size: 0.9rem;
}
.article-inner th, .article-inner td {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  text-align: left;
  color: var(--text-muted);
}
.article-inner th { color: var(--text-strong); font-weight: 600; background: var(--surface); }

/* --------------------------------------------------------------------------
   Callout — 8+ instances across the seven, plus syndicated posts
   -------------------------------------------------------------------------- */
.article-inner .callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  padding: var(--s-5) var(--s-6);
  margin: var(--s-6) 0;
}
.article-inner .callout p { margin: 0; font-size: 1rem; color: var(--text); }
.article-inner .callout p + p { margin-top: var(--s-4); }

.article-inner .article-divider {
  height: 1px;
  background: var(--line);
  margin: var(--s-7) 0;
  border: none;
}

/* --------------------------------------------------------------------------
   build-buy-configure — three option cards
   -------------------------------------------------------------------------- */
.article-inner .option-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin: var(--s-6) 0;
}
.article-inner .option-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-5);
}
.article-inner .option-card .label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--s-3);
}
.article-inner .option-card h4 {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: var(--s-3);
}
.article-inner .option-card p {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   data-readiness-assessment — score grid
   -------------------------------------------------------------------------- */
.article-inner .score-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin: var(--s-6) 0;
}
.article-inner .score-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-5);
}
.article-inner .score-card h4 {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: var(--s-2);
}
.article-inner .score-card p {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   prioritize-ai-use-cases — decision matrix
   -------------------------------------------------------------------------- */
.article-inner .matrix {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin: var(--s-6) 0;
}
.article-inner .matrix-row {
  display: grid;
  grid-template-columns: 2fr 1fr 3fr;
  border-bottom: 1px solid var(--line);
}
.article-inner .matrix-row:last-child { border-bottom: none; }
.article-inner .matrix-row.header { background: var(--surface); }
.article-inner .matrix-cell {
  padding: var(--s-3) var(--s-5);
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.55;
  border-right: 1px solid var(--line);
}
.article-inner .matrix-cell:last-child { border-right: none; }
.article-inner .matrix-row.header .matrix-cell {
  color: var(--text-strong);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   document-processing-automation — pipeline steps

   RECOVERED, not ported. These rules never existed in the previous theme's
   shared.css. They were defined only in a <style> block inside the static
   source file insights/document-processing-automation.html and were lost when
   the static pages were converted into a WordPress theme, so this article's
   central diagram renders unstyled on the live site today. .step-num happened
   to inherit the unrelated homepage process-step rule, which is why it looked
   half-intentional.

   Recovered verbatim from that source and rewritten onto the 2026 tokens.
   -------------------------------------------------------------------------- */
.article-inner .pipeline-steps {
  display: flex;
  flex-direction: column;
  margin: var(--s-6) 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.article-inner .pipeline-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  padding: var(--s-5);
  align-items: start;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.article-inner .pipeline-step:last-child { border-bottom: none; }
.article-inner .pipeline-step:nth-child(even) { background: var(--bg-raised); }
.article-inner .pipeline-step .step-num {
  font-family: var(--display);
  font-size: var(--step-2);
  color: var(--accent-text);
  line-height: 1;
  min-width: 2rem;
  padding-top: 0.1em;
  font-variant-numeric: tabular-nums;
}
.article-inner .step-content strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: var(--s-2);
}
/* The source markup separates the label from the body with a <br>. The label
   is already a block, so the break would add a blank line. */
.article-inner .step-content strong + br { display: none; }
.article-inner .step-content span {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Responsive — every article widget collapses to one column
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .article-body { padding: var(--s-7) var(--s-5); }
  .article-inner .option-cards,
  .article-inner .score-grid { grid-template-columns: 1fr; }
  .article-inner .matrix-row { grid-template-columns: 1fr; }
  .article-inner .matrix-cell { border-right: none; border-bottom: 1px solid var(--line); }
  .article-inner .matrix-row:last-child .matrix-cell:last-child { border-bottom: none; }
  .article-inner .matrix-row.header { display: none; }
  .article-inner .pipeline-step { gap: var(--s-4); padding: var(--s-4); }
}

@media (max-width: 700px) {
  .article-inner p, .article-inner ul li, .article-inner ol li { font-size: 1rem; }
  .article-inner .callout { padding: var(--s-4) var(--s-5); }
}