/* Insights listing and article pages (the HubSpot blog templates).
   Built only from the tokens and patterns in styles.css; loaded by the two blog templates alone. */

/* ---- Listing: topic and role filters, search ---- */
.ins-controls { display: grid; gap: 24px; }
@media (min-width: 1100px) {
  .ins-controls { grid-template-columns: minmax(0, 1fr) 320px; align-items: end; gap: 48px; }
}
.ins-filters { display: grid; gap: 20px; }
.ins-fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ins-flabel, .ins-group-label {
  flex: 0 0 100%;
  font: var(--w-label) var(--t-label)/1.4 var(--font-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.ins-chip, .ins-group-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--text);
  font: 400 0.9375rem/1.4 var(--font-text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.ins-chip:hover, .ins-group-links a:hover { border-color: var(--ink); color: var(--ink); }
.ins-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.ins-search input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 4px;
  font: 400 1.0625rem/1.4 var(--font-text);
  color: var(--ink);
  background: var(--paper-warm);
  border: 1px solid var(--hair-strong);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ins-search input::placeholder { color: var(--muted); }
.ins-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(160, 72, 42, 0.16); }

/* ---- Listing rows: the artifact's insights list, with the category and date above each title ---- */
.ins-rows { margin-top: var(--gap-head); }
.ins-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 8px;
  font: var(--w-label) var(--t-label)/1.4 var(--font-text);
  letter-spacing: 0.01em;
}
.ins-meta .ins-cat { color: var(--accent); }
.ins-meta time { color: var(--muted); font-weight: 400; }
.ins-none { margin-top: 32px; color: var(--muted); }
.ins-more { margin-top: 40px; }

/* ---- What we write about ---- */
.ins-groups { display: grid; gap: 40px var(--gap-head); margin-top: var(--gap-head); }
@media (min-width: 768px) {
  .ins-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ins-group { border-top: 1px solid var(--hair-strong); padding-top: 24px; }
.ins-group > p:not(.ins-group-label) { margin-top: 12px; max-width: 52ch; }
.ins-group-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* ---- Article ---- */
.post-eyebrow {
  margin-bottom: 20px;
  font: var(--w-label) var(--t-label)/1.4 var(--font-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.post-eyebrow a { color: var(--accent-night); text-decoration: none; }
.post-eyebrow a:hover { color: var(--cream); }
/* Insights title on one line from 900px up, like the Why now hero; below ~990px the size eases down so the line still fits */
.page-hero.dark.ins-hero h1 { max-width: none; white-space: nowrap; font-size: min(var(--t-h1), (100vw - 96px) / 16.6); }
@media (max-width: 899.98px) {
  .page-hero.dark.ins-hero h1 { white-space: normal; text-wrap: balance; font-size: var(--t-h1); }
}
.page-hero.dark.post-hero h1 {
  max-width: 24ch;
  font: var(--w-heading) clamp(2rem, 1.2rem + 2.6vw, 3.5rem)/1.1 var(--font-heading);
  letter-spacing: -0.015em;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 28px;
  font-size: var(--t-body-sm);
  color: var(--cream-muted);
}
.post-meta a { color: var(--cream-body); text-decoration: underline; text-decoration-color: var(--cream-hair); text-underline-offset: 3px; }
.post-meta a:hover { color: var(--cream); text-decoration-color: currentColor; }
.post-meta .sep { color: var(--cream-hair); }

.post-body { max-width: 46rem; font-size: var(--t-body); line-height: 1.7; color: var(--text); }
.post-body :where(p, ul, ol, blockquote, figure, table) { margin: 0 0 1.1em; }
.post-body .lead { font-size: var(--t-lede); line-height: 1.55; color: var(--ink); margin-bottom: 1.4em; }
.post-body h2 { font: var(--w-heading) var(--t-feature)/1.2 var(--font-heading); letter-spacing: -0.01em; color: var(--ink); margin: 2.2em 0 0.7em; }
.post-body h3 { font: var(--w-heading) var(--t-title)/1.25 var(--font-heading); color: var(--ink); margin: 1.8em 0 0.6em; }
.post-body ul, .post-body ol { padding-left: 1.25em; }
.post-body li + li { margin-top: 0.45em; }
.post-body li::marker { color: var(--accent); }
.post-body a { color: var(--accent); text-underline-offset: 3px; }
.post-body a:hover { color: var(--ink); }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body blockquote { padding-left: 24px; border-left: 2px solid var(--accent); font: var(--w-heading) var(--t-title)/1.4 var(--font-heading); color: var(--ink); }
.post-body img { height: auto; border-radius: var(--r-md); }
.post-body table { width: 100%; border-collapse: collapse; font-size: var(--t-body-sm); }
.post-body th, .post-body td { text-align: left; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.post-keep .insights-list { margin-top: var(--gap-head); }