/* WST component — inner-page hero band.
 * Compact header for non-homepage pages (page/single/archive/search/404,
 * and Tourfic single/archive templates). Distinct from the full-bleed
 * homepage hero. Rendered by template-parts/components/page-hero.php. */

.page-hero {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  padding: clamp(48px, 7vw, 96px) 0 clamp(36px, 5vw, 64px);
}
.page-hero--plain {
  background: var(--paper);
  border-bottom: 0;
  padding-bottom: clamp(20px, 3vw, 36px);
}
.page-hero-inner { max-width: 880px; }
.page-hero .eyebrow { margin: 0 0 16px; }
.page-hero-title {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  font-size: clamp(38px, 5.4vw, 76px);
  margin: 0;
  color: var(--ink);
}
.page-hero-title em { font-style: italic; color: var(--terra); }
.page-hero-sub {
  margin: 20px 0 0;
  max-width: 620px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* Breadcrumbs — sits above the title inside .page-hero, or standalone. */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.breadcrumbs a { color: var(--muted); text-decoration: none; transition: color .15s; }
.breadcrumbs a:hover { color: var(--terra); }
.breadcrumbs .sep { opacity: .5; }
.breadcrumbs [aria-current] { color: var(--ink); }

@media (max-width: 720px) {
  .page-hero { padding-top: 56px; }
}