/* ==========================================================
   TygerLabs.ai · Insights article
   Page-only composition around .prose. Components come from
   ui-kit.css. Reading comfort first: the measure stays at the
   .prose width, the TOC rides alongside on desktop only.
   ========================================================== */


/* ---------- Hero ---------- */
.insights-post-hero .breadcrumb { margin-bottom: var(--s-6); }
.insights-post-hero h1 {
  max-width: 22ch;
  font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.insights-post-hero .page-hero-lede { max-width: 40rem; }

.insights-post-byline {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.insights-post-avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--tiger-gradient);
  color: var(--tiger-ink);
  font-family: var(--ff-display);
  font-weight: var(--fw-ultra);
  letter-spacing: -0.02em;
}
.insights-post-avatar-lg { width: 64px; height: 64px; font-size: var(--text-lg); }
.insights-post-byline p { margin: 0; }
.insights-post-byline-name { color: var(--ink); font-weight: var(--fw-medium); }
.insights-post-byline-name a { color: var(--ink); text-decoration: none; }
.insights-post-byline-name a:hover { color: var(--tiger-2); }
.insights-post-byline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  font-family: var(--ff-body);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.insights-post-byline-meta span { display: inline-flex; align-items: center; gap: var(--s-1); }

/* ---------- Body ---------- */
.insights-post-section { padding-top: clamp(var(--s-7), 5vw, var(--s-9)); }
.insights-post-body { color: var(--ink-2); }
.insights-post-body > p:first-child {
  font-size: var(--text-xl);
  line-height: 1.6;
  color: var(--ink);
}
.insights-post-body h2 {
  max-width: 24ch;
  letter-spacing: -0.03em;
  scroll-margin-top: calc(var(--header-h) + var(--s-5));
}
.insights-post-body h3 { letter-spacing: -0.015em; }
.insights-post-body h2 + *,
.insights-post-body h3 + * { margin-top: var(--s-4); }
.insights-post-body ol,
.insights-post-body ul { padding-left: 1.4em; }
.insights-post-body li::marker { color: var(--tiger-2); font-family: var(--ff-body); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums;}
.insights-post-body li strong { color: var(--ink); }
.insights-post-body :not(pre) > code {
  padding: 0.1em 0.4em;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  color: var(--tiger-2);
}
.insights-post-body pre code { color: var(--ink); }
.insights-post-body .proof { margin-block: var(--s-7); padding: var(--s-5) var(--s-6); }
.insights-post-body .proof p:not(.proof-value) { font-size: var(--text-md); line-height: 1.6; }
.insights-post-body .proof-value { font-size: var(--text-3xl); }
.insights-post-body blockquote { margin-block: var(--s-7); line-height: 1.35; }

/* ---------- Table of contents ---------- */
.insights-post-toc {
  position: sticky;
  top: calc(var(--header-h) + var(--s-6));
  max-height: calc(100dvh - var(--header-h) - var(--s-8));
  overflow-y: auto;
}
.insights-post-toc ol,
.insights-post-toc-mobile ol {
  counter-reset: toc;
  list-style: none;
  margin: 0;
  padding: 0;
}
.insights-post-toc li,
.insights-post-toc-mobile li { counter-increment: toc; }
.insights-post-toc a,
.insights-post-toc-mobile a {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.45;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.insights-post-toc a:hover,
.insights-post-toc-mobile a:hover { color: var(--ink); }
.insights-post-toc a.is-active { color: var(--tiger-2); font-weight: var(--fw-bold); }

.insights-post-toc-mobile {
  margin-bottom: var(--s-6);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
.insights-post-toc-mobile summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: 0 var(--s-5);
  cursor: pointer;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  color: var(--ink);
}
.insights-post-toc-mobile ol { padding: 0 var(--s-5) var(--s-4); }
.insights-post-toc-mobile a { min-height: 44px; align-items: center; }

/* ---------- Author and share ---------- */
.insights-post-foot {
  display: grid;
  gap: var(--s-6);
  max-width: 44rem;
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.insights-post-author { display: flex; gap: var(--s-4); align-items: flex-start; }
.insights-post-author p { margin: 0; }
.insights-post-author-name { color: var(--ink); font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--text-lg); }
.insights-post-author-text { margin-top: var(--s-2); color: var(--muted); }
.insights-post-author-text a { color: var(--tiger-2); }

.insights-post-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.insights-post-share-label {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--text-xs);
  color: var(--dim);
}
.insights-post-share-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.insights-post-share-btn { --bs-btn-padding-x: 0; width: 44px; }
.insights-post-share-btn .ph { font-size: 1.25rem; }

@media print {
  .insights-post-toc, .insights-post-share, .insights-post-related, .insights-post-close { display: none; }
}

/* Featured image under the hero, and thumbnails on related posts */
.insights-post-figure { margin: 0; overflow: hidden; border-radius: var(--r-xl); background: var(--surface-1); }
.insights-post-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.insights-related-img { display: block; width: calc(100% + 2 * var(--s-6)); max-width: none; height: auto; aspect-ratio: 16 / 9; margin: calc(-1 * var(--s-6)) calc(-1 * var(--s-6)) var(--s-2); object-fit: cover; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.insights-related-card { overflow: hidden; }
@media (max-width: 575.98px) { .insights-post-figure { border-radius: var(--r-lg); } }

/* The title shares the hero with the AI Blog Writer card on desktop. */
@media (min-width: 992px) {
  .insights-post-hero h1 { font-size: clamp(2.5rem, 1rem + 3vw, 4rem); }
}