/* /assets/css/pages.css */
/* Hero, blog, directory-specific polish */

.hero{
  padding-block: clamp(2rem, 4vw, 3rem);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 980px){
  .hero-grid{ grid-template-columns: 1.3fr .7fr; }
}

.kicker{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  font-size: .85rem;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.lead{
  font-size: var(--fs-2);
  color: var(--muted);
  margin-top: .5rem;
}

.accent{
  color: var(--accent);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap: .75rem;
  margin-top: 1rem;
}

.hero-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-1);
}

.hero-metrics{
  display:flex;
  flex-wrap:wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}
.metric{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: .85rem 1rem;
  box-shadow: 0 6px 16px rgba(2,6,23,.06);
}
.metric strong{ display:block; font-size: 1.15rem; }
.metric span{ color: var(--muted); font-size: .9rem; }

.split{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items:start;
}
@media (min-width: 980px){
  .split{ grid-template-columns: 1fr 1fr; }
}

/* Mini filter form inside hero */
.filter-mini{
  display:grid;
  gap: .75rem;
}
.filter-mini .btn{ width:100%; }

/* Blog page spacing tweak */
article.card + .card,
.card + .card{
  margin-top: 1rem;
}