/* graphics.css — graphic components for generated blog + /stocks/ pages.
   Extends styles.css (design tokens). Loaded only on generated pages so the
   hand-built pages are untouched. */

/* ---- article hero (two-column, matches .hero-grid rhythm) ---- */
.pg-hero { position: relative; overflow: hidden; }
.pg-hero-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.pg-hero-visual {
  position: relative; border-radius: var(--radius-lg);
  background: var(--glass); box-shadow: var(--glass-edge), var(--shadow);
  border: 1px solid var(--line); overflow: hidden; aspect-ratio: 19 / 16;
  display: grid; place-items: center;
}
.pg-hero-visual svg { width: 100%; height: 100%; }
.pg-hero-visual.pg-hero-img { aspect-ratio: 19 / 16; }
.pg-hero-visual.pg-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-3);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  padding: .32rem .7rem; border-radius: var(--radius-pill); margin-bottom: 1.1rem;
}
@media (max-width: 820px) {
  .pg-hero-grid { grid-template-columns: 1fr; }
  .pg-hero-visual { order: -1; max-width: 460px; }
}

/* ---- figures / charts ---- */
.pg-figure {
  margin: 2rem 0; padding: clamp(1rem, 3vw, 1.6rem);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.pg-figure svg { width: 100%; height: auto; display: block; }
.pg-cap {
  margin-top: .8rem; color: var(--muted); font-size: .82rem;
  font-family: var(--font-mono); text-align: center;
}
.pg-chart { background: linear-gradient(180deg, var(--surface), var(--bg-2)); }

/* ---- stat grid tweaks for article context ---- */
.pg-stats { margin: 2rem 0; box-shadow: var(--shadow); }
.pg-stats .stat .num { background: var(--flame); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pg-stats .stat .sub { color: var(--up); }

/* ---- 8-condition grid ---- */
.pg-cond-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; margin: 2rem 0;
}
.pg-cond { background: var(--surface); padding: 1.1rem 1rem; position: relative; transition: background var(--dur) var(--ease); }
.pg-cond:hover { background: var(--surface-2); }
.pg-cond-ic {
  width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft);
  color: var(--accent-3); display: grid; place-items: center; margin-bottom: .7rem;
}
.pg-cond-n { position: absolute; top: .8rem; right: 1rem; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); }
.pg-cond-l { font-size: .92rem; color: var(--text-soft); font-weight: 600; }
@media (max-width: 720px) { .pg-cond-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- callouts ---- */
.pg-callout {
  display: flex; gap: .9rem; align-items: flex-start; margin: 1.8rem 0;
  padding: 1.1rem 1.3rem; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent); color: var(--text-soft);
}
.pg-callout p { margin: 0; }
.pg-callout-ic { flex: none; color: var(--accent); margin-top: .1rem; }
.pg-callout-risk { border-left-color: var(--down); } .pg-callout-risk .pg-callout-ic { color: var(--down); }
.pg-callout-win  { border-left-color: var(--up); }   .pg-callout-win .pg-callout-ic { color: var(--up); }

/* ---- key takeaways card ---- */
.pg-takeaways {
  margin: 2rem 0; padding: 1.4rem 1.6rem; border-radius: var(--radius-lg);
  background: var(--flame-soft); border: 1px solid var(--accent-line);
}
.pg-takeaways-h {
  display: flex; align-items: center; gap: .55rem; color: var(--accent-3);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-bottom: .9rem;
}
.pg-takeaways ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.pg-takeaways li { display: flex; gap: .7rem; align-items: flex-start; color: var(--text-soft); }
.pg-takeaways li svg { flex: none; color: var(--up); margin-top: .15rem; }

/* ---- h2 with icon ---- */
.pg-body h2 { display: flex; align-items: center; gap: .7rem; }
.pg-h2ic {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  background: var(--accent-soft); color: var(--accent-3);
  display: inline-grid; place-items: center;
}
/* first paragraph lead-in */
.pg-body > p:first-of-type { font-size: 1.12rem; color: var(--text); }


/* ============================================================================
   LONG-FORM READING LAYOUT (2026-08-16)
   ----------------------------------------------------------------------------
   The .pg-* components above styled the FURNITURE of a guide (hero, callouts,
   takeaways, figures) but nothing ever styled the READING. Measured on
   what-is-a-low-float-stock at 1440px before this block: the prose column was
   769px inside a 1120px container, pinned LEFT with 351px of dead space beside
   it; h2 and h3 both computed margin 0px/0px, so a 36px heading sat flush
   against the paragraph above it; and <p> inherited the base reset's margin:0,
   so consecutive paragraphs had NO gap whatsoever. That is what made finished,
   hand-checked articles read as machine output: they were emitted, never set.

   Three-track grid: prose sits in a centred reading measure, and wide furniture
   (stat rows, condition grids) opts out to the full container. A measure-capped
   column pinned to the left edge is precisely what looks like "text occupying
   half the page"; centring it is most of the fix.
   ========================================================================== */
.pg-body {
  --read: 44rem;                        /* ≈68ch at the 18px long-form size */
  display: grid;
  grid-template-columns:
    1fr
    min(var(--read), 100% - (var(--gutter, 2rem) * 2))
    1fr;
}
.pg-body > * { grid-column: 2; min-width: 0; }
.pg-body > .stats,
.pg-body > .pg-stats,
.pg-body > .pg-cond-grid,
.pg-body > .is-wide { grid-column: 1 / -1; }

/* ---- the prose itself: long-form is NOT ui text --------------------------- */
.pg-body p, .pg-body li {
  font-size: 1.125rem; line-height: 1.75; color: var(--text-soft);
}
.pg-body p { margin: 0 0 1.5em; max-width: none; }
.pg-body > p:first-of-type { font-size: 1.3125rem; line-height: 1.6; color: var(--text); }

/* Space belongs ABOVE a heading, bound to the section it opens. The gap above
   an h2 must clearly exceed the gap between paragraphs or the reader cannot
   see where one section ends and the next begins. */
.pg-body h2 { margin: 2.6em 0 .75em; line-height: 1.25; color: var(--text); }
.pg-body h2:first-child { margin-top: 0; }
.pg-body h3 { margin: 2em 0 .6em; line-height: 1.35; color: var(--text); }
/* NOTE: .pg-body h2 is display:flex (it carries .pg-h2ic). Do NOT give it a
   ::before rule -- it becomes a flex ITEM and lands beside the text instead of
   above it. The icon chip is already the accent; space does the rest. */

/* ---- lists read as prose, not as data ------------------------------------ */
.pg-body ul:not(.pg-takeaways ul), .pg-body ol { margin: 0 0 1.5em; padding-left: 1.4em; }
.pg-body ul:not(.pg-takeaways ul) { list-style: disc; }
.pg-body ol { list-style: decimal; }
.pg-body ul:not(.pg-takeaways ul) > li, .pg-body ol > li { margin-bottom: .55em; padding-left: .2em; }
.pg-body li::marker { color: var(--accent); }

/* ---- inline ---------------------------------------------------------------- */
.pg-body b, .pg-body strong { color: var(--text); font-weight: 600; }
.pg-body p a, .pg-body li a {
  color: var(--accent-3); text-decoration: underline;
  text-decoration-color: var(--accent-line); text-underline-offset: 3px;
}
.pg-body p a:hover, .pg-body li a:hover { text-decoration-color: var(--accent-3); }

.pg-body blockquote {
  margin: 2em 0; padding: .1em 0 .1em 1.4em;
  border-left: 2px solid var(--accent-line);
  font-size: 1.25rem; line-height: 1.6; color: var(--text);
}
.pg-body blockquote p { font-size: inherit; color: inherit; margin-bottom: 0; }

/* furniture keeps its own rhythm inside the reading column */
.pg-body .pg-figure, .pg-body .pg-callout, .pg-body .pg-takeaways { margin-block: 2.2em; }
.pg-body .updated { font-size: .82rem; color: var(--faint); }

@media (max-width: 640px) {
  .pg-body p, .pg-body li { font-size: 1.0625rem; line-height: 1.7; }
  .pg-body > p:first-of-type { font-size: 1.1875rem; }
  .pg-body h2 { margin-top: 2.1em; }
}