/* ==========================================================================
   XPLOROO · Hero section module
   hero.css — Minimal spacing only. The eyebrow/title/subtitle/stats that
   used to sit above the slot machine have been removed from the markup, so
   the slot machine is now the first visible element in the Hero section.
   This file adds only the small breathing room between the navbar and the
   machine — it does not touch the slot machine itself (styled entirely in
   hero-slot-machine.css), the header, or any other section.
   ========================================================================== */

/* Homepage-only inter-section gap — scoped here (and reused by every other
   homepage section stylesheet, all exclusive to index.html) so the space
   *between* sections can be tuned without touching the global
   `--section-gap` utility other pages still rely on, and without touching
   any section's internal spacing. ~45% smaller than `--section-gap`. */
:root {
  --home-section-gap: clamp(1.2rem, 0.9rem + 1.7vw, 2.6rem);
}

/* The shared `.section` utility class adds a large responsive top padding
   (var(--section-gap), ~56-120px) meant for sections with a heading above
   their content. Now that the slot machine is the first visible element,
   override just the Hero's top padding to a small premium gap so it sits
   directly under the navbar; bottom padding (spacing before the next
   section) uses the reduced homepage gap above. */
.hero {
  padding-top: 28px; /* ~24-32px premium gap below the navbar */
  padding-bottom: var(--home-section-gap);
}

/* Desktop only — the slot machine grows ~30% larger at this breakpoint
   (see hero-slot-machine.css); widen the hero's own container so it has
   room to do so without being clipped by the standard `.container` utility
   (max-width: var(--container-xl), 1200px). `.hero__inner` is unique to
   this section (only used once, here), so this never affects `.container`
   itself or any other page that uses it. Reuses the site's existing
   "wide / hero shells" token rather than inventing a new width. Mobile
   and tablet are untouched — this rule only exists inside this query. */
@media (min-width: 1024px) {
  .hero__inner {
    max-width: var(--container-max);
  }
}