/* css/insights.css — Insights blog (listing + detail page) */

/* --- Hero --- */
/* Subtle, restrained motion behind the Insights hero. Two soft accent
   washes that drift slowly. Respects prefers-reduced-motion. */
.insights-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.insights-hero__pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(45,106,79,0.10), transparent 70%) 18% 35% / 520px 520px no-repeat,
    radial-gradient(closest-side, rgba(232,152,94,0.08), transparent 70%) 82% 60% / 460px 460px no-repeat;
  animation: insights-hero-drift 28s ease-in-out infinite alternate;
}
[data-theme="dark"] .insights-hero__pattern {
  background:
    radial-gradient(closest-side, rgba(82,183,136,0.14), transparent 70%) 18% 35% / 520px 520px no-repeat,
    radial-gradient(closest-side, rgba(232,152,94,0.10), transparent 70%) 82% 60% / 460px 460px no-repeat;
}
.insights-hero > .container { position: relative; z-index: 1; }
@keyframes insights-hero-drift {
  0%   { background-position: 18% 35%, 82% 60%; }
  50%  { background-position: 22% 30%, 78% 64%; }
  100% { background-position: 16% 38%, 84% 58%; }
}
@media (prefers-reduced-motion: reduce) {
  .insights-hero__pattern { animation: none; }
}

/* --- Card grid --- */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: var(--space-xl);
}
@media (max-width: 960px) {
  .insights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .insights-grid { grid-template-columns: 1fr; }
}

/* --- Row alignment for insights cards (subgrid) ---
   Every card is a 5-row grid (title, tags, byline, summary, footer) whose
   rows align with sibling cards on the same horizontal row of the parent
   grid. Without this, varying title lengths and tag counts make titles,
   tags, bylines, and summaries land at different y-positions across
   columns. Subgrid is supported in Chrome 117+, Firefox 71+, Safari 16+.
   On older browsers the cards still render correctly (each laid out
   independently) — they just won't align between siblings. */
.insights-grid > .case-card:not(.case-card--browse),
.insights-related__grid > .case-card:not(.case-card--browse) {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
}
.insights-grid > .case-card:not(.case-card--browse) > .case-card__header,
.insights-related__grid > .case-card:not(.case-card--browse) > .case-card__header {
  /* Unwrap so the 4 inner sections become direct subgrid items of the card. */
  display: contents;
}

.insights-grid .case-card--featured {
  grid-column: 1 / -1;
}

/* When the listing has only one card, span it full-width so it doesn't sit
   orphaned at 1/3 width with two empty columns. :only-child catches the
   single-card case without requiring the post to be flagged `featured`. */
.insights-grid > .case-card:only-child {
  grid-column: 1 / -1;
}

/* --- Case-card styles (mirrored from src/case-studies.html so the
   /insights/ listing renders identically without depending on a
   page-local <style> block). Keep in sync with case-studies. --- */
.case-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
  /* Flex column so footer (date + read-more) is bottom-aligned regardless
     of how short or long the body content is. */
  display: flex;
  flex-direction: column;
}
.case-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.case-card__header {
  padding: var(--space-2xl);
  border-bottom: 1px solid var(--border);
  flex: 1 1 auto;
}

/* When __header is unwrapped (display: contents under a subgrid card),
   re-apply the visual treatment to its former children so the card looks
   identical: title gets the top inset, summary gets the bottom inset +
   border-bottom, and each row gets a small vertical gap. The footer keeps
   its own padding. */
.insights-grid > .case-card:not(.case-card--browse) > .case-card__header > .case-card__title,
.insights-related__grid > .case-card:not(.case-card--browse) > .case-card__header > .case-card__title {
  grid-row: 1;
  padding: var(--space-2xl) var(--space-2xl) 0;
  margin: 0;
}
.insights-grid > .case-card:not(.case-card--browse) > .case-card__header > .case-card__tags,
.insights-related__grid > .case-card:not(.case-card--browse) > .case-card__header > .case-card__tags {
  grid-row: 2;
  padding: var(--space-md) var(--space-2xl) 0;
  margin: 0;
}
.insights-grid > .case-card:not(.case-card--browse) > .case-card__header > .case-card__byline,
.insights-related__grid > .case-card:not(.case-card--browse) > .case-card__header > .case-card__byline {
  grid-row: 3;
  padding: var(--space-md) var(--space-2xl) 0;
  margin: 0;
  align-self: start;
}
.insights-grid > .case-card:not(.case-card--browse) > .case-card__header > .case-card__summary,
.insights-related__grid > .case-card:not(.case-card--browse) > .case-card__header > .case-card__summary {
  grid-row: 4;
  padding: var(--space-md) var(--space-2xl) var(--space-2xl);
  margin: 0;
  border-bottom: 1px solid var(--border);
}
.insights-grid > .case-card:not(.case-card--browse) > .case-card__footer,
.insights-related__grid > .case-card:not(.case-card--browse) > .case-card__footer {
  grid-row: 5;
}
.case-card__byline {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-md);
}
.case-card__date {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.case-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.case-card__tag {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  background: var(--accent-subtle);
  color: var(--accent);
}
[data-theme="dark"] .case-card__tag {
  background: rgba(82,183,136,0.15);
}
.case-card__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
  line-height: 1.25;
}
.case-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.case-card__title a:hover { color: var(--accent); }
.case-card__summary {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.case-card__footer {
  padding: var(--space-lg) var(--space-2xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.case-card__company {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
}
.case-card__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: gap var(--transition-fast);
  white-space: nowrap;
}
.case-card__link:hover { gap: 0.625rem; }

/* --- Empty state (curated "coming soon" moment, not a placeholder) --- */
.insights-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  position: relative;
  overflow: hidden;
}
.insights-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(closest-side, rgba(45,106,79,0.06), transparent 70%) 20% 0% / 380px 380px no-repeat,
    radial-gradient(closest-side, rgba(232,152,94,0.05), transparent 70%) 80% 100% / 380px 380px no-repeat;
  pointer-events: none;
}
.insights-empty > * { position: relative; }
.insights-empty h2 {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}
.insights-empty p {
  max-width: 520px;
  margin: 0 auto var(--space-lg);
  line-height: 1.6;
}
.insights-empty__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}
[data-theme="dark"] .insights-empty {
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .insights-empty::before {
  background:
    radial-gradient(closest-side, rgba(82,183,136,0.10), transparent 70%) 20% 0% / 380px 380px no-repeat,
    radial-gradient(closest-side, rgba(232,152,94,0.07), transparent 70%) 80% 100% / 380px 380px no-repeat;
}

/* Newsletter form */
.insights-newsletter {
  display: flex;
  gap: var(--space-sm);
  max-width: 440px;
  margin-inline: auto;
}
.insights-newsletter input[type="email"] {
  flex: 1;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9375rem;
}
@media (max-width: 480px) {
  .insights-newsletter { flex-direction: column; }
}

/* Detail page hero */
.insights-post-hero {
  padding-top: calc(var(--nav-height) + var(--space-3xl));
  padding-bottom: var(--space-3xl);
  padding-inline: var(--container-padding);
  border-bottom: 1px solid var(--border);
}
.insights-post-hero__back {
  text-decoration: none;
}
.insights-post-hero__back {
  display: inline-block;
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}
.insights-post-hero__back:hover { color: var(--accent); }
.insights-post-hero__tags {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}
.insights-post-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3.6vw, 2.625rem);
  line-height: 1.15;
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}
.insights-post-hero__subtitle {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}
.insights-post-hero__byline {
  font-size: 0.875rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Detail page body */
.insights-post-body {
  max-width: 760px;
  margin: var(--space-2xl) auto;
  padding-inline: var(--container-padding);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-primary);
}
.insights-post-body h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: var(--space-2xl) 0 var(--space-md);
}
.insights-post-body h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: var(--space-xl) 0 var(--space-sm);
}
.insights-post-body p { margin-bottom: var(--space-md); }
.insights-post-body ul,
.insights-post-body ol {
  padding-left: 1.25rem;
  margin-bottom: var(--space-md);
}
.insights-post-body li { margin-bottom: 0.25rem; }
.insights-post-body blockquote {
  border-left: 3px solid var(--accent);
  background: var(--bg-alt);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  font-style: italic;
  margin: var(--space-lg) 0;
}
.insights-post-body blockquote cite {
  display: block;
  margin-top: var(--space-sm);
  font-style: normal;
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.insights-post-body figure {
  margin: var(--space-xl) 0;
}
.insights-post-body figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.insights-post-body figcaption {
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-sm);
}
.insights-callout {
  border-left: 3px solid var(--accent);
  background: var(--bg-alt);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  margin: var(--space-lg) 0;
}
.insights-callout--warning {
  border-left-color: var(--warm, #E8985E);
}
.insights-code {
  background: var(--bg-alt);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 0.875rem;
}

/* Mid CTA */
.insights-mid-cta {
  margin: var(--space-2xl) auto;
  max-width: 760px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
}
.insights-mid-cta p { margin-bottom: var(--space-md); }

/* Author bio */
.insights-author-bio {
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--border);
}
.insights-author-bio__inner {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
}
.insights-author-bio__inner img {
  flex-shrink: 0;
  border-radius: 50%;
}
.insights-author-bio__role {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}
.insights-author-bio__inner p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}
@media (max-width: 600px) {
  .insights-author-bio__inner { flex-direction: column; }
  .insights-author-bio__inner img { align-self: flex-start; }
}

/* Share row */
.insights-share {
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--border);
}
.insights-share__label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}
.insights-share__row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.insights-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.insights-share__btn:hover {
  border-color: var(--accent);
  background: var(--bg-alt);
}

/* Related posts */
.insights-related {
  padding: var(--space-3xl) 0;
  border-top: 1px solid var(--border);
}
.insights-related__heading {
  font-family: var(--font-display);
  font-size: 1.375rem;
  margin-bottom: var(--space-xl);
}
.insights-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 960px) { .insights-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .insights-related__grid { grid-template-columns: 1fr; } }

/* Browse-all fallback card (rendered when no related posts exist) */
.case-card--browse {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 180px;
  color: var(--text-primary);
  text-decoration: none;
}
.case-card--browse:hover { border-color: var(--accent); }
.case-card--browse .case-card__title { margin-bottom: var(--space-sm); }

/* Dark mode adjustments — inherits via CSS custom properties */
[data-theme="dark"] .insights-empty {
  border-color: rgba(255,255,255,0.12);
}