/* HorseJournal Knowledge Hub — coat colours. Layered on styles.css + breeds.css.
   Reuses the existing tokens (purple/cream/pink, DM Serif + Outfit, radii). Only
   the few components the breed sheet does not already provide live here. */

/* ---------- knowledge hub hero ---------- */
.kn-hero { padding: 22px 0 10px; }
.kn-hero h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); margin: 6px 0 .25em; }
.kn-lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 62ch; }

/* ---------- category sections on the hub ---------- */
.kn-cat { margin: 34px 0 8px; }
.kn-cat h2 { font-size: 1.5rem; margin: 0 0 2px; }
.kn-cat .kn-cat-intro { color: var(--muted); margin: 0 0 16px; max-width: 60ch; }

/* ---------- colour card grid ---------- */
.kn-grid {
  list-style: none; padding: 0; margin: 0 0 10px;
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.kn-card {
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
a.kn-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
a.kn-card { display: block; color: inherit; }
.kn-card-media { aspect-ratio: 4 / 3; width: 100%; background: var(--cream-200); }
.kn-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kn-card-body { padding: 14px 16px 16px; }
.kn-card-body h3 { font-size: 1.15rem; margin: 0 0 .25em; }
.kn-card-body p { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.kn-card.is-soon { opacity: .72; }
.kn-card .kn-soon-tag {
  display: inline-block; margin-top: 8px; font-size: .78rem; font-weight: 600;
  color: var(--purple-700); background: var(--purple-50);
  border-radius: 999px; padding: 3px 10px;
}

/* ---------- illustration (detail hero) + placeholder ---------- */
.kn-illus { aspect-ratio: 4 / 3; width: 100%; border-radius: var(--radius);
  overflow: hidden; background: var(--cream-200); box-shadow: var(--shadow-sm); }
.kn-illus img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kn-illus-ph {
  aspect-ratio: 4 / 3; width: 100%; border-radius: var(--radius);
  display: grid; place-content: center; text-align: center; gap: 6px;
  color: var(--purple-800);
  background: radial-gradient(120% 100% at 50% 40%, var(--cream-100) 0%, var(--cream-200) 45%, var(--purple-50) 100%);
  border: 1px dashed rgba(46,26,90,.18);
}
.kn-illus-ph .kn-ph-name { font-family: var(--font-serif); font-size: 1.6rem; }
.kn-illus-ph .kn-ph-note { font-size: .82rem; color: var(--muted); }

/* ---------- "waarmee verward" comparison rows ---------- */
.kn-compare { display: grid; gap: 12px; margin: 10px 0 0; padding: 0; list-style: none; }
.kn-compare li {
  background: var(--cream-100); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 16px;
}
.kn-compare .kn-cmp-name { font-weight: 600; color: var(--purple-900); }
.kn-compare .kn-cmp-name a { color: var(--purple-700); }
.kn-compare p { margin: 3px 0 0; color: var(--ink-soft); font-size: .96rem; }

/* ---------- genetics progressive disclosure ---------- */
details.kn-genetics {
  margin: 10px 0 0; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--cream-100); padding: 2px 16px;
}
details.kn-genetics > summary {
  cursor: pointer; font-weight: 600; color: var(--purple-800);
  padding: 12px 0; list-style: none;
}
details.kn-genetics > summary::-webkit-details-marker { display: none; }
details.kn-genetics > summary::before { content: "▸ "; color: var(--purple-500); }
details.kn-genetics[open] > summary::before { content: "▾ "; }
details.kn-genetics > p { margin: 0 0 14px; color: var(--ink-soft); }

/* ---------- discover-more + sources ---------- */
.kn-discover { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; }
.kn-chip {
  display: inline-block; background: var(--purple-50); color: var(--purple-800);
  border-radius: 999px; padding: 7px 15px; font-size: .95rem; font-weight: 500;
}
a.kn-chip:hover { background: var(--pink-100); color: var(--purple-900); }
.kn-sources { margin-top: 26px; font-size: .82rem; color: var(--muted); }
.kn-sources a { color: var(--purple-700); }
.kn-caveat { color: var(--pink-500); font-weight: 600; }

@media (max-width: 720px) {
  .breed-hero { grid-template-columns: 1fr; }
}