@import "../../../../themes/recast2025/style.css";

.support-resources {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--margins-base-vert, 100px) var(--margins-base-hori, 100px);
	background: var(--neutrals-white, #ffffff);
}

.support-resources__inner {
	width: 100%;
	max-width: var(--global-maxwidth-maxwidth-m, 1200px);
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: var(--gap-base, 56px);
}

.support-resources__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: var(--global-maxwidth-maxwidth-s, 600px);
	row-gap: var(--gap-m, 24px);
}

.support-resources__title {
	margin: 0;
	color: var(--neutrals-black, #161f5b);
	letter-spacing: calc(var(--size-heading-l, 48px) * 0.02);
}

.support-resources__title span {
	color: var(--primary-recast-blue, #0372ff);
}

.support-resources__description {
	margin: 0;
	color: var(--neutrals-black, #161f5b);
	font-weight: 300;
	line-height: 100%;
}

.support-resources__grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gap-m, 24px);
}

.support-resources__item {
	display: flex;
	flex-direction: column;
	padding: var(--margins-m, 32px);
	row-gap: var(--gap-s, 16px);
}

.support-resources__item-title {
	position: relative;
	font-weight: 500 !important;
	margin: 0;
	padding-bottom: var(--gap-s, 16px);
	color: var(--neutrals-black, #161f5b);
	letter-spacing: calc(var(--size-heading-xs, 20px) * 0.03);
}

.support-resources__item-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 24px;
	height: 2px;
	background: var(--secondary-orange, #f05928);
}

.support-resources__item-description {
	color: var(--neutrals-black, #161f5b);
	line-height: 100%;
}

.support-resources__item-cta {
	display: none; /* Hidden on desktop */
}

/* Tablet and Mobile */
@media (max-width: 820px) {
	.support-resources__item-content-bottom {
		display: flex;
		justify-content: space-between;
		align-items: start;
		column-gap: var(--gap-s, 16px);
	}

	.support-resources__item-description {
		padding-right: calc(20px + var(--margins-m));
	}

	.support-resources__item-cta.cta-primary-on-light {
		width: 32px;
		height: 32px;
		/* Add arrow icon to the existing gradient background */
		background-image: url("../../../../themes/recast2025/assets/icon-arrow-right.svg"), linear-gradient(90deg, #124ac9 0%, #124ac9 50%, var(--primary-royal-blue) 50%, var(--primary-royal-blue) 100%) !important;
		background-size: 20px 20px, 200% 100% !important;
		background-position: center right 7px, right center !important;
		background-repeat: no-repeat !important;

		position: absolute;
		right: var(--margins-m);
		bottom: var(--margins-m);
	}
	.support-resources__item-cta.cta-primary-on-light:hover {
		background-position: center right 7px, right center !important;
	}

	/* .support-resources__item-cta:hover {
		background-position: center right 7px, left center !important;
	} */

	.support-resources__grid {
		grid-template-columns: 1fr;
	}

	.support-resources__item-cta {
		display: initial;
	}
}