/*
 * Compact page hero — the shared subpage hero pattern.
 *
 * Forest-green block with a breadcrumb, a small eyebrow label, a
 * Playfair Display h1 headline, and a lead paragraph. Distinct from
 * the full-bleed home `.hero` (see _hero.css) — page heroes are
 * shorter, carry no CTA buttons or status bar, and are used by every
 * subpage that isn't the home landing page.
 *
 * First consumer: /gastvisser. Every subsequent M1 page
 * (lid-worden, activiteiten, contact) composes this pattern for its
 * own hero. If a future subpage needs a different shape, either
 * add a variant modifier class here or reach for the full `.hero`
 * from _hero.css.
 *
 * No literal colour, spacing, or font values — everything routes
 * through var() tokens from _tokens.css. See docs/design_system.md
 * §"Do Nots".
 */

.page-hero {
  background: var(--forest);
  color: white;
  padding-block: 4rem 3.5rem;
  position: relative;
}

.breadcrumb {
  font-size: var(--fs-xs);
  color: var(--on-dark-45);
  margin-bottom: 1rem;
  letter-spacing: .04em;
}

.breadcrumb a {
  color: var(--on-dark-45);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--on-dark-75);
}

.breadcrumb span {
  margin-inline: .4rem;
}

.page-eyebrow {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .875rem;
}

.page-eyebrow::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--accent);
}

.page-hero-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: white;
  line-height: 1.15;
  max-width: 22ch;
  margin-bottom: 1rem;
}

.page-hero-lead {
  font-size: var(--fs-lg);
  color: var(--on-dark-75);
  line-height: 1.6;
  max-width: 52ch;
  font-weight: 300;
}