/**
 * Path Entry Block Styles
 * Based on hoitopaikanvalinta theme
 */

.path-entry {
  display: grid;
  grid-template-columns: 37px 1fr 52px;
  width: 100%;
  position: relative;
  align-items: baseline;
  counter-increment: card-item-counter;
}

.path-entry__number {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  background-color: #002970;
  color: #fff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 1.25em;

  @media screen and (min-width: 64em) {
    width: 48px;
    height: 48px;
    font-size: 1.65em;
  }

  &::before {
    content: counter(card-item-counter);
  }
}

.path-entry__content {
  background-color: #ffd3d7;
  color: #002970;
  margin-top: 0 !important;
  display: flex;
  flex-direction: column;
  hyphens: auto;

  ul,
  ol {
    margin-left: 1.125rem;
    max-width: 60ch;

    @media screen and (min-width: 80em) {
      margin-left: 1.25rem;
    }
  }

  .wp-block-list {
    margin-left: 0;
    position: relative;

    > li {
      position: relative;
      padding-left: 1.25em;

      &::before {
        content: "•";
        color: #002970;
        font-size: 1em;
        line-height: 1;
        position: absolute;
        left: 0.1em;
        top: 0.25em;
      }
    }
  }
}

.path-entry details {
  margin-left: 24px;
  margin-bottom: 1.75em;
  grid-column: 2 / 4;
  position: relative;

  @media screen and (min-width: 64em) {
    margin-left: 36px;
  }

  &::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 28px;
    transform: translateY(-50%);
    z-index: 1;
    width: 0;
    height: 0;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-right: 12px solid #002970;

    @media screen and (min-width: 64em) {
      top: 30px;
    }

    @media screen and (min-width: 80em) {
      top: 35px;
    }
  }

  & > * {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1em;

    @media screen and (min-width: 80em) {
      padding-left: 1.75rem;
      padding-right: 3.5rem;
    }
  }

  summary {
    padding: 0.75em 1rem;
    font-size: 1.125em;
    line-height: 1.33;
    background-color: #002970;
    color: #fff;

    &::after {
      border-color: #fff;
      margin-left: 1rem;
    }

    &:focus-visible {
      outline-color: #fff;
    }

    @media screen and (min-width: 80em) {
      padding: 0.75em 1.75rem;
      font-size: 1.33em;
    }
  }
}

.path-entry:last-child {
  .svg-left,
  .svg-center,
  .svg-right,
  .svg-arrow {
    display: none;
  }

  &::after {
    display: none;
  }
}

.path-entry:has(details[open]) {
  grid-template-rows: auto 48px;

  .path-entry__number {
    background-color: #ff768b !important;
  }

  details {
    &::before {
      border-right-color: #ffd3d7 !important;
    }

    summary {
      color: #002970 !important;
      background-color: #ffd3d7 !important;
      border-top: 2px solid transparent;

      &::after {
        border-color: #002970;
      }

      &:focus-visible {
        outline-color: #002970;
      }
    }
  }

  &::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 48px;
    width: 4px;
    bottom: 48px;
    background-color: #ff768b;

    @media screen and (min-width: 64em) {
      left: 22px;
    }
  }

  .svg-left,
  .svg-right,
  .svg-center {
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .svg-left {
    grid-column: 1;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.98 20"><path d="M18.98 20C8.39 20 0 10.93 0 0h4c0 8.94 6.82 16 14.98 16v4Z" style="fill:%23ff768b"/></svg>');
    height: 20px;
    top: 0;
    right: -18px;

    @media screen and (min-width: 64em) {
      right: -22px;
    }
  }

  .svg-center {
    background-color: #ff768b;
    grid-column: 2;
    height: 4px;
    position: relative;
    width: calc(100% + 2px);
  }

  .svg-right {
    grid-column: 3;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.99 19.99"><path d="M18.99 19.99C18.99 9.06 10.6 0 0 0v4c8.17 0 14.99 7.05 14.99 15.99h4Z" style="fill:%23ff768b"/></svg>');
    height: 20px;
    top: 16px;
    left: 1px;
  }

  .svg-arrow {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.1 25.11"><path d="m23.1 5.11-11.55 20L0 5.11h9.55V0h4v5.11h9.55z" style="fill:%23ff768b"/></svg>');
    height: 26px;
    width: 24px;
    position: relative;
    top: 20px;
    left: 5px;
  }
}

.path-entry:has(details[open]) + .path-entry {
  margin-top: 40px;

  .path-entry__number {
    background-color: #ff768b;
  }

  details {
    &::before {
      border-right-color: #ff768b;
    }

    summary {
      color: #fff;
      background-color: #ff768b;
      border-top: 2px solid transparent;
    }
  }
}