/* =========================================================
   BLOG (Post Grid de Salient)
   - Filtros como pastillas, con hover y estado activo.
   - En móvil (<1000px) los filtros van en una fila que se
     arrastra (js/drag-carousel.js) en vez del desplegable
     "Filtro" de Salient.
   - Pastilla con fondo para la categoría de cada entrada.
   ========================================================= */

/* ---------- Filtros ---------- */
.nectar-post-grid-filters {
  --pill-ease: cubic-bezier(0.625, 0.05, 0, 1);
  opacity: 1 !important;
}

.nectar-post-grid-filters > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.nectar-post-grid-filters[data-align='left'] > div {
  justify-content: flex-start;
}

.nectar-post-grid-filters[data-align='right'] > div {
  justify-content: flex-end;
}

body .nectar-post-grid-filters a {
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
  padding: 0.55em 1.2em;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-family: var(--primary-font);
  font-size: 15px;
  line-height: 1.1;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  transition:
    background-color 0.35s var(--pill-ease),
    border-color 0.35s var(--pill-ease),
    color 0.35s var(--pill-ease);
}

.nectar-post-grid-filters a::after {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {
  body .nectar-post-grid-filters a:hover {
    background-color: var(--dark-light);
    border-color: var(--dark-light);
    color: var(--accent);
  }
}

body .nectar-post-grid-filters a.active,
body .nectar-post-grid-filters a.active:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--light);
}

/* ---------- Móvil: fila arrastrable ---------- */
@media (max-width: 999px) {
  .nectar-post-grid-wrap .nectar-post-grid-filters,
  .nectar-post-grid-filters {
    max-width: none;
    margin: 0;
    padding: 24px 0;
    overflow: hidden;
  }

  .nectar-post-grid-filters h4 {
    display: none !important;
  }

  .nectar-post-grid-filters > div:not(.n-sticky) {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    margin-top: 0;
    gap: 8px;
  }

  body .nectar-post-grid-filters a {
    flex: 0 0 auto;
    font-size: 14px;
    padding: 0.7em 1.2em;
  }
}

/* Arrastre genérico (js/drag-carousel.js) */
@media (max-width: 999px) {
  .drag-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .drag-carousel-track {
    display: flex;
    flex-wrap: nowrap !important;
    width: max-content;
    cursor: grab;
    touch-action: pan-y;
  }

  .drag-carousel-track:active {
    cursor: grabbing;
  }
}

/* ---------- Pastilla de categoría en las tarjetas ---------- */
.nectar-post-grid .meta-category {
  background: none !important;
}

#ajax-content-wrap .nectar-post-grid .meta-category a,
#ajax-content-wrap .nectar-post-grid[data-text-color] .nectar-post-grid-item .meta-category a,
#ajax-content-wrap .nectar-post-grid[data-text-hover-color] .nectar-post-grid-item:hover .meta-category a {
  display: inline-block;
  padding: 0.55em 0.95em;
  border-radius: 6px;
  background-color: var(--accent);
  color: var(--light) !important;
  font-family: var(--primary-font);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background-color 0.35s cubic-bezier(0.625, 0.05, 0, 1);
}

#ajax-content-wrap .nectar-post-grid .meta-category a::before,
#ajax-content-wrap .nectar-post-grid .meta-category a::after {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {
  #ajax-content-wrap .nectar-post-grid .meta-category a:hover {
    background-color: var(--secondary);
  }
}