/* ════════════════════════════════════════════════════════════════
   zodipedia-aspects.css — the sourced aspects reference.
   Layers on zodipedia-detail.css (shares --hue → --sign* tokens and
   the .zd-detail hero). Adds the landing grid, per-pairing readings,
   magazine-style historical boxouts, disclaimer callouts, and the
   References block. Class-tinted accents run favourable → difficult.
   ════════════════════════════════════════════════════════════════ */

/* Semantic class accents (independent of --hue): green favourable → red difficult. */
.zd-detail {
  --cls-good:   oklch(0.72 0.15 150);
  --cls-mixed:  oklch(0.75 0.14 85);
  --cls-neutral:oklch(0.72 0.03 280);
  --cls-bad:    oklch(0.66 0.17 25);
}

/* ── Landing grid ───────────────────────────────────────────────── */
.zd-aspects-intro { margin-bottom: 1.6rem; }

.zd-aspect-grid {
  display: grid; gap: 1rem; margin-top: .4rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.zd-aspect-card {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.5rem 1.4rem; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; color: var(--text);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.zd-aspect-card:hover {
  border-color: var(--sign-line); transform: translateY(-3px);
  box-shadow: 0 12px 30px -18px var(--sign-glow);
}
.zd-aspect-glyph {
  font-size: 2rem; line-height: 1; color: var(--sign-bright);
  text-shadow: 0 0 16px var(--sign-glow);
}
.zd-aspect-name {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem;
  margin: .1rem 0 0;
}
.zd-aspect-line { color: var(--muted); font-size: .86rem; line-height: 1.5; margin: 0; }
.zd-aspect-count {
  margin-top: auto; font-size: .74rem; letter-spacing: .05em;
  color: var(--sign-bright); font-family: 'Space Grotesk', sans-serif;
}

/* ── Pairing readings ───────────────────────────────────────────── */
.zd-pairings { display: flex; flex-direction: column; gap: 1rem; }

.zd-pairing {
  padding: 1.4rem 1.5rem; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--cls-neutral);
}
.zd-pairing--double-benefic,
.zd-pairing--benefic-leaning { border-left-color: var(--cls-good); }
.zd-pairing--mixed          { border-left-color: var(--cls-mixed); }
.zd-pairing--malefic-leaning,
.zd-pairing--double-malefic { border-left-color: var(--cls-bad); }

.zd-pairing-head {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-bottom: .7rem;
}
.zd-pairing-glyphs {
  font-size: 1.3rem; color: var(--sign-bright); letter-spacing: .1em;
}
.zd-pairing-glyphs .asp { color: var(--muted-2); }
.zd-pairing-name {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem;
  margin: 0; text-transform: capitalize; flex: 1;
}
.zd-pairing-tag {
  font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: var(--r-pill);
  font-family: 'Space Grotesk', sans-serif; white-space: nowrap;
}
.zd-tag--double-benefic, .zd-tag--benefic-leaning {
  color: var(--cls-good); background: oklch(0.72 0.15 150 / 0.12);
}
.zd-tag--mixed   { color: var(--cls-mixed);   background: oklch(0.75 0.14 85 / 0.12); }
.zd-tag--neutral { color: var(--cls-neutral); background: oklch(0.72 0.03 280 / 0.14); }
.zd-tag--malefic-leaning, .zd-tag--double-malefic {
  color: var(--cls-bad); background: oklch(0.66 0.17 25 / 0.12);
}

.zd-pairing-text { color: var(--text); line-height: 1.6; margin: 0; }

/* Magazine-style boxout for the older, deterministic tradition. */
.zd-boxout {
  margin: 1rem 0 .3rem; padding: .9rem 1.1rem;
  border-radius: 10px; background: oklch(0.66 0.17 25 / 0.06);
  border: 1px dashed oklch(0.66 0.17 25 / 0.35);
}
.zd-boxout-mk {
  display: block; font-family: 'Space Grotesk', sans-serif;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cls-bad); margin-bottom: .35rem;
}
.zd-boxout p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--muted); font-style: italic; }

/* Disclaimer callouts. */
.zd-disclaimer {
  margin: .6rem 0 0; font-size: .78rem; color: var(--muted-2);
  padding: .4rem .7rem; border-radius: 8px; background: oklch(0.5 0.02 280 / 0.18);
}

.zd-pairing-cite {
  margin: .9rem 0 0; font-size: .74rem; color: var(--muted-2);
  border-top: 1px solid var(--line); padding-top: .7rem;
}

/* ── References block ───────────────────────────────────────────── */
.zd-refs { position: sticky; top: 1.5rem; }
.zd-refs-note { color: var(--muted); font-size: .82rem; margin: 0 0 .8rem; }
.zd-refs-list { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .7rem; }
.zd-refs-list li { font-size: .82rem; line-height: 1.45; }
.zd-refs-list a { color: var(--sign-bright); text-decoration: none; }
.zd-refs-list a:hover { text-decoration: underline; }
.zd-refs-meta { display: block; color: var(--muted-2); font-size: .74rem; }
.zd-refs-foot {
  margin: 1.1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line);
  font-size: .74rem; color: var(--muted-2); line-height: 1.5; font-style: italic;
}