/* Purpose: Home page–specific styles (hero, quick chips, section bands).
   Loaded only on the front page. Built when the homepage sections are assembled. */

.home-hero {
  position: relative;
  padding-block: var(--space-20) var(--space-16);
  background:
    radial-gradient(1200px 500px at 70% -10%, var(--color-accent-soft), transparent 60%),
    linear-gradient(180deg, var(--color-bg), var(--color-bg-alt));
}
@media (min-width: 1024px) { .home-hero { padding-block: var(--space-32) var(--space-24); } }

.home-hero__inner { display: grid; gap: var(--space-6); max-width: var(--container-lg); }
.home-hero__title { font-size: var(--text-4xl); max-width: 14ch; }
@media (min-width: 1024px) { .home-hero__title { font-size: var(--text-6xl); } }
.home-hero__sub { font-size: var(--text-md); color: var(--color-text-muted); max-width: 56ch; }
/* Search sits above the chips so the suggestions dropdown is never covered
   (both rows are GSAP-transformed → each is its own stacking context). */
.home-hero__search { margin-top: var(--space-4); position: relative; z-index: var(--z-sticky); }
.home-hero__chips { margin-top: var(--space-2); max-width: 760px; position: relative; z-index: var(--z-base); }
.home-hero__cta { margin-top: var(--space-4); }

/* Section heads share .section__head from layout.css */
.home-section { }

/* What's your mood — graphic selectors */
.mood-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px)  { .mood-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .mood-grid { grid-template-columns: repeat(8, 1fr); } }
.mood-tile {
  --mood: var(--color-primary);
  display: grid; gap: var(--space-3); justify-items: center; text-align: center;
  padding: var(--space-6) var(--space-3);
  border-radius: var(--radius-lg); border: var(--border-thin);
  background: var(--color-surface);
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.mood-tile:hover { transform: translateY(-4px); border-color: var(--mood); box-shadow: var(--shadow-md); }
.mood-tile__icon {
  width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: var(--radius-full);
  color: var(--mood); background: color-mix(in srgb, var(--mood) 14%, transparent);
}
.mood-tile__icon .hp-icon { width: 1.6rem; height: 1.6rem; }
.mood-tile__name { font-weight: var(--weight-semibold); font-size: var(--text-sm); }

/* (why-card styles moved to components.css — reused on community + about pages) */

/* (quote/testimonial card styles moved to components.css — testimonials are sitewide) */

/* Newsletter */
.home-newsletter__inner { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 1024px) { .home-newsletter__inner { grid-template-columns: 1.2fr 1fr; } }
.home-newsletter__text { color: color-mix(in srgb, var(--color-text-invert) 80%, transparent); margin-top: var(--space-3); }
.home-newsletter__form { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.home-newsletter__input { flex: 1; min-width: 220px; padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); border: 2px solid transparent; background: var(--color-surface); font-size: var(--text-base); }
.home-newsletter__input:focus-visible { outline: none; box-shadow: var(--shadow-focus); }