/* components/hero.css — home hero: story + live console */

.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(3.5rem, 6vw, 5.5rem);
}
.hero__eyebrow {
  font: var(--qi-font-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--qi-accent);
  margin-bottom: var(--qi-space-lg);
  display: flex;
  align-items: center;
  gap: var(--qi-space-sm);
}
.hero__eyebrow::before {
  content: '';
  width: 1.75rem; height: 1px;
  background: var(--qi-accent);
  display: inline-block;
}
.hero h1 {
  font-size: clamp(2.25rem, 5.2vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin-bottom: var(--qi-space-lg);
}
.hero h1 .accent { color: var(--qi-accent); }
.hero__lede {
  color: var(--qi-text-muted);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  max-width: 52ch;
  margin-bottom: var(--qi-space-xxl);
}
.hero__lede strong { color: var(--qi-text); font-weight: 600; }
.hero__actions { display: flex; gap: var(--qi-space-md); flex-wrap: wrap; }

/* grid children must be able to shrink or the console overflows mobile */
.hero > * { min-width: 0; }

@media (max-width: 56rem) {
  .hero { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.25rem); }
  .hero__actions .btn { flex: 1; justify-content: center; }
}