.single-post-container {
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: 3em;

  .single-post-thumbnail img {
    width: 100%;
    height: auto;
    margin-bottom: 2em;
    border-radius: 2em;
  }

  .single-post-date {
    color: var(--secondary);
  }
}

.masonry-page-container {
  padding: 0 5em;

  @media (max-width: 1024px) {
    margin-top: 5em;
    padding: 0 3em;
  }

  @media (max-width: 600px) {
    padding: 0 2em;
  }

  .page-title {
    font-size: 3em;
    color: var(--blue_text);
  }

  .page-description {
    margin: 0 auto;
    max-width: 700px;
    font-size: 1.5em;
  }

  .news-container {
    max-width: 1400px;
    margin: 0 auto;
  }
}

#post-masonry {
  position: relative;
}

.post-masonry .post-card,
#post-masonry .post-card {
  width: calc(33.333% - 11px);
  margin-bottom: 16px;
}

@media (max-width: 1024px) {
  #post-masonry .post-card {
    width: calc(50% - 8px);
  }
}

@media (max-width: 600px) {
  #post-masonry .post-card {
    width: 100%;
  }
}

.post-card {
  display: block;
  background: var(--background);
  border-radius: 1.25em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.2s,
    box-shadow 0.3s;

  .wp-post-image {
    width: 100%;
    height: 200px;
    border-radius: 1.25em 1.25em 0 0;
    object-fit: cover;
  }

  .post-content {
    padding: 1.25em;

    h5 {
      color: var(--text);
      font-size: 1em;
    }

    p {
      color: var(--secondary);
      margin-top: 0;
      font-size: 0.9em;
    }
  }

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  }
}

.post-card.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.6s ease forwards;
}

.filters-container {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1em;
  margin-bottom: 2em;

  .news-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1em;

    .novinky-filter-group {
      display: flex;
      flex-direction: column;
      gap: 0.4em;

      label {
        font-size: 0.8em;
        font-weight: 600;
        color: var(--altText);
        text-transform: uppercase;
      }

      input {
        padding: 0.5em 1em;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        border-radius: 1em;
        font-family: inherit;
        font-size: 1em;
        outline: none;
        border: none;
        color: var(--text);
        background: var(--background);
      }
    }
  }
  .news-pagination {
    .page-numbers {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      padding: 0.5em;
      color: var(--text);
      border-radius: 1em;
      display: inline-block;
      width: 20px;
      height: auto;
      text-align: center;
      aspect-ratio: 1 / 1;
      transition: 0.2s ease-in-out;

      &:hover {
        background-color: var(--primary);
        color: var(--background);
        transition: 0.2s ease-in-out;
      }
    }
    .page-numbers.current {
      background-color: var(--primary);
      color: var(--background);
    }
  }
}