/**
 * Text Gradient Utilities
 * 
 * Apply these classes via the "Additional CSS class(es)" field on any block
 * to render gradient text instead of a solid color.
 *
 * Classes:
 *   .text-gradient            — Green 500 → Blue 400 (brand default)
 *   .text-gradient-light      — Teal 100 → Blue 200 (for dark backgrounds)
 *   .text-gradient--mobile    — Forces black text on mobile (≤768px)
 */

/* Default fallback colors (no gradient support) */
.text-gradient {
	color: #4ac500;
}

.text-gradient-light {
	color: #a9ffc8;
}

/* Gradient text via background-clip */
@supports (-webkit-background-clip: text) and (-webkit-text-fill-color: transparent) {
	.text-gradient {
		background-image: linear-gradient(90deg, #4ac500, #00bcd0);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.text-gradient-light {
		background-image: linear-gradient(90deg, #A6F9D6 0%, #51EEE8 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}
}

/* Mobile override: force solid black text at ≤768px */
@media screen and (max-width: 48rem) {
	.text-gradient--mobile {
		color: black;
	}
}

@supports (-webkit-background-clip: text) and (-webkit-text-fill-color: transparent) {
	@media screen and (max-width: 48rem) {
		.text-gradient--mobile {
			background-image: linear-gradient(0, black, black);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}
	}
}