/* Features Section Widget */
.features-section {
	background-color: var(--color-surface);
	padding-top: var(--space-3xl);
	padding-bottom: var(--space-3xl);
}

.features-section__description {
	text-align: center;
	max-width: 700px;
	margin: var(--space-md) auto var(--space-2xl) auto;
	font-family: var(--font-body);
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--color-on-surface-variant);
}

.features-section__grid {
	display: grid;
	gap: var(--gutter);
}

.features-section--columns-1 .features-section__grid {
	grid-template-columns: 1fr;
}

.features-section--columns-2 .features-section__grid {
	grid-template-columns: repeat(2, 1fr);
}

.features-section--columns-3 .features-section__grid {
	grid-template-columns: repeat(3, 1fr);
}

.features-section--columns-4 .features-section__grid {
	grid-template-columns: repeat(4, 1fr);
}

/* Feature Card */
.features-section__feature {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-md);
	padding: var(--space-xl);
	background-color: var(--color-surface-container);
	border-radius: var(--radius-lg);
	transition: all var(--transition-normal);
}

.features-section__feature:hover {
	transform: translateY(-4px);
	box-shadow: var(--elevation-hover);
	background-color: var(--color-surface-container-high);
}

/* Icon Wrapper */
.features-section__icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background-color: var(--color-primary-container);
	border-radius: var(--radius-lg);
	transition: transform var(--transition-normal);
}

.features-section--icon-small .features-section__icon-wrapper,
.obc-features--icon-small .obc-features__icon-wrapper {
	width: 48px;
	height: 48px;
}

.features-section--icon-large .features-section__icon-wrapper,
.obc-features--icon-large .obc-features__icon-wrapper {
	width: 80px;
	height: 80px;
}

.features-section__feature:hover .features-section__icon-wrapper,
.features-section__feature:hover .obc-features__icon-wrapper {
	transform: scale(1.1);
}

.features-section__icon,
.obc-features__icon,
.features-section__icon-wrapper [class*='obc-ms-'],
.obc-features__icon-wrapper [class*='obc-ms-'] {
	font-size: 1.5rem;
	color: var(--color-on-primary-container);
}

.features-section--icon-small .features-section__icon,
.features-section--icon-small .obc-features__icon,
.features-section--icon-small .features-section__icon-wrapper [class*='obc-ms-'],
.obc-features--icon-small .obc-features__icon-wrapper [class*='obc-ms-'] {
	font-size: 1.25rem;
}

.features-section--icon-large .features-section__icon,
.features-section--icon-large .obc-features__icon,
.features-section--icon-large .features-section__icon-wrapper [class*='obc-ms-'],
.obc-features--icon-large .obc-features__icon-wrapper [class*='obc-ms-'] {
	font-size: 2rem;
}

/* Feature Title */
.features-section__feature-title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0;
	color: var(--color-on-surface);
}

/* Feature Description */
.features-section__feature-description {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-on-surface-variant);
	margin: 0;
	flex-grow: 1;
}

/* Feature Link */
.features-section__feature-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
	margin-top: auto;
	transition: color var(--transition-fast);
}

.features-section__feature-link:hover {
	color: var(--color-secondary);
}

.features-section__feature-link::after {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 4px 6px;
	border-color: transparent transparent transparent currentColor;
	transition: transform var(--transition-fast);
}

.features-section__feature-link:hover::after {
	transform: translateX(-4px);
}

/* RTL Support */
[dir="rtl"] .features-section__feature-link::after {
	border-width: 4px 6px 4px 0;
	border-color: transparent currentColor transparent transparent;
}

[dir="rtl"] .features-section__feature-link:hover::after {
	transform: translateX(4px);
}

/* Tablet styles */
@media (max-width: 1024px) {
	.features-section--columns-4 .features-section__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.features-section--columns-3 .features-section__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile styles */
@media (max-width: 767px) {
	.features-section {
		padding-top: var(--space-2xl);
		padding-bottom: var(--space-2xl);
	}

	.features-section__description {
		font-size: 1rem;
		margin: var(--space-md) auto var(--space-xl) auto;
	}

	.features-section--columns-1,
	.features-section--columns-2,
	.features-section--columns-3,
	.features-section--columns-4 .features-section__grid {
		grid-template-columns: 1fr;
	}

	.features-section__feature {
		padding: var(--space-lg);
	}
}