/* ====== MÓDULO "Artículos – Categorías" con clase catgrid-40 ====== */
/* Funciona con el layout estándar (lista vertical) y con nuestro override .mod-catgrid */

/* --- ESTÁNDAR (lista vertical) --- */
.catgrid-40 .mod-articlescategories{
  list-style: none;
  margin: 0;
  padding: 0;
}
.catgrid-40 .mod-articlescategories > li{
  display: flex !important;
  flex-direction: column;
  align-items: center;                 /* centra contenido */
  text-align: center !important;       /* centra texto */
  padding: .9rem 0;                    /* aire vertical */
  border-bottom: 1px solid var(--bs-border-color, #e5e7eb); /* línea separadora */
}
.catgrid-40 .mod-articlescategories > li:last-child{
  border-bottom: 0;                    /* sin línea en el último */
}
.catgrid-40 .mod-articlescategories > li > a{
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  text-align: center !important;
}
/* tamaño y centrado del icono */
.catgrid-40 .mod-articlescategories img{
  display: block !important;
  margin: 0 auto !important;
  width: 64px !important;              /* ← ajusta el tamaño del icono */
  height: 64px !important;
  object-fit: contain;                 /* o 'cover' si prefieres recorte */
  float: none !important;
}

/* --- OVERRIDE opcional (.mod-catgrid) --- */
/* Si estás usando nuestro override con ul.mod-catgrid y .mod-catgrid__* */
.catgrid-40 .mod-catgrid{
  display: grid;
  grid-template-columns: 1fr;          /* móvil en una columna */
  gap: 0;                               /* las líneas hacen de separador */
  list-style: none; margin:0; padding:0;
}
.catgrid-40 .mod-catgrid__item{
  text-align: center;
  padding: .9rem 0;
  border-bottom: 1px solid var(--bs-border-color, #e5e7eb);
}
.catgrid-40 .mod-catgrid__item:last-child{ border-bottom: 0; }
.catgrid-40 .mod-catgrid__link{
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.catgrid-40 .mod-catgrid__media{ width:64px; height:64px; overflow:hidden; border-radius:12px; }
.catgrid-40 .mod-catgrid__media img{ width:100%; height:100%; object-fit:contain; }
.catgrid-40 .mod-catgrid__title{ display:block; width:100%; text-align:center; }

/* En pantallas anchas, convertir a rejilla (opcional) */
@media (min-width: 768px){
  .catgrid-40 .mod-catgrid{
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
  }
  /* sin líneas en grid; si las quieres, usa borde alrededor: */
  .catgrid-40 .mod-catgrid__item{ border: 1px solid var(--bs-border-color, #e5e7eb); }
}