/**
 * Feature card — reusable on Home and AI Teacher pages.
 *
 * @package ALW
 * @since   1.0.0
 */

.alw-feature-card {
	position: relative;
	overflow: hidden;
	padding: 24px;
	border: 1px solid var(--alw-border);
	border-radius: var(--alw-radius-card);
	background: var(--alw-gradient-card);
	box-shadow: var(--alw-shadow-soft);
	transition:
		transform var(--alw-transition),
		box-shadow var(--alw-transition);
}

.alw-feature-card:hover,
.alw-feature-card:focus-within {
	transform: translateY(-4px);
}

.alw-feature-card__icon {
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	border-radius: var(--alw-radius-icon);
	background-color: var(--alw-primary-10);
	color: var(--alw-primary);
}

.alw-feature-card__icon svg {
	width: 24px;
	height: 24px;
}

.alw-feature-card__title {
	margin-top: 20px;
}

.alw-feature-card__description {
	margin-top: 8px;
}

.alw-feature-card__glow {
	pointer-events: none;
	position: absolute;
	inset-block-end: -48px;
	inset-inline-end: -48px;
	width: 128px;
	height: 128px;
	border-radius: 50%;
	background-color: var(--alw-primary-5);
	transition: transform 300ms ease;
}

.alw-feature-card:hover .alw-feature-card__glow,
.alw-feature-card:focus-within .alw-feature-card__glow {
	transform: scale(1.5);
}

.alw-feature-grid {
	display: grid;
	gap: 20px;
}

@media (min-width: 640px) {
	.alw-feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.alw-feature-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}