/* Homepage-specific styles built on top of base.css variables */

.home-hero {
  padding: var(--space-32) 0;
  background: linear-gradient(180deg, var(--color-background) 0%, #ffffff 100%);
}

.home-hero__inner {
  gap: var(--space-16);
  align-items: center;
}

.home-hero__content {
  max-width: 640px;
}

.home-hero .pill {
  display: inline-block;
  margin-bottom: var(--space-8);
}

.home-hero h1 {
  font-size: var(--font-size-5xl);
  margin-bottom: var(--space-8);
}

.home-hero .lead {
  color: var(--color-text-muted);
  margin-bottom: var(--space-12);
}

.home-hero__actions .button { margin-right: var(--space-4); }

.home-hero__media img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-width: 420px;
}

.home-features { padding: var(--space-32) 0; }
.home-features-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-12); }
.home-features .card { padding: var(--space-12); background: var(--color-surface); box-shadow: var(--shadow-sm); border-radius: var(--radius-md); }
.home-features .card h3 { margin-bottom: var(--space-4); }

.home-categories { padding: var(--space-24) 0; }
.home-categories-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-12); align-items: stretch; }
.category-card { display: block; text-decoration: none; color: inherit; overflow: hidden; }
.category-card img { width: 100%; height: 140px; object-fit: cover; display: block; border-radius: var(--radius-sm); }
.category-card h3 { margin-top: var(--space-4); }

@media (max-width: 720px) {
  .home-hero__inner { flex-direction: column-reverse; text-align: center; }
  .home-hero__media img { max-width: 320px; }
}