/* public/css/hero.css
   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;
    display: flex; flex-direction: column;
    min-height: clamp(520px, 58vh, var(--coutts-home-hero-max, 580px));
    /* 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.4s ease-in-out;
    transform: scale(1.0);
}
.ch-img.is-on { opacity: 1; }
/* Extremely subtle cinematic drift while a photograph is shown (§9), not a Ken Burns zoom. */
@media (prefers-reduced-motion: no-preference) {
    .ch-img.is-on { animation: ch-drift 8s ease-out forwards; }
    @keyframes ch-drift { from { transform: scale(1.0); } to { transform: scale(1.025); } }
}
/* A missing file must not leave a broken-image box across the hero. */
.ch-img[src=""], .ch-img:not([src]) { display: none; }

/* ---- Overlay ---------------------------------------------------------------
   Directional: dark enough for text on the left, the photograph substantially
   unobscured on the right so the jurisdiction is clearly visible (§3). A gentle
   bottom gradient keeps the destination nav legible without dimming the skyline. */
.ch-scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg,
        rgba(4, 17, 35, .92) 0%,
        rgba(4, 17, 35, .78) 26%,
        rgba(4, 17, 35, .44) 50%,
        rgba(4, 17, 35, .18) 72%,
        rgba(4, 17, 35, .06) 100%),
        linear-gradient(to top,
        rgba(4, 17, 35, .55) 0%,
        rgba(4, 17, 35, 0) 28%);
}

/* ---- Content ---------------------------------------------------------------- */
.ch-inner {
    position: relative; z-index: 2; flex: 1 1 auto;
    width: 100%; max-width: var(--cx-container-wide); margin: 0 auto;
    padding: clamp(2.6rem, 6.5vw, 5.2rem) clamp(1rem, 4vw, 2.5rem) clamp(2rem, 4vw, 3rem);
}

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

.ch-title {
    font-family: var(--cx-display);
    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: var(--cx-sans);
    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: var(--cx-sans);
    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; }

/* ---- NOW EXPLORING destination panel ---------------------------------------- */
.ch-panel {
    position: absolute; z-index: 3; right: clamp(1rem, 6%, 4rem); bottom: clamp(5rem, 14vh, 8.5rem);
    width: clamp(179px, 16.8vw, 224px);
    background: linear-gradient(160deg, rgba(6,16,30,.72), rgba(6,16,30,.62));
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgba(201,157,43,.28); border-radius: 11px; padding: 1.09rem 1.15rem;
    box-shadow: 0 24px 60px rgba(0,0,0,.4);
    transition: opacity .3s ease, transform .3s ease;
}
.ch-panel.is-swapping { opacity: 0; transform: translateY(10px); }
.ch-panel-eyebrow {
    display: block; font-family: var(--cx-sans);
    font-size: .42rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--ch-gold, #C9A227); margin-bottom: .36rem;
}
.ch-panel-name {
    display: flex; align-items: center; gap: .38rem; text-decoration: none;
    font-family: var(--cx-display);
    font-size: clamp(.77rem, .96vw, 1.02rem); font-weight: 800; letter-spacing: -.01em;
    color: #fff; text-transform: uppercase; line-height: 1.05;
}
.ch-jx-flag {
    width: 1.12em; height: 1.12em; border-radius: 50%; background-size: cover; background-position: center;
    box-shadow: 0 0 0 1px rgba(201,157,43,.5), 0 2px 8px rgba(0,0,0,.4); flex: 0 0 auto;
}
.ch-panel-desc {
    display: block; font-family: var(--cx-sans);
    font-size: .54rem; line-height: 1.4; color: rgba(255,255,255,.74); margin: .38rem 0 .51rem;
}
.ch-panel-go {
    font-family: var(--cx-display); text-decoration: none;
    font-size: .53rem; font-weight: 700; color: var(--ch-gold, #C9A227);
}
.ch-jx-arrow { display: inline-block; transition: transform .2s ease; }
.ch-panel-go:hover .ch-jx-arrow, .ch-panel-name:hover .ch-jx-arrow { transform: translateX(4px); }
.ch-panel-rule { display: block; height: 1px; background: rgba(201,157,43,.22); margin: .64rem 0 .51rem; }
.ch-panel-coords {
    display: flex; align-items: center; gap: .32rem;
    font-family: var(--cx-sans); font-size: .46rem; letter-spacing: .03em;
    color: rgba(255,255,255,.6);
}
.ch-cross { color: var(--ch-gold, #C9A227); font-size: .58rem; }

/* ---- Destination navigation -------------------------------------------------
   Normal-flow child at the bottom of the hero (not absolute), so it can never be
   overlapped by the section below. The hero is a flex column; this sits last. */
.ch-nav {
    position: relative; z-index: 3; flex: 0 0 auto;
    width: 100%; max-width: var(--cx-container-wide); margin: 0 auto; box-sizing: border-box;
    min-height: 60px;
    display: flex; flex-wrap: nowrap; align-items: center; gap: 1.6rem;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding: 1rem clamp(1rem, 4vw, 2.5rem);
    border-top: 1px solid rgba(255,255,255,.08);
}
.ch-nav::-webkit-scrollbar { display: none; }
.ch-nav-item { flex: 0 0 auto; white-space: nowrap; }
.ch-nav-item {
    background: none; border: 0; cursor: pointer; padding: .2rem 0; position: relative;
    font-family: var(--cx-display); font-size: .8rem; font-weight: 600;
    color: rgba(255,255,255,.55); transition: color .2s ease;
}
.ch-nav-num { color: rgba(255,255,255,.4); margin-right: .35rem; }
.ch-nav-item:hover { color: rgba(255,255,255,.85); }
.ch-nav-item.is-on { color: var(--ch-gold, #C9A227); }
.ch-nav-item.is-on .ch-nav-num { color: var(--ch-gold, #C9A227); }
.ch-nav-item.is-on::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
    background: var(--ch-gold, #C9A227);
}
.ch-nav-item:focus-visible { outline: 2px solid var(--ch-gold); outline-offset: 3px; border-radius: 4px; }

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

@media (max-width: 900px) {
    /* Mobile: panel becomes a simpler lower overlay; nav becomes a scrollable strip. */
    .ch-panel { position: static; width: auto; margin: 1.25rem 0 0; padding: 1.2rem 1.3rem;
        background: rgba(6,16,30,.55); }
    .ch-panel-coords { display: none; }
    .ch-nav { position: static; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto;
        margin-top: 1rem; padding: .4rem 0; gap: 1.2rem; -webkit-overflow-scrolling: touch; }
    .ch-nav-item { white-space: nowrap; flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .ch-img { transition: none; animation: none; }
    .ch-btn { transition: none; }
    .ch-panel { transition: none; }
}

/* §41 — the third hero action. Gold outline with a gold label: distinct from the
   solid primary and from the plain ghost, so three buttons read as a hierarchy
   rather than a row of equals. */
.ch-btn--outline-gold {
    background: transparent;
    color: var(--ch-gold);
    box-shadow: inset 0 0 0 1px var(--ch-gold);
}
.ch-btn--outline-gold:hover,
.ch-btn--outline-gold:focus-visible {
    background: var(--ch-gold);
    color: var(--ch-navy);
}

/* ---- hero actions at narrow widths -----------------------------------------
   "Find the Right Jurisdiction" is roughly 70% longer than the "Explore Services"
   it replaced. .ch-actions already wraps, so nothing overflows — but at phone widths
   a long primary and two shorter secondaries wrap into a ragged two-and-one row that
   loses the hierarchy.

   Below 520px they stack full width in source order, so the primary stays first and
   reads as primary. No change to the buttons themselves and no change to the row at
   any width where three fit. */
@media (max-width: 520px) {
    .ch-actions { flex-direction: column; align-items: stretch; }
    .ch-actions .ch-btn { width: 100%; justify-content: center; }
}