/* INI_071: Mostrar fotos unas al lado de otras dentro de CKEditor 5 y permitir alineación real lado a lado */

/* 1. Cuando se insertan 2 o más bloques <drupal-media> seguidos en CKEditor 5, mostrarlos en cuadrícula lado a lado en lugar de en cascada */
.ck-content .drupal-media {
  clear: none !important;
}

.ck-content .drupal-media:has(+ .drupal-media),
.ck-content .drupal-media + .drupal-media {
  display: inline-block !important;
  vertical-align: top !important;
  width: calc(33.333% - 12px) !important;
  max-width: calc(33.333% - 12px) !important;
  margin: 6px !important;
  box-sizing: border-box !important;
}

/* Si son exactamente 2 imágenes seguidas, mostrarlas al 50% cada una */
.ck-content .drupal-media:not(.drupal-media + .drupal-media):has(+ .drupal-media:not(:has(+ .drupal-media))),
.ck-content .drupal-media:not(.drupal-media + .drupal-media) + .drupal-media:not(:has(+ .drupal-media)) {
  width: calc(50% - 12px) !important;
  max-width: calc(50% - 12px) !important;
}

.ck-content .drupal-media:has(+ .drupal-media) img,
.ck-content .drupal-media + .drupal-media img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

/* 2. Cuando el usuario alinea una imagen a la izquierda y otra a la derecha (o dos a la izquierda), eliminar clear: both para que queden una al lado de la otra */
.ck-content .drupal-media-style-align-left,
.ck-content .drupal-media-style-align-right,
.ck-content figure.image-style-align-left,
.ck-content figure.image-style-align-right {
  clear: none !important;
  max-width: calc(50% - 12px) !important;
  margin-bottom: 12px !important;
}

/* 3. Cuando se insertan varias imágenes estándar (<figure class="image">) seguidas */
.ck-content figure.image:has(+ figure.image),
.ck-content figure.image + figure.image {
  display: inline-block !important;
  vertical-align: top !important;
  width: calc(33.333% - 12px) !important;
  max-width: calc(33.333% - 12px) !important;
  margin: 6px !important;
  clear: none !important;
}