/* Page Hero Styles */

.page-hero-wrapper {
  overflow: clip;

  .page-hero-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2.5rem 5%;
  }

  .bg-element {
    display: none;
    position: absolute;
    z-index: 2;
    top: -1rem; left: 50%; bottom: -1rem;
    transform: translateX(-50%);
    width: 100%;
    min-width: 117.125rem;
    pointer-events: none;

    svg {
      min-height: 100%;
    }

    svg path {
      stroke-dasharray: 2500;
      stroke-dashoffset: 2500;
      transition: stroke-dashoffset 4s 1s ease;
    }
  }

  &.loaded {
    .bg-element {
      svg path {
        stroke-dashoffset: 0;
      }
    }
  }

  .page-hero-graphic-wrapper {
    display: block;

    .page-hero-graphic {
      display: block;
      aspect-ratio: 1.33333333;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--wp--custom--border-radius--3-xl);
    }
  }

  &.has-image-overlay {
    .bg-element {
      display: none;
    }

    .page-hero-graphic-wrapper {
      .page-hero-graphic {
        position: relative;
        
        &::after {
          content: "";
          position: absolute;
          top: 50%; left: 20%;
          width: 75%; height: 86%;
          border: 0.1875rem solid var(--wp--preset--color--border-white);
          border-radius: var(--wp--custom--border-radius--2-xl);
          pointer-events: none;
          transform: translateY(-50%);
        }
      }
    }
  }

  &.is-style-image-left {
    &.has-image-overlay {
      .page-hero-graphic-wrapper {
        .page-hero-graphic {          
          &::after {
            left: 5%;
          }
        }
      }
    }
  }

  .page-hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column; 
    align-items: flex-start;
    gap: 1rem;
    flex: 1;

    h1, h2 {
      max-width: 16.33333333em;
    }

    .page-hero-content-inner {
      display: flex;
      flex-direction: column; 
      align-items: flex-start;
      gap: 1rem;
    }

    .action-wrapper {
      margin-top: 1rem;
    }
  }

  @media (min-width: 35rem) {
    &.has-image-overlay {
      .page-hero-graphic-wrapper {
        .page-hero-graphic {
          &::after {
            border-width: 0.375rem;
          }
        }
      }
    }
  }

  @media (min-width: 55rem) {
    .page-hero-content-wrapper {
      flex-direction: row;

      .page-hero-graphic-wrapper {
        width: 50%;
        margin-left: auto;
      }

      .page-hero-content {
        flex: 1;
        padding-top: 8%;
        min-height: 100%;
        max-width: 42rem;
      }
    }

    &.is-style-image-none {
      .page-hero-content-wrapper {
        .page-hero-content {
          flex-direction: row;
          align-items: flex-end;
          justify-content: space-between;
          padding-block: 8rem 1rem;
          max-width: none;
          gap: 5%;

          .page-hero-content-inner {
            max-width: 64rem;
            flex: 1;
          }
        }
      }
    }

    &.has-image-overlay {
      .page-hero-graphic-wrapper {
        .page-hero-graphic {
          &::after {
            left: -1.25rem;
            width: 95%;
            border-width: 0.375rem;
            border-radius: var(--wp--custom--border-radius--4-xl);
          }
        }
      }
    }

    &.is-style-image-left {
      .page-hero-content-wrapper {
        flex-direction: row-reverse;
        justify-content: flex-end;

        .page-hero-graphic-wrapper {
          margin-left: unset;
        }
      }

      &.has-image-overlay {
        .page-hero-graphic-wrapper {
          .page-hero-graphic {
            &::after {
              left: auto; right: -1.25rem;
            }
          }
        }
      }
    }
  }

  @media (min-width: 70rem) {
    .bg-element {
      display: block;
    }

    .page-hero-content {
      gap: 1.5rem;

      .page-hero-content-inner {
        gap: 1.5rem;
      }
    }

    &.has-image-overlay {
      .page-hero-graphic-wrapper {
        .page-hero-graphic {
          &::after {
            left: -2.5rem;
          }
        }
      }
    }

    &.is-style-image-left {
      .page-hero-content-wrapper {
        flex-direction: row-reverse;
        justify-content: flex-end;

        .page-hero-graphic-wrapper {
          margin-left: unset;
        }
      }

      &.has-image-overlay {
        .page-hero-graphic-wrapper {
          .page-hero-graphic {
            &::after {
              right: -2.5rem;
            }
          }
        }
      }
    }
  }
}

.hero-breadcrumbs {
  margin-bottom: 1.5rem;

  > span {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.2;

    a {
      padding-block: 0.67rem;
      white-space: nowrap;
      text-decoration: none;
      color: var(--wp--preset--color--text-action);
      transition: color .3s ease;

      &:hover {
        color: var(--wp--preset--color--text-action-hover-active);
      }
    }

    > span {
      display: none;
    }

    span:first-child, span:nth-child(2), span:last-child {
      display: flex;
    }

    > span:first-child a {
      display: flex;
      align-items: center;
      gap: .5rem;

      &::before {
        content: "";
        display: block;
        width: 1.25rem;
        aspect-ratio: 1;
        background: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.875 12.7302C6.875 12.3866 7.15482 12.108 7.5 12.108H12.5C12.8452 12.108 13.125 12.3866 13.125 12.7302C13.125 13.0739 12.8452 13.3525 12.5 13.3525H7.5C7.15482 13.3525 6.875 13.0739 6.875 12.7302ZM2.39615 7.09234C1.93981 7.40128 1.66666 7.91509 1.66666 8.46451V16.049C1.66666 16.9654 2.41286 17.7083 3.33333 17.7083H16.6667C17.5871 17.7083 18.3333 16.9654 18.3333 16.049V8.46451C18.3333 7.91509 18.0602 7.40128 17.6038 7.09234L10.9372 2.57886C10.3716 2.19594 9.62841 2.19594 9.06281 2.57886L2.39615 7.09234ZM2.91666 8.46451V16.049C2.91666 16.2781 3.10321 16.4638 3.33333 16.4638H16.6667C16.8968 16.4638 17.0833 16.2781 17.0833 16.049V8.46451C17.0833 8.32715 17.015 8.1987 16.901 8.12147L10.2343 3.60799C10.0929 3.51226 9.9071 3.51226 9.7657 3.60799L3.09903 8.12147C2.98495 8.1987 2.91666 8.32715 2.91666 8.46451Z" fill="%238E8E85"/></svg>') no-repeat center;
      }

      .breadcrumb-home-text {
        display: none;
      }
    }
  }

  .breadcrumb-divider {
    width: 1.25rem;
    aspect-ratio: 1;
    background: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.85417 4.55806C7.10416 4.31398 7.50948 4.31398 7.75948 4.55806L13.3333 10L7.75948 15.4419C7.50948 15.686 7.10416 15.686 6.85417 15.4419C6.60417 15.1979 6.60417 14.8021 6.85417 14.5581L11.5227 10L6.85417 5.44194C6.60417 5.19786 6.60417 4.80214 6.85417 4.55806Z" fill="%23A19E96"/></svg>') no-repeat center;
  }

  @media (min-width: 55rem) {
    margin-bottom: 0.75rem;

    > span {
      > span {
        display: block;
      }

      > span:first-child a .breadcrumb-home-text {
        display: block;
      }
    }
  }
}