/* ============================================================================
   HOTFIX · Listado de campamentos (/es/campamentos/verano y categorías)
   2026-06-12 · Frontend Engineer · Bloque pre-C4 (usable, no bonito)
   ----------------------------------------------------------------------------
   BUG: las 8 tarjetas E-camp-card se renderizaban a ~112px con texto vertical
   letra a letra. Cadena de 3 causas (verificada en DOM vivo, dev):

   1) homepage-responsive.css:166 hace `.view-lista-de-campamentos-por-categoria
      .view-content { display:grid; grid-template-columns:repeat(auto-fill,
      minmax(300px,1fr)) }`. En el listado, .view-content tiene UN solo hijo
      (div.item-list) que caía en UN track de ~337px en vez de ocupar todo.
   2) style.css:16697 y :19557 (legacy) machacan el display:grid de
      ul.E-camp-grid (camp-filter.css, especificidad 0-1-0 y carga en bucket
      `component`, antes que todo el bucket `theme`) con display:flex
      (especificidad 0-2-1 / 0-3-1).
   3) style.css:14068 + :19564 imponen a cada li `max-width:33.33%` +
      `padding:10px 20px 44px` → 33% de 337px ≈ 112px por tarjeta.

   Este archivo gana por especificidad (0-4-x) + orden de carga (weight 220,
   tras fase5-audit-fixes 200). CERO !important. El rediseño real llega en C4.
   ============================================================================ */

/* 1 · El item-list ocupa TODOS los tracks del grid de .view-content
       (si .view-content no es grid en otro contexto, grid-column no opera). */
.view-lista-de-campamentos-por-categoria .view-content > .item-list {
  grid-column: 1 / -1;
  width: 100%;
}

/* 2 · Restaurar el grid de tarjetas que define camp-filter.css. */
.view-lista-de-campamentos-por-categoria .attachment.attachment-after .item-list > ul.E-camp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
}

/* 3 · Neutralizar el ancho/padding legacy de cada tarjeta. */
.view-lista-de-campamentos-por-categoria .attachment.attachment-after ul.E-camp-grid > li.E-camp-card {
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
}

/* Responsive — replica los cortes de camp-filter.css (que perdería contra
   la regla base de arriba por especificidad). */
@media (max-width: 991px) {
  .view-lista-de-campamentos-por-categoria .attachment.attachment-after .item-list > ul.E-camp-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .view-lista-de-campamentos-por-categoria .attachment.attachment-after .item-list > ul.E-camp-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}