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

.ddhi-grid{
  display:grid;
  gap:24px;
}

.ddhi-grid.cols-1{grid-template-columns:repeat(1,1fr)}
.ddhi-grid.cols-2{grid-template-columns:repeat(1,1fr)}
.ddhi-grid.cols-3{grid-template-columns:repeat(1,1fr)}
.ddhi-grid.cols-4{grid-template-columns:repeat(1,1fr)}

@media (min-width:640px){
  .ddhi-grid.cols-2{grid-template-columns:repeat(2,1fr)}
  .ddhi-grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .ddhi-grid.cols-4{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1024px){
  .ddhi-grid.cols-3{grid-template-columns:repeat(3,1fr)}
  .ddhi-grid.cols-4{grid-template-columns:repeat(4,1fr)}
}

/* ============================= */
/* TARJETA */
/* ============================= */

.ddhi-card{
  display:block;
  text-decoration:none;
  color:inherit;
  border:1px solid #145499;     /* Borde azul obligatorio */
}

/* ============================= */
/* IMAGEN */
/* ============================= */

.ddhi-thumb{
  width:100%;
  aspect-ratio: 4 / 5;

  background-size: cover;
  background-position: 50% 35%; /* ajusta: 35% suele evitar "cortar cabezas" */
  background-repeat: no-repeat;

  height:auto !important;
  min-height:unset !important;
}



/* ============================= */
/* BARRA INFERIOR */
/* ============================= */

.ddhi-title{
  margin:0;
  padding:14px 16px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  font-weight:600;
  font-size:15px;
  line-height:1.2;

  background:#f3f3f3;     /* gris claro */
  color:#1e1e1e;

  border-top:1px solid #145499;  /* línea divisoria azul */
}

/* Flecha */
.ddhi-title::after{
  content:"→";
  font-size:20px;
  color:inherit;
  opacity:.8;
}

/* ============================= */
/* VARIANTE AZUL */
/* ============================= */

.ddhi-card.is-blue .ddhi-title{
  background:#145499;
  color:#ffffff;
}

/* ============================= */
/* HOVER */
/* ============================= */

.ddhi-card:hover{
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.ddhi-card.is-blue:hover .ddhi-title{
  background:#0f4177;
}