/* ==========================================================================
   home.css — homepage (hero, entry cards, stat band, steps, browse teaser)
   plus the /search results page, which also loads this sheet.
   Mobile-first; classes prefixed hero- / entry- / home- / srch- to avoid
   collisions with site.css.
   ========================================================================== */

/* ---- hero ---- */
.hero { padding-top: clamp(28px, 6vw, 64px); text-align: center; }
.hero h1 { max-width: 16ch; margin-inline: auto; }
.hero .hero-lede { margin: 0 auto; max-width: 52ch; }
.hero .eyebrow { margin-bottom: 14px; }

.hero-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: clamp(26px, 4.5vw, 44px);
  text-align: left;
}
@media (min-width: 780px) {
  .hero-cards { grid-template-columns: 1fr 1fr; gap: 20px; }
}

.entry-card { display: flex; flex-direction: column; gap: 10px; }
.entry-card .entry-title { font-size: clamp(1.25rem, 2.6vw, 1.5rem); margin: 0; }
.entry-card .entry-sub { margin: 0; }
.entry-card .entry-search { margin-top: auto; padding-top: 6px; }
.entry-card .entry-eg { margin-top: 10px; color: var(--faint); }
.entry-card .field svg { color: var(--faint); flex: none; }

/* ---- stat band ---- */
.home-stats .stats { margin-bottom: 4px; }
.home-stats .stat { text-align: center; }

/* ---- how it works ---- */
.home-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) {
  .home-steps { grid-template-columns: repeat(3, 1fr); }
}
.home-steps li {
  padding: 22px;
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-steps h3 { margin: 6px 0 0; font-size: 1.08rem; }
.home-steps p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.home-step-n {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 1rem;
}

/* ---- what this data is ---- */
.home-what-p { max-width: 68ch; color: var(--ink-soft); }
.home-what .meaning { margin-top: 22px; }

/* ---- browse teaser ---- */
.home-browse-links { margin-top: 18px; }

/* ==========================================================================
   /search results page
   ========================================================================== */

.srch-head { padding-top: clamp(20px, 4vw, 40px); }
.srch-head h1 { margin-bottom: 0.3em; }
.srch-head .lede { margin-bottom: 18px; }

.srch-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}
.srch-form .srch-box { flex: 1 1 260px; min-width: 220px; }
.srch-form select { flex: 0 1 200px; width: auto; min-width: 150px; }
.srch-form .btn { flex: none; }
@media (max-width: 560px) {
  .srch-form select, .srch-form .btn { flex: 1 1 100%; width: 100%; }
}

.srch-results { margin-top: clamp(22px, 4vw, 36px); }
.srch-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.srch-hit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
}
.srch-hit:hover { background: var(--glass-bg-strong); }
.srch-who { display: flex; flex-direction: column; min-width: 0; }
.srch-who .nm { font-weight: 650; }
.srch-who .ctx { font-size: 0.87rem; color: var(--muted); }
.srch-hit .chip { flex: none; }
@media (max-width: 560px) {
  .srch-hit { flex-wrap: wrap; }
}

.srch-empty h2 { font-size: 1.35rem; }
.srch-empty .srch-tips { margin: 0.6em 0 0; padding-left: 1.2em; }
.srch-empty .srch-tips li { margin-bottom: 0.4em; }
.srch-hints { max-width: 62ch; }