/**
 * AIB Hover Card - Estilos del frontend.
 *
 * Metodología BEM. Los valores dinámicos (blur, scale, overlay, transición)
 * se controlan mediante variables CSS que Elementor sobrescribe desde los
 * controles del widget. El fondo, bordes, radios, colores, tipografías y
 * tamaños se editan todos desde los controles (nada se fuerza aquí).
 *
 * @package AIB_Hover_Card
 */

/* ==========================================================================
   Bloque: tarjeta
   ========================================================================== */
.aib-hover-card {
	/* Variables de respaldo (Elementor las sobrescribe con mayor especificidad). */
	--aib-blur: 4px;
	--aib-scale: 1.05;
	--aib-overlay-color: #000000;
	--aib-overlay-opacity: 0.35;
	--aib-transition: 0.45s;
	--aib-reveal-offset: 20px;
	--aib-btn-transition: 0.3s;

	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	height: 100%; /* Ocupa toda la altura de la celda del grid/container. */
	overflow: hidden; /* Recorta la imagen a sangre con el border-radius de la tarjeta. */
	background-color: transparent; /* Sin fondo forzado: se define desde el control. */
}

/* Cadena de alturas: hace que el <article> llene la altura estirada del widget
   dentro de un grid/container, imprescindible para alinear el botón abajo. */
.elementor-widget-aib-hover-card > .elementor-widget-container {
	height: 100%;
}

.aib-hover-card *,
.aib-hover-card *::before,
.aib-hover-card *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Elemento: media (contenedor de la imagen)
   ========================================================================== */
.aib-hover-card__media {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0;
	line-height: 0;
}

/* Modo completa: la imagen se muestra entera y proporcional. */
.aib-hover-card--full .aib-hover-card__media {
	height: auto;
}

/* Modo altura fija: la altura la define el control (respaldo 260px). */
.aib-hover-card--fixed .aib-hover-card__media {
	height: 260px;
}

/* Overlay que oscurece la imagen en hover. */
.aib-hover-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--aib-overlay-color);
	opacity: 0;
	transition: opacity var(--aib-transition) ease;
	pointer-events: none;
	z-index: 1;
}

/* ==========================================================================
   Elemento: imagen principal (hijo directo de media)
   ========================================================================== */
.aib-hover-card__media > img {
	display: block;
	width: 100%;
	transform: scale(1);
	filter: blur(0);
	transition: transform var(--aib-transition) ease, filter var(--aib-transition) ease;
	will-change: transform, filter;
}

/* Completa: alto automático según la proporción real de la imagen. */
.aib-hover-card--full .aib-hover-card__media > img {
	height: auto;
}

/* Altura fija: la imagen llena el contenedor y se recorta (object-fit editable). */
.aib-hover-card--fixed .aib-hover-card__media > img {
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Elemento: contenido revelado (imagen hover o icono)
   ========================================================================== */
.aib-hover-card__reveal {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	opacity: 0;
	transform: translateY(var(--aib-reveal-offset)) scale(0.8);
	transition: opacity var(--aib-transition) ease, transform var(--aib-transition) ease;
	pointer-events: none;
	z-index: 2;
}

.aib-hover-card__reveal-image {
	display: block;
	width: 64px;
	height: auto;
	max-width: 70%;
}

.aib-hover-card__reveal-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	color: #ffffff;
}

.aib-hover-card__reveal-icon svg {
	width: 64px;
	height: 64px;
}

/* Recolorea también SVGs que traen relleno propio en sus formas. */
.aib-hover-card__reveal-icon svg,
.aib-hover-card__reveal-icon svg path,
.aib-hover-card__reveal-icon svg polygon,
.aib-hover-card__reveal-icon svg rect,
.aib-hover-card__reveal-icon svg circle,
.aib-hover-card__reveal-icon svg ellipse {
	fill: #ffffff;
}

/* ==========================================================================
   Estados hover / activo (activo se aplica en táctil mediante JS)
   ========================================================================== */
.aib-hover-card:hover .aib-hover-card__media > img,
.aib-hover-card.is-active .aib-hover-card__media > img {
	transform: scale(var(--aib-scale));
	filter: blur(var(--aib-blur));
}

.aib-hover-card:hover .aib-hover-card__media::after,
.aib-hover-card.is-active .aib-hover-card__media::after {
	opacity: var(--aib-overlay-opacity);
}

.aib-hover-card:hover .aib-hover-card__reveal,
.aib-hover-card.is-active .aib-hover-card__reveal {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* ==========================================================================
   Elemento: cuerpo de texto (aquí vive el padding del contenido)
   ========================================================================== */
.aib-hover-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 18px 4px 4px;
	text-align: left;
}

.aib-hover-card__number {
	display: block;
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.08em;
	color: #8a8a8a;
}

.aib-hover-card__title {
	margin: 0 0 10px;
	font-size: 22px;
	line-height: 1.3;
	color: #111111;
}

.aib-hover-card__description {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.6;
	color: #555555;
}

/* ==========================================================================
   Elemento: botón
   ========================================================================== */
.aib-hover-card__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	gap: 8px;
	align-self: flex-start; /* La alineación real la define el control "Alineación del botón". */
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: 8px;
	background-color: #111111;
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--aib-btn-transition) ease,
		color var(--aib-btn-transition) ease,
		border-color var(--aib-btn-transition) ease;
}

.aib-hover-card__button:hover,
.aib-hover-card__button:focus-visible {
	background-color: #333333;
	color: #ffffff;
}

.aib-hover-card__button-text {
	display: inline-block;
}

/* Icono del botón. */
.aib-hover-card__button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.aib-hover-card__button-icon i {
	line-height: 1;
	color: inherit;
	transition: color var(--aib-btn-transition) ease;
}

.aib-hover-card__button-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	transition: fill var(--aib-btn-transition) ease;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.aib-hover-card__title {
		font-size: 20px;
	}
}

@media (max-width: 767px) {
	.aib-hover-card__title {
		font-size: 19px;
	}

	.aib-hover-card__description {
		font-size: 14px;
	}
}

/* ==========================================================================
   Accesibilidad: reduce el movimiento si el usuario lo solicita
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.aib-hover-card__media > img,
	.aib-hover-card__reveal,
	.aib-hover-card__media::after,
	.aib-hover-card__button {
		transition-duration: 0.01ms;
	}
}