/* Page-specific additions for /insights — built on top of tokens/base/components/layout. */

.insights-hero{
  --glow: var(--turquoise);
  padding: 130px var(--side) 110px;
  min-height: 640px;
  display: flex; align-items: center;
}
.insights-hero .hero-content{ max-width: 680px; }
.insights-hero h1{ font-size: 50px; line-height: 1.12; }
.insights-hero p{ font-size: 17px; line-height: 1.6; color: var(--paper-soft); max-width: 680px; }

/* Featured perspective — the page's editorial anchor: generous space and a
   faintly tinted surface give it hierarchy, not brightness. No glow/shadow. */
.featured-card{
  background: linear-gradient(135deg, color-mix(in srgb, var(--turquoise) 7%, var(--surface)) 0%, color-mix(in srgb, var(--surface) var(--veil-card), transparent) 65%);
  border: 1px solid color-mix(in srgb, var(--turquoise) 30%, var(--line));
  border-radius: 20px; padding: 56px 64px; max-width: 840px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 20px;
}
.featured-card h3{ font-size: 30px; line-height: 1.22; max-width: 720px; }
.featured-card p{ font-size: 16px; line-height: 1.65; color: var(--ink-soft); max-width: 680px; }

/* Connecture Perspectives — a two-up grid of short, self-contained reflection
   cards. No hover lift: these are reading cards, not links (see
   components.css — hover is reserved for cards with a real CTA inside). */
.insight-post{
  background: color-mix(in srgb, var(--surface) var(--veil-card), transparent);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px; display: flex; flex-direction: column; gap: 10px;
  scroll-margin-top: 100px;
}
.insight-post h3{ font-size: 18px; line-height: 1.3; }
.insight-post p{ font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

/* Topic cards — the four categories, kept compact so they support the page
   rather than compete with the reflections below them. */
.topic-card{ padding: 20px 22px; gap: 8px; }
.topic-card h3{ font-size: 15.5px; }
.topic-card p{ font-size: 12.5px; line-height: 1.5; }

@media (max-width: 640px){
  .insights-hero h1{ font-size: 32px; }
  .featured-card{ padding: 32px 26px; border-radius: 16px; }
  .featured-card h3{ font-size: 22px; }
  .insight-post{ padding: 22px; }
}