/* 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 en cambio lo
   decide el contenido de cada uno (align-items:flex-start en vez del
   stretch por default), así nada se estira artificialmente solo por tener
   un vecino más alto. */
/* 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;
  align-items: flex-start;
}

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

/* 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);
}