/**
 * Section — Homepage "How it works" (homepage pass, 5 Oct 2026; NOT
 * design-locked)
 *
 * Markup: modules/frontend/views/patterns/home-how-it-works.php.
 *
 * Three cards in one family — deep navy, a faint pearlescent edge
 * (teal → pearl-pink, the hero's language), a large outlined ghost
 * number at the top right, a small lit icon, a strong heading and one
 * line. The accent moves gently along the steps: teal → teal/pearl →
 * pearl-pink. Quieter than the competition cards above it.
 *
 * ≥ 768px: three across. Phones: a native horizontal track with
 * scroll-snap — each card ~84% of the width so the next one peeks in;
 * the track bleeds to the screen edges inside the section (no page
 * overflow); the scrollbar is hidden, the track is focusable for
 * keyboard scrolling.
 */

.ec-home-how__head {
	display: grid;
	gap: 0.3rem;
	margin-bottom: var(--ec-space-5);
}

.ec-home-how__eyebrow {
	margin: 0;
	background: linear-gradient(90deg, #67e6f0, #2cd5e3 50%, #f9c2ec);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	justify-self: start;
	font-size: var(--ec-font-size-caption);
	font-weight: var(--ec-font-weight-bold);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ec-home-how__title {
	margin: 0;
	color: var(--ec-color-text-primary);
	font-family: var(--ec-font-family-base);
	font-size: var(--ec-font-size-h4);
	font-weight: var(--ec-font-weight-bold);
	letter-spacing: var(--ec-letter-spacing-tight);
	line-height: 1.15;
}

.ec-home-how__track {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ec-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-home-how__track:focus-visible {
	outline: none;
	border-radius: var(--ec-radius-lg);
	box-shadow: var(--ec-focus-ring);
}

.ec-home-how__card {
	--ec-how-accent: 44, 213, 227;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ec-space-2);
	min-width: 0;
	box-sizing: border-box;
	padding: var(--ec-space-6);
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: var(--ec-radius-lg);
	background:
		radial-gradient(ellipse 70% 60% at 100% 0%, rgba(var(--ec-how-accent), 0.1), rgba(var(--ec-how-accent), 0) 70%) padding-box,
		linear-gradient(180deg, #0f1e34, #0a1424) padding-box,
		linear-gradient(140deg, rgba(124, 236, 243, 0.4), rgba(249, 194, 236, 0.28) 55%, rgba(124, 236, 243, 0.1)) border-box;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
	transition: box-shadow 300ms var(--ec-ease-standard), transform 300ms var(--ec-ease-standard);
}

.ec-home-how__card--2 {
	--ec-how-accent: 150, 220, 240;
}

.ec-home-how__card--3 {
	--ec-how-accent: 249, 194, 236;
}

/* The ghost number: large, outlined, low-opacity, at the top right */
.ec-home-how__num {
	position: absolute;
	top: -0.35rem;
	right: 1rem;
	color: transparent;
	font-family: var(--ec-font-family-base);
	font-size: 5.5rem;
	font-weight: var(--ec-font-weight-bold);
	letter-spacing: -0.04em;
	line-height: 1;
	-webkit-text-stroke: 1px rgba(var(--ec-how-accent), 0.32);
	pointer-events: none;
	user-select: none;
}

.ec-home-how__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: var(--ec-space-2);
	border: 1px solid rgba(var(--ec-how-accent), 0.4);
	border-radius: var(--ec-radius-md);
	background: rgba(var(--ec-how-accent), 0.08);
	box-shadow: 0 0 18px rgba(var(--ec-how-accent), 0.18);
	color: rgb(var(--ec-how-accent));
	transition: box-shadow 300ms var(--ec-ease-standard), border-color 300ms var(--ec-ease-standard);
}

.ec-home-how__icon .ec-icon {
	width: 1.375rem;
	height: 1.375rem;
}

.ec-home-how__heading {
	position: relative;
	margin: 0;
	color: var(--ec-color-text-primary);
	font-family: var(--ec-font-family-base);
	font-size: var(--ec-font-size-body-lg);
	font-weight: var(--ec-font-weight-bold);
	letter-spacing: var(--ec-letter-spacing-tight);
	line-height: 1.25;
}

.ec-home-how__text {
	position: relative;
	margin: 0;
	color: var(--ec-color-text-secondary);
	font-size: var(--ec-font-size-body-sm);
	line-height: 1.55;
}

/* A little life on hover-capable devices: the edge and icon brighten */
@media (hover: hover) {
	.ec-home-how__card:hover {
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.36), 0 0 26px rgba(var(--ec-how-accent), 0.12);
	}

	.ec-home-how__card:hover .ec-home-how__icon {
		border-color: rgba(var(--ec-how-accent), 0.7);
		box-shadow: 0 0 24px rgba(var(--ec-how-accent), 0.32);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.ec-home-how__card:hover {
		transform: translateY(-2px);
	}
}

@media (min-width: 1024px) {
	.ec-home-how__title {
		font-size: var(--ec-font-size-h3);
	}

	.ec-home-how__num {
		font-size: 6rem;
	}
}

/* Tablets: still three across, a little tighter */
@media (min-width: 768px) and (max-width: 1023px) {
	.ec-home-how__track {
		gap: var(--ec-space-3);
	}

	.ec-home-how__card {
		padding: var(--ec-space-5);
	}

	.ec-home-how__num {
		font-size: 4.5rem;
	}
}

/* Phones: one horizontal, snapping track — most of one card, a peek of
   the next. Bleeds to the screen edges (negative margin = the section's
   own side padding), so the page itself never scrolls sideways. */
@media (max-width: 767px) {
	.ec-home-how__head {
		margin-bottom: var(--ec-space-4);
	}

	.ec-home-how__track {
		display: flex;
		gap: var(--ec-space-3);
		margin: 0 calc(var(--ec-space-4) * -1);
		padding: 0.25rem var(--ec-space-4) var(--ec-space-2);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--ec-space-4);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.ec-home-how__track::-webkit-scrollbar {
		display: none;
	}

	.ec-home-how__card {
		flex: 0 0 84%;
		padding: var(--ec-space-5);
		scroll-snap-align: start;
	}

	.ec-home-how__num {
		font-size: 4.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ec-home-how__card,
	.ec-home-how__icon {
		transition: none;
	}

	.ec-home-how__track {
		scroll-behavior: auto;
	}
}