/* 4EVA Extender - Letter Cards. Proportions measured from the About Us mockup; sizes use cqw (card width) so it scales as one piece.
   Idle: big centred letter + title. Hover/focus: letter shrinks to top-left, title slides left, description opens. */
.eva-lc {
	--eva-lc-bg: #fff;
	--eva-lc-bg-hover: #F2F8E1;
	--eva-lc-border: #A5CB9A;
	--eva-lc-border-hover: #0E7436;
	--eva-lc-letter: #0E7436;
	--eva-lc-ink: var(--brand-ink, #1A1A1A);
	--eva-lc-ease: cubic-bezier(.4, 0, .2, 1);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	font-family: var(--font-primary, Poppins), sans-serif;
}

.eva-lc .eva-lc__card {
	container-type: inline-size;
	position: relative;
	aspect-ratio: 620 / 590;
	border: 2px solid var(--eva-lc-border);
	border-radius: 20px;
	background: var(--eva-lc-bg);
	color: var(--eva-lc-ink);
	overflow: hidden;
	cursor: default;
	transition: background-color .4s var(--eva-lc-ease), border-color .4s var(--eva-lc-ease), box-shadow .4s var(--eva-lc-ease);
}
.eva-lc .eva-lc__card:hover,
.eva-lc .eva-lc__card:focus-within {
	background: var(--eva-lc-bg-hover);
	border-color: var(--eva-lc-border-hover);
	box-shadow: 0 12px 32px -6px rgba(14, 116, 54, .22);
	outline: none;
}
.eva-lc .eva-lc__card:focus-visible { box-shadow: 0 0 0 3px rgba(14, 116, 54, .35); }

.eva-lc .eva-lc__letter {
	position: absolute;
	top: 16cqw;
	left: 50%;
	font-size: 47.5cqw;
	line-height: 1;
	font-weight: 700;
	color: var(--eva-lc-letter);
	white-space: nowrap;
	transform-origin: 0 0;
	transform: translateX(-50%) scale(1);
	transition: top .45s var(--eva-lc-ease), left .45s var(--eva-lc-ease), transform .45s var(--eva-lc-ease);
}
.eva-lc .eva-lc__card:hover .eva-lc__letter,
.eva-lc .eva-lc__card:focus-within .eva-lc__letter {
	top: 6.5cqw;
	left: 7.3cqw;
	transform: translateX(0) scale(.705);
}

.eva-lc .eva-lc__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0 7.3cqw 17.7cqw;
	transition: padding .45s var(--eva-lc-ease);
}
.eva-lc .eva-lc__card:hover .eva-lc__body,
.eva-lc .eva-lc__card:focus-within .eva-lc__body { padding-bottom: 10cqw; }

.eva-lc .eva-lc__title {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: 100%;
	margin: 0;
	color: var(--eva-lc-ink);
	font-weight: 600;
	text-align: left;
	transition: left .45s var(--eva-lc-ease), transform .45s var(--eva-lc-ease);
}
.eva-lc .eva-lc__card:hover .eva-lc__title,
.eva-lc .eva-lc__card:focus-within .eva-lc__title {
	left: 0;
	transform: translateX(0);
}

.eva-lc .eva-lc__desc {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows .45s var(--eva-lc-ease), opacity .3s ease;
}
.eva-lc .eva-lc__desc > p { overflow: hidden; min-height: 0; margin: 0; font-size: clamp(13px, 3.9cqw, 18px); line-height: 1.55; }
.eva-lc .eva-lc__card:hover .eva-lc__desc,
.eva-lc .eva-lc__card:focus-within .eva-lc__desc {
	grid-template-rows: 1fr;
	opacity: 1;
	transition-delay: 0s, .1s;
}
.eva-lc .eva-lc__card:hover .eva-lc__desc > p,
.eva-lc .eva-lc__card:focus-within .eva-lc__desc > p { padding-top: 12px; }

@media (max-width: 1024px) {
	.eva-lc { grid-template-columns: 1fr; }
	.eva-lc .eva-lc__card {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 28px;
		background: var(--eva-lc-bg-hover);
		border-color: var(--eva-lc-border-hover);
	}
	.eva-lc .eva-lc__letter { position: static; transform: none; font-size: 72px; }
	.eva-lc .eva-lc__body { position: static; padding: 0; }
	.eva-lc .eva-lc__title { left: 0; transform: none; }
	.eva-lc .eva-lc__desc { grid-template-rows: 1fr; opacity: 1; }
	.eva-lc .eva-lc__desc > p { padding-top: 12px; }
	.eva-lc .eva-lc__card,
	.eva-lc .eva-lc__card:hover,
	.eva-lc .eva-lc__card:focus-within { background: var(--eva-lc-bg-hover); border-color: var(--eva-lc-border-hover); box-shadow: none; }
	.eva-lc .eva-lc__card:hover .eva-lc__letter,
	.eva-lc .eva-lc__card:focus-within .eva-lc__letter { transform: none; }
	.eva-lc .eva-lc__card:hover .eva-lc__body,
	.eva-lc .eva-lc__card:focus-within .eva-lc__body { padding: 0; }
	.eva-lc .eva-lc__card:hover .eva-lc__title,
	.eva-lc .eva-lc__card:focus-within .eva-lc__title { transform: none; }
	.eva-lc .eva-lc__card:hover .eva-lc__desc,
	.eva-lc .eva-lc__card:focus-within .eva-lc__desc { transition-delay: 0s; }
	.eva-lc .eva-lc__card:hover .eva-lc__desc > p,
	.eva-lc .eva-lc__card:focus-within .eva-lc__desc > p { padding-top: 12px; }
	.eva-lc *, .eva-lc .eva-lc__card { transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.eva-lc *, .eva-lc__card { transition: none !important; }
}