/* Learn hub + article shared */

/* ---------- learn hub featured row ---------- */
.learn-featured {
  display: grid; gap: var(--space-6);
  grid-template-columns: 1.5fr 1fr;
  align-items: start;
}
@media (max-width: 1000px) { .learn-featured { grid-template-columns: 1fr; } }

.learn-hero {
  background: linear-gradient(135deg, rgba(255,106,44,.18) 0%, rgba(34,211,238,.10) 100%), var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.learn-hero h2 { margin: var(--space-3) 0 var(--space-3); }
.learn-hero p { color: var(--fg-1); margin: 0 0 var(--space-4); }
.learn-hero__meta {
  list-style: none; padding: 0; margin: 0 0 var(--space-5);
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  color: var(--fg-2); font-size: var(--fs-12);
  font-family: var(--font-mono);
}

.learn-side {
  background: var(--bg-1); border: 1px solid var(--border-0);
  border-radius: var(--r-3); padding: var(--space-5);
}
.learn-side h3 { margin: 0 0 var(--space-4); font-size: var(--fs-18); }
.learn-pillars { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.learn-pillars a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--r-2);
  color: var(--fg-1); text-decoration: none;
  background: var(--bg-2); border: 1px solid var(--border-0);
  transition: border-color var(--dur-fast) var(--ease);
}
.learn-pillars a:hover { border-color: var(--accent); color: var(--fg-0); }
.learn-pillars .chip { background: var(--bg-0); }

/* ---------- articles grid ---------- */
.learn-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1000px) { .learn-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px)  { .learn-grid { grid-template-columns: 1fr; } }

.learn-card { display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; color: inherit; }
.learn-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.learn-card h3 { margin: 0; font-size: var(--fs-18); }
.learn-card p { color: var(--fg-1); margin: 0; font-size: var(--fs-14); flex: 1; }
.learn-card__meta { color: var(--fg-2); font-size: var(--fs-12); font-family: var(--font-mono); }

.learn-card__art {
  aspect-ratio: 16/9; border-radius: var(--r-2); border: 1px solid var(--border-0);
  background-position: center; background-size: cover;
}
.learn-card__art--1 {
  background:
    radial-gradient(circle at 60% 50%, rgba(255,106,44,.55), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 16px),
    var(--bg-2);
}
.learn-card__art--2 {
  background:
    radial-gradient(circle at 30% 50%, rgba(34,211,238,.45), transparent 55%),
    radial-gradient(circle at 70% 50%, rgba(91,228,155,.4), transparent 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 24px),
    var(--bg-2);
}
.learn-card__art--3 {
  background:
    radial-gradient(circle at 50% 50%, rgba(232,168,107,.55), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 1px, transparent 1px 16px),
    var(--bg-2);
}
.learn-card__art--4 {
  background:
    radial-gradient(circle at 65% 35%, rgba(225,29,72,.55), transparent 55%),
    radial-gradient(circle at 35% 65%, rgba(109,40,217,.45), transparent 55%),
    var(--bg-2);
}
.learn-card__art--5 {
  background:
    linear-gradient(90deg, rgba(255,106,44,.4) 0%, transparent 50%, rgba(34,211,238,.4) 100%),
    var(--bg-2);
}
.learn-card__art--6 {
  background:
    radial-gradient(circle at 20% 30%, rgba(91,228,155,.4), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 12px),
    var(--bg-2);
}

/* ---------- publications ---------- */
.learn-pubs { background: var(--bg-1); border-block: 1px solid var(--border-0); }
.learn-grid--pubs { grid-template-columns: 1fr 1fr; }
@media (max-width: 800px) { .learn-grid--pubs { grid-template-columns: 1fr; } }
.pub { display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; color: inherit; }
.pub:hover { border-color: var(--accent); }
.pub__date { color: var(--fg-2); font-size: var(--fs-12); }
.pub h3 { margin: 0; font-size: var(--fs-20); }
.pub p { color: var(--fg-1); margin: 0; font-size: var(--fs-14); }
.pub__cta { color: var(--accent-2); font-weight: 600; font-size: var(--fs-14); margin-top: var(--space-2); }

/* ---------- field guide ---------- */
.learn-guide { padding-block: var(--space-8); }
.learn-guide__panel {
  background: linear-gradient(135deg, rgba(255,106,44,.18) 0%, rgba(34,211,238,.10) 100%), var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-4);
  padding: clamp(1.5rem, 4vw, 3rem);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-6); align-items: center;
}
@media (max-width: 760px) { .learn-guide__panel { grid-template-columns: 1fr; } }
.learn-guide__panel h2 { margin: var(--space-3) 0 var(--space-2); }
.learn-guide__panel p { color: var(--fg-1); margin: 0; }
.learn-guide__form { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.learn-guide__form input[type="email"] {
  flex: 1; min-width: 220px;
  background: var(--bg-0);
  border: 1px solid var(--border-1); border-radius: var(--r-2);
  padding: 0.75rem 1rem;
  color: var(--fg-0); font: inherit; font-size: var(--fs-16);
}
.learn-guide__form input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }

/* ============================================================
   ARTICLE PAGE
   ============================================================ */

.article-layout {
  display: grid; gap: var(--space-7);
  grid-template-columns: 240px 1fr 280px;
  padding-block: var(--space-7);
}
@media (max-width: 1200px) { .article-layout { grid-template-columns: 1fr; gap: var(--space-5); } .article-layout > aside { display: none; } }

.article-toc { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; }
.article-toc h4 { font-family: var(--font-body); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-2); margin: 0 0 var(--space-3); }
.article-toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); border-left: 1px solid var(--border-0); }
.article-toc a {
  display: block; padding: var(--space-2) var(--space-3);
  color: var(--fg-1); text-decoration: none; font-size: var(--fs-14);
  border-left: 2px solid transparent; margin-left: -1px;
}
.article-toc a:hover { color: var(--fg-0); border-left-color: var(--border-1); }
.article-toc a.is-active { color: var(--accent); border-left-color: var(--accent); }

.article-side { position: sticky; top: 96px; align-self: start; display: grid; gap: var(--space-3); }
.article-side__card {
  background: var(--bg-1); border: 1px solid var(--border-0);
  border-radius: var(--r-3); padding: var(--space-4);
}
.article-side__card h4 { margin: 0 0 var(--space-2); font-family: var(--font-body); font-size: var(--fs-14); }
.article-side__card p { color: var(--fg-1); font-size: var(--fs-12); margin: 0 0 var(--space-3); }
.article-side__card .btn { width: 100%; justify-content: center; }

.article {
  max-width: 720px; min-width: 0;
}
.article__head { margin-bottom: var(--space-6); }
.article__head h1 { margin: var(--space-3) 0 var(--space-3); }
.article__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  color: var(--fg-2); font-size: var(--fs-12); font-family: var(--font-mono);
  border-block: 1px solid var(--border-0); padding-block: var(--space-3);
}

.article__tldr {
  background: linear-gradient(135deg, rgba(255,106,44,.10), rgba(34,211,238,.06));
  border: 1px solid var(--accent);
  border-radius: var(--r-3); padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}
.article__tldr h3 {
  margin: 0 0 var(--space-2); font-family: var(--font-mono); font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent);
}
.article__tldr ul { padding-left: var(--space-5); margin: 0; }
.article__tldr li { color: var(--fg-0); }

.article h2 { margin: var(--space-7) 0 var(--space-3); }
.article h3 { margin: var(--space-6) 0 var(--space-3); font-size: var(--fs-20); }
.article p { color: var(--fg-1); margin: 0 0 var(--space-4); font-size: var(--fs-18); line-height: 1.7; }
.article p strong, .article li strong { color: var(--fg-0); }
.article ul, .article ol { color: var(--fg-1); padding-left: var(--space-5); font-size: var(--fs-18); line-height: 1.7; }
.article ul li, .article ol li { margin-bottom: var(--space-2); }

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

.article blockquote {
  background: var(--bg-1); border-left: 3px solid var(--accent);
  padding: var(--space-3) var(--space-5); margin: var(--space-5) 0;
  font-family: var(--font-display); font-size: var(--fs-20);
  color: var(--fg-0);
}

/* math */
.article .eq {
  background: var(--bg-1); border: 1px solid var(--border-0);
  border-radius: var(--r-2); padding: var(--space-4);
  margin: var(--space-4) 0;
  font-family: var(--font-mono); font-size: var(--fs-16);
  color: var(--fg-0); overflow-x: auto;
}
.article .eq em { color: var(--accent-2); font-style: normal; }

/* figures */
.article figure { margin: var(--space-6) 0; }
.article figcaption {
  color: var(--fg-2); font-size: var(--fs-14); margin-top: var(--space-3);
  text-align: center; font-family: var(--font-mono);
}

.thermal-fig {
  aspect-ratio: 16/9; border-radius: var(--r-2); border: 1px solid var(--border-1);
  position: relative; overflow: hidden;
}
.thermal-fig--a {
  background:
    radial-gradient(ellipse 35% 40% at 50% 50%, rgba(255,106,44,.95), rgba(225,29,72,.6) 35%, rgba(109,40,217,.4) 65%, rgba(30,58,138,.5) 85%, rgba(10,14,26,.7)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.06) 0 1px, transparent 1px 24px),
    var(--bg-2);
}
.thermal-fig--b {
  background:
    radial-gradient(ellipse 20% 25% at 50% 50%, rgba(255,106,44,.75), rgba(225,29,72,.5) 35%, rgba(109,40,217,.35) 65%, rgba(30,58,138,.35) 90%, rgba(10,14,26,.5)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.06) 0 1px, transparent 1px 24px),
    var(--bg-2);
}
.thermal-fig__pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 36px; height: 36px;
  border: 2px solid var(--fg-0); border-radius: var(--r-1);
  background: rgba(0,0,0,.2);
}
.thermal-fig__label {
  position: absolute; left: var(--space-3); bottom: var(--space-3);
  background: rgba(10,14,26,.75); border: 1px solid var(--border-1); backdrop-filter: blur(6px);
  border-radius: var(--r-2); padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono); font-size: var(--fs-12); color: var(--fg-0);
}

/* code */
.article pre {
  background: var(--bg-1); border: 1px solid var(--border-0); border-radius: var(--r-2);
  padding: var(--space-4); overflow-x: auto;
  color: var(--fg-0); font-family: var(--font-mono); font-size: var(--fs-14); line-height: 1.6;
}
.article code { color: var(--accent-2); font-family: var(--font-mono); font-size: 0.95em; }

/* references */
.article__refs {
  background: var(--bg-1); border: 1px solid var(--border-0); border-radius: var(--r-3);
  padding: var(--space-5); margin-top: var(--space-7);
}
.article__refs h3 { margin: 0 0 var(--space-3); }
.article__refs ol { font-size: var(--fs-14); color: var(--fg-1); padding-left: var(--space-5); }
.article__refs ol li { margin-bottom: var(--space-2); }