/* ── Blog-specific colour tokens scoped to the hero section only ──
   The portfolio nav/footer use the global design tokens from styles.css.
   These local tokens power the animated dark hero without leaking. */
.blog-hero-scope {
  --blog-bg:       #0a0e1a;
  --blog-surface:  #111827;
  --blog-surface2: #1a2236;
  --blog-border:   #1f2e45;
  --blog-accent:   #00d4ff;
  --blog-accent2:  #ff6b35;
  --blog-accent3:  #a78bfa;
  --blog-accent4:  #34d399;
  --blog-text:     #e2e8f0;
  --blog-text-dim: #94a3b8;
  --blog-text-muted: #4a5568;
  --blog-yellow:   #fbbf24;
  --blog-pink:     #f472b6;
}


.home{max-width:1150px;margin:0 auto;padding:0 2rem 4rem}

/* HERO */
.hero{min-height:72vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:4rem 0;text-align:center}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,212,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.03) 1px,transparent 1px);background-size:40px 40px;animation:gridShift 20s linear infinite}
@keyframes gridShift{0%{background-position:0 0}100%{background-position:40px 40px}}
.hero-glow{position:absolute;width:650px;height:650px;border-radius:50%;background:radial-gradient(circle,rgba(0,212,255,.08) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);animation:pulse 4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.8}50%{transform:translate(-50%,-50%) scale(1.18);opacity:1}}
.hero-content{position:relative;z-index:1;max-width:820px}
.badge{background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.3);color:#00d4ff;font-family:'Space Mono',monospace;font-size:.7rem;padding:.3rem .9rem;border-radius:2rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:1.5rem;display:inline-block}
.hero h1{font-family:'Syne',sans-serif;font-size:clamp(2.6rem,6.6vw,5rem);font-weight:800;line-height:1.07;letter-spacing:-.03em}
.hero h1 span{background:linear-gradient(135deg,#00d4ff,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{color:#94a3b8;font-size:1.04rem;max-width:660px;margin:1.1rem auto 0}
.overview-stats{margin:2rem auto 0;display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
.overview-stats span{background:#1a2236;border:1px solid #1f2e45;font-family:'Space Mono',monospace;font-size:.7rem;padding:.32rem .85rem;border-radius:5px;color:var(--text-dim)}

/* TOPIC OVERVIEW */
.topic-overview{padding:2rem 0 1rem}
.section-head{margin-bottom:2rem}
.section-label{font-family:'Space Mono',monospace;font-size:.65rem;color:#00d4ff;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.4rem}
.section-title{font-family:'Syne',sans-serif;font-size:2rem;font-weight:700;letter-spacing:-.02em;color:#e2e8f0}
.section-desc{color:var(--text3);font-size:.9rem;max-width:700px;margin-top:.5rem}
/* .reveal is defined in styles.css */

.topic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.topic-card{background:#111827;border:1px solid #1f2e45;border-radius:14px;overflow:hidden;transition:transform .2s,border-color .2s}
.topic-card:hover{transform:translateY(-2px);border-color:#00d4ff}
.topic-head{padding:1.2rem 1.3rem;background:linear-gradient(180deg,rgba(26,34,54,.9),rgba(17,24,39,.8));display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.topic-meta h3{font-family:'Syne',sans-serif;font-size:1.2rem;font-weight:700;line-height:1.2}
.topic-meta p{font-size:.82rem;color:var(--text3);margin-top:.45rem;max-width:58ch}
.topic-chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}
.topic-chip{font-family:'Space Mono',monospace;font-size:.62rem;padding:.15rem .5rem;border-radius:3px;border:1px solid}
.chip-subtopics{color:var(--accent4);border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.08)}
.chip-published{color:var(--accent2);border-color:rgba(255,107,53,.35);background:rgba(255,107,53,.08)}

.topic-actions{display:flex;flex-direction:column;gap:.5rem;min-width:120px}
.blog-card-btn{border:1px solid #1f2e45;background:#1a2236;color:#e2e8f0;font-family:'Space Mono',monospace;font-size:.67rem;padding:.42rem .6rem;border-radius:6px;cursor:pointer;letter-spacing:.04em;text-transform:uppercase}
.blog-card-btn:hover{border-color:var(--accent2);color:var(--accent2)}
.blog-card-btn-ghost{background:transparent}

.subtopic-wrap{padding:1rem 1.3rem 1.3rem}
.subtopic-grid{display:grid;grid-template-columns:1fr;gap:.7rem}
.subtopic-link{text-decoration:none;color:inherit}
.subtopic-card{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;background:#1a2236;border:1px solid #1f2e45;border-radius:10px;padding:.82rem .9rem;transition:all .2s}
.subtopic-card:hover{border-color:rgba(0,212,255,.5);transform:translateX(2px)}
.subtopic-content h4{font-family:'Syne',sans-serif;font-size:.93rem;font-weight:700;line-height:1.3}
.subtopic-content p{font-size:.77rem;color:var(--text3);margin-top:.2rem;line-height:1.5}
.subtopic-arrow{font-family:'Space Mono',monospace;font-size:.9rem;color:var(--accent2);margin-top:.1rem}

.hidden-subtopic{display:none}
.topic-card.show-all .hidden-subtopic{display:block}
.topic-card.is-collapsed .subtopic-wrap{display:none}

.empty-state{padding:1.4rem;background:#111827;border:1px dashed #1f2e45;border-radius:10px;color:#94a3b8;font-size:.88rem}

@media(max-width:900px){.topic-grid{grid-template-columns:1fr}.topic-head{flex-direction:column}.topic-actions{flex-direction:row;min-width:unset}}

/* ══ LIGHT MODE OVERRIDES for blog home ══
   In light mode the page bg is the portfolio's light #f4f7fb.
   The hero gets a pale tinted background with visible grid.
   The topic/subtopic cards use light surfaces. */

[data-theme="light"] .hero {
  background: var(--bg);
}
[data-theme="light"] .hero-grid {
  background-image:
    linear-gradient(rgba(37,99,235,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.06) 1px, transparent 1px);
  background-size: 40px 40px;
}
[data-theme="light"] .hero-glow {
  background: radial-gradient(circle, rgba(37,99,235,.06) 0%, transparent 70%);
}
[data-theme="light"] .badge {
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.2);
  color: var(--accent);
}
[data-theme="light"] .hero h1 {
  color: var(--text);
}
[data-theme="light"] .hero h1 span {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="light"] .hero-sub {
  color: var(--text3);
}
[data-theme="light"] .overview-stats span {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text3);
}
[data-theme="light"] .section-label {
  color: var(--accent);
}
[data-theme="light"] .section-title {
  color: var(--text);
}
[data-theme="light"] .section-desc {
  color: var(--text3);
}
[data-theme="light"] .topic-card {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="light"] .topic-card:hover {
  border-color: var(--accent);
}
[data-theme="light"] .topic-head {
  background: linear-gradient(180deg, var(--bg2) 0%, var(--surface) 100%);
}
[data-theme="light"] .topic-meta h3 {
  color: var(--text);
}
[data-theme="light"] .topic-meta p {
  color: var(--text3);
}
[data-theme="light"] .chip-subtopics {
  color: #047857;
  border-color: rgba(4,120,87,.3);
  background: rgba(4,120,87,.07);
}
[data-theme="light"] .chip-published {
  color: var(--accent2);
  border-color: rgba(124,58,237,.3);
  background: rgba(124,58,237,.07);
}
[data-theme="light"] .blog-card-btn {
  background: var(--bg2);
  border-color: var(--border);
  color: var(--text2);
}
[data-theme="light"] .blog-card-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
[data-theme="light"] .subtopic-card {
  background: var(--bg2);
  border-color: var(--border);
}
[data-theme="light"] .subtopic-card:hover {
  border-color: var(--accent);
}
[data-theme="light"] .subtopic-content h4 {
  color: var(--text);
}
[data-theme="light"] .subtopic-content p {
  color: var(--text3);
}
[data-theme="light"] .subtopic-arrow {
  color: var(--accent);
}
[data-theme="light"] .empty-state {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text3);
}

/* ══ MOBILE FIXES for blog home ══ */
@media (max-width: 700px) {
  /* Bug 4: prevent h1 from clipping at edges */
  .hero h1 {
    font-size: clamp(2rem, 11vw, 5rem);
    padding: 0 0.5rem;
    word-break: break-word;
  }
  /* Bug 5: hero background/grid must not clip — let it extend full width */
  .hero {
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
  }
  .hero-grid {
    left: 0;
    right: 0;
    width: 100%;
  }
  .hero-content {
    padding: 0 1rem;
    width: 100%;
    max-width: 100%;
  }
  /* topic grid already stacks via the 900px breakpoint above */
}