@property --vscroll-headline-progress {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

:root {
  --c7300-scroll-group-width: 39rem;
  --c7300-scroll-group-height: calc(100svh - 18.8rem);
  --c7300-scroll-group-gap: 5rem;
  --c7300-stat-card-width: 21.875rem;
  --c7300-max-site-width: min(1920px, 100svw);
  --c7300-card-stats-width: max(0px, calc((var(--c7300-max-site-width) - (3 * var(--c7300-stat-card-width))) / 4));
  --c7300-card-stats-gap: max(5rem, calc(var(--c7300-card-stats-width) - (var(--c7300-stat-card-width) * 0.15)));
}

/*******************************/
/*******************************/
/*   Vertical Scroll Styling   */
/*******************************/
/*******************************/
.c7300-vscroll {
  position: relative;
  overflow: clip;

  .c7300-vscroll__text-content {
    top: 50%;
    z-index: 1;
    color: white;
    opacity: 1;
    transform: translate(0, -50%);
    position: fixed;
    padding-left: calc((0.12739 * var(--c7300-max-site-width)) - 18.5px);
    padding-right: calc((0.5267 * var(--c7300-max-site-width)) - 182px);
    max-width: var(--c7300-max-site-width);

    @media screen and (max-height: 44rem) {
      p {
        font-size: 1rem;
        line-height: 1.25rem;
      }
    }
  }

  .c7300-vscroll__headline {
    transform: translate(0, -50%);
    opacity: 1;
    max-width: var(--c7300-max-site-width);

    p {
      color: inherit;

      opacity: calc(clamp(0, calc(var(--vscroll-headline-progress) / 0.25), 1));

      transform:
        translateX(calc((1 - clamp(0, calc(var(--vscroll-headline-progress) / 0.2), 1)) * -20rem)) scale(calc(1 + 1 * (1 - clamp(0, calc(var(--vscroll-headline-progress) / 0.2), 1))));
      /* translateX(calc((1 - clamp(0, calc(var(--vscroll-headline-progress) / 0.4), 1)) * -20rem)); */

      @media screen and (min-width: 1026px) {
        transform:
          translateX(calc((1 - clamp(0, calc(var(--vscroll-headline-progress) / 0.4), 1)) * -20rem)) translateY(calc((1 - clamp(0, calc(var(--vscroll-headline-progress) / 0.4), 1)) * -5rem)) scale(calc(1 + 2 * (1 - clamp(0, calc(var(--vscroll-headline-progress) / 0.4), 1))));
      }
    }

    h1 {
      color: inherit;

      span:first-child {

        /* Alternative that is a bit closer to the original design:
        *
        * transform: translateX(calc((1 - clamp(0, calc((var(--vscroll-headline-progress) - 0.25) / 0.5), 1)) * -13rem));
        */

        opacity: calc(clamp(0.5, calc((var(--vscroll-headline-progress) - .25) / 0.2), 1));
        transform: translateX(calc((1 - clamp(0, calc((var(--vscroll-headline-progress) - 0.1) / 0.4), 1)) * (-1.2 * var(--c7300-max-site-width))));

        @media screen and (min-width: 1026px) {
          transform: translateX(calc((1 - clamp(0, calc((var(--vscroll-headline-progress) - 0.25) / 0.4), 1)) * (-1.2 * var(--c7300-max-site-width))));
        }
      }

      span:nth-child(2) {

        opacity: calc(clamp(0, calc(var(--vscroll-headline-progress) / 0.5), 0.6));

        @media screen and (min-width: 1026px) {
          opacity: calc(clamp(0, calc(var(--vscroll-headline-progress) / 0.5), 1));
        }
      }

      span:nth-child(3) {
        /* Alternative that is a bit closer to the original design:
        *
        * transform: translateX(calc((1 - clamp(0, calc((var(--vscroll-headline-progress) - 0.25) / 0.7), 1)) * 20rem));
        */

        opacity: calc(clamp(0.5, calc((var(--vscroll-headline-progress) - 0.4) / 0.45), 1));
        transform: translateX(calc((1 - clamp(0, calc((var(--vscroll-headline-progress) - 0.25) / 0.65), 1)) * (1.4 * var(--c7300-max-site-width))));
      }
    }
  }

  .c7300-vscroll__banner {
    width: var(--c7300-max-site-width);
    height: 100svh;
    position: relative;

    .c7300-vscroll__banner-image {
      position: fixed;
      object-fit: cover;
      object-position: center;
      top: 0;
      height: 100%;
      width: var(--c7300-max-site-width);
      opacity: 0;
      transition: opacity 1s, filter 1s;
    }

    &.c7300-vscroll__banner--active .c7300-vscroll__banner-image {
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      opacity: 1;
      filter: brightness(70%);
    }

    .c7300-vscroll__headline {
      position: absolute;
    }
  }

  &:has(.c7300-vscroll__text-content) .c7300-vscroll__banner.c7300-vscroll__banner--active .c7300-vscroll__banner-image {
    background: linear-gradient(320.75deg, rgba(0, 0, 0, 0) 0.46%, rgba(0, 0, 0, 0.2) 34.61%),
      linear-gradient(282.73deg, rgba(255, 255, 255, 0.5) -24.41%, rgba(0, 0, 0, 0.5) 48.66%);
    background-blend-mode: multiply;
    filter: brightness(0.5);
  }
}

.c7300-vscroll:not(.c7300-vscroll--inactive) {
  .c7300-vscroll__headline {
    top: 50%;
    position: fixed;
  }
}

.c7300-vscroll--inactive .c7300-vscroll__banner .c7300-vscroll__banner-image {
  position: absolute;
}

.c7300-vscroll--inactive .c7300-vscroll__text-content {
  position: absolute;
  top: 25%;
}

.c7300-vscroll--auto-rotate.c7300-vscroll--inactive .c7300-vscroll__text-content {
  top: 50%;
}

.c7300-vscroll--inactive.c7300-vscroll--bottom .c7300-vscroll__text-content,
.c7300-vscroll--inactive.c7300-vscroll--bottom .c7300-vscroll__headline {
  bottom: 50svh;
  top: auto;
  transform: translate(0, 50%);
}

@media (prefers-reduced-motion: reduce) {
  .c7300-vscroll:not(.c7300-vscroll--inactive) .c7300-vscroll__headline {
    --vscroll-headline-progress: 1;
  }
}


/* Prevent both headline instances from rendering simultaneously */
.c7300-vscroll:has(> .c7300-vscroll__headline) .c7300-vscroll__banner .c7300-vscroll__headline {
  display: none;
}

.c7300-vscroll.c7300-vscroll--auto-rotate.c7300-vscroll--inactive {
  .c7300-vscroll__banner {
    position: static;

    .c7300-vscroll__banner-image {
      transform: none;
      height: 100svh;
      left: 0;
    }
  }
}

.c7300-vscroll.c7300-vscroll--auto-rotate.c7300-vscroll--inactive.c7300-vscroll--bottom {
  .c7300-vscroll__banner {
    .c7300-vscroll__banner-image {
      top: auto;
      bottom: 0;
    }
  }
}

/*******************************/
/*******************************/
/*   Story Grid Styling        */
/*******************************/
/*******************************/
.c7300-story-grid {

  .c7300-story-grid__heading {
    color: #0071BA;
  }

  .c7300-story-grid__grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 3rem;
    justify-content: center;
    align-items: stretch;
    margin-top: 1.25rem;
    margin-inline: auto;
    max-width: 71rem;
  }

  @media screen and (max-width: 640px) {
    .c7300-story-grid__card:nth-child(n+4) {
      display: none;
    }

    .c7300-story-grid__grid {
      gap: max(3rem, calc(100svh - 50.3rem)) 3rem;
    }

    .c7360-grid--expanded .c7300-story-grid__card:nth-child(n+4) {
      display: flex;
    }
  }
}

/*******************************/
/*******************************/
/*  C7360 View More Button     */
/*******************************/
/*******************************/
.c7360-view-more {
  display: none;

  @media screen and (max-width: 640px) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 5rem auto 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
  }

  &.c7360-view-more--hidden {
    display: none;
  }

  .c7360-view-more__text {
    font-family: 'Jost Variable', sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: 0.03125rem;
    color: #000;
  }

  .c7360-view-more__arrow {
    color: #10185A;
    flex-shrink: 0;
  }
}

/*******************************/
/*******************************/
/*  Horizontal Scroll Styling  */
/*******************************/
/*******************************/
.c7300-hscroll {
  position: relative;
  width: 100%;
  margin-inline: auto;
  container: contained-width / inline-size;

  /* height gets set via JS to create enough vertical scroll space */

  .c7300-hscroll__track {
    gap: 5rem;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    display: flex;
    flex: 0 1 fit-content;
  }

  .c7300-hscroll__heading {
    text-align: center;
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    padding-inline: 0.625rem;

    @media screen and (max-height: 600px) {
      margin-top: 5.4rem;
    }
  }

}

.c7300-scroll-group {
  display: flex;
  gap: 5rem;
  height: 100%;
  width: 100%;
  flex: 1 0 max-content;

  .c7300-story-card {
    overflow: visible;

    --max-img-height: min(var(--max-height, 38.75rem), calc(100svh - 18rem));
    /* Note: --upper-width and --lower-width are overridden per-card via inline style attributes */
    --upper-width: 450;
    --lower-width: 300;
    --upper-screen-width: 1512;
    --lower-screen-width: 396;
    --slope-width: calc((var(--upper-screen-width) - var(--lower-screen-width)) / (var(--upper-width) - var(--lower-width)));
    --width-intercept: calc((var(--upper-width) - (var(--upper-screen-width) / var(--slope-width))) * 1px);
    --max-img-width: calc((var(--c7300-max-site-width) / var(--slope-width)) + var(--width-intercept));
    --img-text-offset: 8rem;
    flex: 1 0 fit-content;

    @media screen and (min-height: 64rem) {
      --max-img-height: calc(var(--max-height, 38.75rem) + 15svh);
    }

    @media screen and (min-width: 95rem) {
      --max-img-width: calc((var(--c7300-max-site-width) / var(--slope-width)) + (var(--width-intercept) + 5vw));
    }

    @media screen and (max-width: 26rem) {
      --img-text-offset: min(calc((var(--c7300-max-site-width) - 10rem) / 2), 6rem);
    }

    &:last-child .c7300-story-card__image-wrapper {
      position: relative;

      &::before {
        content: "";
        position: absolute;
        width: calc(14.07vw + 11.95rem);
        max-width: 70%;
        height: calc(16.577vw + 15.7rem);
        max-height: 98%;
        background: linear-gradient(35.07deg, rgba(3, 146, 207, 0.3) -5.66%, rgba(0, 113, 186, 0.3) 97.21%);
        right: 13%;
        top: -10%;
        z-index: -1;
      }
    }

    .c7300-story-card__image-wrapper {
      width: calc(var(--max-img-width) + var(--img-text-offset));
      max-width: 98vw;
      overflow-x: clip;

    }

    img {
      height: auto;
      float: right;
      object-fit: contain;
      object-position: center bottom;
      shape-outside: var(--shape-img);
      shape-margin: .75rem;
      max-height: var(--max-img-height);
      width: var(--max-img-width);

      margin-right: max(min(calc((var(--c7300-max-site-width) - var(--img-text-offset)) - var(--max-img-width)), 0px), -8rem);

      @media screen and (max-width: 19rem) {
        float: none;
      }
    }
  }

  &.c7300-scroll-group--stats {
    gap: var(--c7300-card-stats-gap);

    p {
      padding: 0;
    }

    .c7300-stat-card {
      width: var(--c7300-stat-card-width);
    }

    .c7300-stat-card__heading {
      display: flex;
      flex-direction: column;
      gap: .75rem;
      align-items: center;

      .c7300-stat-card__heading-rule {
        margin-inline: auto;
        border-block: solid 1px #0392CF;
        width: 4rem;
      }
    }

    .c7300-stat-card__value {
      font-size: 5.4rem;
      line-height: 4.875rem;
      letter-spacing: -5%;
      display: flex;
      justify-content: center;

      .c7300-stat-card__value-currency {
        font-size: 2rem;
        line-height: 2rem;
        letter-spacing: 0;
        vertical-align: super;
      }
    }

    .c7300-stat-card__copy {
      font-size: 1.75rem;
      line-height: 2rem;
      letter-spacing: 0;
      font-weight: 600;
    }
  }
}

/* Setting the track gap for the c7331 track cards */
.c7300-hscroll__track:has(.c7300-scroll-group--stats) {
  gap: var(--c7300-card-stats-gap);
}

.c7300-hscroll__sticky {
  justify-content: center;
}

@media screen and (min-width: 64.125rem),
(min-height: 64rem) {

  .c7300-hscroll__sticky {

    .c7300-hscroll__track {
      margin-block: 0;

      .c7300-story-card {
        width: fit-content;
        min-width: 25rem;
      }
    }
  }
}

.c7300-scroll-group__background {
  position: absolute;
  object-fit: cover;
  object-position: bottom;
  top: 0;
  left: 0;
  z-index: -1;
  height: 100svh;
  width: 100%;
  filter: brightness(70%);
  opacity: 0;
  transition: opacity 1s, filter 1s;
}

.c7300-scroll-group__background--active {
  opacity: 1;
}

.c7300-hscroll__backgrounds {
  position: absolute;
  inset: 0;
  pointer-events: none;
}