/**
  * Highlighted story component
 */

.block-highlighted-story {
  border-radius: 50px;
  background: var(--primary-color);
  padding-top: calc(var(--spacing) * 2.5);
  margin-bottom: calc(var(--spacing) * 3) !important;

  @media (min-width: 960px) {
    padding-top: 0;
  }

  @media (min-width: 960px) {
    border-radius: 50px 500px 500px 50px;
  }

  .card {
    --bs-card-bg: transparent;

    box-shadow: none !important;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    column-gap: calc(var(--spacing) * 4.5);
    row-gap: calc(var(--spacing) * 1.5);
    container-type: inline-size;
    overflow: visible;
    margin-bottom: 0;

    @media (min-width: 960px) {
      flex-direction: row;
      align-items: normal;
    }
  }

  h2,
  .card-body {
    width: 100%;
    flex: auto;

    @container (min-width: 960px) {
      width: calc(60% - var(--spacing) * 2.25) !important;
    }
  }

  .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: var(--white);
    padding: calc(var(--spacing) * 2.5);

    @media (min-width: 960px) {
      padding: calc(var(--spacing) * 5.25) 0 calc(var(--spacing) * 5.25) calc(var(--spacing) * 5.25);
    }
  }

  p {
    font-size: var(--font-size-22);
  }

  .card-body-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: auto;
    gap: calc(var(--spacing) * 1.5);

    span {
      display: block;
    }

    .name {
      font-size: var(--font-size-24);
      font-weight: var(--font-weight-extra-bold);
    }

    .class {
      font-size: var(--font-size-20);
    }

    a {
      transition: var(--transition);
      display: flex;
      color: var(--white);
      font-size: var(--font-size-19);
      font-weight: var(--font-weight-bold);
      margin-top: auto;
      border: 0;
      padding: 0;
      text-decoration: underline;
      text-decoration-color: transparent;

      &::after {
        content: '';
        background: url('../../images/icons/angle-right-white.svg') no-repeat;
        background-size: cover;
        display: block;
        width: 7px;
        height: 11px;
        margin-right: calc(var(--spacing) * .75);
        position: relative;
        top: 12px;
        left: 8px;
      }

      &:hover,
      &:focus{
        color: var(--white);
        text-decoration-color: var(--white);
      }
    }
  }

  .card-image {
    transition: var(--transition);
    width: 90%;
    max-width: 320px;
    margin: 0 var(--spacing);
    position: relative;
    overflow: visible;
    border: 10px solid var(--white);
    border-radius: 50%;
    order: -1;

    @media (min-width: 960px) {
      width: 100%;
      max-width: none;
      flex: 0 0 468px;
      border: none;
      padding: 74px;
      order: 0;
      margin: 0;
    }

    /* Red bar graphic */
    &::before {
      transition: transform .5s var(--transition-easing) .3s, opacity .25s var(--transition-easing);
      content: '';
      width: 0;
      height: 0;
      background: var(--secondary-color);
      position: absolute;
      top: 0;
      left: 0;
      mix-blend-mode: multiply;
      z-index: 0;
      border-radius: 500px;
      transform-origin: 23% 50%;
      opacity: 0;

      @media (min-width: 960px) {
        opacity: 1;
        width: 1000px;
        height: 468px;
      }
    }

    img {
      position: relative;
      z-index: 1;
      aspect-ratio: 1 / 1;
      width: 100%;
      border-radius: 50%;
    }
  }

  &.is-in-viewport {
    .card-image::before {
      transform: rotate(-10deg);
    }
  }

  .call-to-action {
    align-self: flex-start;
  }
}