/*
 * 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--photo {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 85vh;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    oklch(from var(--forest) l c h / .72) 0%,
    oklch(from var(--forest) l c h / .45) 55%,
    oklch(from var(--forest) l c h / .65) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 5rem 1.5rem 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero--photo .status-bar {
  position: relative;
  z-index: 2;
  margin: auto -0px 0;
}

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

.hero > .eyebrow,
.hero .hero-inner > .eyebrow,
.hero-content > .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;
  }

  .hero-content {
    padding: 7rem 2.5rem 3rem;
  }

  .hero--photo {
    min-height: 90vh;
  }
}

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

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

  .hero-content {
    padding: 9rem 2.5rem 4rem;
  }
}