/* eMotion Video, extra components for the refreshed homepage.
   Namespaced ev- so nothing collides with existing page styles.
   Built against brand-system.css v2026-07-31f. */

.ev-stories {
  background: var(--colour-bg-dark);
  color: var(--colour-text-white);
  padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 64px);
}

.ev-stories__inner { max-width: 1160px; margin: 0 auto; }

.ev-stories__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-300);
  margin: 0 0 var(--sp-3);
}

.ev-stories h2 {
  margin: 0 0 var(--sp-7);
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--w-extrabold);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--colour-text-white);
  text-wrap: balance;
}

.ev-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  padding: var(--sp-6) 0;
}

.ev-story:nth-of-type(even) { grid-template-columns: 340px minmax(0, 1fr); }
.ev-story:nth-of-type(even) .ev-story__text { order: 2; }
.ev-story:nth-of-type(even) .ev-video-card { order: 1; }

.ev-story__text h3 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h3);
  font-weight: var(--w-bold);
  color: var(--colour-text-white);
}

.ev-story__text p {
  margin: 0;
  max-width: 56ch;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--colour-text-tertiary);
}

.ev-video-card {
  display: block;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transform: translateY(24px) rotate(-1.2deg);
  opacity: 0;
  transition: transform 500ms ease, opacity 500ms ease, box-shadow 200ms ease;
}

.ev-video-card.is-in { transform: translateY(0) rotate(-1.2deg); opacity: 1; }
.ev-video-card:hover { box-shadow: var(--shadow-lg); }

.ev-video-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

.ev-play {
  position: absolute;
  left: var(--sp-3);
  bottom: var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-4) 0 var(--sp-3);
  border-radius: var(--radius-full);
  background: rgba(10, 19, 48, 0.55);
  background: color-mix(in srgb, var(--navy-950) 55%, transparent);
  border: 1px solid var(--colour-border-medium);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  color: var(--colour-text-white);
  font-size: 13px;
  font-weight: var(--w-bold);
  transition: background-color 150ms ease;
}

.ev-video-card:hover .ev-play {
  background: rgba(10, 19, 48, 0.8);
  background: color-mix(in srgb, var(--navy-950) 80%, transparent);
}

.ev-play i {
  display: block;
  width: 0;
  height: 0;
  border-left: 11px solid var(--colour-text-white);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

@media (max-width: 900px) {
  .ev-story,
  .ev-story:nth-of-type(even) { grid-template-columns: 1fr; }
  .ev-story:nth-of-type(even) .ev-story__text { order: 1; }
  .ev-story:nth-of-type(even) .ev-video-card { order: 2; }
  .ev-video-card { max-width: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .ev-video-card { opacity: 1; transform: none; transition: none; }
}

/* ---------- Pick the path that fits: five compact cards ---------- */
.ev-paths {
  background: var(--colour-surface);
  border-top: 1px solid var(--colour-border-muted);
  border-bottom: 1px solid var(--colour-border-muted);
  padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 64px);
}

.ev-paths__inner { max-width: 1160px; margin: 0 auto; }

.ev-paths__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--colour-teal);
  margin: 0 0 var(--sp-3);
}

.ev-paths h2 {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--w-extrabold);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--colour-navy);
  text-wrap: balance;
}

.ev-paths__lede {
  margin: 0 0 var(--sp-6);
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--navy-500);
}

.ev-path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-4);
}

.ev-path {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  background: var(--colour-white);
  border: 1px solid var(--colour-border-muted);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-4);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.ev-path:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--colour-teal);
}

.ev-path__tile {
  flex: none;
  width: 52px;
  height: 88px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ev-path__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ev-path__body { min-width: 0; }

.ev-path__kicker {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
  margin-bottom: 2px;
}

.ev-path h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: var(--w-bold);
  color: var(--colour-navy);
}

.ev-path p {
  margin: 0 0 8px;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--navy-500);
}

.ev-path__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 8px;
}

.ev-path__tools span {
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--navy-050);
  color: var(--navy-500);
}

.ev-path__more {
  font-size: var(--fs-small);
  font-weight: var(--w-bold);
  color: var(--colour-teal);
}

/* ---------- Hero framing on narrow screens ----------
   The wide Pormpuraaw frame crops to a tall slice on phones.
   Aim the slice left so the phone on the rig stays in shot
   alongside the ranger, not just his face. */
@media (max-width: 900px) {
  .ev-hero__media--porm { object-position: 18% 14%; }
}

/* ---------- Mobile hero: stronger wash behind the words, wider view ----------
   Phones crop the wide frame hard. Scaling the image down inside its
   frame brings more of the scene back, and a deeper scrim keeps the
   headline clean where it crosses the rig. */
@media (max-width: 900px) {
  .ev-hero__media--porm {
    object-fit: contain;
    object-position: 50% 22%;
    background: var(--colour-bg-dark);
  }

  .ev-hero__scrim {
    background: linear-gradient(
      180deg,
      rgba(10, 19, 48, 0.58) 0%,
      rgba(10, 19, 48, 0.68) 48%,
      rgba(10, 19, 48, 0.78) 100%
    );
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--navy-950) 58%, transparent) 0%,
      color-mix(in srgb, var(--navy-950) 68%, transparent) 48%,
      color-mix(in srgb, var(--navy-950) 78%, transparent) 100%
    );
  }
}

/* Shorter hero on phones: the whole photo shows, then the section ends
   just under the buttons instead of leaving empty ground below. */
@media (max-width: 900px) {
  .ev-hero { min-height: 0; }

  .ev-hero__media--porm {
    position: relative;
    inset: auto;
    height: auto;
    max-height: 46vh;
  }

  .ev-hero__scrim { display: none; }

  .ev-hero__body {
    position: relative;
    padding: var(--sp-6) var(--sp-5) var(--sp-7);
    background: var(--colour-bg-dark);
  }
}

/* Phones: the capsule sat over the rangers' faces. Give the photo a
   clear strip of sky above it so the bar floats above the picture
   rather than across it. */
@media (max-width: 900px) {
  /* No top padding: the extended sky runs up behind the capsule,
     so the bar floats on blue and their faces sit just below it. */
  .ev-hero { padding-top: 0; background: var(--colour-bg-dark); }
  .ev-hero__media--porm { max-height: none; }
}

/* ---------- Desktop hero: photo stays as shot, text works around it ----------
   The rangers sit centre and right. Keep the words in a narrow column on
   the left, over sky and the rig, with a soft shadow behind them so they
   read without a heavy wash across the whole picture. */
@media (min-width: 901px) {
  .ev-hero__body {
    max-width: 460px;
    padding-top: clamp(120px, 14vh, 170px);
  }

  .ev-hero__title { font-size: clamp(38px, 4.4vw, 62px); }

  .ev-hero__body .ev-hero__eyebrow,
  .ev-hero__body h1,
  .ev-hero__body p { text-shadow: 0 2px 18px rgba(10, 19, 48, 0.55); }

  .ev-hero__scrim {
    background: linear-gradient(
      100deg,
      rgba(10, 19, 48, 0.78) 0%,
      rgba(10, 19, 48, 0.52) 26%,
      rgba(10, 19, 48, 0.12) 48%,
      rgba(10, 19, 48, 0) 66%
    );
    background: linear-gradient(
      100deg,
      color-mix(in srgb, var(--navy-950) 78%, transparent) 0%,
      color-mix(in srgb, var(--navy-950) 52%, transparent) 26%,
      color-mix(in srgb, var(--navy-950) 12%, transparent) 48%,
      transparent 66%
    );
  }
}

/* ---------- Desktop hero text: buttons side by side, clear of his face ----------
   The ranger's face begins about 442px in. The words sit left of that,
   the prose stays at a comfortable reading measure, and the two buttons
   share one line beneath rather than stacking. */
@media (min-width: 901px) {
  .ev-hero__body {
    max-width: 450px;
    padding-right: var(--sp-2);
  }

  .ev-hero__body > p { max-width: 360px; }

  .ev-hero__actions {
    flex-wrap: nowrap;
    gap: var(--sp-2);
  }

  .ev-hero__actions .ev-cta,
  .ev-hero__actions .ev-btn-ghost {
    white-space: nowrap;
    padding: 0 var(--sp-4);
  }
}

/* ---------- Desktop hero: photo held right, gradient carries the words ----------
   The photo occupies the right of the frame and dissolves into the brand
   gradient on its left edge, so the text sits on clean colour instead of
   competing with the picture. Nothing of the photo is lost, it is moved
   rather than cropped. */
@media (min-width: 901px) {
  .ev-hero { background: var(--gradient-hero); }

  .ev-hero__media--porm {
    left: auto;
    right: 0;
    width: 88%;
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,0.12) 12%,
      rgba(0,0,0,0.32) 24%,
      rgba(0,0,0,0.56) 36%,
      rgba(0,0,0,0.80) 48%,
      #000 60%);
    mask-image: linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,0.12) 12%,
      rgba(0,0,0,0.32) 24%,
      rgba(0,0,0,0.56) 36%,
      rgba(0,0,0,0.80) 48%,
      #000 60%);
  }

  /* the gradient does the work now, so the wash can be much lighter */
  .ev-hero__scrim {
    background: linear-gradient(
      100deg,
      rgba(10, 19, 48, 0.35) 0%,
      rgba(10, 19, 48, 0.12) 30%,
      rgba(10, 19, 48, 0) 55%
    );
    background: linear-gradient(
      100deg,
      color-mix(in srgb, var(--navy-950) 35%, transparent) 0%,
      color-mix(in srgb, var(--navy-950) 12%, transparent) 30%,
      transparent 55%
    );
  }

  .ev-hero__body { max-width: 470px; }
}