/* Insights (/insights/) — tagged-grid layout, chosen from the blog prototype
   review (src/_prototypes/blog-index-grid.njk / blog-article-grid.njk,
   Decision 0043). Card grid with visible tag pills and a pure-CSS (:has())
   filter, no JavaScript. Terracotta is deliberately not used for tag pills
   so it stays reserved for CTA buttons only. */

.ins-hero-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-h1);
  line-height: 1.1;
  margin: 0 0 var(--space-4);
  max-width: 20ch;
  margin-left: auto;
  margin-right: auto;
}

.ins-section {
  text-align: left;
}

/* Filter bar */
.ins-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
}

.ins-filter-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ins-filter-pill {
  display: inline-block;
  cursor: pointer;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--color-ink);
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--color-ink);
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.ins-filter-input:checked + .ins-filter-pill {
  background: var(--color-ink);
  color: var(--color-paper);
}

.ins-filter-input:focus-visible + .ins-filter-pill {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 2px;
}

/* Card grid */
.ins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.ins-card {
  background: var(--color-white);
  border: 1px solid rgba(18, 35, 28, 0.12);
  border-radius: 8px;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
}

.ins-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
}

.ins-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.2em 0.6em;
  border-radius: 999px;
  color: var(--color-white);
}

.ins-tag--leadership-management {
  background: var(--color-dark-green);
}

.ins-tag--execution-scaling {
  background: var(--color-medium-green);
  color: var(--color-ink);
}

.ins-tag--technical-decisions {
  background: var(--color-ink);
}

.ins-tag--ai-leadership {
  background: var(--color-light-green);
  color: var(--color-ink);
}

/* Ancestor-qualified on purpose: sections.css's ".field h2" rule
   (font-size: var(--step-h1), centered, max-width: 20ch) otherwise wins on
   specificity over a bare ".ins-card-title", since every card lives inside
   a ".field" section. */
.ins-card .ins-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
  line-height: 1.3;
  max-width: none;
  margin: 0 0 var(--space-2);
}

.ins-card-title a {
  color: var(--color-ink);
  text-decoration: none;
}

.ins-card-title a:hover,
.ins-card-title a:focus-visible {
  color: var(--color-terracotta);
  text-decoration: underline;
}

.ins-card-excerpt {
  font-size: var(--step-body);
  color: #3a4a42;
  margin: 0 0 var(--space-3);
  flex-grow: 1;
}

.ins-card-link {
  font-size: var(--step-small);
  font-weight: 700;
  color: var(--color-dark-green);
  text-decoration: none;
}

.ins-card-link:hover,
.ins-card-link:focus-visible {
  color: var(--color-terracotta);
}

/* Pure-CSS filtering: hide cards whose data-tag doesn't match the checked pill.
   The filter bar and the grid are siblings inside the same field-inner container. */
.ins-filter-bar:has(#ins-filter-leadership-management:checked) ~ .ins-grid .ins-card:not([data-tag~="leadership-management"]) {
  display: none;
}

.ins-filter-bar:has(#ins-filter-execution-scaling:checked) ~ .ins-grid .ins-card:not([data-tag~="execution-scaling"]) {
  display: none;
}

.ins-filter-bar:has(#ins-filter-technical-decisions:checked) ~ .ins-grid .ins-card:not([data-tag~="technical-decisions"]) {
  display: none;
}

.ins-filter-bar:has(#ins-filter-ai-leadership:checked) ~ .ins-grid .ins-card:not([data-tag~="ai-leadership"]) {
  display: none;
}

/* Article page */
.ins-article-hero {
  text-align: left;
}

.ins-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 700px) 1fr;
  gap: var(--space-6);
  text-align: left;
}

.ins-byline {
  font-size: var(--step-small);
  color: var(--color-light-green);
  margin: var(--space-3) 0 0;
}

.ins-article-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-h1);
  line-height: 1.15;
  margin: 0;
}

.ins-article-body {
  line-height: 1.75;
  font-size: var(--step-body-large);
}

.ins-article-body h2 {
  font-family: var(--font-display);
  font-size: var(--step-h3);
  line-height: 1.2;
  margin: var(--space-6) 0 var(--space-3);
}

.ins-article-body p {
  margin: 0 0 var(--space-4);
}

/* Persistent white card, consistently positioned regardless of what's
   inside it — currently the "more articles" list, so it stays visible while
   scrolling instead of disappearing under the sticky site header (header is
   ~76px tall; 6rem clears it with room to spare). */
.ins-sidebar {
  align-self: start;
  position: sticky;
  top: 6rem;
  background: var(--color-white);
  border: 1px solid rgba(18, 35, 28, 0.12);
  border-radius: 8px;
  padding: var(--space-4);
}

.ins-sidebar-label {
  font-size: var(--step-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-dark-green);
  margin: 0 0 var(--space-2);
}

.ins-sidebar-related {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ins-sidebar-related li {
  margin: 0 0 var(--space-2);
  font-size: var(--step-small);
}

.ins-sidebar-related li:last-child {
  margin-bottom: 0;
  padding-top: var(--space-2);
  border-top: 1px solid rgba(18, 35, 28, 0.12);
}

.ins-sidebar-related a {
  color: var(--color-ink);
}

/* Closing CTA band — quiet and text-only, matching the Section Bands
   concept's closing treatment rather than a hard-sell button banner, since
   an Insights article is a credibility asset first (docs/website/07 §22). */
.ins-closing {
  text-align: left;
}

.ins-closing p {
  font-size: var(--step-body-large);
  max-width: 60ch;
  margin: 0;
}

.ins-closing a {
  color: var(--color-light-green);
  font-weight: 700;
}

@media (max-width: 899px) {
  .ins-article-layout {
    grid-template-columns: 1fr;
  }

  .ins-sidebar {
    position: static;
    margin-top: var(--space-4);
  }
}