/* ================================================================
   NEXUS.LOG — BLOG CSS
   ================================================================ */

/* ── LISTING ── */
.signal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }

.signal-card { display: flex; flex-direction: column; overflow: hidden; }
.signal-card__img-link { display: block; position: relative; height: 220px; overflow: hidden; }
.signal-card__img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.35) brightness(0.6); transition: transform var(--dur-slow), filter var(--dur-slow); }
.signal-card:hover .signal-card__img { transform: scale(1.04); filter: saturate(0.55) brightness(0.7); }
.signal-card__img-overlay { position: absolute; inset: 0; background: rgba(10,10,15,0.65); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--dur-mid); }
.signal-card:hover .signal-card__img-overlay { opacity: 1; }
.signal-card__img-cta { font-family: var(--font-display); font-size: var(--fs-xs); color: var(--neon-green); border: 1px solid var(--neon-green-dim); padding: var(--sp-2) var(--sp-5); letter-spacing: var(--ls-wider); }
.signal-card__cat { position: absolute; top: var(--sp-3); left: var(--sp-3); }
.signal-card__body { padding: var(--sp-6); flex: 1; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--panel-border); border-top: none; }
.signal-card__meta { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.signal-card__meta time,
.signal-card__meta span { font-family: var(--font-display); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); color: var(--text-ghost); }
.signal-card__title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: var(--text-bright); text-transform: uppercase; letter-spacing: var(--ls-wide); line-height: var(--lh-snug); margin-bottom: var(--sp-3); }
.signal-card__title a { color: var(--text-bright); transition: color var(--dur-fast); }
.signal-card__title a:hover { color: var(--neon-green); text-shadow: 0 0 8px var(--neon-green-glow); }
.signal-card__excerpt { font-size: var(--fs-sm); color: var(--text-dim); line-height: var(--lh-loose); flex: 1; margin-bottom: var(--sp-4); }
.signal-card__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.signal-card__tag { font-family: var(--font-display); font-size: 0.56rem; letter-spacing: var(--ls-wider); color: var(--text-ghost); padding: 1px var(--sp-2); border: 1px solid rgba(0,255,136,0.08); }
.signal-card__footer { border-top: 1px solid var(--panel-border); padding-top: var(--sp-4); }
.signal-card__read { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--neon-green); }

/* ── DETAIL ── */
.signal-masthead {
  position: relative;
  padding-top: 140px; padding-bottom: var(--sp-16);
  background-size: cover; background-position: center;
  background-attachment: fixed;
  min-height: 520px; display: flex; align-items: flex-end;
}
.signal-masthead__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(10,10,15,0.98) 0%, rgba(10,10,15,0.80) 50%, rgba(10,10,15,0.50) 100%),
    linear-gradient(to right, rgba(10,10,15,0.90) 0%, transparent 60%);
}
.signal-masthead__inner { position: relative; z-index: 1; }
.signal-back { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--sp-6); transition: color var(--dur-fast); }
.signal-back:hover { color: var(--neon-green); }
.signal-byline { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.signal-date, .signal-rt { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); color: var(--text-muted); }
.signal-headline { font-family: var(--font-display); font-size: clamp(var(--fs-xl), 3.5vw, var(--fs-3xl)); font-weight: 900; color: var(--text-bright); text-transform: uppercase; letter-spacing: var(--ls-display); max-width: 820px; line-height: var(--lh-snug); }

/* Article layout */
.signal-body-wrap { padding-block: var(--sp-16); }
.signal-layout { display: grid; grid-template-columns: 1fr 280px; gap: var(--sp-12); align-items: start; }

.signal-prose { min-width: 0; font-family: var(--font-body); font-size: var(--fs-base); color: var(--text-dim); line-height: var(--lh-loose); }
.prose-lead { font-size: var(--fs-md); color: var(--text); line-height: var(--lh-loose); border-left: 2px solid var(--neon-green); padding-left: var(--sp-5); margin-bottom: var(--sp-6); }
.prose-divider { text-align: center; color: var(--neon-green); font-size: var(--fs-xl); margin-bottom: var(--sp-6); text-shadow: var(--glow-sm-green); }
.signal-prose h2 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800; color: var(--neon-green); text-transform: uppercase; letter-spacing: var(--ls-wider); margin: var(--sp-10) 0 var(--sp-5); border-bottom: 1px solid rgba(0,255,136,0.15); padding-bottom: var(--sp-3); text-shadow: var(--glow-sm-green); }
.signal-prose h3 { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--cyan); text-transform: uppercase; letter-spacing: var(--ls-wider); margin: var(--sp-8) 0 var(--sp-4); text-shadow: var(--glow-sm-cyan); }
.signal-prose p { margin-bottom: var(--sp-5); }
.signal-prose strong { color: var(--neon-green); font-style: normal; }
.signal-prose em    { color: var(--text-bright); }

/* Code blocks inside articles */
.article-code-block {
  background: var(--void-deep);
  border: 1px solid var(--neon-green-dim);
  box-shadow: var(--glow-sm-green);
  margin: var(--sp-6) 0;
  overflow: hidden;
}
.code-header {
  background: var(--surface-rim);
  border-bottom: 1px solid var(--panel-border);
  padding: var(--sp-2) var(--sp-4);
}
.code-lang { font-family: var(--font-display); font-size: var(--fs-2xs); color: var(--neon-green); letter-spacing: var(--ls-wider); }
.article-code-block pre { padding: var(--sp-5); overflow-x: auto; }
.article-code-block code { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--neon-green); line-height: var(--lh-code); white-space: pre; display: block; }

/* Sidebar */
.signal-sidebar { display: flex; flex-direction: column; gap: var(--sp-5); position: sticky; top: 100px; }
.sidebar-panel { padding: var(--sp-5); }
.sidebar-panel__head { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--neon-green); margin-bottom: var(--sp-3); }
.sidebar-panel__body { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-loose); }
.sidebar-topics { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.sidebar-topics li a { font-size: var(--fs-sm); color: var(--text-dim); transition: color var(--dur-fast); }
.sidebar-topics li a:hover { color: var(--neon-green); }
.related-row { margin-top: var(--sp-4); }
.related-row a { display: flex; gap: var(--sp-3); text-decoration: none; }
.related-row__img { width: 64px; height: 48px; object-fit: cover; flex-shrink: 0; filter: saturate(0.3) brightness(0.7); }
.related-row__title { font-family: var(--font-display); font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-snug); margin-top: var(--sp-1); transition: color var(--dur-fast); letter-spacing: var(--ls-wide); }
.related-row a:hover .related-row__title { color: var(--neon-green); }

/* Shared CTA */
.cta-sect { position: relative; padding: var(--sp-32) 0; text-align: center; overflow: hidden; }
.cta-sect__bg { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,255,136,0.07) 0%, transparent 65%), var(--surface-mid); }
.cta-sect__bg::before,.cta-sect__bg::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(45deg); border: 1px solid rgba(0,255,136,0.10); }
.cta-sect__bg::before { width: 400px; height: 400px; }
.cta-sect__bg::after  { width: 700px; height: 700px; opacity: 0.5; }
.cta-sect__inner { position: relative; z-index: 1; }
.cta-sect__title { font-family: var(--font-display); font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl)); font-weight: 900; letter-spacing: var(--ls-display); text-transform: uppercase; color: var(--text-bright); line-height: var(--lh-tight); margin-bottom: var(--sp-5); }
.cta-sect__title .neon { color: var(--neon-green); text-shadow: 0 0 20px var(--neon-green-glow); }
.cta-sect__sub { font-size: var(--fs-md); color: var(--text-dim); max-width: 48ch; margin: 0 auto var(--sp-8); line-height: var(--lh-loose); }

@media (max-width: 1024px) {
  .signal-grid { grid-template-columns: 1fr 1fr; }
  .signal-layout { grid-template-columns: 1fr; }
  .signal-sidebar { position: static; }
}
@media (max-width: 600px) { .signal-grid { grid-template-columns: 1fr; } }