/* Post Categories Block - Optimisé pour single posts et infinite scroll */

/* =================== STYLES DE BASE =================== */

/* Layout de base pour toutes les catégories */
.categories,
.container .post .categories {
  display: flex;
  grid-gap: 16px;
  margin-bottom: var(--margin-medium);
  flex-wrap: wrap;
}

/* Styles des spans - utilisent toujours les styles single post */
.categories span,
.container .post .categories span {
  background: #7c7c7c;
  border-radius: 6px;
}

.categories span a,
.container .post .categories span a {
  color: #fff;
  text-align: center;
  font: normal normal bold 12px/17px "Open Sans";
  letter-spacing: 0px;
  text-transform: uppercase;
  opacity: 1;
  padding: 2px 7px;
  text-decoration: none;
}

/* Catégories orange */
.categories span.orange,
.container .post .categories span.orange {
  background: var(--accent-color);
}

.categories span.orange a,
.container .post .categories span.orange a {
  color: #000;
}

/* =================== CONTEXTES SPÉCIFIQUES =================== */

/* Full-width template */
.post-template-full-width-template .categories,
.post-template-full-width-template .container .post .categories {
  justify-content: center;
  margin: 13px 0 30px 0;
}

/* Infinite scroll - utilise les mêmes styles que single post */
.infinite-scroll-article .categories {
  margin: 14px 0;
}

/* =================== RESPONSIVE =================== */

@media (max-width: 767px) {
  .categories,
  .container .post .categories {
    margin: 26.5px 0;
  }
}