/* ============================================================================
   HERO — rotating financial centres
   ----------------------------------------------------------------------------
   Self-contained and namespaced under .ch, so it can be loaded on any page
   without touching anything already styled.

   THE OVERLAY

   The brief asks for 70–80%. It is written as a gradient rather than a flat
   value, weighted toward the text side: 94% at the left edge, easing to 66% at
   the right.

   That is not decoration. Ten photographs of ten cities have very different
   luminance — a Dubai sunset and a Zurich morning are not the same picture — and
   a single flat opacity that works for one will fail for another. Weighting the
   darkness where the headline sits means the text is legible under every image,
   while the right-hand side stays bright enough for the photograph to be worth
   having.

   Adjust --ch-scrim to move all four stops together.
   ========================================================================== */

.ch {
  --ch-navy:  #0B1626;
  --ch-gold:  #D4A035;
  --ch-scrim: .75;          /* the brief's 70–80%, mid-range */

  position: relative;
  overflow: hidden;
  /* Renders before any photograph loads, and stands in permanently if none are
     configured — so the hero is never a flat empty band. */
  background: radial-gradient(120% 90% at 78% 22%, #1B2E4C 0%, var(--ch-navy) 58%);
}

/* ---- Rotating images -------------------------------------------------------
   Opacity only. No transform, no filter — the compositor handles it on its own
   thread, so a slow cross-fade costs nothing even on a phone. */
.ch-media { position: absolute; inset: 0; }
.ch-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity 1.6s ease-in-out;
}
.ch-img.is-on { opacity: 1; }
/* A missing file must not leave a broken-image box across the hero. */
.ch-img[src=""], .ch-img:not([src]) { display: none; }

/* ---- Overlay --------------------------------------------------------------- */
.ch-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(11, 22, 38, calc(var(--ch-scrim) + .19)) 0%,
    rgba(11, 22, 38, calc(var(--ch-scrim) + .11)) 32%,
    rgba(11, 22, 38, var(--ch-scrim))             60%,
    rgba(11, 22, 38, calc(var(--ch-scrim) - .09)) 100%);
}

/* ---- Content ---------------------------------------------------------------- */
.ch-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1520px; margin: 0 auto;
  padding: clamp(2.6rem, 6.5vw, 5.2rem) clamp(1rem, 4vw, 2.5rem) clamp(4rem, 8vw, 6rem);
}

.ch-kicker {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .74rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ch-gold);
  margin: 0 0 1rem;
}

.ch-title {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(1.95rem, 4.2vw, 3.2rem); line-height: 1.1;
  font-weight: 800; letter-spacing: -.025em; color: #fff;
  margin: 0 0 1rem; text-wrap: balance;
}

.ch-lead {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(.95rem, 1.3vw, 1.04rem); line-height: 1.55;
  color: rgba(255, 255, 255, .86); max-width: 36ch; margin: 0 0 1.6rem;
}

.ch-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.ch-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.35rem; border-radius: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700; font-size: .89rem; text-decoration: none;
  transition: transform .16s ease, filter .16s ease, background .16s ease;
}
.ch-btn:hover { transform: translateY(-1px); }

/* Navy on gold measures 7.67:1. White on gold is 2.37:1 and fails AA, which is
   why the gold button carries dark text rather than light. */
.ch-btn--gold  { background: var(--ch-gold); color: var(--ch-navy); }
.ch-btn--gold:hover  { filter: brightness(1.06); color: var(--ch-navy); }

.ch-btn--ghost {
  background: rgba(255, 255, 255, .08); color: #fff;
  border: 1px solid rgba(255, 255, 255, .4);
}
.ch-btn--ghost:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* ---- City label -------------------------------------------------------------- */
.ch-city {
  position: absolute; z-index: 2; margin: 0;
  right: clamp(1rem, 4vw, 2.5rem); bottom: clamp(1rem, 3vw, 1.75rem);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .72rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255, 255, 255, .55);
}
.ch-city::before {
  content: ''; display: inline-block;
  width: 1.4rem; height: 1px; background: var(--ch-gold);
  vertical-align: middle; margin-right: .6rem;
}

/* ---- Quality floor ------------------------------------------------------------ */
.ch a:focus-visible { outline: 2px solid var(--ch-gold); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  /* The first city simply stays. The JS also declines to start the timer. */
  .ch-img { transition: none; }
  .ch-btn { transition: none; }
}