/* ===========================
   TARJETA DE POST (listado)
=========================== */

.post-card{

  overflow:hidden;
  display:flex;
  flex-direction:column;

}

.post-card-image{

  height:190px;
  position:relative;

  display:flex;
  align-items:flex-end;
  padding:var(--space-4);

}

.post-tag{

  display:inline-block;

  padding:5px 14px;

  border-radius:var(--radius-pill);

  font-size:.72rem;
  font-weight:700;
  letter-spacing:.5px;

  color:var(--white);
  background:rgba(0,0,0,.25);

}

.post-tag--noticia{ background:#0a4f7a; }
.post-tag--oferta{ background:#b6820a; }
.post-tag--aviso{ background:#8a1414; }
.post-tag--evento{ background:#0e5c53; }

.post-card-body{

  padding:var(--space-5);
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;

}

.post-meta{

  display:flex;
  align-items:center;
  gap:8px;

  color:var(--gray);
  font-size:.8rem;

}

.post-card-body h3{

  font-size:1.15rem;
  line-height:1.3;

}

.post-card-body p{

  color:var(--gray);
  font-size:.9rem;
  line-height:1.6;

}

.post-card-body a{

  margin-top:auto;
  padding-top:8px;

  font-weight:700;
  color:var(--primary);

}

/* Gradientes de portada por categoría, mientras no haya fotos propias */

.post-image--noticia{ background:linear-gradient(135deg,#0a4f7a,#1a8fc7); }
.post-image--oferta{ background:linear-gradient(135deg,#b6820a,var(--secondary)); }
.post-image--aviso{ background:linear-gradient(135deg,#7a1c1c,#b6281f); }
.post-image--evento{ background:linear-gradient(135deg,#0e5c53,#12897a); }


/* ===========================
   POST DESTACADO
=========================== */

.post-featured{

  display:grid;
  grid-template-columns:1fr 1fr;

  overflow:hidden;

}

.post-featured-image{

  min-height:280px;

  display:flex;
  align-items:flex-end;
  padding:var(--space-5);

}

.post-featured-body{

  padding:var(--space-6);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;

}

.post-featured-body h2{

  font-size:clamp(1.4rem,2.5vw,1.9rem);
  line-height:1.25;

}

.post-featured-body p{

  color:var(--gray);
  line-height:1.7;

}

@media (max-width:768px){

  .post-featured{
    grid-template-columns:1fr;
  }

  .post-featured-image{
    min-height:200px;
  }

}