/**
 * hachitec blocks - Planes y precios (grilla)
 * Estilos compartidos entre el editor y el frontend.
 *
 * IMPORTANTE: las variables se definen SOLO aca, en el contenedor. La tarjeta
 * las lee pero nunca las redefine: si lo hiciera, su valor propio ganaria sobre
 * el heredado y ningun ajuste de la grilla llegaria a la tarjeta.
 * La unica excepcion es el acento propio de una tarjeta, que el render escribe
 * como estilo inline en esa tarjeta justamente para pisar el de la grilla.
 */

.hachitec-pricing {
	/* Sin acento elegido cae al color primario del sitio, y si no existe al color de texto. */
	--hachitec-pricing-accent: var(--wp--preset--color--primary, currentColor);
	--hachitec-pricing-card-bg: #fff;
	--hachitec-pricing-border: rgba(0, 0, 0, 0.08);
	--hachitec-pricing-border-width: 1px;
	--hachitec-pricing-columns: 3;
	--hachitec-pricing-gap: 24px;
	--hachitec-pricing-radius: 0px;
	--hachitec-pricing-radius-pill: 0px;
	--hachitec-pricing-radius-icon: 0px;
	--hachitec-pricing-shadow: none;
	--hachitec-pricing-shadow-featured: none;
	--hachitec-pricing-align: center;
	--hachitec-pricing-muted: 0.68;
}

.hachitec-pricing__grid {
	display: grid;
	grid-template-columns: repeat(var(--hachitec-pricing-columns), minmax(0, 1fr));
	gap: var(--hachitec-pricing-gap);
	align-items: start;
}

/*
 * Aire arriba para la cinta, que sale del borde superior de la tarjeta.
 * Se reserva siempre y se quita cuando no hay ninguna cinta: los navegadores
 * sin `:has()` ignoran la segunda regla y se quedan con el aire, que es lo seguro.
 */
.hachitec-pricing__grid {
	padding-top: 16px;
}

.hachitec-pricing__grid:not(:has(.hachitec-plan__ribbon)) {
	padding-top: 0;
}

.hachitec-pricing.has-equal-height .hachitec-pricing__grid {
	align-items: stretch;
}

@media (max-width: 1024px) {
	.hachitec-pricing__grid {
		/*
		 * `repeat()` no acepta funciones matematicas en la cuenta de columnas:
		 * `repeat(min(var(--x), 2), …)` es invalido y el navegador tira toda la
		 * declaracion, asi que en tablet nunca bajaba a dos columnas. Con auto-fit
		 * la cuenta la resuelve el propio grid a partir del ancho minimo.
		 */
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	}
}

@media (max-width: 700px) {
	.hachitec-pricing__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * El plan destacado primero: apiladas, el que interesa quedaba tercero y
	 * habia que scrollear tres tarjetas enteras para llegar.
	 */
	.hachitec-pricing.has-mobile-featured-first .hachitec-plan.is-featured {
		order: -1;
	}

	/*
	 * Carrusel: en vez de tres tarjetas larguisimas una debajo de otra, se
	 * deslizan de a una con anclaje. La tarjeta se ve casi entera y se intuye
	 * que hay mas al costado.
	 */
	.hachitec-pricing.is-mobile-carrusel .hachitec-pricing__grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 84%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 8%;
		/* Aire para que la cinta que sobresale no la corte el scroll. */
		padding-top: 18px;
		padding-bottom: 10px;
	}

	.hachitec-pricing.is-mobile-carrusel .hachitec-plan {
		scroll-snap-align: center;
	}
}

/*
 * Animacion de entrada.
 *
 * `is-reveal-armed` la pone el JS recien cuando confirma que puede animar, asi
 * que sin JS las tarjetas nunca quedan ocultas. Se usa animation y no transition
 * a proposito: al terminar, el JS agrega `is-reveal-done` y el transform vuelve
 * a quedar libre para el hover, cosa que con `animation-fill-mode: forwards`
 * no pasaria.
 */
.hachitec-pricing.is-reveal-armed .hachitec-plan {
	opacity: 0;
}

.hachitec-pricing.is-reveal-armed .hachitec-plan.is-revealed {
	animation-duration: var(--hachitec-pricing-reveal-duration, 600ms);
	animation-delay: var(--hachitec-pricing-reveal-delay, 0ms);
	animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
	animation-fill-mode: both;
}

.hachitec-pricing.is-reveal-fade.is-reveal-armed .hachitec-plan.is-revealed {
	animation-name: hachitec-pricing-fade;
}

.hachitec-pricing.is-reveal-up.is-reveal-armed .hachitec-plan.is-revealed {
	animation-name: hachitec-pricing-up;
}

.hachitec-pricing.is-reveal-scale.is-reveal-armed .hachitec-plan.is-revealed {
	animation-name: hachitec-pricing-scale;
}

/* Terminada la animacion se limpia todo: el hover recupera el transform. */
.hachitec-pricing .hachitec-plan.is-reveal-done {
	animation: none;
	opacity: 1;
}

@keyframes hachitec-pricing-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes hachitec-pricing-up {
	from {
		opacity: 0;
		transform: translateY(26px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes hachitec-pricing-scale {
	from {
		opacity: 0;
		transform: scale(0.94);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Con movimiento reducido el JS ni arma la animacion, pero por las dudas. */
@media (prefers-reduced-motion: reduce) {
	.hachitec-pricing .hachitec-plan {
		animation: none !important;
		opacity: 1 !important;
	}
}