/**
 * CM BW Hover
 *
 * Efecto blanco y negro con transición a color y zoom contenido en hover.
 *
 * Uso: Agregar clase "cm--bw-hover" a cualquier imagen dentro de un contenedor
 *      (Group/Stack en Gutenberg).
 *
 * Configuración (variables CSS personalizables):
 * - --cm-bw-hover-scale: Escala al hacer hover (default: 1.1 = 10%)
 * - --cm-bw-hover-duration: Duración de la transición (default: 0.7s)
 *
 * Estructura esperada:
 * - Contenedor (wp-block-group/Stack) con dimensiones definidas
 *   └── Figure (.wp-block-image.cm--bw-hover)
 *         └── img (recibe el transform scale)
 *
 * El contenedor recibe overflow:hidden automáticamente via :has(),
 * permitiendo que la imagen haga zoom sin salirse de su caja.
 *
 * @package CM_BW_Hover
 * @version 1.1.0
 */

:root {
  --cm-bw-hover-scale: 1.01;
  --cm-bw-hover-duration: 0.7s;
}

/**
 * Contenedor padre - recibe overflow hidden para contener el zoom.
 * Usa :has() para detectar automáticamente si contiene una imagen con la clase.
 */
.wp-block-group:has(> .cm--bw-hover),
.wp-block-group:has(> .wp-block-image.cm--bw-hover) {
  overflow: hidden;
}

/**
 * Figure/contenedor de imagen - maneja el filtro de escala de grises.
 * El figure mantiene su tamaño original, solo cambia el filtro.
 */
.cm--bw-hover {
  /*filter: grayscale(100%);*/
  transition: filter var(--cm-bw-hover-duration) ease;
}

/**
 * Imagen interior - maneja el transform scale.
 * Separar filter y transform mejora el rendimiento de la animación.
 */
.cm--bw-hover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--cm-bw-hover-duration) ease;
  will-change: transform;
}

/**
 * Estados hover - activan color y zoom.
 
.cm--bw-hover:hover {
  filter: grayscale(0%);
}
  */

.cm--bw-hover:hover img {
  transform: scale(var(--cm-bw-hover-scale));
}