/* ═══════════════════════════════════════════════════════
   subjects.css — shared stylesheet for all subject overview pages
   curio learning · 2026
═══════════════════════════════════════════════════════ */

/* ── CSS Variables (mirror index.html) ── */
:root {
  --plum:  #2B1E3F;
  --deep:  #1a1228;
  --mid:   #3d2d58;
  --card:  #231935;
  --card2: #1f1630;
  --cyan:  #6DD3CE;
  --coral: #FF5E5B;
  --moon:  #F7F7FF;
  --amber: #F5C842;
  --m80:  rgba(247,247,255,0.80);
  --m55:  rgba(247,247,255,0.55);
  --m30:  rgba(247,247,255,0.30);
  --m12:  rgba(247,247,255,0.12);
  --m06:  rgba(247,247,255,0.06);
  --m03:  rgba(247,247,255,0.03);
  --c25:  rgba(109,211,206,0.25);
  --c12:  rgba(109,211,206,0.12);
  --c06:  rgba(109,211,206,0.06);
  --r20:  rgba(255,94,91,0.20);
  --r10:  rgba(255,94,91,0.10);
  --h:     'Poppins', sans-serif;
  --b:     'DM Sans', sans-serif;
  --script:'Caveat', cursive;
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--b);
  background: var(--deep);
  color: var(--moon);
  overflow-x: hidden;
}
a { text-decoration:none; color:inherit; }
button { font-family:var(--b); cursor:pointer; border:none; background:none; }

/* ═══ NAV (identical to index.html) ═══ */
nav {
  position: fixed; top:0; left:0; right:0; z-index:200;
  height: 60px;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 2rem;
  background: rgba(26,18,40,0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--m06);
}
.nav-logo {
  display:flex; align-items:center; gap:0.6rem;
  font-family:var(--h); font-size:1.2rem; font-weight:800; color:var(--moon);
}
.nav-links { display:flex; gap:0.2rem; list-style:none; }
.nav-links a {
  padding:0.38rem 0.8rem; font-size:0.8rem; font-weight:500;
  color:var(--m30); border-radius:6px; transition:all .15s; display:block;
}
.nav-links a:hover { color:var(--moon); background:var(--m06); }
.nav-right { display:flex; gap:0.6rem; align-items:center; }
.btn-ghost {
  font-size:0.82rem; font-weight:500; color:var(--m55);
  padding:0.38rem 0.9rem; border-radius:6px; transition:all .15s;
}
.btn-ghost:hover { color:var(--moon); background:var(--m06); }
.btn-nav {
  font-size:0.82rem; font-weight:700; color:var(--plum);
  background:var(--cyan); padding:0.45rem 1.1rem; border-radius:8px;
  transition:all .2s; font-family:var(--h);
}
.btn-nav:hover { background:var(--moon); }

/* ═══ PAGE WRAPPER ═══ */
.page-wrap { padding-top: 60px; }

/* ═══ HERO STRIP ═══ */
.subject-hero {
  background: linear-gradient(135deg, var(--plum) 0%, var(--deep) 60%);
  border-bottom: 1px solid var(--m06);
  padding: 4rem 3rem 3.5rem;
  position: relative;
  overflow: hidden;
}
.subject-hero::before {
  content: '';
  position: absolute; top:-80px; right:-80px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109,211,206,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.hero-inner { max-width: 1100px; margin: 0 auto; }

/* Breadcrumb */
.breadcrumb {
  display: flex; align-items:center; gap:0.4rem;
  font-size:0.7rem; color:var(--m30); margin-bottom:1.8rem;
}
.breadcrumb a { color:var(--m30); transition:color .15s; }
.breadcrumb a:hover { color:var(--cyan); }
.breadcrumb-sep { color:var(--m12); }
.breadcrumb span { color:var(--m55); }

/* Phase badge */
.phase-badge {
  display: inline-flex; align-items:center; gap:0.45rem;
  font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.12em;
  padding:0.3rem 0.75rem; border-radius:100px;
  margin-bottom: 1rem;
}
.phase-badge.intermediate {
  background: var(--c12); color:var(--cyan); border:1px solid var(--c25);
}
.phase-badge.senior {
  background: var(--r10); color:var(--coral); border:1px solid var(--r20);
}
.phase-badge.fet {
  background: rgba(245,200,66,0.1); color:var(--amber); border:1px solid rgba(245,200,66,0.25);
}
.phase-dot { width:5px; height:5px; border-radius:50%; background:currentColor; }

/* Subject title row */
.subject-title-row {
  display: flex; align-items:flex-end; justify-content:space-between;
  gap: 2rem; flex-wrap:wrap;
}
.subject-title {
  font-family: var(--h);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 0.95;
  color: var(--moon);
}
.subject-title .accent { color: var(--cyan); }
.subject-title .accent-r { color: var(--coral); }
.subject-title .accent-a { color: var(--amber); }

.subject-tagline {
  font-family: var(--script);
  font-size: 1.2rem; font-weight:700;
  color: var(--amber); opacity:0.75;
  transform: rotate(-2deg);
  display: inline-block;
  white-space: nowrap;
}

/* Meta pills row */
.subject-meta {
  display: flex; gap:0.5rem; flex-wrap:wrap; margin-top:1.4rem;
}
.meta-pill {
  font-size:0.65rem; font-weight:600;
  padding:0.28rem 0.7rem; border-radius:100px;
  background:var(--m06); border:1px solid var(--m12); color:var(--m55);
}
.meta-pill.cy { background:var(--c12); border-color:var(--c25); color:var(--cyan); }
.meta-pill.co { background:var(--r10); border-color:var(--r20); color:var(--coral); }
.meta-pill.am { background:rgba(245,200,66,0.1); border-color:rgba(245,200,66,0.25); color:var(--amber); }

/* ═══ MAIN CONTENT AREA ═══ */
.content-area {
  max-width: 1100px; margin:0 auto;
  padding: 3.5rem 3rem;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.5rem;
  align-items: start;
}
@media(max-width:900px) { .content-area { grid-template-columns:1fr; } }

/* ═══ TERM BREAKDOWN GRID ═══ */
.section-eyebrow {
  font-size:0.58rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.16em; color:var(--m30); margin-bottom:1rem;
}
.section-title {
  font-family:var(--h); font-size:1.3rem; font-weight:800;
  letter-spacing:-0.5px; color:var(--moon); margin-bottom:1.6rem;
}

.term-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
@media(max-width:600px) { .term-grid { grid-template-columns:1fr; } }

.term-card {
  background: var(--card);
  border: 1px solid var(--m06);
  border-radius: 16px;
  padding: 1.4rem;
  transition: border-color .2s;
}
.term-card:hover { border-color: var(--c12); }
.term-card.t1 { border-left: 3px solid var(--cyan); }
.term-card.t2 { border-left: 3px solid var(--coral); }
.term-card.t3 { border-left: 3px solid var(--amber); }
.term-card.t4 { border-left: 3px solid rgba(109,211,206,0.45); }

.term-label {
  font-size:0.58rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--m30); margin-bottom:0.4rem;
}
.term-card.t1 .term-label { color:var(--cyan); }
.term-card.t2 .term-label { color:var(--coral); }
.term-card.t3 .term-label { color:var(--amber); }
.term-card.t4 .term-label { color:rgba(109,211,206,0.7); }

.term-heading {
  font-family:var(--h); font-size:0.92rem; font-weight:700;
  color:var(--moon); margin-bottom:0.7rem; line-height:1.3;
}
.term-topics {
  list-style:none; display:flex; flex-direction:column; gap:0.3rem;
}
.term-topics li {
  font-size:0.73rem; color:var(--m55); display:flex; align-items:flex-start; gap:0.45rem;
  line-height:1.4;
}
.term-topics li::before {
  content:''; width:4px; height:4px; border-radius:50%;
  background:var(--m30); flex-shrink:0; margin-top:0.45rem;
}
.term-card.t1 .term-topics li::before { background:var(--cyan); opacity:0.6; }
.term-card.t2 .term-topics li::before { background:var(--coral); opacity:0.6; }
.term-card.t3 .term-topics li::before { background:var(--amber); opacity:0.6; }

/* ═══ SKILLS SECTION ═══ */
.skills-section { margin-bottom: 2.5rem; }
.skills-grid {
  display: flex; flex-wrap:wrap; gap:0.45rem;
}
.skill-chip {
  font-size:0.7rem; font-weight:500;
  padding:0.3rem 0.75rem; border-radius:8px;
  background:var(--m06); border:1px solid var(--m06);
  color:var(--m55); transition:all .15s; cursor:default;
}
.skill-chip:hover { background:var(--c06); border-color:var(--c12); color:var(--moon); }

/* ═══ STUDY TIPS ═══ */
.tips-section { margin-bottom: 2.5rem; }
.tips-list {
  display: flex; flex-direction:column; gap:0.7rem;
}
.tip-item {
  display: flex; align-items:flex-start; gap:0.8rem;
  padding:0.9rem 1rem;
  background:var(--m03); border:1px solid var(--m06); border-radius:12px;
}
.tip-icon {
  font-size:1rem; flex-shrink:0; margin-top:0.05rem;
}
.tip-text {
  font-size:0.78rem; color:var(--m55); line-height:1.65;
}
.tip-text strong { color:var(--moon); font-weight:600; }

/* ═══ SIDEBAR ═══ */
.sidebar { display:flex; flex-direction:column; gap:1.2rem; }

/* Papers card */
.sidebar-card {
  background:var(--card); border:1px solid var(--m06); border-radius:16px;
  overflow:hidden;
}
.sidebar-card-head {
  padding:0.9rem 1.2rem 0.75rem;
  border-bottom:1px solid var(--m06);
  display:flex; align-items:center; justify-content:space-between;
}
.sidebar-card-title {
  font-family:var(--h); font-size:0.82rem; font-weight:700; color:var(--moon);
}
.sidebar-card-link {
  font-size:0.68rem; color:var(--cyan); transition:opacity .15s;
}
.sidebar-card-link:hover { opacity:0.7; }
.sidebar-card-body { padding:0.9rem 1.2rem; }

/* paper rows in sidebar */
.paper-row {
  display:flex; align-items:center; gap:0.7rem;
  padding:0.55rem 0; border-bottom:1px solid var(--m06);
}
.paper-row:last-child { border-bottom:none; }
.paper-bar { width:3px; height:28px; border-radius:2px; flex-shrink:0; }
.paper-bar.c { background:var(--cyan); }
.paper-bar.r { background:var(--coral); }
.paper-info { flex:1; min-width:0; }
.paper-title { font-size:0.75rem; font-weight:500; color:var(--m80); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.paper-meta { font-size:0.6rem; color:var(--m30); margin-top:0.08rem; }
.paper-badge {
  font-size:0.55rem; font-weight:700; padding:0.1rem 0.4rem;
  border-radius:3px; background:var(--c12); color:var(--cyan); white-space:nowrap; flex-shrink:0;
}

.sidebar-empty {
  font-size:0.75rem; color:var(--m30); font-style:italic; text-align:center;
  padding:0.5rem 0;
}

/* ═══ PREMIUM CTA SIDEBAR CARD ═══ */
.premium-card {
  background: linear-gradient(145deg, var(--mid), var(--card2));
  border: 1px solid var(--cyan);
  border-radius: 16px;
  padding: 1.4rem;
  position:relative; overflow:hidden;
}
.premium-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--cyan), var(--coral));
}
.premium-eyebrow {
  font-size:0.56rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--coral); margin-bottom:0.5rem;
}
.premium-title {
  font-family:var(--h); font-size:0.95rem; font-weight:800;
  letter-spacing:-0.3px; color:var(--moon); margin-bottom:0.4rem;
}
.premium-desc {
  font-size:0.72rem; color:var(--m55); line-height:1.6; margin-bottom:0.9rem;
}
.premium-feats {
  display:flex; flex-wrap:wrap; gap:0.3rem; margin-bottom:1rem;
}
.premium-feat {
  font-size:0.6rem; font-weight:600;
  background:var(--c12); color:var(--cyan);
  border:1px solid var(--c25); border-radius:4px;
  padding:0.1rem 0.4rem;
}
.premium-cta {
  display:block; text-align:center;
  background:var(--coral); color:var(--moon);
  padding:0.65rem; border-radius:9px;
  font-family:var(--h); font-size:0.78rem; font-weight:700;
  transition:all .2s;
}
.premium-cta:hover { background:#ff4a47; transform:translateY(-1px); }
.premium-price {
  font-size:0.6rem; color:var(--m30); text-align:center; margin-top:0.4rem;
}

/* Related subjects card */
.related-list { display:flex; flex-direction:column; gap:0.3rem; }
.related-item {
  display:flex; align-items:center; gap:0.6rem;
  padding:0.5rem 0.6rem; border-radius:8px;
  font-size:0.75rem; color:var(--m55);
  transition:all .15s; border:1px solid transparent;
}
.related-item:hover { background:var(--m06); border-color:var(--m06); color:var(--moon); }
.related-item-dot {
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
}
.related-item-dot.c { background:var(--cyan); }
.related-item-dot.r { background:var(--coral); }
.related-item-dot.a { background:var(--amber); }

/* ═══ PAPERS SECTION (main column) ═══ */
.papers-section { margin-bottom: 2.5rem; }
.papers-grid {
  display: grid; grid-template-columns:1fr 1fr; gap:0.8rem;
}
@media(max-width:680px) { .papers-grid { grid-template-columns:1fr; } }
.paper-card {
  background:var(--card); border:1px solid var(--m06); border-radius:14px;
  padding:1rem 1.2rem; display:flex; flex-direction:column; gap:0.5rem;
  transition:border-color .2s, transform .2s;
}
.paper-card:hover { border-color:var(--c12); transform:translateY(-2px); }
.paper-card-title {
  font-size:0.82rem; font-weight:600; color:var(--moon); line-height:1.35;
}
.paper-card-meta {
  font-size:0.65rem; color:var(--m30);
}
.paper-card-footer {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:0.3rem;
}
.paper-card-badge {
  font-size:0.56rem; font-weight:700; padding:0.1rem 0.4rem; border-radius:3px;
  background:var(--c12); color:var(--cyan);
}
.paper-card-btn {
  font-size:0.68rem; font-weight:700; font-family:var(--h);
  background:var(--c12); color:var(--cyan);
  border:1px solid var(--c25); padding:0.25rem 0.6rem;
  border-radius:5px; transition:all .15s; cursor:pointer;
}
.paper-card-btn:hover { background:var(--c25); }
.papers-coming-soon {
  grid-column: 1 / -1;
  text-align:center; padding:2rem;
  font-size:0.8rem; color:var(--m30);
  border:1px dashed var(--m12); border-radius:12px;
}

/* ═══ FOOTER ═══ */
footer {
  padding:2rem 3rem;
  border-top:1px solid var(--m06);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
  max-width:100%;
}
.footer-logo {
  display:flex; align-items:center; gap:0.55rem;
  font-family:var(--h); font-size:0.95rem; font-weight:800; color:var(--moon);
}
.footer-copy { font-size:0.68rem; color:var(--m30); }
.footer-links { display:flex; gap:1.4rem; }
.footer-links a { font-size:0.7rem; color:var(--m30); transition:color .15s; }
.footer-links a:hover { color:var(--moon); }

/* ═══ REVEAL ANIMATIONS ═══ */
.rv { opacity:0; transform:translateY(20px); transition:opacity .5s ease, transform .5s ease; }
.rv.in { opacity:1; transform:none; }
.rv-d1 { transition-delay:.06s; }
.rv-d2 { transition-delay:.12s; }
.rv-d3 { transition-delay:.18s; }

/* ═══ RESPONSIVE ═══ */
@media(max-width:760px) {
  .subject-hero { padding:3rem 1.5rem 2.5rem; }
  .content-area { padding:2rem 1.5rem; }
  .subject-title { font-size:2.4rem; }
  footer { padding:1.5rem; }
}
@media(max-width:480px) {
  nav { padding:0 1rem; }
  .nav-links { display:none; }
}