/* ============================================================================
   Homepage hero — ONE component, all five brands
   ============================================================================
   Reconciled 2026-08-18. Until then each site carried its own hero: lycianway,
   cappadocia and francigena shared the `.hero` class but not its rules, while
   coasttocoast and southwestcoast had a different component entirely
   (`.c2c-hero` / `.swcp-hero`, defined INLINE in index.html — which is why an
   edit to `.hero` on those sites silently did nothing).

   Only three things are genuinely per-brand, so only three are tokens: the
   photograph and the overlay that sits on it. Everything else is identical by
   measurement, not by assumption — see the accent note below.

   Loaded ONLY by pages that render the photo hero (12 of them). It is a
   separate stylesheet on purpose: `.hero` is overloaded on lycianway, where
   ~15 landing pages use the same class name for a plain content wrapper
   (`max-width:1080px`). Linking this globally would restyle those into
   full-viewport photo banners.
   ========================================================================= */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  /* Top-aligned, not centred: the badge stack can push content past 100vh, and
     centring then lifted the tag pill behind the opaque navbar. Padding on
     .hero-content keeps it clear however tall the stack grows. */
  align-items: flex-start;
  background: url('images/swcp-home-hero-1920.jpg') center/cover no-repeat;   /* fallback */
  background-image: -webkit-image-set(url('images/swcp-home-hero-1920.webp') type('image/webp'), url('images/swcp-home-hero-1920.jpg') type('image/jpeg'));
  background-image: image-set(url('images/swcp-home-hero-1920.webp') type('image/webp'), url('images/swcp-home-hero-1920.jpg') type('image/jpeg'));
  box-sizing: border-box;
  /* Clip the hero's own decoration at the hero's edge. Francigena's
     .hero-content::before bleeds 320px past the text column so its wash can
     dissolve outside the copy; at 393px that hung past the viewport and made
     the document 713px wide, which on mobile Chrome resized every
     position:fixed element to match — the cookie banner's buttons ended up
     off-screen and unclickable (fixed in 87723c9, and this rule is that fix).
     `clip`, not `hidden`: hidden would compute overflow-y to auto and turn the
     hero into a scroll container, clipping .hero-scroll's absolute positioning.
     Carried for every brand — nothing visible changes where there is no bleed,
     and it stops the same class of bug appearing on the others. */
  overflow-x: clip;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(20, 40, 8, 0.50) 0%, rgba(26, 48, 12, 0.34) 52%, rgba(38, 68, 18, 0.56) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 780px;
  /* Clears the opaque navbar (~65px) plus the announcement banner (≤72px on
     mobile) — 160px is a comfortable cushion under both. */
  padding-top: 160px;
  padding-bottom: 60px;
}

.hero-tag {
  display: inline-block;
  background: rgba(192, 98, 58, 0.15);
  border: 1px solid rgba(192, 98, 58, 0.35);
  color: var(--terracotta-light);
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 24px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  color: var(--white);
  margin-bottom: 24px;
  /* The headline sits straight on a photograph. Measured against the five hero
     images with their overlays composited on, even pure white lands between
     3.4:1 and 8.8:1 — and on the two bright sea-and-sky heroes (lycianway,
     southwestcoast) it is under the 3:1 large-text floor on the brightest
     patches. A shadow does what no colour can: it separates the glyph edges
     from whatever sits behind them. */
  text-shadow: 0 2px 14px rgba(20, 30, 12, 0.42);
}

.hero h1 em {
  font-style: italic;
  /* Cream, NOT --terracotta-light (#d4845e). Measured against every brand's own
     hero photo, terracotta-light scored 1.18–3.04:1 — below the large-text
     floor on all five, and on lycianway its luminance so nearly matched the sky
     that the phrase visibly mushed into it. Cream scores 2.89–7.45:1 on the
     same photos while still reading warm against the white beside it.
     --terracotta-light is untouched: its other uses sit on light backgrounds
     where the deeper tone is correct. */
  color: #ffe8d6;
}

.hero-sub {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.8;
  margin-bottom: 36px;
  max-width: 520px;
  text-shadow: 0 1px 12px rgba(20, 30, 12, 0.40);
}

.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}