:root {
  --color-grey-text: #363636;
  --color-grey-container: #f5f5f5;
  --color-grey-hover: #dbdbdb;

  --color-red: #db0c0c;
  --color-white: #ffffff;

  --font-noto: "Noto Sans Condensed", sans-serif;
}

#storyfilter {
  @media only screen and (max-width: 1024px) {
    padding-inline: 3rem;
  }
}

.storyfilter__filterbar {
  h2 {
    position: relative;

    width: fit-content;

    font-family: var(--font-noto);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 150%;

    color: var(--color-red);

    border-top: 1px solid var(--color-red);

    margin-block-end: 2.1rem;
  }

  .filterbar__terms {
    display: flex;
    gap: 2rem;

    list-style: none;
    padding: 0;

    @media only screen and (max-width: 1024px) {
      margin-block-end: 0;
      overflow-x: scroll;
    }

    li {
      @media only screen and (max-width: 1024px) {
        padding-block-end: 1em;
      }

      button {
        display: inline-block;
        cursor: pointer;

        font-size: 1.5rem;
        line-height: 150%;
        padding: 0.8rem 4rem;

        color: var(--color-grey-text);
        background-color: var(--color-grey-container);

        transition: background-color ease-out 0.3s;

        @media only screen and (max-width: 1024px) {
          text-align: center;
        }

        .title {
          @media only screen and (max-width: 1024px) {
            display: inline-block;
            min-width: 10rem;
          }
        }

        .marker {
          display: none;
          margin-inline-start: 1ch;
        }

        &:hover {
          background-color: var(--color-grey-hover);
        }

        .active & {
          background-color: var(--color-grey-hover);

          .marker {
            display: inline;
          }
        }
      }
    }
  }
}

.storyfilter__grid-wrapper {
  margin-block-start: 6.7rem;

  .storyfilter__grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);
    /* grid-auto-rows: 26.1rem; */
    grid-auto-rows: auto;

    row-gap: 2.4rem;
    column-gap: 1.8rem;

    @media only screen and (max-width: 1024px) {
      grid-template-columns: 1fr;
      grid-auto-rows: auto;
    }

    .card {
      grid-row: span 2;

      padding: 2rem;

      color: var(--color-grey-text);
      background-color: var(--color-grey-container);

      @media only screen and (max-width: 1024px) {
      }

      .card__text {
        h3 {
          font-size: 1.8rem;
          margin-block-end: 1rem;
        }

        .card__excerpt {
          p {
            margin-block-end: 2.5rem;
          }
        }
      }

      img {
        height: auto;
        width: 100%;

        aspect-ratio: 13.75 / 9.125;

        object-fit: cover;
      }

      .card__tag-wrapper {
        display: flex;
        justify-content: flex-end;
        gap: 1.6rem;

        list-style: none;

        padding: 0;

        margin-block-start: 2.5rem;
        margin-block-end: 0;

        li {
          a {
            display: inline-block;

            line-height: 150%;
            padding: 0.8rem;

            background-color: var(--color-white);

            transition: background-color ease 0.3s;

            &:hover {
              background-color: var(--color-grey-hover);
            }
          }
        }
      }

      .card__read-more {
        font-size: 1.5em;
        float: right;

        transition: color ease 0.3s;

        &:hover {
          color: var(--color-red);
        }
      }

      @media only screen and (min-width: 1141px) {
        &:nth-child(7n + 1) {
          grid-row: span 3;
          grid-column: span 2;

          h3 {
            font-size: 3.15rem;
          }

          img {
            aspect-ratio: 31.3125 / 28.1875;
          }
        }

        &:nth-child(7n + 2) {
          grid-row: span 1;
          grid-column: span 2;

          display: grid;
          grid-template-columns: 9.6875em 1fr;
          gap: 2.5rem;

          .card__thumbnail {
            grid-column: 1;

            aspect-ratio: 13.46875 / 8.9366;
          }

          .card__text {
            grid-row: 1;
            grid-column: 2;

            .card__excerpt {
              p {
                display: -webkit-box;
                line-clamp: 2;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;

                margin-block-end: 0;
              }
            }
          }

          .card__tag-wrapper {
            justify-content: flex-start;
            flex-wrap: wrap;

            grid-row: 2;
            grid-column: span 2;

            margin-block-start: 0;
          }

          .card__read-more {
            grid-row: 3;
          }
        }

        &:nth-child(7n + 3),
        &:nth-child(7n + 4) {
          .card__excerpt {
            p {
              display: -webkit-box;
              line-clamp: 3;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
          }
        }

        &:nth-child(7n + 7) {
          grid-column: span 2;

          h3 {
            font-size: 3.15rem;
          }

          img {
            aspect-ratio: 31.3125 / 16.875;
          }
        }
      }
    }
  }

  .storyfilter__loadmore-wrapper {
    margin-block-start: 6.8rem;
    text-align: center;

    .storyfilter__loadmore {
      font-family: var(--font-noto);
      font-size: 1.5rem;
      line-height: 150%;

      color: var(--color-red);

      background-color: transparent;
      border: none;
      outline: none;

      &.hidden {
        display: none;
      }
    }
  }

  .storyfilter__empty {
    text-align: center;

    &.hidden {
      display: none;
    }
  }
}