/* ============================================================
   CONTENT — rich, reusable content components for deep pages
   Long-form prose, info grids, timelines, testimonials, steps,
   callouts, stat bands, comparison tables, tag lists, dividers.
   Works with tokens.css / components.css. Mobile-first.
   ============================================================ */

/* ---------- Section variants & rhythm ---------- */
.section--alt { background: linear-gradient(180deg, var(--color-surface), var(--color-bg)); }
.section--tight { padding-block: var(--space-12); }
.section-head--left { text-align: left; margin-inline: 0; }
.divider { height: 1px; background: var(--color-border); border: 0; margin-block: var(--space-12); }
.lead {
  font-size: var(--text-xl); line-height: 1.6; color: var(--color-text);
  max-width: 68ch; margin-bottom: var(--space-6);
}

/* ---------- Long-form prose ---------- */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--text-2xl); margin-top: var(--space-10); margin-bottom: var(--space-2); }
.prose h3 { font-size: var(--text-xl); margin-top: var(--space-6); margin-bottom: var(--space-1); }
.prose h4 { font-size: var(--text-lg); color: var(--color-gold); }
.prose p { color: var(--color-text); }
.prose ul, .prose ol { margin-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.prose ul li { list-style: disc; color: var(--color-text-muted); }
.prose ol li { list-style: decimal; color: var(--color-text-muted); }
.prose li strong { color: var(--color-text); }
.prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--color-gold); }
.prose blockquote {
  border-left: 4px solid var(--color-primary); padding: var(--space-3) var(--space-6);
  margin: var(--space-6) 0; color: var(--color-text-muted); background: var(--color-surface);
  border-radius: var(--radius-md); font-style: italic;
}
.prose table { width: 100%; border-collapse: collapse; margin-block: var(--space-4); font-size: var(--text-sm); }
.prose th, .prose td { border: 1px solid var(--color-border); padding: var(--space-3); text-align: left; }
.prose th { background: var(--color-surface-2); color: var(--color-text); font-family: var(--font-display); }
.prose td { color: var(--color-text-muted); }

/* ---------- Two-column split (text + visual) ---------- */
.split { display: grid; gap: var(--space-8); align-items: center; grid-template-columns: 1fr; }
.split__media {
  border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card); background: var(--color-surface-2);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split h2 { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.split p { color: var(--color-text-muted); margin-bottom: var(--space-4); }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
  .split--reverse .split__text { order: 2; }
  .split--reverse .split__media { order: 1; }
}

/* ---------- Icon / checklist list ---------- */
.icon-list { display: flex; flex-direction: column; gap: var(--space-4); }
.icon-list li { display: flex; gap: var(--space-4); align-items: flex-start; }
.icon-list .ic {
  flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--radius-md); background: var(--color-surface-2);
  border: 1px solid var(--color-border); font-size: var(--text-xl);
}
.icon-list h4 { font-size: var(--text-lg); margin-bottom: 2px; }
.icon-list p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------- Stat band ---------- */
.stat-band {
  display: grid; gap: var(--space-6); grid-template-columns: repeat(2, 1fr);
  background: linear-gradient(135deg, var(--color-maroon), var(--color-surface));
  border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-6); text-align: center;
}
.stat-band .num { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 700; color: var(--color-gold); }
.stat-band .label { color: var(--color-text-muted); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.08em; }
@media (min-width: 768px) { .stat-band { grid-template-columns: repeat(4, 1fr); } }

/* ---------- How-to steps (vertical, numbered) ---------- */
.howto { display: flex; flex-direction: column; gap: var(--space-4); counter-reset: howto; }
.howto__step {
  position: relative; display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: var(--space-4); row-gap: var(--space-1);
  align-items: start; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6);
}
.howto__step::before {
  counter-increment: howto; content: counter(howto);
  grid-column: 1; grid-row: 1 / -1; align-self: start;
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--color-primary); color: var(--color-on-primary);
  border-radius: var(--radius-full); font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl);
  box-shadow: var(--shadow-glow);
}
/* Force every real child (h3, p, …) into column 2 so text never lands
   in the 48px number column and can wrap normally. */
.howto__step > * { grid-column: 2; min-width: 0; }
.howto__step h3 { font-size: var(--text-lg); margin-bottom: 2px; }
.howto__step p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------- Testimonials ---------- */
.testimonials { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.testimonial {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3);
}
.testimonial .stars { color: var(--color-gold); letter-spacing: 2px; }
.testimonial p { color: var(--color-text); font-size: var(--text-base); }
.testimonial .who { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.testimonial .who .av {
  width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-surface-2);
  display: grid; place-items: center; font-family: var(--font-display); color: var(--color-gold); border: 1px solid var(--color-border);
}
.testimonial .who b { font-size: var(--text-sm); }
.testimonial .who span { color: var(--color-text-muted); font-size: var(--text-xs); display: block; }
@media (min-width: 768px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Callouts ---------- */
.callout {
  border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary);
  background: var(--color-surface); border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6); display: flex; gap: var(--space-4); align-items: flex-start;
}
.callout .ic { font-size: var(--text-2xl); flex-shrink: 0; }
.callout h4 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.callout p { color: var(--color-text-muted); font-size: var(--text-sm); }
.callout--gold { border-left-color: var(--color-gold); }
.callout--danger { border-left-color: var(--color-danger); }

/* ---------- Tag / pill list ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag {
  font-size: var(--text-sm); padding: var(--space-1) var(--space-4); border-radius: var(--radius-full);
  background: var(--color-surface-2); color: var(--color-text-muted); border: 1px solid var(--color-border);
  white-space: nowrap;
}

/* ---------- Feature tiles (with number/icon header) ---------- */
.tiles { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.tile {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6); transition: border-color var(--transition-base), transform var(--transition-base);
}
.tile:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.tile .kicker { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-primary); opacity: 0.5; line-height: 1; }
.tile h3 { font-size: var(--text-xl); margin-block: var(--space-2); }
.tile p { color: var(--color-text-muted); font-size: var(--text-sm); }
@media (min-width: 768px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tiles-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Table of contents (articles) ---------- */
.toc {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); margin-block: var(--space-6);
}
.toc h4 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: var(--space-3); }
.toc ol { margin-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
.toc ol li { list-style: decimal; }
.toc a { color: var(--color-text-muted); }
.toc a:hover { color: var(--color-primary); }

/* ---------- Ribbon / eyebrow band ---------- */
.ribbon {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  color: var(--color-gold); font-size: var(--text-xs); font-weight: 600;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* ============================================================
   RESPONSIVE SAFETY (mobile-first)
   Grid/flex items default to min-width:auto, which lets long
   words or media push a column wider than its track and break
   the layout. Force text columns to shrink and wrap instead.
   ============================================================ */
.split__text,
.callout > div,
.icon-list li > div,
.testimonial,
.feature-card,
.tile,
.panel__text { min-width: 0; }

/* Long unbroken strings (URLs, IDs) wrap instead of overflowing */
.prose p, .prose li,
.icon-list p, .callout p,
.testimonial p, .feature-card p { overflow-wrap: anywhere; }

/* Wide data tables scroll horizontally on small screens */
.prose table {
  display: block; max-width: 100%;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}

/* Media never exceeds its container */
img, svg, video, iframe { max-width: 100%; }