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

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

.features-grid__inner {
	display: flex;
	flex-direction: column;
	row-gap: var(--gap-base, 56px);
	max-width: var(--global-maxwidth-maxwidth-m, 1200px);
}

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

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

/* Desktop: 3-column grid */
.features-grid__grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.features-grid__item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 1; /* Makes it a perfect square */
	min-width: 0; /* Prevents flex items from overflowing */
	padding: var(--margins-m, 32px);
	background: var(--neutrals-white, #ffffff);
	border: var(--stroke-width, 2px) solid var(--neutrals-grey-1, #e1e9f9);
	margin-right: calc(var(--stroke-width, 2px) * -1); /* prevent doubled borders */
	margin-bottom: calc(var(--stroke-width, 2px) * -1); /* prevent doubled borders */
}

.features-grid__item-inner-content {
	display: flex;
	flex-direction: column;
	row-gap: var(--gap-s, 14px);
}

.features-grid__icon {
	width: var(--icon-maxwidth-m, 88px);
	height: var(--icon-maxwidth-m, 88px);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* SVG icons with hover color effects */
.features-grid__icon--svg svg {
	width: 100%;
	height: 100%;
	transition: fill 0.5s ease;
}

.features-grid__icon--svg svg path,
.features-grid__icon--svg svg circle,
.features-grid__icon--svg svg rect,
.features-grid__icon--svg svg polygon {
	transition: fill 0.5s ease;
}

.features-grid__item:hover .features-grid__icon--svg svg path,
.features-grid__item:hover .features-grid__icon--svg svg circle,
.features-grid__item:hover .features-grid__icon--svg svg rect,
.features-grid__item:hover .features-grid__icon--svg svg polygon {
	fill: var(--primary-recast-blue, #0372ff) !important;
}

/* Regular images (no hover effects) */
.features-grid__icon--image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.features-grid__item-title {
	margin: 0;
	color: var(--neutrals-black, #161f5b);
	letter-spacing: calc(var(--size-heading-s, 32px) * 0.03);
}

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

/* Placeholder item (hidden on desktop and mobile) */
.features-grid__placeholder {
	display: none;
}

/* Tablet: 2-column grid with placeholder for odd counts */
@media (min-width: 821px) and (max-width: 1200px) {
	.features-grid__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.features-grid__item-description {
		display: -webkit-box;
		-webkit-line-clamp: 3; /* Limit to 3 lines */
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Show placeholder only for odd counts on tablet */
	.features-grid__grid[data-is-odd="true"] .features-grid__placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: calc(var(--stroke-width, 2px) * -1);
		margin-bottom: calc(var(--stroke-width, 2px) * -1);
		background: var(--primary-royal-blue, #1f289c) url("../../../../themes/recast2025/assets/recast-re.png") center center / auto no-repeat;
		border: var(--stroke-width, 2px) solid var(--primary-royal-blue, #1f289c);
	}
}

/* Mobile: single column */
@media (max-width: 820px) {
	.features-grid__grid {
		grid-template-columns: 1fr;
	}

	.features-grid__item {
		padding: var(--margins-s, 20px);
		row-gap: var(--gap-m, 18px);
		aspect-ratio: initial;
	}

	/* Placeholder is never shown on mobile */
	.features-grid__placeholder {
		display: none !important;
	}
}