/* ==========================================================================
   "Discover more" section (Overview, Mission, Organizers, Timeline).
   Content lives in one synced pattern per language:
   Appearance > Editor > Patterns > "Explore more (EN)" / "Explore more (FA)".
   ========================================================================== */

.vp-explore {
	padding: 88px 40px;
}

/* Header: kicker + title, intro aligned to the title's baseline on desktop. */
.vp-explore-head {
	margin-block: 0 48px !important;
	gap: 16px 48px !important;
}

.vp-explore-kicker {
	margin: 0 0 8px !important;
	color: var(--wp--preset--color--green);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.vp-explore h2 {
	margin: 0 !important;
	color: var(--wp--preset--color--ink);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.25;
}

.vp-explore-intro {
	margin: 0 !important;
	color: var(--wp--preset--color--muted);
	font-size: 16px;
	line-height: 1.6;
}

/* Cards: the whole card is the link target, not just the small "Explore" text. */
.vp-explore-cards {
	gap: 24px !important;
	margin-block: 0 !important;
}

.vp-explore-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	padding: 32px;
	border-top: 2px solid var(--wp--preset--color--green);
	transition: box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.vp-explore-card:hover {
	box-shadow: 0 14px 32px rgb(23 34 29 / 0.08);
	transform: translateY(-2px);
}

.vp-explore-card:focus-within {
	outline: 2px solid var(--wp--preset--color--green);
	outline-offset: 2px;
}

.vp-explore-card h3 {
	margin: 0 0 10px !important;
	color: var(--wp--preset--color--ink);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.35;
}

.vp-explore-card p {
	margin: 0 !important;
	color: var(--wp--preset--color--muted);
	font-size: 15px;
	line-height: 1.6;
}

/* Link sits at the bottom so all three line up whatever the description length. */
.vp-explore-card .vp-explore-link {
	margin-top: auto !important;
	padding-top: 20px;
	color: var(--wp--preset--color--green);
	font-size: 15px;
	font-weight: 600;
}

.vp-explore-link a {
	color: inherit;
	text-decoration: none;
}

.vp-explore-link a:focus-visible {
	outline: none;
}

.vp-explore-link a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.vp-explore-link span {
	display: inline-block;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.vp-explore-card:hover .vp-explore-link span {
	transform: translateX(4px);
}

/* Persian: no caps tracking, heavier heading weights per the Persian scale, arrow moves left. */
html:lang(fa) body .vp-explore-kicker {
	font-size: 14px !important;
	font-weight: 600 !important;
}

html:lang(fa) body .vp-explore h2 {
	font-weight: 600;
	line-height: 1.55;
}

html:lang(fa) body .vp-explore-card h3 {
	font-weight: 600;
	line-height: 1.6;
}

html:lang(fa) body .vp-explore-card p:not(.vp-explore-link) {
	font-size: 15px !important;
	line-height: 1.9 !important;
}

html:lang(fa) .vp-explore-card:hover .vp-explore-link span {
	transform: translateX(-4px);
}

@media (prefers-reduced-motion: reduce) {
	.vp-explore-card,
	.vp-explore-link span {
		transition: none;
	}

	.vp-explore-card:hover {
		transform: none;
	}
}

@media (max-width: 768px) {
	.vp-explore.wp-block-group.alignfull {
		padding: 56px 20px !important;
	}

	.vp-explore-head {
		margin-block: 0 32px !important;
		gap: 12px !important;
	}

	.vp-explore-head > .wp-block-column {
		padding: 0 !important;
	}

	.vp-explore h2.wp-block-heading {
		font-size: 24px !important;
		margin-bottom: 0 !important;
	}

	.vp-explore-cards {
		gap: 16px !important;
	}

	.vp-explore-card {
		padding: 24px;
	}

	.vp-explore-card h3.wp-block-heading {
		font-size: 19px !important;
	}
}