/* Estilo automático para o tipo de post: post */
.page-container {
  padding: clamp(40px, 4vw, 80px) 0;

  .page-header-meta {
    margin-bottom: 20px;
    gap: 60px;
    display: flex;

    .blog-date,
    .blog-author {
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      text-wrap-mode: nowrap;
    }
  }

  .the-title {
    color: var(--color-primary);
    h2 {
      font-size: 40px;
      line-height: 140%;
      vertical-align: middle;
    }
  }

  .share-this {
    .social-media {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      flex-wrap: wrap;
      border: 2px solid transparent;
      border-radius: var(--radius-card);
      background:
        linear-gradient(var(--color-white), var(--color-white)) padding-box,
        var(--gradient-brand) border-box;
      padding: 8px 20px;
      margin: 20px 0;

      .share-label {
        color: var(--color-text);
        margin: 0;
        font-weight: 500;
        flex-shrink: 0;
      }

      .share-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: nowrap;
        gap: clamp(16px, 4vw, 60px);
        justify-content: space-around;

        li {
          display: flex;
          gap: 10px;
          align-items: center;
        }

        .share-link {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          text-decoration: none;
          color: var(--color-text);
          font-weight: 500;
          transition: all 0.25s ease;

          .share-icon {
            width: 40px;
            height: 40px;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            background: var(--color-primary);
            border-radius: 50%;

            flex-shrink: 0;
            transition: all 0.25s ease;
            svg {
              width: 20px;
              height: 20px;
            }
          }

          &:hover {
            .share-icon {
              transform: translateY(-2px);
              background: var(--color-primary-dark);
            }
          }
        }
      }
    }
  }

  .page-image {
    max-height: 540px;
    margin-bottom: 40px;
    img {
      border-radius: var(--radius-card);
      width: 100%;
      height: auto;
    }
  }
}

#listagem {
  padding-bottom: clamp(60px, 4vw, 80px);

  .listagem-title {
    color: var(--color-primary);
    font-size: 36px;
    line-height: 120%;
    margin-bottom: 40px;
  }

  .blog-swiper {
    overflow: hidden;
  }

  .swiper-controls {
    display: none;
  }

  .swiper-slide {
    height: auto;
  }
}

@media (width <= 992px) {
  .page-container {
    .share-label {
      width: 100%;
    }
    .share-this {
      .social-media {
        .share-label {
          text-align: center;
        }
        .share-list {
          width: 100%;
          flex-wrap: wrap;
          justify-content: center;
        }
      }
    }
  }

  #listagem {
    .swiper-slide {
      box-sizing: border-box;
    }

    .swiper-wrapper {
      flex-wrap: nowrap;
      margin-bottom: 30px;
    }

    .swiper-controls {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      gap: 20px;
      margin-top: 24px;
    }

    .blog-button-prev,
    .blog-button-next {
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      transform: none;
      margin-top: 0;
      width: 40px;
      height: 40px;
      border: 2px solid var(--color-primary);
      border-radius: var(--radius-xl);
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;

      &::after {
        font-size: 18px;
        color: var(--color-primary);
        font-weight: bold;
      }

      &:hover {
        background: var(--color-primary);
        &::after {
          color: var(--color-white);
        }
      }
    }

    .blog-pagination {
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      transform: none;
      width: auto;

      .swiper-pagination-bullet {
        width: 15px;
        height: 15px;
        background-color: #bfbfbf;
      }
      .swiper-pagination-bullet-active {
        background-color: var(--color-primary);
      }
    }
  }
}

@media (width <= 768px) {
  .page-container {
    .page-header-meta {
      margin-bottom: 25px;
      .blog-author {
        text-wrap-mode: wrap;
      }
    }
    .share-this {
      .social-media {
        padding: 15px 15px;
        margin: 20px 0;

        .share-list {
          gap: 8px;
          li {
            flex-basis: calc(50% - 6px);
          }
        }
      }
    }

    .page-image img {
      height: 60vh;
      object-fit: cover;
    }
    .blog-card {
      margin-bottom: 30px;
    }
  }
}