/**
 * GP - Grid de Categorías — grid responsive de cajas (imagen + texto + enlace).
 * Valores según Figma: caja cuadrada, radio 21px (16px móvil), etiqueta Outfit
 * Medium 18px centrada. 4 columnas en escritorio, 2 en móvil.
 */

.gp-catgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 16px;
  padding: 48px 40px;
  font-family: Outfit, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.gp-catgrid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.gp-catgrid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.gp-catgrid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.gp-catgrid--cols-5 { grid-template-columns: repeat(5, 1fr); }

.gp-catgrid__item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* El enlace de la card nunca se subraya (ni en hover/focus). !important para ganar
   al a:hover del tema, que suele ir con ID (p. ej. #content a:hover). */
.gp-catgrid__item,
.gp-catgrid__item:hover,
.gp-catgrid__item:focus {
  text-decoration: none !important;
}

.gp-catgrid__box {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 21px;
  background: #d9d9d9;
  overflow: hidden;
}

.gp-catgrid__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gp-catgrid__label {
  margin-top: 16px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #000;
  line-height: normal;
}

/* Móvil: 2 columnas y radio 16px (Figma) */
@media (max-width: 767px) {
  .gp-catgrid,
  .gp-catgrid--cols-2,
  .gp-catgrid--cols-3,
  .gp-catgrid--cols-4,
  .gp-catgrid--cols-5 {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 8px;
    padding: 48px 16px;
  }
  .gp-catgrid__box {
    border-radius: 16px;
  }
}


/*# sourceMappingURL=gp_category_grid.min.css.map*/