/* tarjeta-lista es un grid con celdas de ancho fijo (row-cols): cualquier
   componente que se suelte adentro debe ocupar el ancho de su celda para
   alinearse con sus vecinos, sin importar qué sea. El alto usa el
   align-items:stretch por default de Bootstrap para que todas las celdas
   de una fila igualen la altura de la más alta (ej. tarjetas con
   descripciones de distinto largo). */
/* Sin gap propio: el gutter horizontal entre celdas lo da el padding nativo
   de .row>* de Bootstrap, igual que un .column normal. Si un componente
   necesita verse como card con borde propio, que traiga su propio wrapper
   (fuera de este archivo) en vez de que el grid le imponga nada.
   El vertical sí hace falta ponerlo a mano: --bs-gutter-y es 0 por default
   en Bootstrap (solo trae gutter horizontal), así que sin esto las filas
   quedan pegadas cuando el grid envuelve a una línea nueva. */
.tarjeta-lista-wrapper {
  min-width: 0;
}

.tarjeta-lista.row {
  --bs-gutter-y: 1.5rem;
}

.tarjeta-lista.row > * {
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.tarjeta-lista.row > .cta-simple-wrapper {
  display: flex;
  align-self: stretch;
  height: auto !important;
}

.tarjeta-lista.row > .cta-simple-wrapper > .cta-simple {
  width: 100%;
  flex: 1 1 auto;
}

.tarjeta-lista.row .item-recurso,
.tarjeta-lista.row .item-documento,
.tarjeta-lista.row .perfil,
.tarjeta-lista.row .tarjeta-icono,
.tarjeta-lista.row .tarjeta-imagen {
  width: 100%;
  height: 100%;
  max-width: none;
}

/* Algunos componentes (Cta, Separador, Contenido embebido) traen su propio
   .w-100 (Bootstrap, !important) para usarse a ancho completo cuando están
   solos. Eso le gana al width del row-cols sin importar el breakpoint,
   forzando esa tarjeta a ocupar toda la fila y empujando el resto del grid a
   la línea siguiente. Se reimplementa acá el mismo ancho que da row-cols
   (con más especificidad y también !important) para que siempre gane sobre
   el w-100 del hijo. --tarjeta-lista-columnas lo pone tarjeta-lista.twig con
   el valor real del prop `columnas`. */
.tarjeta-lista.row > * {
  width: 100% !important;
}

@media (min-width: 768px) {
  .tarjeta-lista.row > * {
    width: 50% !important;
  }
}

@media (min-width: 992px) {
  .tarjeta-lista.row > * {
    width: calc(100% / var(--tarjeta-lista-columnas, 4)) !important;
  }
}

.tarjeta-lista--fondo-azul,
.tarjeta-lista--fondo-marino,
.tarjeta-lista--fondo-dorado {
  padding: var(--spacing-lg);
  border-radius: var(--radius-medium);
  grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
  justify-content: start;
  gap: 0;
}

.tarjeta-lista--fondo-azul { background-color: var(--mp-sky-700); }
.tarjeta-lista--fondo-marino { background-color: var(--mp-ocean-800); }
.tarjeta-lista--fondo-dorado { background-color: var(--mp-tan-600); }

.tarjeta-lista--fondo-azul > *,
.tarjeta-lista--fondo-marino > *,
.tarjeta-lista--fondo-dorado > * {
  width: 100%;
  height: 100%;
}

.tarjeta-lista--fondo-azul .item-documento,
.tarjeta-lista--fondo-marino .item-documento,
.tarjeta-lista--fondo-dorado .item-documento {
  background-color: transparent;
  padding: var(--spacing-sm);
}