/**
 * Estilos de frontend del bloque umivale/grid-cards-enlace.
 * Traduce a CSS plano SharedGridCardsEnlace.vue (incluye lightbox).
 */

.umivale-grid-cards-enlace { padding: 2rem 0; }

.umivale-gce__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .umivale-gce__grid.is-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .umivale-gce__grid.is-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .umivale-gce__grid.is-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .umivale-gce__grid.is-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.umivale-gce__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative; /* contexto para el <a class="umivale-gce__cell-link"> de abajo */
}

/* Tarjeta clickeable completa (imagen + título + descripción), no solo la
   imagen: <a> invisible que cubre toda la celda. Va arriba en z-index porque
   en el DOM es el último hijo (pinta encima); los links reales que pueda
   traer la descripción (.umivale-gce__desc a, ej. licitaciones) se ponen por
   encima todavía (z-index mayor) para seguir siendo clickeables ellos mismos. */
.umivale-gce__cell-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}
.umivale-gce__desc a { position: relative; z-index: 2; }

/* Botón CTA opcional por tarjeta (pastilla naranja, réplica de umivale-btn-orange).
   z-index:2 para quedar por encima del cell-link y ser clickeable por sí mismo. */
.umivale-gce__boton {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.5rem 1.5rem;
  border-radius: 9999px;
  background-color: #FA6000;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.umivale-gce__boton:hover { opacity: 0.9; color: #fff; text-decoration: none; }

/* Media: <a>, <button> o <div> con reset visual común */
.umivale-gce__media {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
}
.umivale-gce__media.has-title { margin-bottom: 1.25rem; }
button.umivale-gce__media { cursor: pointer; }

.umivale-gce__img {
  width: 100%;
  object-fit: cover;
  border-radius: 0.25rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.umivale-gce__img.is-plana { border-radius: 0; box-shadow: none; }

.umivale-gce__title {
  color: #124D91;
  font-size: 1.4em;
  font-weight: 700;
  margin: 0 0 12px;
}

.umivale-gce__desc {
  color: #3C4858;
  font-size: 1em;
  line-height: 1.5;
}
.umivale-gce__desc p { margin: 0 0 0.5rem; }
.umivale-gce__desc p:last-child { margin-bottom: 0; }
.umivale-gce__desc a { color: #124D91; text-decoration: none; }
.umivale-gce__desc a:hover { text-decoration: underline; }
.umivale-gce__desc strong { font-weight: 700; }
.umivale-gce__desc ul { padding-left: 1.5rem; }
.umivale-gce__desc li { margin-bottom: 10px; }
.umivale-gce__desc li::marker { color: #124D91; }
.umivale-gce__desc .subtitulo-seccion { font-weight: 600; }

/* ── Lightbox (modal creado por view.js) ────────────────────────────────── */
.umivale-gce-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.75);
}
.umivale-gce-lightbox__img {
  max-height: 85vh;
  max-width: 100%;
  width: auto;
  border-radius: 0.5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}
.umivale-gce-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.umivale-gce-lightbox__close:hover { opacity: 0.75; }