/* Hero 1, "stories" (Charlie picked it 11 Oct): the homepage hero, also used by /heroes and /_preview/hero-1-stories/.
   Markup: mocks/5-hero-stories.html. Behaviour: stories.js on Swiper 14.2.0 (redesign/vendor/). */

.wl-hero { position: relative; overflow: hidden; overflow: clip; background: var(--wl-ink); color: #fff; font-family: Poppins, sans-serif; }
.wl-hero-wrap { position: relative; z-index: 2; max-width: calc(var(--wl-max) + 2 * var(--wl-gutter)); margin: 0 auto; padding: 0 var(--wl-gutter); }
.wl-hero-title { margin: 0 0 .45em; color: var(--wl-lime); font-family: Bungee, sans-serif; font-size: clamp(1.9rem, .95rem + 3.1vw, 3.6rem); font-weight: 400; line-height: 1.04; letter-spacing: 0; text-align: left; text-wrap: balance; }
.wl-hero-lead { max-width: 640px; margin: 0 0 16px; color: #fff; font-family: Poppins, sans-serif; font-size: clamp(1.1rem, 1rem + .45vw, 1.32rem); font-weight: 500; line-height: 1.5; letter-spacing: -.01em; text-align: left; }
.wl-hero-body { max-width: 640px; margin: 0 0 12px; color: var(--wl-muted); font-family: Poppins, sans-serif; font-size: clamp(.98rem, .94rem + .2vw, 1.06rem); font-weight: 400; line-height: 1.7; letter-spacing: 0; text-align: left; }
.wl-hero-logos { margin-top: 26px; }

/* ---------- Hero 1: stories ---------- */
.wl-hs { padding: clamp(36px, 5vw, 80px) 0 clamp(48px, 6vw, 96px); }
/* 13 Oct (Charlie: "the overlays on the pictures make them look weird and ai"): no glow behind the hero, no shade over
   the videos. The next stories peek out as solid cards; the story name sits on a solid label. */
.wl-hs-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.wl-hs-deck { position: relative; justify-self: center; width: min(100%, 380px, calc((100svh - 250px) * 9 / 16)); aspect-ratio: 9 / 16; margin-top: 6px; }
.wl-hs-ghost { position: absolute; inset: 0; border-radius: 26px; background: #0e1c48 center / cover no-repeat; transition: background-image .4s; }
.wl-hs-ghost { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.wl-hs-ghost.g1 { transform: translateX(13%) rotate(5deg) scale(.93); }
.wl-hs-ghost.g2 { transform: translateX(24%) rotate(10deg) scale(.86); }
/* 15 Oct night (Lighthouse, slow 4G): on phones the cards behind get their pictures from stories.js once the front card's
   picture is on screen, so they don't slow it down. From tablets up the card behind is the bigger paint, so it keeps
   its picture from the start (stories.js swaps in the next stories' pictures as the deck moves on). */
@media screen and (min-width: 768px) {
  .wl-hs-ghost.g1 { background-image: url("/_redesign/reels/DWbWcgkuonA.webp"); }
  .wl-hs-ghost.g2 { background-image: url("/_redesign/reels/DczBlUygJHy.webp"); }
}
.wl-hs-story { position: relative; z-index: 2; width: 100%; height: 100%; overflow: hidden; border-radius: 26px; background: #000; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .14); }
.wl-hs-bars { position: absolute; top: 10px; left: 12px; right: 12px; z-index: 6; display: flex; gap: 4px; }
.wl-hs-bar { flex: 1; height: 16px; padding: 6px 0; border: 0; background: none; cursor: pointer; }
.wl-hs-bar i { position: relative; display: block; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .35); }
.wl-hs-bar i::after { content: ""; position: absolute; inset: 0; background: var(--wl-lime); transform: scaleX(var(--p, 0)); transform-origin: left; }
/* --p (0 to 1) comes from Swiper's autoplay timer, which waits while a clip is still loading */
/* the card is a Swiper (fade effect): Swiper places and fades the slides */
.wl-hs-story .swiper-wrapper { cursor: pointer; }
.wl-hs-story:focus-visible { outline: 3px solid var(--wl-lime); outline-offset: 4px; }  /* keyboard: Space/Enter freeze or play on, arrows move */
.wl-hs-slide.is-post { background: #0e1c48; }  /* the SHARK post on solid navy (it had a blurred copy of the photo behind it) */
.wl-hs-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wl-hs-slide.is-photo.swiper-slide-active .wl-hs-media { animation: wl-hs-zoom 7s ease-out forwards; }
@keyframes wl-hs-zoom { from { transform: scale(1); } to { transform: scale(1.12); } }
.wl-hs-head { position: absolute; top: 30px; left: 12px; z-index: 5; display: flex; align-items: center; gap: 9px; max-width: calc(100% - 24px); padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--wl-ink); }
.wl-hs-avatar { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wl-ink); box-shadow: 0 0 0 2px var(--wl-lime), 0 0 0 4px rgba(0, 0, 0, .3); }
.wl-hs-avatar img { width: 18px; height: auto; }
.wl-hs-name { color: #fff; font-family: Bungee, sans-serif; font-size: 12px; line-height: 1.15; }
.wl-hs-link { position: absolute; left: 50%; bottom: 22px; z-index: 5; display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px 0 16px; border-radius: 12px; background: #fff; color: var(--wl-ink); font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; transform: translateX(-50%); transition: background-color .2s; }
.wl-hs-link::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.wl-hs-link:hover { background: var(--wl-lime); }
.wl-hs-post { position: absolute; left: 9%; right: 9%; top: 50%; z-index: 4; padding: 8px 8px 12px; border-radius: 14px; background: #fff; color: var(--wl-ink); text-decoration: none; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .75); transform: translateY(-56%) rotate(-2deg); transition: transform .3s var(--wl-ease); }
.wl-hs-post:hover { transform: translateY(-58%) rotate(0deg); }
.wl-hs-post img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 9px; }
.wl-hs-post span { display: block; padding: 10px 6px 0; font-family: Bungee, sans-serif; font-size: 13px; line-height: 1.2; }

/* tablets: the three stats share a ~120 px column each; at the page's size 950M+ ran into 200+ */
@media screen and (min-width: 768px) and (max-width: 991px) {
  html[data-wf-page="680941028c753b77b6fbed5b"] .wl-hs .text-wavelength-number-headline { font-size: 30px; }
}

@media screen and (max-width: 991px) {
  .wl-hs-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; }
  .wl-hs-ghost.g2 { display: none; }
}
@media screen and (max-width: 767px) {
  .wl-hs-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .wl-hs-copy { display: contents; }
  .wl-hs-copy .wl-hero-title { order: 1; } .wl-hs-copy .wl-hero-lead { order: 2; }
  .wl-hs-deck-cell { order: 3; align-self: center; width: min(100%, 340px); margin: 14px 0 34px; }
  .wl-hs-deck-cell .wl-hs-deck { width: 100%; margin: 0; }
  .wl-hs-rest { order: 4; }
  .wl-hs .wl-hero-logos { margin-top: 28px; }
}
/* 14 Oct (Charlie: "in the hero section there is a lot of space that needs to be filled could we keep this feel but
   redesign it"): on tablets and up the words run down the left and the story card takes their height beside them
   (it sticks in view while you read if the screen is shorter than the words), and the numbers, the four logos and the
   roll-up line run as one band across the full width underneath. Layout only: the words keep their order in the HTML. */
@media screen and (min-width: 768px) {
  .wl-hs-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 88px); row-gap: 0; align-items: start; }
  .wl-hs-copy, .wl-hs-rest { display: contents; }
  .wl-hs-grid .wl-hero-title { grid-column: 1; grid-row: 1; }
  .wl-hs-grid .wl-hero-lead { grid-column: 1; grid-row: 2; }
  .wl-hs-rest > .wl-hero-body:nth-child(1) { grid-column: 1; grid-row: 3; }
  .wl-hs-rest > .wl-hero-body:nth-child(2) { grid-column: 1; grid-row: 4; margin-bottom: 0; }
  .wl-hs-deck-cell { grid-column: 2; grid-row: 1 / 5; align-self: stretch; min-height: 0; }
  .wl-hs-deck-cell .wl-hs-deck { width: min(100%, 380px); margin: 6px auto 0; }
  @supports (height: 1cqh) {
    /* the cell is as tall as the four rows of words; the card fills it, but never taller than the screen allows or
       wider than its column leaves room for the two cards peeking out behind it */
    .wl-hs-deck-cell { container-type: size; }
    .wl-hs-deck-cell .wl-hs-deck { --h: min(100cqh - 6px, 100svh - 150px, 100cqw * 1.36); position: sticky; top: 96px; width: calc(var(--h) * 9 / 16); height: var(--h); }
  }
  /* the band: one rule across the full width, the numbers left, the logos right, the roll-up line under both */
  .wl-hs-grid::before { content: ""; grid-column: 1 / -1; grid-row: 5; height: 1px; margin-top: clamp(36px, 4vw, 60px); background: var(--wl-line); }
  .wl-hs .wl-hs-rest > .wl-hero-stats { grid-column: 1; grid-row: 6; align-self: end; margin: clamp(24px, 2.6vw, 34px) 0 0; padding-top: 0; border-top: 0; }
  /* the network logos: a ruled 2 x 2 panel in the story card's column, directly under it, beside the numbers and the
     roll-up line (15 Oct evening, full-site brief: the logos were "far too small and visually insignificant") */
  .wl-hs .wl-hs-rest > .wl-hero-logos { grid-column: 2; grid-row: 6 / 8; align-self: center; margin: clamp(24px, 2.6vw, 34px) 0 0; }
  .wl-hs .wl-hs-rest > .wl-hero-rollup { grid-column: 1; grid-row: 7; align-self: start; max-width: 62ch; margin: clamp(18px, 2vw, 26px) 0 0; padding: 0; border: 0; }
}
/* tablets held upright: the column beside the words is too narrow for a card as tall as them, so the heading and the
   lead run full width and the card sits beside the two paragraphs at its own size */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .wl-hs-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .wl-hs-grid .wl-hero-title, .wl-hs-grid .wl-hero-lead { grid-column: 1 / -1; }
  .wl-hs-grid .wl-hero-lead { max-width: 640px; margin-bottom: 28px; }
  /* an empty flexible row under the paragraphs takes the card's extra height, so the paragraphs stay together */
  .wl-hs-grid { grid-template-rows: auto auto auto auto 1fr; }
  .wl-hs-deck-cell { grid-row: 3 / 6; container-type: normal; display: flex; justify-content: center; align-items: flex-start; }
  .wl-hs-deck-cell .wl-hs-deck { position: relative; top: auto; width: min(100%, 270px); height: auto; margin: 4px 0 0; }
  /* the band: the three numbers get the full width, the logos run underneath them */
  .wl-hs-grid::before { grid-row: 6; }
  .wl-hs .wl-hs-rest > .wl-hero-stats { grid-column: 1 / -1; grid-row: 7; }
  .wl-hs .wl-hs-rest > .wl-hero-logos { grid-column: 1 / -1; grid-row: 8; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 26px; }
  .wl-hs .wl-hs-rest > .wl-hero-rollup { grid-column: 1 / -1; grid-row: 9; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wl-hero *, .wl-hero *::after { animation: none !important; transition-duration: .01ms !important; }
}