/* ── vc_hero_split ───────────────────────────────────────────────────
   Dark text panel left, photograph bleeding off the right edge, two
   fact columns under an accent rule. Reproduces the design PDF's
   opening panel. Tokens only — no hardcoded colour, size or face. */

.block-vc_hero_split {
  position: relative;
  padding: 0;
  background: var(--color-dark-bg);
  color: var(--color-on-dark);
  overflow: hidden;
  min-height: clamp(520px, 62vw, 760px);
  display: grid;
  /* Text panel occupies the left; the photo sits behind, bleeding right. */
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

/* ── Photograph ──────────────────────────────────────────────────── */
.block-vc_hero_split .vhs-photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 58%;
  z-index: 0;
}
.block-vc_hero_split .vhs-photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* The diagonal fade where photo meets panel — a soft edge rather than
   a hard cut, so the eye reads one composition.

   The black/transparent stops below are MASK values, not brand colours:
   in a mask only the alpha channel is read, and opaque-black is the
   conventional "keep this pixel" value. They are deliberately not
   tokens — swapping in a brand colour here would change nothing
   visible, and reading one would imply a meaning the mask does not
   have. This is the one place in the block where a literal is correct. */
.block-vc_hero_split.has-photo .vhs-photo img {
  /* The angle is 6deg off vertical, not 10. A tilted gradient's bands
     drift sideways by height x tan(tilt) from the top of the box to the
     bottom: at 10deg over an 805px-tall hero that is 142px, which walked
     the transparent end of the ramp 103px off the left edge. The photo
     was then still ~45% opaque where the element stops, and ended in a
     hard vertical cut along the bottom third. 6deg halves the drift to
     ~85px, and the first stop at 16% keeps the fade inside the
     box at every width from 861px (the narrowest two-column case,
     where the box is short but narrow) to 1920px. Verified by measuring
     the stop positions at y=0 and y=height at four widths. */
  -webkit-mask-image: linear-gradient(96deg, transparent 0%, transparent 16%,
                       rgba(0,0,0,.4) 24%, rgba(0,0,0,.82) 32%, #000 44%);
          mask-image: linear-gradient(96deg, transparent 0%, transparent 16%,
                       rgba(0,0,0,.4) 24%, rgba(0,0,0,.82) 32%, #000 44%);
}
.block-vc_hero_split .vhs-photo-empty {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-eyebrow);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-on-dark) 55%, transparent);
  background: color-mix(in srgb, var(--color-on-dark) 6%, transparent);
  cursor: pointer;
}

/* ── Text panel ──────────────────────────────────────────────────── */
.block-vc_hero_split .vhs-panel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: clamp(48px, 6vw, 88px) var(--space-section-x);
}
.block-vc_hero_split .vhs-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}
/* Keep the copy clear of the photograph on wide screens. The cap is
   deliberately tighter than the photo's 58% start: the mask fades the
   image in from ~4%, so text ending exactly at the photo edge would
   still sit over the fade. The accent rule is the visible test — it
   must stop inside the dark panel, as it does in the design. */
@media (min-width: 861px) {
  .block-vc_hero_split .vhs-inner > * { max-width: 50%; }
  .block-vc_hero_split .vhs-facts     { max-width: 50%; }
}
@media (min-width: 1500px) {
  .block-vc_hero_split .vhs-inner > * { max-width: 46%; }
  .block-vc_hero_split .vhs-facts     { max-width: 46%; }
}

.block-vc_hero_split .vhs-kicker {
  font-family: var(--font-eyebrow);
  font-size: 12px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-on-dark);
  opacity: .75;
  margin-bottom: 22px;
}
.block-vc_hero_split .vhs-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 86px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.015em;
  text-transform: uppercase;
  margin: 0 0 26px;
  color: var(--color-on-dark);
  text-wrap: balance;
}
/* <em> marks the accent-coloured half of the headline. */
.block-vc_hero_split .vhs-title em {
  font-style: normal;
  color: var(--color-accent);
}
.block-vc_hero_split .vhs-subtitle {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.9vw, 25px);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-on-dark);
  margin-bottom: 20px;
}
.block-vc_hero_split .vhs-intro {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.62;
  color: color-mix(in srgb, var(--color-on-dark) 86%, transparent);
}
.block-vc_hero_split .vhs-intro p + p { margin-top: .8em; }

.block-vc_hero_split .vhs-rule {
  border: 0;
  height: 2px;
  background: var(--color-accent);
  margin: clamp(26px, 3vw, 40px) 0 clamp(20px, 2.4vw, 30px);
}

/* ── Fact columns ────────────────────────────────────────────────── */
.block-vc_hero_split .vhs-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
}
/* The hairline between the two columns, as in the design. */
.block-vc_hero_split .vhs-fact + .vhs-fact {
  border-left: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  padding-left: clamp(18px, 2.4vw, 34px);
}
.block-vc_hero_split .vhs-fact-value {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 10px;
}
.block-vc_hero_split .vhs-fact-note {
  font-family: var(--font-body);
  font-size: 14px; line-height: 1.5;
  color: color-mix(in srgb, var(--color-on-dark) 78%, transparent);
}

/* ── Button ──────────────────────────────────────────────────────── */
.block-vc_hero_split .vhs-cta-row { margin-top: clamp(28px, 3vw, 42px); }
.block-vc_hero_split .vhs-cta {
  display: inline-flex; align-items: center;
  font-family: var(--font-eyebrow);
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none;
  padding: 16px 34px;
  background: var(--color-accent);
  color: var(--color-dark-bg);
  border: 1px solid var(--color-accent);
  transition: background .2s, color .2s, border-color .2s;
}
.block-vc_hero_split .vhs-cta:hover {
  background: transparent;
  color: var(--color-accent);
}

/* ── Narrow viewports: photo on top, copy below ──────────────────── */
@media (max-width: 860px) {
  .block-vc_hero_split {
    min-height: 0;
    grid-template-rows: auto auto;
  }
  .block-vc_hero_split .vhs-photo {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(220px, 52vw, 340px);
  }
  .block-vc_hero_split.has-photo .vhs-photo img {
    -webkit-mask-image: none; mask-image: none;
  }
  .block-vc_hero_split .vhs-panel { padding: 40px var(--space-section-x) 56px; }
  .block-vc_hero_split .vhs-facts { grid-template-columns: 1fr; gap: 22px; }
  .block-vc_hero_split .vhs-fact + .vhs-fact {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
    padding-left: 0; padding-top: 22px;
  }
}

/* ── Editor: let a click reach the photograph ────────────────────────
   .vhs-panel is the section's only grid item, so it stretches across
   the full width and sits above the photo (z-index 1 vs 0). Nothing
   overlaps visually — the copy is capped at 50% — but the element
   does, so in the editor every click on the image landed on
   .vhs-inner and the image picker never opened. Measured before the
   fix: 0 of 25 sample points over the photo reached it, at 1440px.

   Below 861px the photo is in normal flow (see the media query
   above) and was always clickable, which is why this reads as a
   desktop-only fault.

   In edit mode the panel stops intercepting; its own editable
   children take their clicks back. Public rendering is untouched —
   every rule here is scoped to body.cms-edit. */
body.cms-edit .block-vc_hero_split .vhs-panel { pointer-events: none; }
body.cms-edit .block-vc_hero_split .vhs-panel [data-field],
body.cms-edit .block-vc_hero_split .vhs-panel [data-field-image],
body.cms-edit .block-vc_hero_split .vhs-panel a,
body.cms-edit .block-vc_hero_split .vhs-panel button,
body.cms-edit .block-vc_hero_split .vhs-panel [class*="cms-"] { pointer-events: auto; }