/* ======================================
   Grid Masonry - 4 columnas fijas (desktop)
   - filtros ocultos
   - primera fila desalineada con spacers
   - gaps generosos (80–140px aprox.)
   ====================================== */

.mi-grid {
  margin: 0 auto;
  width: 100%;
  position: relative;
}

/* Base: 4 columnas (25% cada una) */
.mi-grid .grid-sizer { width: 25%; }

/* Items: siempre 25% de ancho */
.mi-grid .item {
  width: 25%;
  float: left;
  box-sizing: border-box;
  padding: 0 40px;        /* 80px de separación horizontal total entre columnas */
  margin-bottom: 120px;   /* 120px de separación vertical (ajustable 80–140) */
}

/* Imágenes */
.mi-grid img {
  width: 100%;
  display: block;
  border-radius: 6px;
}

/* Spacers: invisibles, ocupan sitio para desalinear primera fila */
.mi-grid .spacer {
  width: 25%;
  float: left;
  box-sizing: border-box;
  padding: 0 40px;       /* igual que .item para respetar el gap */
  margin-bottom: 120px;  /* igual que .item para consistencia */
  visibility: hidden;    /* no se ven, pero ocupan espacio */
  pointer-events: none;
}

/* Alturas diferentes para cada columna (solo desktop) */
.mi-grid .spacer-1 { height: 40px; }
.mi-grid .spacer-2 { height: 100px; }
.mi-grid .spacer-3 { height: 60px; }
.mi-grid .spacer-4 { height: 120px; }

/* Loader */
#mi-grid-loader {
  text-align: center;
  padding: 20px;
  font-weight: bold;
}

/* Filtros: ocultos por requerimiento */
.mi-grid-filters { display: none !important; }

/* ================================
   Responsive
   ================================ */

/* 3 columnas */
@media (max-width: 1200px) {
  .mi-grid .grid-sizer,
  .mi-grid .item { width: 33.333%; }
  /* ocultar spacers en vistas no-desktop para no forzar huecos raros */
  .mi-grid .spacer { display: none; }
}

/* 2 columnas */
@media (max-width: 900px) {
  .mi-grid .grid-sizer,
  .mi-grid .item { width: 50%; }
}

/* 1 columna */
@media (max-width: 600px) {
  .mi-grid .grid-sizer,
  .mi-grid .item { width: 100%; }
  .mi-grid .item { padding: 0 20px; margin-bottom: 80px; }
}