/* ============================================================
   CTC — Shared CMS page hero pattern
   --------------------------------------------------------------
   Provides the editorial top section reused across pages that
   want the same look as a CMS page (Pages:page) — currently:
     - Pages:page          (templates/Pages/page.latte)
     - Contact:default     (templates/Contact/default.latte)
     - any future top-level public page that should feel
       editorial rather than listing-style

   Only the breadcrumb band + hero are in here. CMS-specific
   sections (prose, attached form, details spec-sheet) stay
   inline on page.latte because they don't belong on Contact.
   ============================================================ */

/* ─── Hard mobile safety nets — full-width, border-box layout
       so internal padding doesn't add up and push siblings out. */
.page-breadcrumb-band,
.page-hero {
  width: 100%;
  box-sizing: border-box;
}

/* ─── BREADCRUMB BAND
       Slim band above the hero. Visually disconnected from the
       title so the title gets to stand alone (centred, dramatic). */
.page-breadcrumb-band {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule, #e6e6e2);
  background: #fff;
}
.page-breadcrumb-band .breadcrumb {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mute, #6b6b6b);
}
.page-breadcrumb-band .breadcrumb a {
  color: var(--mute, #6b6b6b);
  text-decoration: none;
  transition: color .15s ease;
}
.page-breadcrumb-band .breadcrumb a:hover { color: var(--ink, #0a0a0a); }
/* Global .breadcrumb already supplies `display: flex; gap: 8px;` —
   no extra margin on `.sep` needed (it would double the spacing). */
.page-breadcrumb-band .breadcrumb .sep { opacity: .5; }
.page-breadcrumb-band .breadcrumb .current { color: var(--ink, #0a0a0a); }

/* ─── HERO
       Editorial-style centred hero. Kicker line above the title
       ("CARPATHIAN TRAVEL CENTER" or per-page eyebrow), big
       centred H1, an optional lede paragraph, then a short
       decorative rule. Background has two soft radial gradients
       (orange + blue) so the band picks up the brand palette
       without competing with the title. */
.page-hero {
  position: relative;
  padding: 88px 0 80px;
  background:
    radial-gradient(ellipse 50% 70% at 50% 0%, rgba(234, 88, 12, 0.06), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(29, 78, 216, 0.05), transparent 70%),
    var(--bg-soft, #f5f5f3);
  border-bottom: 1px solid var(--rule, #e6e6e2);
  text-align: center;
  overflow: hidden;
}
.page-hero-kicker {
  display: inline-block;
  max-width: 100%;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 22px;
}
.page-hero-kicker::before,
.page-hero-kicker::after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--orange);
  vertical-align: 4px;
  margin: 0 12px;
  opacity: .7;
}
.page-hero h1 {
  max-width: 940px;
  margin: 0 auto;
  font-size: clamp(40px, 6.4vw, 80px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink, #0a0a0a);
  text-align: center;
  /* `overflow-wrap` ensures very long single-word titles wrap on
     narrow viewports instead of forcing horizontal overflow. */
  overflow-wrap: anywhere;
}
.page-hero h1 em {
  font-style: normal;
  color: var(--orange);
}
.page-hero-sub {
  max-width: 640px;
  margin: 26px auto 0;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft, #3a3a3a);
  text-align: center;
}
.page-hero-rule {
  width: 56px;
  height: 3px;
  margin: 36px auto 0;
  background: var(--orange);
  border-radius: 2px;
}
@media (max-width: 720px) {
  .page-hero { padding: 60px 0 56px; }
  .page-hero-kicker { margin-bottom: 16px; }
  .page-hero-kicker::before,
  .page-hero-kicker::after { width: 18px; margin: 0 8px; }
  .page-hero-rule { margin-top: 26px; }
}