/* =========================================================
   NOVA POST GRID V4 — 3 COL MOBILE + TAG FIX
========================================================= */

/* =========================
   GRID BASE
========================= */

.nova-post-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px;
}

/* =========================
   XL DESKTOP (4 COLS)
========================= */

@media(min-width:1400px){
  .nova-post-grid{
    grid-template-columns:repeat(4, 1fr);
  }
}

/* =========================
   TABLET
========================= */

@media(max-width:900px){
  .nova-post-grid{
    grid-template-columns:1fr 1fr;
    gap:22px;
  }
}

/* =========================
   MOBILE (3 COLS)
========================= */

@media(max-width:600px){
  .nova-post-grid{
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    padding:0 10px;
  }

  .nova-post-image{
    border-radius:8px;
  }

  /* 🔥 TAGS MÁS PEQUEÑOS */
  .nova-post-tags{
    bottom:6px;
    left:6px;
    right:6px;
    gap:3px;
  }

  .nova-post-tags span{
    font-size:8px;
    padding:2px 6px;
    border-radius:12px;
  }
}

/* =========================
   LINK
========================= */

.nova-post-link{
  display:block;
  text-decoration:none;
  color:inherit;
  transition:.25s ease;
}

/* hover SOLO desktop */
@media(hover:hover){
  .nova-post-link:hover{
    transform:translateY(-4px);
  }
}

/* =========================
   IMAGE
========================= */

.nova-post-image{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:12px;
}

/* 🔥 IMPORTANTE: cover en vez de contain */
.nova-post-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================
   OVERLAY
========================= */

.nova-post-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.25) 40%,
    rgba(0,0,0,0) 70%
  );
}

/* =========================
   TAGS
========================= */

.nova-post-tags{
  position:absolute;
  bottom:12px;
  left:12px;
  right:12px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  z-index:2;
}

.nova-post-tags span{
  font-size:11px;
  padding:4px 10px;
  border-radius:20px;
  background:rgba(0,0,0,0.25);
  border:1px solid #fff;
  color:#fff;
  backdrop-filter:blur(4px);
}

/* =========================
   MOBILE TAG 
========================= */

@media(max-width:600px){

  .nova-post-tags{
   display:none;
  }

}