/* --- Overlay del grid mientras carga --- */
#posts { position: relative; }
#posts .grid-loader{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.9);
  z-index: 10;
  transition: opacity .25s ease;
}
#posts .grid-loader.hidden{ opacity: 0; pointer-events: none; }

/* --- Skeleton por tarjeta hasta que carga su imagen --- */
@keyframes shimmer {
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}
#posts .item .item-wrap{ position: relative; display: block; overflow: hidden; border-radius: 6px; }
#posts .item:not(.loaded) .item-wrap::before{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
  background-size: 400% 100%;
  animation: shimmer 1.2s infinite;
}
#posts .item img{ opacity: 0; transition: opacity .3s ease; display: block; width: 100%; height: auto; }
#posts .item.loaded img{ opacity: 1; }

/* (Opcional) tiles cuadrados sin “saltos” de altura mientras cargan */
#posts.is-square .item .item-wrap::after{ content:""; display:block; padding-top:100%; }
#posts.is-square .item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }