/* ============================================
   LEOASTRODEN — COMPATIBILITY PAGE STYLES
   Used on: leo-and-{sign}.html pages
   Requires: main.css loaded first
   ============================================ */

/* --- COMPATIBILITY HERO (dark dramatic) --- */
.compat-hero {
  padding: var(--space-3xl) var(--space-lg);
  text-align: center;
  color: var(--white);
}
.compat-hero-inner {
  max-width: 800px;
  margin: 0 auto;
}
.compat-signs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.compat-sign { text-align: center; }
.compat-sign-emoji {
  font-size: 64px;
  display: block;
  margin-bottom: var(--space-sm);
}
.compat-sign-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.compat-sign-name.leo { color: var(--leo-amber); }
.compat-sign-name.scorpio { color: var(--scorpio-red); }
.compat-sign-name.aries { color: var(--aries-red); }
.compat-sign-name.sag { color: var(--sag-blue); }
.compat-sign-name.libra { color: var(--libra-rose); }
.compat-sign-name.gemini { color: var(--gemini-yellow); }
.compat-sign-name.aquarius { color: #06B6D4; }
.compat-sign-name.cancer { color: #A78BFA; }
.compat-sign-name.capricorn { color: #78716C; }
.compat-sign-name.virgo { color: #65A30D; }
.compat-sign-name.taurus { color: #16A34A; }
.compat-sign-name.pisces { color: #818CF8; }
.compat-sign-name.leo-match { color: var(--hot-orange); }

.compat-vs {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 28px;
  color: var(--muted);
}
.compat-hero h1 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.15;
  margin-bottom: var(--space-md);
}
.compat-hero h1 .accent-amber { color: var(--leo-amber); }
.compat-hero h1 .accent-red { color: var(--scorpio-red); }
.compat-hero h1 .accent-aries { color: var(--aries-red); }
.compat-hero h1 .accent-blue { color: var(--sag-blue); }
.compat-hero h1 .accent-rose { color: var(--libra-rose); }
.compat-hero h1 .accent-yellow { color: var(--gemini-yellow); }
.compat-hero-sub {
  font-size: 18px;
  color: var(--muted-light);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* --- SCORECARD --- */
.compat-scorecard {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
}
.scorecard-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
}
.score-item {
  text-align: center;
  padding: var(--space-lg);
  border: 2px solid var(--light-border);
}
.score-emoji {
  font-size: 28px;
  display: block;
  margin-bottom: var(--space-sm);
}
.score-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: var(--space-sm);
}
.score-bar-bg {
  height: 8px;
  background: var(--off-white);
  margin-bottom: var(--space-xs);
}
.score-bar-fill { height: 100%; }
.score-bar-fill.medium { background: var(--leo-amber); }
/* .high color set per-page via inline style or page-specific class */
.score-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
}

/* --- ESSAY SECTIONS (compat body) --- */
.essay-section { margin-bottom: var(--space-2xl); }
.essay-section h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.25;
  color: var(--near-black);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 3px solid var(--leo-amber);
  display: inline-block;
}
.essay-section p {
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: var(--space-lg);
}
.essay-section p:last-child { margin-bottom: 0; }
.essay-lead {
  font-size: 20px;
  line-height: 1.75;
  color: var(--near-black);
  margin-bottom: var(--space-2xl);
  font-weight: 500;
}
.essay-divider {
  text-align: center;
  padding: var(--space-lg) 0;
  color: var(--muted-light);
  font-size: 24px;
  letter-spacing: 8px;
}

/* --- VS COMPARISON BOX --- */
.vs-box {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  border: 2px solid var(--light-border);
}
.vs-col { padding: var(--space-sm); }
.vs-col h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 16px;
  margin-bottom: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.vs-col h4.leo-label { color: var(--leo-amber); }
.vs-col h4.scorpio-label { color: var(--scorpio-red); }
.vs-col h4.aries-label { color: var(--aries-red); }
.vs-col h4.sag-label { color: var(--sag-blue); }
.vs-col h4.libra-label { color: var(--libra-rose); }
.vs-col h4.gemini-label { color: #CA8A04; }
.vs-col ul {
  list-style: none;
  font-size: 14px;
  line-height: 1.8;
}
.vs-divider {
  display: flex;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 20px;
  color: var(--muted-light);
}

/* --- SURVIVAL GUIDE TIP BOX --- */
.compat-tip {
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
  border: 2px solid var(--leo-amber);
}
.compat-tip h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.compat-tip ul { list-style: none; font-size: 15px; }
.compat-tip li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  line-height: 1.6;
}
.compat-tip li:last-child { border-bottom: none; }
.tip-icon { flex-shrink: 0; }

/* ============================================
   COMPATIBILITY RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .scorecard-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .compat-hero { padding: var(--space-2xl) var(--space-md); }
  .compat-sign-emoji { font-size: 48px; }
  .compat-vs { font-size: 22px; }
  .scorecard-grid { grid-template-columns: repeat(2, 1fr); }
  .vs-box { grid-template-columns: 1fr; }
  .vs-divider { justify-content: center; padding: var(--space-sm) 0; }
}
@media (max-width: 480px) {
  .scorecard-grid { grid-template-columns: 1fr 1fr; }
}