/* ===================================================
   zhang-heng.css — Zhang Heng & Seismoscope Page Styles
   Inherits design tokens from styles.css
   =================================================== */

/* ===== Hero ===== */
.zh-hero {
  background: linear-gradient(135deg, #0f1a2e 0%, #1a2a40 40%, #2a1a10 100%);
}

.zh-hero::before {
  background:
    radial-gradient(circle at 25% 45%, rgba(212,168,67,0.18) 0%, transparent 50%),
    radial-gradient(circle at 75% 35%, rgba(120,160,200,0.12) 0%, transparent 40%);
}

.zh-hero .subtitle { color: #c0a060; }

/* ===== Section Spacing ===== */
.zh-section { padding: 4rem 0; }
.zh-section + .zh-section { border-top: 1px solid var(--color-border); }

/* ===== Bio Section ===== */
.bio-intro {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2.5rem;
  max-width: 960px;
  margin: 0 auto 3rem;
  align-items: start;
}

.portrait-frame {
  background: linear-gradient(135deg, #f5efe0, #e8e0d0);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow);
}

.portrait-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.portrait-emoji { font-size: 5rem; }

.portrait-label {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-ink);
}

.bio-meta {
  margin-top: 1.5rem;
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 1.2rem;
  box-shadow: var(--shadow);
}

.meta-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}

.meta-row:last-child { border-bottom: none; }

.meta-label { font-weight: 600; color: var(--color-ink); }
.meta-value { color: var(--color-text-secondary); text-align: right; }

.bio-text p {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--color-text-secondary);
}

/* ===== Zhang Heng Quote ===== */
.zh-quote {
  border-left: 4px solid #c0a060;
  padding: 1.2rem 1.5rem;
  margin: 1.5rem 0;
  background: linear-gradient(135deg, #faf6ee, #f5f0e4);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.zh-quote .zh-quote-cn {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--color-ink);
  margin-bottom: 0.5em;
  line-height: 1.8;
}

.zh-quote .zh-quote-en {
  font-style: italic;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  margin-bottom: 0.5em;
}

.zh-quote cite {
  display: block;
  font-size: 0.85rem;
  color: var(--color-gold);
  font-style: normal;
}

.zh-quote-final {
  border-left: 4px solid #c0a060;
  padding: 1.5rem 2rem;
  margin: 2.5rem auto 0;
  background: linear-gradient(135deg, #faf6ee, #f5f0e4);
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: 800px;
}

.zh-quote-final p {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--color-ink);
  margin: 0;
  line-height: 1.7;
}

/* ===== Zhang Heng Timeline ===== */
.zh-timeline {
  margin-top: 3rem;
}

.zh-timeline h3 {
  text-align: center;
  font-size: 1.4rem;
  margin-bottom: 2.5rem;
}

/* ===== Seismoscope Section ===== */
.seismoscope-section {
  background: var(--color-surface);
}

.seismo-intro {
  max-width: 860px;
  margin: 0 auto 2.5rem;
}

.seismo-intro p {
  font-size: 1.1rem;
  line-height: 1.9;
  color: var(--color-text-secondary);
  text-align: center;
}

/* ===== Seismoscope Diagram ===== */
.seismo-visual {
  max-width: 500px;
  margin: 0 auto 3rem;
}

.seismo-diagram {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 400px;
  margin: 0 auto;
}

.diagram-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.seismo-body {
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, #c0a060, #a08040);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  border: 3px solid #d4b870;
}

.seismo-label {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
}

.seismo-sublabel {
  font-size: 0.55rem;
  color: rgba(255,255,255,0.7);
  margin-top: 0.15rem;
}

/* Dragon Ring */
.dragon-ring {
  position: absolute;
  inset: 20px;
}

.dragon-pos {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
}

.dragon-icon { font-size: 1.8rem; }
.dragon-dir {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-top: 0.1rem;
}

.dragon-n  { top: 5%;  left: 50%; }
.dragon-ne { top: 15%; left: 85%; }
.dragon-e  { top: 50%; left: 95%; }
.dragon-se { top: 85%; left: 85%; }
.dragon-s  { top: 95%; left: 50%; }
.dragon-sw { top: 85%; left: 15%; }
.dragon-w  { top: 50%; left: 5%;  }
.dragon-nw { top: 15%; left: 15%; }

/* Toad Ring */
.toad-ring {
  position: absolute;
  inset: -5px;
}

.toad-pos {
  position: absolute;
  font-size: 1.2rem;
  transform: translate(-50%, -50%);
  opacity: 0.6;
}

.toad-n  { top: 0%;   left: 50%; }
.toad-ne { top: 10%;  left: 90%; }
.toad-e  { top: 50%;  left: 100%; }
.toad-se { top: 90%;  left: 90%; }
.toad-s  { top: 100%; left: 50%; }
.toad-sw { top: 90%;  left: 10%; }
.toad-w  { top: 50%;  left: 0%;  }
.toad-nw { top: 10%;  left: 10%; }

.diagram-caption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-top: 1.5rem;
  line-height: 1.6;
  font-style: italic;
}

/* ===== Description Grid ===== */
.seismo-description {
  max-width: 960px;
  margin: 0 auto;
}

.desc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.desc-card {
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  transition: all var(--transition);
}

.desc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.desc-icon { font-size: 2rem; margin-bottom: 0.8rem; }
.desc-card h4 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.desc-card p { font-size: 0.9rem; color: var(--color-text-secondary); margin: 0; line-height: 1.7; }

/* ===== Longxi Story ===== */
.longxi-story {
  max-width: 860px;
  margin: 0 auto 3rem;
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.longxi-header {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #f5efe0, #ebe3d0);
  border-bottom: 1px solid var(--color-border);
}

.longxi-icon { font-size: 2.5rem; flex-shrink: 0; }
.longxi-header h3 { font-size: 1.2rem; margin-bottom: 0.2rem; }
.longxi-subtitle { color: #c0a060; font-size: 0.9rem; margin: 0; }

.longxi-body { padding: 1.5rem 2rem 2rem; }
.longxi-body p { font-size: 1.05rem; line-height: 1.9; color: var(--color-text-secondary); }

/* ===== Reconstructions ===== */
.reconstructions {
  max-width: 960px;
  margin: 0 auto 3rem;
}

.reconstructions h3 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.3rem;
}

.recon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2rem;
}

.recon-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.recon-highlight {
  border: 2px solid #c0a060;
}

.recon-header {
  padding: 1.2rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.recon-wang { background: linear-gradient(135deg, #d0d8e0, #b8c4d0); }
.recon-new { background: linear-gradient(135deg, #e8dcc8, #d8c8a8); }

.recon-header h4 { color: #fff; font-size: 1rem; }

.recon-badge {
  background: rgba(255,255,255,0.25);
  padding: 0.15rem 0.6rem;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
}

.recon-body {
  padding: 1.5rem;
}

.recon-body p { font-size: 0.95rem; color: var(--color-text-secondary); line-height: 1.8; }

.recon-body ul {
  margin: 0.8em 0 1em 1.2em;
  line-height: 1.7;
}

.recon-body li { margin-bottom: 0.4em; font-size: 0.93rem; color: var(--color-text-secondary); }

.recon-issue {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--color-border);
}

.recon-issue strong { color: var(--color-accent); }

/* ===== Comparison Timeline (1700 years) ===== */
.comparison-timeline {
  margin-top: 1rem;
}

.comp-event {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0;
}

.comp-year {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: #5a7a9a;
  min-width: 80px;
}

.comp-desc {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
}

.comp-divider {
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-gold);
  padding: 0.8rem 0;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
}

/* ===== Principle Block ===== */
.principle-block {
  max-width: 960px;
  margin: 0 auto;
}

.principle-block h3 {
  text-align: center;
  margin-bottom: 2rem;
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.principle-step {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  box-shadow: var(--shadow);
  position: relative;
  transition: all var(--transition);
}

.principle-step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #c0a060, #a08040);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50%;
  margin-bottom: 0.8rem;
}

.principle-step h4 { font-size: 1rem; margin-bottom: 0.5rem; }
.principle-step p { font-size: 0.88rem; color: var(--color-text-secondary); margin: 0; line-height: 1.7; }

/* ===== Other Achievements ===== */
.other-section {
  background: var(--color-surface);
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 960px;
  margin: 0 auto;
}

.achievement-card {
  background: var(--color-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all var(--transition);
}

.achievement-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.achieve-header {
  padding: 1.2rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.achieve-astronomy { background: linear-gradient(135deg, #1a2a40, #2a3a50); }
.achieve-math { background: linear-gradient(135deg, #3a2a50, #4a3a60); }
.achieve-literature { background: linear-gradient(135deg, #2a4a3a, #3a5a4a); }
.achieve-geo { background: linear-gradient(135deg, #4a3a20, #5a4a30); }

.achieve-icon { font-size: 1.8rem; }
.achieve-header h3 { color: #fff; font-size: 1.15rem; }

.achieve-body { padding: 1.5rem; }

.achieve-item { margin-bottom: 1.5rem; }
.achieve-item:last-child { margin-bottom: 0; }
.achieve-item h4 { font-size: 1rem; margin-bottom: 0.5rem; color: var(--color-ink); }
.achieve-item p { font-size: 0.93rem; color: var(--color-text-secondary); line-height: 1.8; margin: 0; }

/* ===== Why Forgotten Section ===== */
.forgotten-content {
  max-width: 960px;
  margin: 0 auto;
}

.forgotten-intro {
  font-size: 1.1rem;
  line-height: 1.9;
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: 2.5rem;
}

.reasons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.reason-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
  transition: all var(--transition);
  border-top: 4px solid var(--color-border);
}

.reason-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.reason-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2rem;
  color: var(--color-gold);
  margin-bottom: 0.5rem;
}

.reason-card h3 { font-size: 1.1rem; margin-bottom: 0.8rem; }
.reason-card p { font-size: 0.93rem; color: var(--color-text-secondary); line-height: 1.8; margin: 0; }

/* ===== Rediscover Section ===== */
.rediscover-section {
  background: var(--color-bg);
}

.honors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  max-width: 960px;
  margin: 0 auto;
}

.honor-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: all var(--transition);
  border-bottom: 4px solid #c0a060;
}

.honor-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.honor-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.honor-card h3 { font-size: 1.1rem; margin-bottom: 0.8rem; }
.honor-card p { font-size: 0.93rem; color: var(--color-text-secondary); line-height: 1.8; margin: 0; }

/* ===== Highlight Box (reused) ===== */
.highlight-box {
  background: linear-gradient(135deg, #faf6ee, #f5f0e4);
  border-radius: var(--radius);
  padding: 2rem 2.5rem;
  margin: 3rem 0;
  border-left: 4px solid #c0a060;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.highlight-box h4 {
  color: #a08040;
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .bio-intro {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .portrait-frame { max-width: 300px; margin: 0 auto; }

  .recon-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .seismo-diagram { max-width: 300px; }
  .dragon-icon { font-size: 1.4rem; }
  .dragon-dir { font-size: 0.55rem; }
  .toad-pos { font-size: 0.9rem; }
  .seismo-body { width: 90px; height: 90px; }
  .seismo-label { font-size: 0.65rem; }

  .achievements-grid { grid-template-columns: 1fr; }
  .reasons-grid { grid-template-columns: 1fr; }
  .honors-grid { grid-template-columns: 1fr; }

  .comp-event { flex-direction: column; gap: 0.2rem; }
  .comp-year { min-width: auto; }
}

@media (max-width: 480px) {
  .desc-grid { grid-template-columns: 1fr; }
  .principle-grid { grid-template-columns: 1fr 1fr; }

  .longxi-header { flex-direction: column; text-align: center; align-items: center; }
  .zh-quote { padding: 1rem; }
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
  .zh-hero {
    background: linear-gradient(135deg, #0a0f1a 0%, #151e2e 40%, #1f1508 100%);
  }

  .portrait-frame { background: linear-gradient(135deg, #2a2520, #201c18); }
  .bio-meta { background: var(--color-surface); }

  .zh-quote,
  .zh-quote-final {
    background: var(--color-surface);
    border-left-color: #c0a060;
  }

  .seismo-body {
    background: linear-gradient(135deg, #8a7040, #6a5030);
    border-color: #a08050;
  }

  .longxi-header { background: linear-gradient(135deg, #2a2520, #201c18); }
  .recon-wang { background: linear-gradient(135deg, #3a4050, #2a3040); }
  .recon-new { background: linear-gradient(135deg, #3a3020, #2a2518); }

  .highlight-box { background: var(--color-surface); }

  .reason-card { border-top-color: var(--color-border); }
}

/* ===== Print ===== */
@media print {
  .quick-nav { display: none; }
  .seismo-diagram { max-width: 200px; }
}