/*
 * Hero section — the canonical page-opener pattern.
 *
 * Forest-green background, an .eyebrow label (see _eyebrow.css),
 * Playfair Display headline with an italic accent word (wrap in <em>),
 * lead paragraph on muted white, and one or two CTAs from _buttons.css.
 * Optional .status-bar below the actions for opening hours / address.
 *
 * Defined here as the shared component. The /design-system reference
 * page shows it in a rounded-card demo wrapper (see pages/design_system.css
 * .hero-demo) — real pages use this class directly for a full-bleed hero.
 *
 * See docs/design_system.md §"Hero sectie" and docs/nnvv_prd.md §"Home".
 */

.hero {
  background: var(--forest);
  color: white;
  padding: 5rem 1.5rem 4rem;
  position: relative;
  overflow: hidden;
}

.hero-inner {
  max-width: 64rem;
  margin: 0 auto;
}

/* The eyebrow inside a hero needs a little bottom space. Base .eyebrow
 * is margin-less so it composes into any context. */
.hero > .eyebrow,
.hero .hero-inner > .eyebrow {
  margin-bottom: 1.25rem;
}

.hero h1,
.hero-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 700;
  color: white;
  line-height: 1.05;
  margin-bottom: 1.5rem;
  max-width: 22ch;
}

.hero h1 em,
.hero-title em {
  color: var(--on-dark-45);
  font-style: italic;
}

.hero-lead {
  font-size: var(--fs-base);
  color: var(--on-dark-75);
  max-width: 48ch;
  margin-bottom: 2rem;
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  gap: .875rem;
  flex-wrap: wrap;
}

/* Status bar sits flush against the bottom of the hero, bleeding to
 * the hero edges. .hero > .status-bar removes the horizontal inset so
 * it spans the full hero width. */
.status-bar {
  background: var(--on-dark-06);
  border-top: 1px solid var(--on-dark-10);
  padding: .75rem 1.5rem;
  display: flex;
  gap: 2rem;
  justify-content: center;
  font-size: var(--fs-xs);
  color: var(--on-dark-65);
  flex-wrap: wrap;
}

.hero > .status-bar {
  margin: 3rem -1.5rem -4rem;
}

.status-item {
  display: flex;
  align-items: center;
  gap: .375rem;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-dot.green {
  background: var(--dot-live);
  box-shadow: 0 0 6px oklch(from var(--dot-live) l c h / .5);
}

@media (min-width: 768px) {
  .hero {
    padding: 7rem 2.5rem 6rem;
  }

  .hero > .status-bar {
    margin: 4rem -2.5rem -6rem;
    padding: 1rem 2.5rem;
  }
}

@media (min-width: 1280px) {
  .hero {
    padding: 9rem 2.5rem 8rem;
  }

  .hero > .status-bar {
    margin: 5rem -2.5rem -8rem;
  }
}