/*
 * OphieAI — Insights page styles
 * Used by: insights.html (index) and insights/{slug}.html (post detail).
 * All values via tokens.
 */

/* ============================================
   PAGE-WIDE WALLPAPER (insights index only)
   Same image used by SmartDoc as a wallpaper, so
   the two pages share visual DNA. Fixed-position
   so the background does not scroll, allowing a
   single image to bleed seamlessly across hero
   and content sections under different overlays.
   ============================================ */

.insights-page .insights-wallpaper {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    url('/assets/images/kling_20260422_作品_Image1_Ima_3642_0.png')
    center / cover no-repeat;
  /* Dim and desaturate the wallpaper to match the SmartDoc/SmartVantage
     treatment — the image becomes a quiet near-black texture rather than
     a bright paper-fold scene that competes with the foreground. */
  filter: grayscale(1) brightness(0.22);
}

/* Body sits transparent so the wallpaper shows through */
.insights-page {
  background: transparent;
}

/* Non-hero sections darken the wallpaper to a near-black
   texture, matching the SmartDoc pattern. */
.insights-page main > .content-section,
.insights-page main > .cta-section {
  background: oklch(8% 0.005 268 / 0.86);
  border-top: 1px solid oklch(100% 0 0 / 0.04);
}

/* Adjacent content-sections share one hairline (no doubled rule). */
.insights-page main > .content-section + .content-section {
  border-top: none;
}

/* The CTA section is its own intentional moment — give it a clearly
   visible divider from the section above so it doesn't read as a tail. */
.insights-page main > .cta-section {
  border-top: 1px solid oklch(100% 0 0 / 0.12);
}

/* Dark overlay on the footer so the wallpaper doesn't bleed through
   as bright white at the bottom of the page. Matches the section
   overlay tone above for visual continuity. */
.insights-page .site-footer {
  position: relative;
  background: oklch(8% 0.005 268 / 0.92);
  border-top: 1px solid oklch(100% 0 0 / 0.06);
}

/* ============================================
   INSIGHTS INDEX HERO
   Mirrors SmartDoc/SmartVantage Template B (§9):
   full-bleed muted video + flat dark overlay,
   left-aligned content in a 1400px frame, glass CTAs.
   ============================================ */

.insights-hero {
  position: relative;
  overflow: hidden;
  background: transparent !important; /* override any product.css fill */
  border-bottom: none;
}

/* Suppress product.css accent radial glow — video provides the bg. */
.insights-hero::before {
  display: none;
}

.insights-hero-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  background: oklch(4% 0.003 268);
}

.insights-hero-video-bg video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%) scale(1.15);
  display: block;
}

.insights-hero-video-overlay {
  position: absolute;
  inset: 0;
  background: oklch(4% 0.003 268 / 0.82);
}

.insights-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--space-8);
  padding-top: calc(var(--nav-height) + var(--space-4));
  padding-bottom: var(--space-3xl);
}

.insights-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin-bottom: var(--space-6);
  max-width: 22ch;
}

.insights-hero-body {
  max-width: 90ch;
  margin-bottom: var(--space-10);
}

.insights-hero-body p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* ============================================
   ARTICLE HERO
   Overrides product.css .page-hero on individual
   article pages. Editorial framing: dark overlay
   so the wallpaper doesn't overwhelm the text,
   tighter title sizing, wider max-width so titles
   wrap on a satisfying line instead of one word at a time.
   ============================================ */

/* Full-viewport editorial hero — title centered both axes, body
   appears below the fold so readers scroll into the article. */
.insights-article .page-hero {
  position: relative;
  isolation: isolate;
  background: transparent;
  border-bottom: none;
  overflow: hidden;
  min-height: 100vh;
  padding-top: var(--nav-height);
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dark gradient — heavier at top (behind nav) and bottom (behind scroll
   indicator) so both can sit cleanly over the bright wallpaper. */
.insights-article .page-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(
      to bottom,
      oklch(4% 0.003 268 / 0.85) 0%,
      oklch(4% 0.003 268 / 0.55) 25%,
      oklch(4% 0.003 268 / 0.5) 70%,
      oklch(4% 0.003 268 / 0.85) 100%
    );
  pointer-events: none;
  z-index: 0;
}

.insights-article .page-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
}

.insights-article .page-hero-eyebrow {
  margin-bottom: var(--space-6);
}

.insights-article .page-hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 22ch;
  color: var(--color-ink);
  margin: 0 auto var(--space-6);
}

.insights-article .page-hero-body {
  max-width: 60ch;
  margin: 0 auto var(--space-6);
}

.insights-article .page-hero-body p {
  font-size: var(--text-lg);
  color: var(--color-ink);
}

.insights-article .insight-meta {
  margin: 0 0 var(--space-6);
  color: var(--color-ink);
  opacity: 0.85;
}

.insights-article .article-share {
  justify-content: center;
  margin-top: var(--space-2);
}

.insights-article .article-share-label {
  color: var(--color-ink);
}

.insights-article .article-share-btn {
  color: var(--color-ink);
  border-color: oklch(100% 0 0 / 0.25);
  background: oklch(100% 0 0 / 0.06);
}

.insights-article .article-share-btn:hover {
  color: var(--color-accent);
  background: oklch(60% 0.21 268 / 0.18);
  border-color: var(--color-accent);
}

/* Scroll indicator — a McKinsey-style downward chevron pill that
   sits inside the hero stack between the meta line and the share
   row. Click scrolls to the article body. Subtle bounce loop. */
.article-scroll-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-6);
  padding: 0;
  background: oklch(100% 0 0 / 0.04);
  border: 1px solid oklch(100% 0 0 / 0.25);
  border-radius: var(--radius-full);
  color: var(--color-ink);
  cursor: pointer;
  transition:
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
  animation: article-scroll-bounce 2.4s ease-in-out infinite;
}

.article-scroll-indicator:hover {
  background: oklch(100% 0 0 / 0.12);
  border-color: var(--color-ink);
}

.article-scroll-indicator svg {
  width: 20px;
  height: 20px;
}

@keyframes article-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .article-scroll-indicator {
    animation: none;
  }
}

@media (max-width: 768px) {
  .insights-article .page-hero-title {
    font-size: clamp(1.875rem, 7vw, 2.5rem);
    max-width: 18ch;
  }

  .insights-article .page-hero-body p {
    font-size: var(--text-base);
  }
}

/* ============================================
   ARTICLE SHARE ROW — sits in the hero after the meta line.
   Tiny icon buttons (LinkedIn / X / Facebook) that open
   share intents in a new window via the inline script.
   ============================================ */

.article-share {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.article-share-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-right: var(--space-2);
}

.article-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: oklch(100% 0 0 / 0.04);
  border: 1px solid oklch(100% 0 0 / 0.12);
  color: var(--color-text-muted);
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.article-share-btn:hover {
  background: oklch(60% 0.21 268 / 0.14);
  border-color: oklch(60% 0.21 268 / 0.5);
  color: var(--color-accent);
}

.article-share-btn svg {
  width: 16px;
  height: 16px;
}

/* ============================================
   TL;DR — first paragraph of each article gets a
   tinted accent-bordered callout with an eyebrow label
   so readers can pull the gist before reading the body.
   ============================================ */

.article-body > .article-tldr {
  position: relative;
  padding: var(--space-5) var(--space-6);
  padding-left: var(--space-8);
  background: oklch(60% 0.21 268 / 0.05);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
  margin-bottom: var(--space-8);
}

.article-body > .article-tldr::before {
  content: 'TL;DR';
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

/* ============================================
   FILTER CHIPS
   Above the post grid. "All posts" + per-category.
   ============================================ */

.insight-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}

.insight-filter-btn {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
  background: oklch(100% 0 0 / 0.04);
  border: 1px solid oklch(100% 0 0 / 0.08);
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-6);
  cursor: pointer;
  transition:
    background 200ms var(--ease-out),
    color 200ms var(--ease-out),
    border-color 200ms var(--ease-out);
}

.insight-filter-btn:hover {
  background: oklch(100% 0 0 / 0.08);
  color: var(--color-ink);
  border-color: oklch(100% 0 0 / 0.16);
}

.insight-filter-btn.is-active {
  background: var(--color-accent);
  color: var(--color-ink);
  border-color: transparent;
}

.insight-filter-btn.is-active:hover {
  background: var(--color-accent-hover);
}

/* ============================================
   POST GRID + LIQUID GLASS CARDS
   ============================================ */

.insight-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.insight-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: oklch(13% 0.006 268 / 0.42);
  border: 1px solid oklch(100% 0 0 / 0.1);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  min-height: 200px;
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow:
    0 2px 12px oklch(0% 0 0 / 0.2),
    0 1px 2px oklch(0% 0 0 / 0.15);
  transition:
    transform 400ms cubic-bezier(0.175, 0.885, 0.32, 1.6),
    background 300ms var(--ease-out),
    border-color 300ms var(--ease-out),
    box-shadow 300ms var(--ease-out);
}

/* Liquid glass light source — a soft top-left highlight + bottom-right shadow,
   giving the card a sense of being lit from above-left as if it were a real
   pane of glass over the wallpaper. */
.insight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(
      120% 80% at 0% 0%,
      oklch(100% 0 0 / 0.14) 0%,
      oklch(100% 0 0 / 0.04) 35%,
      oklch(100% 0 0 / 0) 65%
    ),
    linear-gradient(
      180deg,
      oklch(100% 0 0 / 0.05) 0%,
      oklch(100% 0 0 / 0) 40%,
      oklch(0% 0 0 / 0.08) 100%
    );
}

/* Inner highlight ring — bright on the top + left edges, near-invisible on the
   bottom + right, mimicking light bouncing off the top edge of glass. */
.insight-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 1px 1px 0 0 oklch(100% 0 0 / 0.22),
    inset 0 -1px 0 0 oklch(0% 0 0 / 0.2);
}

.insight-card > * {
  position: relative;
  z-index: 1;
}

.insight-card[hidden] {
  display: none;
}

.insight-card:hover {
  transform: translateY(-6px);
  background: oklch(16% 0.008 268 / 0.55);
  border-color: oklch(100% 0 0 / 0.22);
  box-shadow:
    0 20px 48px oklch(0% 0 0 / 0.45),
    0 0 0 1px oklch(100% 0 0 / 0.15),
    0 0 60px -10px oklch(85% 0 0 / 0.25);
}

.insight-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.insight-card-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  background: oklch(60% 0.21 268 / 0.14);
  border: 1px solid oklch(60% 0.21 268 / 0.3);
  border-radius: var(--radius-full);
  padding: 6px var(--space-4);
}

.insight-card-date {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-subtle);
}

.insight-card-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2.2vw, var(--text-2xl));
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.insight-card-excerpt {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  flex-grow: 1;
}

.insight-card-cta {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
  margin-top: auto;
  transition: transform 250ms var(--ease-out);
}

.insight-card:hover .insight-card-cta {
  transform: translateX(4px);
}

/* ============================================
   PAGE HERO EYEBROW
   Used as the category label above each post title.
   ============================================ */

.page-hero-eyebrow {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}

/* ============================================
   POST META LINE
   By {Author} · {Date} · {N} min read
   ============================================ */

.insight-meta {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-top: var(--space-6);
}

/* ============================================
   ARTICLE BODY (long-form prose)
   Stricter superset of .prose — adds heading,
   list, blockquote, table rules article bodies need.
   ============================================ */

.article-body {
  max-width: 65ch;
  margin-inline: auto;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.article-body > * + * {
  margin-top: var(--space-5);
}

.article-body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--text-xl), 2.4vw, var(--text-2xl));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin-top: var(--space-12);
}

.article-body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  margin-top: var(--space-8);
}

.article-body strong {
  color: var(--color-ink);
  font-weight: 500;
}

.article-body em {
  color: var(--color-ink);
}

.article-body a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast);
}

.article-body a:hover {
  border-bottom-color: var(--color-accent);
}

.article-body ul {
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
}

.article-body ul li {
  position: relative;
  padding-left: var(--space-6);
}

.article-body ul li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

.article-body blockquote {
  border-left: 3px solid var(--color-accent);
  padding: var(--space-4) var(--space-6);
  margin-block: var(--space-8);
  font-style: italic;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-ink);
}

/* Table rendering (post 3 has cost/benchmark tables) */

.article-table {
  overflow-x: auto;
  margin-block: var(--space-6);
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.article-body th,
.article-body td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.article-body th {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink);
}

/* "All insights" back link below the article body */

.article-back {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.article-back a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  transition: color var(--dur-fast);
}

.article-back a:hover {
  color: var(--color-accent);
}

/* ============================================
   FILTER HEADER ROW (filter chips + result count)
   Mirrors the §8.7 carousel-filter convention
   above a static grid: filters left, count right.
   ============================================ */

.insights-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.insights-list-header .insight-filters {
  margin-bottom: 0;
}

.insights-count {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-subtle);
  white-space: nowrap;
}

/* ============================================
   ARTICLE PAGE — wallpaper overlay
   Heavier than the index overlay so prose reads
   cleanly over the texture.
   ============================================ */

.insights-article main > .content-section {
  background: oklch(8% 0.005 268 / 0.92);
}

/* ============================================
   ARTICLE H2 — anchor link affordance
   Small inline icon next to long-form headings.
   Hover or focus reveals it; click copies the
   deep link to clipboard.
   ============================================ */

.article-body h2 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  scroll-margin-top: var(--space-16);
}

.article-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  color: var(--color-text-subtle);
  opacity: 0;
  border-radius: var(--radius-sm);
  transition:
    opacity var(--dur-base) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.article-body h2:hover .article-anchor,
.article-body h2:focus-within .article-anchor,
.article-anchor:focus-visible {
  opacity: 1;
  color: var(--color-accent);
}

.article-anchor svg {
  width: 16px;
  height: 16px;
}

/* ============================================
   ARTICLE COPY-LINK TOAST
   Fades in bottom-right when the anchor button
   copies the URL. One instance per page, toggled
   via .is-visible.
   ============================================ */

.article-toast {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 1000;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface-high);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink);
  box-shadow: 0 8px 24px oklch(0% 0 0 / 0.4);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.article-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .article-toast {
    transition: opacity var(--dur-instant) var(--ease-out);
    transform: none;
  }

  .article-toast.is-visible {
    transform: none;
  }

  .article-anchor {
    transition: opacity var(--dur-instant) var(--ease-out);
  }
}

/* ============================================
   ARTICLE FOOTER — related posts
   Sits as the last content-section on each
   article. Reuses .insight-grid for the cards.
   ============================================ */

.insights-article-footer .article-related-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2.4vw, var(--text-2xl));
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  max-width: 22ch;
  margin-bottom: var(--space-8);
}

.insights-article-footer .article-related-title em {
  color: var(--color-accent);
}

/* ============================================
   MOBILE
   ============================================ */

@media (max-width: 900px) {
  .insight-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .insights-hero-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .insight-card {
    padding: var(--space-8) var(--space-8) var(--space-10);
    min-height: 0;
    gap: var(--space-6);
  }

  .article-body h2 {
    font-size: var(--text-xl);
    margin-top: var(--space-10);
  }

  .article-body blockquote {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-base);
  }

  .insights-list-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .article-toast {
    bottom: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
    text-align: center;
  }
}