/* =============================================================
   VIPRAMIND TECHNOLOGIES — BLOG STYLESHEET
   =============================================================
   Loaded AFTER assets/css/style.css on blog.html and every
   /blog/*.html article page. Consumes style.css's tokens and
   components (--blue-1/2, --violet, --grad-text, --font-*, --r-*,
   .glass, .chip, .avatar, .btn, .newsletter, .cta-band) rather
   than redeclaring them — a color/radius/font change belongs in
   style.css's :root block, not here.

   TABLE OF CONTENTS
   1.  Category Color System (dark-context defaults)
   2.  Reading Progress Bar (article pages)
   3.  Blog Hero & Search
   4.  Article Listing (featured story + grid, single section)
   5.  Article Page — header, hero, layout, share rail
   6.  Article Page — body typography & tags
   7.  Related Articles
   8.  LIGHT THEME — scoped to body.blog-page only
   9.  Responsive
   ============================================================= */

/* =============================================================
   1. CATEGORY COLOR SYSTEM (dark-context defaults)
   ============================================================= */
/* Every category maps to exactly one of the site's three brand
   colors — the mapping lives only here. These are the DARK-page
   defaults (used by index.html's homepage teaser cards); Section 8
   overrides the text-on-white variants for blog.html/article pages,
   where a light cyan/violet on white would fail contrast. */
.thumb-blue   { background: linear-gradient(135deg, rgba(47,107,255,.38)  /* --blue-1 */, var(--bg-elev) 75%); }
.thumb-cyan   { background: linear-gradient(135deg, rgba(0,198,251,.34)   /* --blue-2 */, var(--bg-elev) 75%); }
.thumb-purple { background: linear-gradient(135deg, rgba(123,97,255,.32)  /* --violet */, var(--bg-elev) 75%); }

.chip-blue   { color: var(--blue-1); border-color: rgba(47,107,255,.4); background: rgba(47,107,255,.08); }
.chip-cyan   { color: var(--blue-2); border-color: rgba(0,198,251,.4);  background: rgba(0,198,251,.08); }
.chip-purple { color: var(--violet); border-color: rgba(123,97,255,.4); background: rgba(123,97,255,.08); }

/* =============================================================
   2. READING PROGRESS BAR (article pages)
   ============================================================= */
.reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--grad-text);
  z-index: 900;
  transition: width .08s linear;
}
@media (prefers-reduced-motion: reduce) { .reading-progress { transition: none; } }

/* =============================================================
   3. BLOG HERO & SEARCH
   ============================================================= */
.blog-hero { padding-top: 152px; padding-bottom: 8px; }
.blog-hero .hero-copy { max-width: 720px; }
.blog-hero .lede { max-width: 600px; }

.blog-search {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 440px;
  padding: 4px 6px 4px 16px;
  border-radius: var(--r-pill);
}
.blog-search svg { flex: none; color: var(--text-dim); }
.blog-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14.5px;
  padding: 10px 0;
}
.blog-search input::placeholder { color: var(--text-dim); }

/* =============================================================
   4. ARTICLE LISTING — featured story + grid (single section)
   ============================================================= */
/* Featured story and the article grid read as ONE continuous
   block, not two stacked sections — deliberately overriding both
   padding-top AND padding-bottom (never just one edge) so no
   default .section spacing leaks through and stacks with a
   neighboring section. */
.blog-listing { padding: 56px 0 72px; }

.featured-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  overflow: hidden; /* .glass already sets border-radius via --r-lg */
}
.featured-thumb { min-height: 340px; position: relative; }
.featured-thumb .featured-eyebrow {
  position: absolute; left: 28px; top: 28px;
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: #04070F; background: var(--white);
  padding: 5px 10px; border-radius: var(--r-sm);
}
.featured-body { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.featured-body .chip { align-self: flex-start; }
.featured-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.25;
}
.featured-body p.excerpt { color: var(--text-mut); font-size: 15.5px; line-height: 1.75; }
.featured-meta { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.featured-meta .meta-text { font-size: 12.5px; color: var(--text-mut); }
.featured-meta .meta-text strong { color: var(--white); font-weight: 600; }

/* Gap between the featured card and the grid below it — a fixed,
   deliberate margin instead of two sections' padding colliding. */
.blog-grid-wrap { margin-top: 56px; }

.blog-index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.blog-index-card {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* .glass already sets border-radius via --r-lg */
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.blog-index-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.card-thumb { height: 150px; }
.card-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-body h3 { font-family: var(--font-display); font-weight: 650; font-size: 17.5px; line-height: 1.4; }
.card-body .excerpt {
  color: var(--text-mut);
  font-size: 13.8px;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta { margin-top: auto; display: flex; align-items: center; gap: 10px; padding-top: 6px; }
.card-meta .meta-text { font-size: 12px; color: var(--text-mut); line-height: 1.4; }
.card-meta .meta-text strong { color: var(--white); font-weight: 500; }

#blogEmptyState { text-align: center; padding: 60px 20px; color: var(--text-mut); font-size: 15px; }

/* =============================================================
   5. ARTICLE PAGE — header, hero, layout, share rail
   ============================================================= */
.article-container { max-width: 760px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-mut); margin-bottom: 22px; }
.breadcrumb a { color: var(--text-mut); }
.breadcrumb a:hover { color: var(--white); }

.article-title {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.18;
  margin-top: 16px;
}
.article-excerpt { margin-top: 18px; font-size: 18px; line-height: 1.65; color: var(--text-mut); max-width: 640px; }
.article-meta {
  display: flex; align-items: center; gap: 14px;
  margin-top: 30px; padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.article-meta .meta-name { font-size: 14.5px; font-weight: 600; color: var(--white); }
.article-meta .meta-sub { font-size: 13px; color: var(--text-mut); margin-top: 2px; }

.article-hero-thumb { height: 340px; margin-top: 36px; border-radius: var(--r-lg); }

.article-layout { display: grid; grid-template-columns: 56px 1fr; gap: 40px; align-items: start; margin-top: 40px; }
.article-share { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.article-share button, .article-share a {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-border);
  color: var(--text-mut);
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.article-share button:hover, .article-share a:hover { color: #04070F; background: var(--grad-text); border-color: transparent; }
.share-label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); writing-mode: vertical-rl;
  margin-top: 4px;
}

/* =============================================================
   6. ARTICLE PAGE — body typography & tags
   ============================================================= */
.article-body { font-size: 17.5px; line-height: 1.9; color: var(--white); }
.article-body p { margin-bottom: 26px; }
.article-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 2.4vw, 27px);
  margin: 46px 0 18px;
  line-height: 1.35;
}
.article-body h3 { font-family: var(--font-display); font-weight: 650; font-size: 19px; margin: 32px 0 14px; }
.article-body ul, .article-body ol { margin: 0 0 26px 22px; }
.article-body li { margin-bottom: 10px; line-height: 1.75; }
.article-body strong { color: var(--white); }
.article-body code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: rgba(255,255,255,.06);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}
.article-body blockquote {
  margin: 34px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--blue-1);
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
  color: var(--white);
}
.article-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 48px; }

/* =============================================================
   7. RELATED ARTICLES
   ============================================================= */
.related-section { border-top: 1px solid var(--line); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }

/* =============================================================
   8. LIGHT THEME — scoped to body.blog-page only
   ============================================================= */
/* Blog reading should look like Medium/IBM's light editorial pages,
   even though the rest of the site is dark. Rather than rewriting
   every component's colors, this remaps the NEUTRAL tokens
   (backgrounds, glass, lines, and — yes — the token literally named
   --white, repurposed here to mean "primary foreground color") at
   the body level. Every component below already reads its colors
   from these tokens, so the whole page relights for free. Brand
   accents (--blue-1/2, --violet, gradients) are intentionally left
   untouched — they should read the same color in both themes.

   The header and footer are then explicitly re-pinned back to the
   ORIGINAL dark tokens, so your nav/footer chrome stays visually
   consistent with the rest of the (dark) site even on a light
   blog page — only the reading area between them goes light. */

body.blog-page {
  --bg: #FFFFFF;
  --bg-soft: #F6F7FB;
  --bg-elev: #EEF1F7;

  --glass: rgba(15,23,42,.03);
  --glass-strong: rgba(15,23,42,.045);
  --glass-border: rgba(15,23,42,.10);
  --line: rgba(15,23,42,.10);

  --white: #161A26;                 /* primary text on the light page */
  --text-mut: rgba(22,26,38,.68);
  --text-dim: rgba(22,26,38,.46);

  background: var(--bg);
  color: var(--white);
}

/* Re-pin header + footer to the original dark tokens */
body.blog-page .site-header,
body.blog-page .site-footer {
  --bg: #060812;
  --bg-soft: #0A0E1F;
  --bg-elev: #0D1226;
  --glass: rgba(255,255,255,.055);
  --glass-strong: rgba(255,255,255,.09);
  --glass-border: rgba(255,255,255,.12);
  --line: rgba(255,255,255,.09);
  --white: #FFFFFF;
  --text-mut: rgba(255,255,255,.68);
  --text-dim: rgba(255,255,255,.42);
}
body.blog-page .site-footer { background: var(--bg); }

/* Hide dark-page ambient decoration that reads poorly on white */
body.blog-page .bg-mesh,
body.blog-page .bg-grid,
body.blog-page .cursor-glow { display: none; }

/* Hero blobs: present but subdued, so they read as a soft brand
   wash rather than overpowering a white page */
body.blog-page .hero-orb { opacity: .16; }

/* Cards get a soft shadow instead of relying on backdrop-blur —
   blurring a white page behind a white card does nothing useful */
body.blog-page .glass { box-shadow: 0 1px 3px rgba(15,23,42,.06); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* .chip's own literal rgba(255,255,255,.03) background (from
   style.css) doesn't respond to the token remap — override directly */
body.blog-page .chip { background: rgba(15,23,42,.035); }

/* .eyebrow's default color:var(--blue-2) is a light cyan — good on
   dark, ~1.8:1 contrast on white. Darken specifically for the light
   page; the decorative ::before bar is exempt (not text). */
body.blog-page .eyebrow { color: #0A7EA8; }

/* Category thumbnails: blend into a light neutral instead of the
   dark --bg-elev, so they read as soft tinted blocks on a white page
   rather than heavy dark rectangles */
body.blog-page .thumb-blue   { background: linear-gradient(135deg, rgba(47,107,255,.24), var(--bg-elev) 85%); }
body.blog-page .thumb-cyan   { background: linear-gradient(135deg, rgba(0,198,251,.22), var(--bg-elev) 85%); }
body.blog-page .thumb-purple { background: linear-gradient(135deg, rgba(123,97,255,.20), var(--bg-elev) 85%); }

/* Category chip text: darkened, AA-contrast-safe variants of the
   brand colors for use as small text on white (the raw --blue-2/
   --violet are too light on their own here) */
body.blog-page .chip-blue   { color: #2255D6; border-color: rgba(47,107,255,.35);  background: rgba(47,107,255,.07); }
body.blog-page .chip-cyan   { color: #0A7EA8; border-color: rgba(0,198,251,.4);    background: rgba(0,198,251,.08); }
body.blog-page .chip-purple { color: #5B3FE0; border-color: rgba(123,97,255,.35); background: rgba(123,97,255,.07); }

/* =============================================================
   9. RESPONSIVE
   ============================================================= */
@media (max-width: 980px) {
  .blog-index-grid, .related-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-card { grid-template-columns: 1fr; }
  .featured-thumb { min-height: 220px; }
  .article-layout { grid-template-columns: 1fr; }
  .article-share { position: static; flex-direction: row; justify-content: flex-start; margin-bottom: 8px; }
  .share-label { writing-mode: horizontal-tb; }
}
@media (max-width: 620px) {
  .blog-index-grid, .related-grid { grid-template-columns: 1fr; }
  .blog-hero { padding-top: 128px; }
  .featured-body { padding: 28px 24px; }
  .article-hero-thumb { height: 220px; }
  .blog-listing { padding: 40px 0 56px; }
  .blog-grid-wrap { margin-top: 36px; }
}