/* results: section-owned desktop and responsive styles. */
/* Depends on ../../assets/css/base.css for tokens and grid utilities. */

.ln-results {
  position: relative;
  display: block;
  width: min(calc(100% - (2 * var(--ln-page-gutter))), 1280px);
  height: 1024px;
  margin-inline: auto;
  overflow: visible;

}

.ln-results__column {
  display: flex;
  flex-direction: column;
  gap: 64px;
  align-items: center;
  justify-content: center;

}

.ln-results h2,
.ln-results__card p,
.ln-results__prompt {
  margin: 0;

}

.ln-results h2 {
  width: 100%;
  color: var(--ln-color-navy);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.48px;
  line-height: 50px;
  text-align: center;

}

.ln-results__cards {
  display: flex;
  gap: 29px;
  align-items: flex-end;
  width: 100%;

}

.ln-results__card {
  position: relative;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  padding: 0;
  color: var(--ln-color-navy);
  background: transparent;

}

.ln-results__card-reveal {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 28px 32px;
  background: var(--ln-color-white);
}

.ln-results__card--leads { height: 401px; 
}

.ln-results__card--sessions { height: 323px; 
}

.ln-results__card--experience { height: 172px; 
}

.ln-results__card strong {
  width: 100%;
  font-size: 78px;
  font-weight: 500;
  letter-spacing: -0.78px;
  line-height: 1.06;

}

.ln-results__card p {
  width: 100%;
  font-size: 30px;
  font-weight: 500;
  line-height: normal;

}

.ln-results__connector {
  --ln-results-line-hidden: 0%;

  position: absolute;
  top: 331.5px;
  left: 50%;
  z-index: 0;
  width: 2px;
  height: 449px;
  background: var(--ln-color-orange);
  transform: translateX(-50%);

}

.ln-results__connector.is-scroll-drawn {
  clip-path: inset(0 0 var(--ln-results-line-hidden) 0);
  will-change: clip-path;
}

.ln-results__prompt {
  --ln-results-prompt-y: 0px;

  position: relative;
  z-index: 2;
  padding: 10px 15px;
  border-radius: 6px;
  color: var(--ln-color-sky);
  background: var(--ln-color-burgundy);
  font-size: 30px;
  font-weight: 500;
  line-height: normal;
  text-align: left;
  white-space: pre;
  transform: translateY(var(--ln-results-prompt-y));

}

.ln-results__prompt.is-line-following {
  will-change: transform;
}

@media (min-width: 64.001rem) and (min-height: 35rem) and (prefers-reduced-motion: no-preference) {
  .ln-results.is-results-scroll-enhanced {
    height: 380vh;
    height: 380svh;
    overflow: visible;
  }

  /* The stage is taller than the viewport: heading + cards stay pinned while
     the cards reveal, the prompt starts below the fold and only scrolls into
     view once the stage releases. */
  .ln-results.is-results-scroll-enhanced .ln-results__stage {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
  }

  .ln-results.is-results-scroll-enhanced .ln-results__column {
    justify-content: flex-start;
    padding-top: clamp(48px, 9vh, 110px);
    padding-bottom: 200px;
  }

  .ln-results.is-results-scroll-enhanced .ln-results__prompt {
    margin-top: max(164px, calc(91vh - 579px));
  }

  .ln-results.is-results-scroll-enhanced [data-ln-results-card-reveal] {
    will-change: clip-path;
  }
}


@media (max-width: 1200px) and (min-width: 1025px) {
  .ln-results__card strong {
    font-size: 68px;
  }
}

@media (max-width: 64rem) {
  .ln-results {
      width: min(calc(100% - (2 * var(--ln-page-gutter))), 1280px);
      height: auto;
      min-height: 0;
      padding: 72px 0;
    
  }
  
  .ln-results__column {
      gap: 40px;
    
  }
  
  .ln-results h2 {
      font-size: clamp(30px, 7vw, 48px);
      line-height: 1.05;
    
  }
  
  .ln-results__cards {
      flex-direction: column;
      align-items: stretch;
      width: min(100%, 560px);
    
  }
  
  .ln-results__card,
  .ln-results__card--leads,
  .ln-results__card--sessions,
  .ln-results__card--experience {
      flex: 0 0 220px;
      height: 220px;
    
  }
  
  .ln-results__card strong {
      font-size: 48px;
      line-height: 60px;
    
  }
  
  .ln-results__card p {
      font-size: 24px;
      line-height: 30px;
    
  }
  
  .ln-results__connector {
      display: none;
    
  }
  
  .ln-results__prompt {
      font-size: 22px;
      line-height: 30px;
      white-space: normal;
      transform: none;
      will-change: auto;
    
  }
}

@media (max-width: 47.999rem) {
  .ln-results__cards {
    width: 100%;
  }

  .ln-results__connector {
    display: block;
    top: calc(220px + 29px + 220px + 8px);
    left: 50%;
    height: 40px;
  }

  .ln-results__prompt {
    margin-top: 16px;
    font-size: 20px;
    line-height: 28px;
  }

  .ln-results__prompt.is-line-following {
    transform: translateY(var(--ln-results-prompt-y));
    will-change: transform;
  }

  .ln-results__card,
  .ln-results__card--leads,
  .ln-results__card--sessions,
  .ln-results__card--experience {
    width: 100%;
    max-width: none;
  }
}

@media (min-width: 48rem) and (max-width: 64rem) {
  .ln-results__cards {
    flex-flow: row wrap;
    align-items: stretch;
    width: 100%;
  }

  .ln-results__card,
  .ln-results__card--leads,
  .ln-results__card--sessions,
  .ln-results__card--experience {
    flex: 0 0 calc((100% - 29px) / 2);
    width: calc((100% - 29px) / 2);
  }
  .ln-results__connector {
    left: 0%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ln-results__connector.is-scroll-drawn {
    --ln-results-line-hidden: 0% !important;

    clip-path: none;
    will-change: auto;
  }

  .ln-results__prompt.is-line-following {
    --ln-results-prompt-y: 0px !important;

    transform: none;
    will-change: auto;
  }
}