/* buttons */
.cta {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--sp-20);
  max-width: var(--sp-191);
  align-items: center;
  text-decoration: none;
  color: var(--font);
  padding-block: var(--sp-16);
  position: relative;

  svg {
    transition: transform var(--animation-time) var(--animation-timing-function);
  }
  
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: var(--sp-1);
    background-color: var(--font);
    transition: width var(--animation-time) var(--animation-timing-function);
  }

  @media (hover: hover) {
    &:hover {
      svg {
        transform: translateX(var(--sp-4));
      }

      &::after {
        width: calc(100% + var(--sp-4));
      }
    }
  }
}

.btn {
  display: block;
  background-color: var(--bg-shade-9);
  text-decoration: none;
  padding: var(--sp-16) var(--sp-20);
  width: fit-content;
  color: var(--font);
  border: none;
  transition: 
    background-color var(--animation-time) var(--animation-timing-function),
    color var(--animation-time) var(--animation-timing-function);
  
  @media (hover: hover) {
    &:hover {
      background-color: var(--font);
      color: var(--bg);
    }
  }
}

.category-tag {
  display: block;
  text-decoration: none;
  color: var(--font);
  padding: var(--sp-4);
  border: var(--sp-1) solid var(--font);
  width: fit-content;
  transition: 
    background-color var(--animation-time) var(--animation-timing-function),
    color var(--animation-time) var(--animation-timing-function);

  @media (hover: hover) {
    &:hover {
      background-color: var(--font);
      color: var(--bg);
    }
  }
}

.category-taxonomy {
  display: block;
  text-decoration: none;
  color: var(--font);
  padding: var(--sp-12);
  border: var(--sp-1) solid var(--bg-shade-9);
  transition: 
    background-color var(--animation-time) var(--animation-timing-function),
    color var(--animation-time) var(--animation-timing-function);

  @media (hover: hover) {
    &:hover {
      background-color: var(--font);
      color: var(--bg);
    }
  }
}

/* get in touch section */
.get-in-touch {
  text-align: center;

  h2 {
    max-width: min(var(--sp-1360), 100%);
  }

  a {
    margin-inline: auto;
    margin-block-start: var(--sp-40);
  }
}

/* ordered detail summary list components */
ol.detail-summary {
  counter-reset: counter;

  >li {
    counter-increment: counter;
    display: grid;
    grid-template-columns: auto 1fr;
    padding-block: var(--sp-20);
    column-gap: var(--sp-20-12);
    align-items: start;
    border-block-start: var(--border);

    &:last-of-type {
      border-block-end: var(--border);
    }

    &::before {
      content: "(" counter(counter, decimal-leading-zero) ")";
      font-family: var(--f-r);
      font-size: var(--fs-16-14);
      letter-spacing: var(--zero);
      line-height: var(--lh-150);
      margin-block-start: var(--sp-3);
    }
  }

  details {
    >p {
      padding-block-start: var(--sp-20-12);
    }

    p {
      font: inherit;
    }

    summary {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      list-style: none;
      cursor: pointer;
    }

    &::details-content {
      block-size: 0;
      overflow-y: clip;
      transition: 
        block-size var(--animation-time) var(--animation-timing-function),
        content-visibility var(--animation-time) var(--animation-timing-function);
      will-change: block-size, content-visibility;
      transition-behavior: allow-discrete;
    }

    &[open] {
      &::details-content {
        block-size: auto;
      }

      detail-summary-icon {
        span:nth-of-type(1) {
          width: 0;
        }
      }
    }

    /* for the details contain ol */
    ol {
      margin-block-start: var(--sp-12);
      counter-reset: counter;

      >li {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: var(--sp-12);
        counter-increment: counter;
        padding-block: var(--sp-8);
        border-block-start: var(--sp-1) solid var(--font);

        &::before {
          content: "(" counter(counter, decimal-leading-zero) ")";
          color: var(--font-tint-15)
        }
      }
    }
  }
}

/* plus icon */
detail-summary-icon {
  display: block;
  width: var(--sp-20);
  height: var(--sp-20);
  place-content: center;

  span {
    content: "";
    display: block;
    width: var(--sp-12);
    height: var(--sp-1);
    background-color: var(--font);
    margin: auto;
    
    &:nth-of-type(1) {
      transform: translateY(var(--sp-1)) rotate(90deg);
      transition: width var(--animation-time) var(--animation-timing-function);
    }
  }
}

/* article list */
.article-list {
  @media not (prefers-reduced-motion: reduce) {
    * {
      view-transition-name: attr(data-view-transition-name type(<custom-ident>), none);
    }
  }

  li {
    padding-block: var(--sp-20);
    border-block-start: var(--border);
  }

  article {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: var(--sp-12);
    grid-template-areas:
      "title title title"
      "summary summary summary"
      "author date categories";
    align-items: center;

    p {
      color: var(--font);
    }
    
    >a {
      grid-area: title;
      text-decoration: none;
      color: var(--font);

      @media (hover: hover) {
        &:hover {
          text-decoration: underline;
        }
      }
    }

    >p {
      grid-area: summary;
      margin-block: var(--sp-8) var(--sp-20-12);
    }

    address {
      grid-area: author;
      align-self: end;
    }

    time {
      grid-area: date;
      align-self: end;
    }

    ul {
      grid-area: categories;
      display: flex;
      flex-direction: row;
      gap: var(--sp-8);
      align-self: end;
    }

    @container (inline-size <= 25rem) {
      grid-template-columns: 1fr auto;
      grid-template-areas: 
        "title title"
        "summary summary"
        "author categories"
        "date categories";

      time {
        margin-block-start: var(--sp-8);
      }
    }
  }
}

/* 404 page */
.page-not-found {
  boxed-wrapper {
    text-align: center;

    p {
      margin-block: var(--sp-40-20);
    }

    a {
      margin-inline: auto;
    }
  }
}