/* Contenedor común */
.vps-wrap { --vps-cols: 3; --vps-gap: 24px; }
.vps-empty { margin: 1em 0; }

/* GRID */
.vps-grid {
    display: grid;
    grid-template-columns: repeat(var(--vps-cols), 1fr);
    gap: var(--vps-gap);
}

/* LISTA */
.vps-list { display: flex; flex-direction: column; gap: var(--vps-gap); }
.vps-list .vps-card { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start; }

/* MASONRY */
.vps-masonry { column-count: var(--vps-cols); column-gap: var(--vps-gap); }
.vps-masonry .vps-card { break-inside: avoid; margin-bottom: var(--vps-gap); display: block; }

/* Imagen */
.vps-card__image { display: block; overflow: hidden; }
.vps-card__image img { display: block; width: 100%; height: auto; transition: transform .4s ease, opacity .4s ease; }
.vps-hover-zoom .vps-card__image:hover img { transform: scale(1.06); }
.vps-hover-fade .vps-card__image:hover img { opacity: .8; }

/* Meta y leer más */
.vps-card__meta { font-size: .85em; opacity: .8; display: flex; gap: .75em; flex-wrap: wrap; }
.vps-card__more { display: inline-block; margin-top: .5em; }

/* Responsive */
@media (max-width: 1024px) {
    .vps-grid { grid-template-columns: repeat(var(--vps-cols-tablet, var(--vps-cols)), 1fr); }
    .vps-masonry { column-count: var(--vps-cols-tablet, var(--vps-cols)); }
    .vps-list .vps-card { grid-template-columns: 140px 1fr; }
}
@media (max-width: 600px) {
    .vps-grid { grid-template-columns: repeat(var(--vps-cols-mobile, 1), 1fr); }
    .vps-masonry { column-count: var(--vps-cols-mobile, 1); }
    .vps-list .vps-card { grid-template-columns: 1fr; }
}

/* Altura de fila: igualada */
.vps-rowh-equal .vps-card { height: 100%; }

/* Altura de fila: fija (recorta el contenido sobrante) */
.vps-rowh-fixed .vps-card {
    height: var(--vps-row-h, 300px);
    overflow: hidden;
}

/* Body de la tarjeta: estructura para que el recorte fijo funcione bien */
.vps-card { display: flex; flex-direction: column; }
.vps-list .vps-card { display: grid; } /* la lista mantiene su grid imagen/texto */

/* Hover de tarjeta (la elevación real la define el usuario en Elementor;
   aquí solo la transición base) */
.vps-card { transition: transform .25s ease, box-shadow .25s ease; }

/* Cuerpo de la tarjeta: contenedor flex vertical para que el "gap" entre
   sub-elementos (imagen/título/extracto/botón) sea configurable desde Elementor. */
.vps-card__body { display: flex; flex-direction: column; }