/**
 * front-page.css
 */

section.hero {
  display: flex;
  flex-direction: row;
  gap: 32px;
  margin-bottom: 80px;

  .left {
    width: 55%;
  }

  .right {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 45%;
    height: auto;
  }
}

/* Tablet: Categories */
@media (max-width: 1024px) {
  section.hero {
    .left,
    .right {
      width: 50%;
    }
  }
}

/* Mobile: Hero */
@media (max-width: 768px) {
  section.hero {
    max-width: calc(100vw - 32px);
    gap: 16px;
    margin-bottom: 32px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    .left {
      flex: 0 0 calc(100vw - 32px);
      scroll-snap-align: start;
    }

    .right {
      flex-direction: row;
      flex: 0 0 auto;
      width: auto;
      gap: 16px;

      article.post-card.side {
        flex: 0 0 calc(100vw - 32px);
        scroll-snap-align: start;
      }
    }
  }

  .dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;

    .dot {
      width: 32px;
      height: 4px;
      border-radius: 2px;
      border: none;
      padding: 0;
      background-color: var(--color-white-dark);
      cursor: pointer;
      transition: var(--global-transition);

      &.is-active {
        background-color: var(--color-primary);
      }
    }
  }
}

section.categories {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 80px;
  
  ul {
    display: flex;
    flex-direction: row;
    gap: 24px;
    width: 100%;

    li {
      width: 100%;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      border-radius: 4px;
      background-color: var(--color-white-dark);

      a {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        text-decoration: none;

        img {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          filter: grayscale(1) contrast(0.8);
          transition: var(--global-transition);
        }

        span {
          position: relative;
          z-index: 1;
          padding: 0 12px;
          color: var(--color-white);
          font-family: var(--font-family-headings);
          font-size: var(--font-size-h2);
          font-weight: bold;
          line-height: var(--line-height-h3);
          text-align: center;
        }

        &:hover img,
        &:focus img {
          transform: scale(1.05);
          filter: none;
        }
      }
    }
  }
}

/* Tablet: Categories */
@media (max-width: 1024px) {
  section.categories ul {
    gap: 16px;

    li a span {
      font-size: var(--font-size-h4);
    }
  }
}

/* Mobile: Categories */
@media (max-width: 768px) {
  section.categories ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    li a span {
      font-size: var(--font-size-h2);
    }
  }
}

section.posts {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 64px;

  &:last-of-type {
    margin-bottom: 0;
  }
}