/* Front page (front-page.php) — ported from the HomeView.astro <style> block.
   Selectors renamed hero→home-hero, why→home-why, metro→home-metro because
   every assets/css file is enqueued globally. The Astro-local .grid is not
   ported: the hotel list uses the shared .hotel-grid from style.css
   (identical column/gap/margin rules). */

.home-hero {
  background: linear-gradient(160deg, var(--c-brand) 0%, var(--c-brand-dark) 100%);
  color: #fff;
}
.home-hero__inner { padding-block: var(--space-12); }
.home-hero__title { color: #fff; max-width: 40rem; }
.home-hero__sub { font-size: 1.1rem; max-width: 36rem; opacity: 0.92; }
.home-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.home-hero__ghost { color: #fff; border-color: rgb(255 255 255 / 0.6); }
.home-hero__ghost:hover { background: rgb(255 255 255 / 0.12); color: #fff; }

.home-why { background: var(--c-brand-tint); }
.home-why__grid { display: grid; gap: var(--space-6); }
@media (min-width: 640px) { .home-why__grid { grid-template-columns: repeat(3, 1fr); } }

.home-metro { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.home-metro__chip {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-card);
  text-decoration: none;
  color: var(--c-ink);
  font-weight: 600;
  font-size: 0.95rem;
}
.home-metro__chip:hover { border-color: var(--c-brand); color: var(--c-brand); }