/* Widget "Card Lab591" (inc/widgets/class-cards-widget.php). */

.elementor-widget-lab591-cards {
	width: 100%;
}

.lab-cards {
	--lab-cards-cols: 3;
	--lab-cards-gap: 20px;
	--lab-cards-bg: #231f20;
	--lab-cards-bg-hover: #2e2a2b;
	--lab-cards-border: #403a3b;
	--lab-cards-border-hover: #5ac134;
	--lab-cards-radius: 6px;
	--lab-cards-pad: 28px;
	display: grid;
	grid-template-columns: repeat(var(--lab-cards-cols), minmax(0, 1fr));
	gap: var(--lab-cards-gap);
	align-items: start;
}

/* Griglia: tutte le righe alte quanto la card più alta, le card riempiono la cella. */
.lab-cards[data-layout="grid"] {
	grid-auto-rows: 1fr;
	align-items: stretch;
}

/* Masonry: con JS le righe sono da 1px e ogni card occupa quante ne servono (cards.js). */
.lab-cards.is-masonry {
	grid-auto-rows: 1px;
	row-gap: 0;
}

.lab-cards a.lab-cards__item,
.lab-cards .lab-cards__item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--lab-cards-pad);
	border: 1px solid var(--lab-cards-border);
	border-radius: var(--lab-cards-radius);
	background: var(--lab-cards-bg);
	color: inherit;
	text-decoration: none;
	transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease, border-color .3s ease, opacity .5s ease;
}

/* Al passaggio: bordo verde; con "Elevazione" (classe lab-cards--lift) anche ombra, sfondo e rialzo. */
.lab-cards a.lab-cards__item:hover,
.lab-cards a.lab-cards__item:focus-visible {
	border-color: var(--lab-cards-border-hover);
}

.lab-cards--lift a.lab-cards__item:hover,
.lab-cards--lift a.lab-cards__item:focus-visible {
	background: var(--lab-cards-bg-hover);
	box-shadow: 0 14px 32px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
	transform: translateY(-4px);
}

.lab-cards__title {
	font-size: 24px;
	line-height: 1.2;
}

/* Comparsa una alla volta: nascoste solo se c'è JS, e mai nell'editor. Il ritorno a nascoste è istantaneo. */
.lab-js .lab-cards.is-waiting .lab-cards__item {
	opacity: 0;
	transform: translateY(32px);
}

.lab-js .lab-cards.is-waiting:not(.is-revealing) .lab-cards__item {
	transition: none;
}

.lab-cards.is-revealing .lab-cards__item {
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1), border-color .3s ease;
}

.elementor-editor-active .lab-cards.is-waiting .lab-cards__item {
	opacity: 1;
	transform: none;
}

/*
 * "Linea che scende" (classe lab-cards--drip, solo mobile, gestita da cards.js): il bordo sinistro parte
 * come traccia spenta e si riempie di verde scorrendo; una goccia guida la punta della linea.
 */
@media (max-width: 767px) {
	.lab-js .lab-cards--drip.is-dripping .lab-cards__item {
		position: relative;
		border-left-color: var(--lab-drip-track, rgba(64, 58, 59, .7)) !important;
	}

	.lab-js .lab-cards--drip.is-dripping .lab-cards__item::before {
		content: "";
		position: absolute;
		top: 0;
		left: calc(-1 * var(--lab-drip-w, 2px));
		width: var(--lab-drip-w, 2px);
		height: calc(var(--drip, 0) * 100%);
		background: var(--lab-cards-border-hover, #5ac134);
	}

	.lab-js .lab-cards--drip.is-dripping .lab-cards__item::after {
		content: "";
		position: absolute;
		top: calc(var(--drip, 0) * 100% - 5px);
		left: calc(-1 * var(--lab-drip-w, 2px) / 2 - 3.5px);
		width: 7px;
		height: 9px;
		border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
		background: var(--lab-cards-border-hover, #5ac134);
		box-shadow: 0 0 8px rgba(90, 193, 52, .7);
		opacity: var(--drip-head, 0);
		transform-origin: 50% 0;
		transition: opacity .2s ease;
		pointer-events: none;
	}

	/* Titoli grigi finché la goccia non ci passa, poi verdi. */
	.lab-js .lab-cards--drip.is-dripping .lab-cards__title {
		color: var(--lab-drip-title, #9c9697) !important;
		transition: color .45s ease;
	}

	.lab-js .lab-cards--drip.is-dripping .lab-cards__item.is-lit .lab-cards__title {
		color: var(--lab-cards-border-hover, #5ac134) !important;
	}

	/* Fermo: la goccia pende e molleggia lentamente sotto la punta della linea. */
	.lab-js .lab-cards--drip.is-dripping.is-idle .lab-cards__item::after {
		animation: lab-drip-bob 2.6s ease-in-out infinite;
	}
}

@keyframes lab-drip-bob {
	0%, 100% { transform: translateY(0) scale(1, 1); }
	45% { transform: translateY(4px) scale(.9, 1.18); }
	70% { transform: translateY(1px) scale(1.06, .94); }
}

@media (prefers-reduced-motion: reduce) {
	.lab-cards .lab-cards__item {
		transition: background-color .2s ease, border-color .2s ease;
	}

	.lab-cards a.lab-cards__item:hover {
		transform: none;
	}

	.lab-js .lab-cards.is-waiting .lab-cards__item {
		opacity: 1;
		transform: none;
	}
}