@import url(lower.css);

body {
  background-color: var(--bg-c);
}

.archive {
  display: flex;
  gap: 5vw;
  align-items: start;
}
.news-list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: max(5vw, 30px) 5vw;
}
aside {
  position: sticky;
  inset: calc(var(--header-h) * 2) 0 auto auto;
  order: 1;
  padding: 2em;
  width: 220px;
  background-color: #fff;
  border-radius: 10px;
  ul {
    display: flex;
    flex-direction: column;
    gap: 2em;
  }
  li {
    &.all {
      padding-bottom: 2em;
      border-bottom: 1px solid var(--bg-c);
    }
    &.current a {
      font-weight: 600;
      &::after {
        scale: 1;
      }
    }
  }
  a {
    display: flex;
    width: fit-content;
    position: relative;
    gap: 4px;

    &::before {
      content: "#";
    }
    &::after {
      position: absolute;
      content: "";
      inset: auto 0 0;
      height: 1px;
      background-color: currentColor;
      scale: 0 1;
      transition: scale 0.2s;
      transform-origin: right;
    }
    &:hover::after {
      scale: 1;
      transform-origin: left;
    }
  }
}

/* ---------- pagination ---------- */

.pagination {
  padding: 0 5vw max(5vw, 50px);
  font-size: var(--fz);
  .inner {
    display: flex;
    justify-content: center;
    gap: 1.4em;
  }
}
.page-numbers {
  display: grid;
  place-items: center;
  width: 2em;
  border-radius: 4px;
  aspect-ratio: 1;
  &.current {
    background-color: #fff;
    color: #aaa;
  }
  &.next {
    letter-spacing: 0.1em;
  }
}
a.page-numbers {
  position: relative;
  transform-origin: right;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.3s;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: color-mix(in srgb, var(--primary-c), var(--bg-c) 30%);
    scale: 0;
    transition: scale 0.3s;
    z-index: -1;
  }
  &:hover {
    color: #fff;
    &::before {
      scale: 1;
    }
  }
}

@media (width < 768px) {
  .archive {
    flex-direction: column;
    gap: 50px;
  }
  .news-list {
    li {

      width: min(100%, 400px);
      justify-self: center;
    }
  }
  aside {
    position: static;
    width: 100%;
    order: -1;
    padding: 1.6em;
    ul {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 1.6em 1.4em;
    }
    li {
      &.all {
        width: 100%;
        padding-bottom: 1.6em;
      }
    }
  }
}