/* ============================================================================
   trionic-content.css — shared editorial framework for Trionic content pages
   From the Claude Design handoff (claude.ai/design). Powers the "Made for
   Walking" editorial pages: About → History, Press & Media Kit, etc.

   EVERY rule is scoped under #content so the design framework's generic class
   names (.container, .section, .btn, .hero, .label, .lead …) stay inside the
   page content area and can't clash with LiteCart's own site chrome.
   Load this ONCE per editorial page, then add the page-specific stylesheet
   (history.css, press.css …) after it. Montserrat is provided sitewide by
   framework.min.css, so no font import is needed.
   ============================================================================ */

/* --- Design tokens (scoped to the content area) --- */
#content {
  --pms-291:#97caeb; --web-bg-blue:#bce4fa; --pms-298:#3cb4e5; --pms-166:#e65300;
  --pms-382:#C2D500; --pms-213:#e81f76; --pms-1915:#f44c7f; --pms-012:#ffd600;
  --pms-186:#ce0e2d; --pms-7484:#005640; --pms-7483:#001689; --pms-7710:#00a5b5;
  --pms-7445:#534588; --cool-gray-11:#54565a;
  --bg:#ffffff; --bg-blue:var(--web-bg-blue); --bg-dark:#141414;
  --ink:#141414; --ink-2:var(--cool-gray-11); --muted:#7a7d82;
  --line-strong:rgba(20,20,20,0.16);
  --accent:var(--pms-291); --accent-strong:var(--pms-298);
  --cta-green:#7cb342; --cta-green-dark:#689f38;
  --display:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  --sans:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --maxw:1320px; --gutter:clamp(20px,4vw,64px);

  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
#content *, #content *::before, #content *::after { box-sizing:border-box; }
#content img, #content svg { display:block; max-width:100%; }
#content a { color:inherit; text-decoration:none; }

#content .container { max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }

/* --- Buttons (matched to live LiteCart rendering) --- */
#content .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:4px; border:2px solid #141414;
  background:#141414; color:#fff; font-weight:600; font-size:15px;
  line-height:1.15; transition:all .15s ease;
}
#content .btn:hover { filter:brightness(1.12); }
#content .btn.accent { background:var(--cta-green); border-color:var(--cta-green); color:#fff; }
#content .btn.accent:hover { background:var(--cta-green-dark); border-color:var(--cta-green-dark); filter:none; }
#content .btn.ghost { background:#fff; border-color:#d6d2c7; color:#141414; }
#content .btn.ghost:hover { background:#f4f1ea; border-color:#b8b0a0; filter:none; }
#content .btn.lg { padding:16px 26px; font-size:16px; }
#content .btn.sm { padding:9px 16px; font-size:12px; }

/* --- Display headlines --- */
#content .display,
#content .hero h1,
#content .sec-head h2 {
  font-family:var(--display); font-weight:800; font-style:italic;
  letter-spacing:-0.025em; line-height:0.95; margin:0;
}
#content .hero h1 { font-size:clamp(56px,11vw,168px); }
#content .sec-head h2 { font-size:clamp(40px,6vw,88px); }

/* --- Tagline pill --- */
#content .tagline {
  display:inline-block; margin-bottom:28px; padding:10px 18px;
  background:#141414; color:#fff;
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:14px; letter-spacing:0.08em; text-transform:uppercase;
  border-radius:999px;
}

/* --- Hero base --- */
#content .hero {
  padding:clamp(40px,7vw,96px) 0 clamp(60px,9vw,120px);
  background:var(--bg-blue); position:relative; overflow:hidden;
}
#content .hero::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 90% 10%, rgba(151,202,235,.7) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg-blue) 0%, var(--web-bg-blue) 100%);
  z-index:0; pointer-events:none;
}
#content .hero > .container { position:relative; z-index:1; }
#content .hero h1 {
  color:#141414; margin:0 0 8px;
}
#content .hero h1 em { font-style:italic; color:var(--pms-1915); }
#content .hero .lead { font-weight:500; color:#141414; }
#content .hero .h-cta { display:flex; gap:12px; margin-top:36px; flex-wrap:wrap; }

/* --- Section system --- */
#content .section { padding:clamp(64px,9vw,128px) 0; position:relative; }
#content .section.blue { background:var(--bg-blue); }
#content .section.dark { background:#141414; color:#fff; }

#content .sec-head {
  display:grid; grid-template-columns:1fr 1.4fr; gap:64px;
  margin-bottom:64px;
}
#content .sec-head .label {
  font-family:var(--display); font-weight:700; font-style:italic;
  font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--pms-298);
}
#content .sec-head h2 em { font-style:italic; color:var(--pms-291); }
#content .section.blue .sec-head h2 em {
  color:#fff; -webkit-text-stroke:2px #141414; paint-order:stroke fill;
}
#content .sec-head .intro {
  font-size:18px; line-height:1.5; color:var(--ink-2); max-width:56ch; font-weight:500;
}

/* --- Family sub-heads --- */
#content .family-head {
  display:flex; justify-content:space-between; align-items:end;
  margin-bottom:28px; gap:32px;
}
#content .family-head h3 {
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:clamp(36px,4.5vw,60px); margin:0; letter-spacing:-0.02em;
  color:#141414; line-height:0.98;
}
#content .family-head h3 em { font-style:italic; color:var(--pms-291); }

/* --- Myth / key-fact stats --- */
#content .myth-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
#content .myth-stat {
  padding:24px; background:rgba(255,255,255,0.04);
  border:1px solid #2A2A28; border-radius:4px;
}
#content .myth-stat .n {
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:clamp(40px,4.5vw,56px); line-height:0.9; letter-spacing:-0.04em;
  color:var(--pms-012); display:flex; align-items:baseline; gap:4px;
}
#content .myth-stat .n small { font-size:0.4em; color:#fff; opacity:0.7; font-weight:700; }
#content .myth-stat .k {
  font-family:var(--display); font-weight:700; font-style:italic;
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:#c5c8cd; margin-top:8px;
}

/* --- Reviews / story cards --- */
#content .reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
#content .review {
  background:#fff; border:3px solid #141414; border-radius:4px; padding:28px;
  display:flex; flex-direction:column; gap:16px; min-height:300px; position:relative;
}
#content .review:nth-child(3n+1) { background:var(--web-bg-blue); }
#content .review:nth-child(3n+2) { background:var(--pms-012); }
#content .review:nth-child(3n)   { background:var(--pms-1915); color:#fff; }
#content .review:nth-child(3n) h4,
#content .review:nth-child(3n) p,
#content .review:nth-child(3n) .who { color:#fff; }
#content .review:nth-child(3n) .who { border-top-color:#fff; }
#content .review:nth-child(3n) .stars { color:var(--pms-012); }
#content .review .stars { color:#141414; font-size:16px; letter-spacing:4px; font-weight:900; }
#content .review h4 {
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:22px; margin:0; line-height:1.15; letter-spacing:-0.01em; color:#141414;
}
#content .review p { font-size:14px; color:#141414; margin:0; font-weight:500; line-height:1.45; }
#content .review .who {
  margin-top:auto;
  font-family:var(--display); font-weight:700; font-style:italic;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:#141414;
  display:flex; justify-content:space-between; padding-top:14px; border-top:2px solid #141414;
}

/* --- Article prose --- */
#content .tr-prose { max-width:68ch; font-size:18px; line-height:1.7; color:var(--ink-2); font-weight:500; }
#content .tr-prose > * + * { margin-top:1.1em; }
#content .tr-prose p { margin:0; }
#content .tr-prose strong { color:var(--ink); font-weight:700; }
#content .tr-prose em { font-style:italic; }
#content .tr-prose .lead {
  font-family:var(--display); font-weight:700; font-style:italic;
  font-size:clamp(20px,2.2vw,26px); line-height:1.3; letter-spacing:-0.01em; color:var(--ink);
}
#content .tr-prose h2 {
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:clamp(28px,3.2vw,40px); line-height:1.05; letter-spacing:-0.02em;
  color:var(--ink); margin-top:1.6em;
}
#content .tr-prose h3 {
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:clamp(22px,2.4vw,28px); line-height:1.1; letter-spacing:-0.015em;
  color:var(--ink); margin-top:1.4em;
}
#content .tr-prose h2 em, #content .tr-prose h3 em { color:var(--accent); }
#content .tr-prose h2 + p, #content .tr-prose h3 + p { margin-top:.5em; }
#content .tr-prose blockquote {
  margin:1.4em 0 0; padding:4px 0 4px 24px; border-left:4px solid var(--accent);
  font-family:var(--display); font-weight:700; font-style:italic;
  font-size:clamp(22px,2.6vw,30px); line-height:1.25; letter-spacing:-0.015em; color:var(--ink);
}
#content .tr-prose .callout {
  margin-top:1.4em; padding:22px 24px;
  background:var(--web-bg-blue); border:3px solid var(--ink); border-radius:4px;
  font-family:var(--display); font-weight:700; font-style:italic;
  font-size:clamp(18px,2vw,22px); line-height:1.3; color:var(--ink);
}
#content .tr-prose .callout em { color:var(--accent-strong); }

/* --- Dark stat band (4-up) --- */
#content .today-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:8px; }

/* --- CTA band --- */
#content .cta-wrap { display:grid; grid-template-columns:1.4fr 1fr; gap:64px; align-items:center; }
#content .cta-actions { display:flex; flex-direction:column; gap:14px; align-items:stretch; }
#content .cta-actions .btn { justify-content:center; }
#content #cta .display em { color:#fff; -webkit-text-stroke:2.5px #141414; paint-order:stroke fill; }

/* --- Centred quote band --- */
#content .quote-band { text-align:center; max-width:30ch; margin:0 auto; }
#content .quote-band blockquote {
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:clamp(28px,4vw,56px); line-height:1.08;
  letter-spacing:-0.025em; margin:0; color:#141414;
}
#content .quote-band blockquote em { color:var(--pms-298); }
#content .quote-band .qb-attr {
  margin-top:24px;
  font-family:var(--display); font-weight:700; font-style:italic;
  font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-2);
}

/* --- Image placeholder (replaces prototype <image-slot>) --- */
#content .img-slot {
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:
    linear-gradient(135deg, var(--web-bg-blue) 25%, transparent 25%) 0 0/18px 18px,
    linear-gradient(225deg, var(--web-bg-blue) 25%, transparent 25%) 0 0/18px 18px,
    linear-gradient(315deg, var(--web-bg-blue) 25%, var(--pms-291) 25%) 0 0/18px 18px;
  color:#141414; padding:16px;
  font-family:var(--display); font-weight:700; font-style:italic;
  font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
}

/* --- Shared responsive --- */
@media (max-width:1000px) {
  #content .sec-head { grid-template-columns:1fr; gap:24px; margin-bottom:40px; }
  #content .family-head { flex-direction:column; align-items:start; }
  #content .reviews-grid { grid-template-columns:1fr 1fr; }
  #content .today-stats { grid-template-columns:repeat(2,1fr); }
  #content .cta-wrap { grid-template-columns:1fr; }
}
@media (max-width:1100px) {
  #content .myth-stats { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  #content .reviews-grid { grid-template-columns:1fr; }
  #content .myth-stats { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  #content .today-stats { grid-template-columns:1fr; }
}