/* Homepage-only styles (enqueued via is_front_page()).
   Uses theme.json color tokens throughout, not raw hex. */

/* ---------- Buttons (shortcode-rendered markup only; block buttons use
   theme.json's global button styles already) ---------- */
.mt-btn {
	display: inline-block;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: 0.9375rem;
	border-radius: 999px;
	padding: 14px 28px;
	text-decoration: none;
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.mt-btn--sm {
	padding: 10px 20px;
	font-size: 0.85rem;
}
.mt-btn--accent {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}
.mt-btn--accent:hover {
	background: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--contrast);
	transform: translateY(-2px);
}
.mt-btn--primary {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
.mt-btn--primary:hover {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
	transform: translateY(-2px);
}
.mt-link-arrow {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--wp--preset--color--primary);
}
.mt-link-arrow:hover {
	color: var(--wp--preset--color--accent-dark);
}
.mt-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	margin-right: 6px;
}
.mt-empty-note {
	text-align: center;
	color: var(--wp--preset--color--neutral);
}

/* ---------- Scroll reveal ---------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
[data-reveal].is-in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- Hero image/quote tile strip ---------- */
.mt-hero-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px;
	width: 100%;
	max-width: 1000px;
	margin: clamp(32px, 5vw, 60px) auto 0;
}
.mt-hero-tile {
	height: clamp(150px, 16vw, 210px);
	border-radius: 22px;
	background: var(--wp--preset--color--primary-dark);
	border: 1px solid rgba(255, 255, 255, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px;
	font: 500 11px/1.5 ui-monospace, Menlo, monospace;
	color: rgba(255, 255, 255, 0.75);
	letter-spacing: 0.05em;
}
.mt-guide-photo {
	display: block;
	width: 100%;
	height: clamp(360px, 40vw, 540px);
	object-fit: cover;
	border-radius: 28px;
}
.mt-erdc-logo-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}
.mt-erdc-logo-row {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.mt-erdc-logo {
	display: block;
	width: auto;
	border-radius: 8px;
}
.mt-erdc-logo--erdc {
	height: 96px;
}
.mt-hero-tile--accent {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	text-align: left;
	font: normal;
}
.mt-hero-tile--accent strong {
	font: 700 clamp(18px, 2vw, 26px)/1.2 var(--wp--preset--font-family--poppins);
}
.mt-hero-tile--accent span {
	font: 400 13px/1.6 var(--wp--preset--font-family--inter);
	opacity: 0.72;
}

/* ---------- Journey steps (connected vertical stepper) ---------- */
.mt-journey {
	background: #f5f8fa;
	border-radius: 28px;
	padding: clamp(28px, 3vw, 44px) clamp(22px, 3vw, 36px);
}
.mt-journey__label {
	font: 600 11px var(--wp--preset--font-family--inter);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--primary) 70%, transparent);
	margin-bottom: 22px;
}
.mt-journey__track {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding-left: 12px;
}
.mt-journey__track::before {
	content: "";
	position: absolute;
	top: 28px;
	bottom: 28px;
	left: 40px;
	width: 2px;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent);
	z-index: 0;
}
.mt-journey__step {
	position: relative;
	display: flex;
	align-items: center;
	z-index: 1;
}
.mt-journey__num {
	position: relative;
	flex: none;
	width: 56px;
	height: 56px;
	margin-right: -22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 18px var(--wp--preset--font-family--poppins);
	background: var(--wp--preset--color--base);
	border: 2px solid color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent);
	color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 6px #f5f8fa;
	z-index: 2;
}
.mt-journey__step--active .mt-journey__num {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}
.mt-journey__step--final .mt-journey__num {
	background: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
}
.mt-journey__card {
	flex: 1;
	background: var(--wp--preset--color--base);
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent);
	border-radius: 18px;
	padding: 22px 26px 22px 46px;
	transition: transform 0.25s ease;
}
.mt-journey__step:hover .mt-journey__card {
	transform: translateX(4px);
}
.mt-journey__step--active .mt-journey__card {
	background: var(--wp--preset--color--primary);
	border-color: transparent;
}
.mt-journey__step--final .mt-journey__card {
	background: var(--wp--preset--color--accent);
	border-color: transparent;
}
.mt-journey__title {
	font: 600 20px var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--contrast);
}
.mt-journey__step--active .mt-journey__title {
	color: var(--wp--preset--color--base);
}
.mt-journey__desc {
	font: 400 15px/1.55 var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--neutral);
	margin-top: 4px;
}
.mt-journey__step--active .mt-journey__desc {
	color: rgba(255, 255, 255, 0.8);
}
.mt-journey__step--final .mt-journey__title,
.mt-journey__step--final .mt-journey__desc {
	color: var(--wp--preset--color--contrast);
}
@media (max-width: 460px) {
	.mt-journey__track::before {
		left: 28px;
	}
	.mt-journey__num {
		width: 44px;
		height: 44px;
		font-size: 15px;
		margin-right: -16px;
	}
	.mt-journey__card {
		padding-left: 30px;
	}
}

/* ---------- Our Approach quote card ---------- */
.mt-quote-card {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--primary);
	border-radius: 24px;
	padding: clamp(36px, 4.5vw, 56px);
}
.mt-quote-card::before {
	content: "";
	position: absolute;
	top: -70px;
	right: -60px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
}
.mt-quote-card__dash {
	position: relative;
	z-index: 1;
	display: block;
	width: 46px;
	height: 4px;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
	margin-bottom: 24px;
}
.mt-quote-card__text {
	position: relative;
	z-index: 1;
	margin: 0 0 22px;
	font: 500 clamp(22px, 2.6vw, 32px) / 1.45 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--base);
}
.mt-quote-card__arabic {
	position: relative;
	z-index: 1;
	margin: 0 0 16px;
	direction: rtl;
	text-align: right;
	font: 500 clamp(22px, 2.8vw, 30px) / 1.9 "Traditional Arabic", "Scheherazade New", Tahoma, Arial, sans-serif;
	color: var(--wp--preset--color--accent);
}
.mt-quote-card__cite {
	position: relative;
	z-index: 1;
	margin: 0;
	font: 600 18px var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--accent);
	line-height: 1.6;
}
.mt-quote-card__ref {
	font: 400 13px var(--wp--preset--font-family--inter);
	color: rgba(255, 255, 255, 0.75);
}

/* ---------- Pricing / plans ---------- */
.mt-pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 24px;
	align-items: stretch;
}
.mt-pricing-card {
	position: relative;
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
	border-radius: 22px;
	padding: 30px 26px;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mt-pricing-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(11, 110, 110, 0.12);
}
.mt-pricing-card--featured {
	background: var(--wp--preset--color--primary);
	border-color: transparent;
	color: var(--wp--preset--color--base);
}
.mt-pricing-card__badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font: 700 11px var(--wp--preset--font-family--inter);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 7px 18px;
	white-space: nowrap;
}
.mt-pricing-card__label {
	font: 700 11px var(--wp--preset--font-family--inter);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin-bottom: 10px;
}
.mt-pricing-card--featured .mt-pricing-card__label {
	color: var(--wp--preset--color--accent);
}
.mt-pricing-card__title {
	margin: 0 0 16px;
	font: 700 22px var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--contrast);
}
.mt-pricing-card--featured .mt-pricing-card__title {
	color: var(--wp--preset--color--base);
}
.mt-pricing-card__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 16px;
}
.mt-pricing-card__amount {
	font: 800 28px var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--primary);
}
.mt-pricing-card--featured .mt-pricing-card__amount {
	color: var(--wp--preset--color--base);
}
.mt-pricing-card__period {
	font: 500 13px var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--neutral);
}
.mt-pricing-card--featured .mt-pricing-card__period {
	color: rgba(255, 255, 255, 0.7);
}
.mt-pricing-card__installment {
	margin: -8px 0 14px;
	font: 600 12.5px var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--accent-dark);
}
.mt-pricing-card__desc {
	margin: 0 0 20px;
	font: 400 14px/1.6 var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--neutral);
}
.mt-pricing-card--featured .mt-pricing-card__desc {
	color: rgba(255, 255, 255, 0.82);
}
.mt-pricing-card__list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
	padding-top: 18px;
	flex: 1;
}
.mt-pricing-card--featured .mt-pricing-card__list {
	border-top-color: rgba(255, 255, 255, 0.18);
}
.mt-pricing-card__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font: 400 14px var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--contrast);
}
.mt-pricing-card--featured .mt-pricing-card__list li {
	color: var(--wp--preset--color--base);
}
.mt-pricing-card__check {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
	color: var(--wp--preset--color--primary);
	font-size: 11px;
	font-weight: 700;
}
.mt-pricing-card--featured .mt-pricing-card__check {
	background: rgba(242, 190, 34, 0.2);
	color: var(--wp--preset--color--accent);
}
.mt-pricing-card__cta {
	display: block;
	text-align: center;
	border: 1.5px solid var(--wp--preset--color--primary);
	border-radius: 999px;
	padding: 13px 20px;
	font: 700 14px var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.mt-pricing-card__cta:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
.mt-pricing-card__cta--accent {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}
.mt-pricing-card__cta--accent:hover {
	background: var(--wp--preset--color--accent-dark);
	border-color: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--contrast);
}
.mt-pricing-note {
	margin: 28px 0 0;
	text-align: center;
	font: 400 13px var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--neutral);
}

/* ---------- Who We Help (quatrefoil badges) ---------- */
.mt-qf-grid {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 4px;
}
@media (max-width: 900px) {
	.mt-qf-grid {
		flex-wrap: wrap;
	}
}
.mt-qf {
	position: relative;
	width: clamp(230px, 24vw, 300px);
	flex: 0 1 300px;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mt-qf__shape {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: #f6efd8;
	filter: drop-shadow(0 8px 16px rgba(11, 110, 110, 0.1));
	transition: transform 0.3s ease;
}
.mt-qf:hover .mt-qf__shape {
	transform: scale(1.05);
}
.mt-qf--dark .mt-qf__shape {
	fill: var(--wp--preset--color--primary);
}
.mt-qf__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	padding: 0 34px;
}
.mt-qf__content h3 {
	margin: 0;
	font: 700 26px var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--contrast);
	transition: color 0.25s ease;
}
.mt-qf:hover .mt-qf__content h3 {
	color: var(--wp--preset--color--primary);
}
.mt-qf--dark .mt-qf__content h3 {
	color: var(--wp--preset--color--base);
}
.mt-qf--dark:hover .mt-qf__content h3 {
	color: var(--wp--preset--color--accent);
}
@media (max-width: 700px) {
	.mt-qf {
		width: clamp(220px, 60vw, 280px);
	}
}

/* ---------- What We Do (numbered service cards) ---------- */
.mt-service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}
.mt-service-card {
	background: var(--wp--preset--color--base);
	border-radius: 24px;
	padding: clamp(28px, 3vw, 38px);
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-shadow: 0 1px 2px rgba(11, 110, 110, 0.06);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mt-service-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(11, 110, 110, 0.13);
}
.mt-service-card__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 8px;
}
.mt-service-card__num {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font: 700 12.5px var(--wp--preset--font-family--poppins);
}
.mt-service-card__line {
	flex: 1;
	height: 1px;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent);
}
.mt-service-card h3 {
	margin: 0 0 4px;
	font: 700 22px var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--primary);
}
.mt-service-card p {
	margin: 0 0 8px;
	font: 400 15px/1.7 var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--neutral);
}
.mt-service-card .mt-link-arrow {
	margin-top: auto;
}

/* ---------- Who We Help ---------- */
.mt-help-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: 18px;
}
.mt-help-card {
	background: #f5f9f9;
	border-radius: 22px;
	padding: 30px 26px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: transform 0.3s;
}
.mt-help-card:hover {
	transform: translateY(-5px);
}
.mt-help-card--dark {
	background: var(--wp--preset--color--primary);
}
.mt-help-card__icon {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--wp--preset--color--accent);
}
.mt-help-card h3 {
	margin: 0;
	font: 600 19px var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--primary);
}
.mt-help-card--dark h3 {
	color: var(--wp--preset--color--base);
}
.mt-help-card p {
	margin: 0;
	font: 400 14px/1.65 var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--neutral);
}
.mt-help-card--dark p {
	color: rgba(255, 255, 255, 0.75);
}

/* ---------- Programs & Services tabs ---------- */
.mt-pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-bottom: 48px;
}
.mt-pill-row--left {
	justify-content: flex-start;
}
.mt-pill {
	cursor: pointer;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
	font: 600 14px var(--wp--preset--font-family--inter);
	border-radius: 999px;
	padding: 12px 26px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--neutral);
	text-decoration: none;
	transition: all 0.25s;
}
.mt-pill--active,
.mt-pill.is-active {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-color: transparent;
}

/* Filter-pill carousel: a plain wrapping row on desktop; on mobile the
   pills become a horizontally-scrollable strip with prev/next arrows,
   since a 2-3 row wrap of filter pills eats too much vertical space on a
   small screen. Shared by the Events and Resources filter bars (both load
   this stylesheet), scoped by [data-pill-track]/[data-pill-scroll] so it
   works wherever the .mt-resource-pills markup is reused. */
.mt-pill-carousel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.mt-pill-carousel__arrow {
	display: none;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	padding: 0;
}
.mt-pill-carousel__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}
@media (max-width: 599px) {
	.mt-pill-carousel__arrow {
		display: flex;
	}
	.mt-resource-pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 2px 1px 4px;
	}
	.mt-resource-pills::-webkit-scrollbar {
		display: none;
	}
	.mt-resource-pills .mt-pill {
		flex: none;
		scroll-snap-align: start;
	}
}
.mt-program-panel {
	display: none;
}
.mt-program-panel.is-active {
	display: grid;
}
.mt-program-list {
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	gap: 16px;
}
.mt-program-item {
	background: var(--wp--preset--color--base);
	border-radius: 18px;
	padding: 24px;
	display: flex;
	align-items: center;
	gap: 14px;
	transition: transform 0.25s, box-shadow 0.25s;
	font: 500 15.5px/1.45 var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--contrast);
}
.mt-program-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(11, 110, 110, 0.1);
}
.mt-program-item .mt-dot {
	flex: none;
}

/* ---------- Boys program tag pills ---------- */
.mt-tag-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.mt-tag {
	font: 500 13px var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--base);
	background: rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	padding: 9px 18px;
}
.mt-boys-list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 24px;
}
@media (max-width: 560px) {
	.mt-boys-list {
		grid-template-columns: 1fr;
	}
}
.mt-boys-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	font: 500 15.5px/1.4 var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--base);
}
.mt-boys-list__check {
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-size: 12px;
	font-weight: 700;
}

/* ---------- Why choose us (numbered cards) ---------- */
.mt-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 3vw, 44px);
}
@media (max-width: 900px) {
	.mt-feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.mt-feature-grid {
		grid-template-columns: 1fr;
	}
}
.mt-feature-item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-top: 2px solid var(--wp--preset--color--accent);
	padding-top: 20px;
}
.mt-feature-item h3 {
	margin: 0;
	font: 700 24px var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--contrast);
}
.mt-feature-item p {
	margin: 0;
	font: 400 16.5px/1.7 var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--neutral);
}

/* ---------- Decorative circles (hero / boys-program teal panels) ---------- */
.mt-decor-circles {
	position: relative;
	overflow: hidden;
}
.mt-decor-circles::before,
.mt-decor-circles::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.mt-decor-circles::before {
	top: -140px;
	right: -120px;
	width: 420px;
	height: 420px;
	background: rgba(255, 255, 255, 0.045);
}
.mt-decor-circles::after {
	bottom: -180px;
	left: -120px;
	width: 380px;
	height: 380px;
	border: 1px solid rgba(242, 190, 34, 0.22);
}

.mt-hero-lineart {
	position: absolute;
	bottom: 0;
	width: clamp(140px, 17vw, 260px);
	height: auto;
	opacity: 0.85;
	pointer-events: none;
	z-index: 0;
}
.mt-hero-lineart--right {
	right: clamp(10px, 4vw, 60px);
}
.mt-hero-lineart--left {
	left: clamp(10px, 4vw, 60px);
}
@media (max-width: 900px) {
	.mt-hero-lineart {
		width: 130px;
		opacity: 0.55;
	}
}
@media (max-width: 600px) {
	.mt-hero-lineart {
		display: none;
	}
}

/* ---------- Course cards (rendered by [mt_course_grid]) ---------- */
.mt-course-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 32px;
}
.mt-course-card {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
	border-radius: 24px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	box-shadow: 0 1px 3px rgba(11, 110, 110, 0.07);
	transition: transform 0.3s, box-shadow 0.3s;
}
.mt-course-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 46px rgba(11, 110, 110, 0.14);
}
.mt-course-card__thumb {
	height: 180px;
	background: #edf3f3;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.mt-course-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mt-course-card__thumb-placeholder {
	font: 500 11px/1.5 ui-monospace, Menlo, monospace;
	color: var(--wp--preset--color--primary);
	letter-spacing: 0.05em;
	text-align: center;
	padding: 0 16px;
}
.mt-course-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	font: 600 11px var(--wp--preset--font-family--inter);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--base);
	border-radius: 999px;
	padding: 6px 14px;
}
.mt-course-card__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}
.mt-course-card__title {
	margin: 0;
	font: 600 18px/1.35 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--contrast);
}
.mt-course-card__meta {
	display: flex;
	align-items: center;
	gap: 18px;
}
.mt-course-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 500 13px var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--neutral);
}
.mt-course-card__meta-item svg {
	flex: none;
	color: var(--wp--preset--color--neutral);
}
.mt-course-card__divider {
	height: 1px;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
	margin-top: auto;
}
.mt-course-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-top: 2px;
}
.mt-course-card__price-block {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.mt-course-card__price-label {
	font: 500 12px var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--neutral);
}
.mt-course-card__price {
	font: 800 22px var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--contrast);
}
.mt-course-card__price--free {
	color: var(--wp--preset--color--accent-dark);
}
.mt-course-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	white-space: nowrap;
}

/* ---------- Events ---------- */
.mt-events-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 22px;
}
.mt-event-card {
	background: var(--wp--preset--color--base);
	border-radius: 24px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s, box-shadow 0.3s;
}
.mt-event-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(11, 110, 110, 0.12);
}
.mt-event-card__thumb {
	height: 280px;
	background: #edf3f3;
	position: relative;
	overflow: hidden;
}
.mt-event-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mt-event-card__thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font: 500 11px ui-monospace, Menlo, monospace;
	color: var(--wp--preset--color--primary);
}
.mt-event-card__date {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--wp--preset--color--accent);
	border-radius: 12px;
	padding: 8px 14px;
	font: 600 12px var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--contrast);
}
.mt-event-card__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 11px;
	flex: 1;
}
.mt-event-card__type {
	font: 600 11px var(--wp--preset--font-family--inter);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.mt-event-card__title {
	margin: 0;
	font: 700 24px/1.3 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--contrast);
}
.mt-event-card__excerpt {
	margin: 0;
	font: 400 14px/1.65 var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--neutral);
}
.mt-event-card__location {
	display: flex;
	align-items: center;
	font: 500 13px var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--neutral);
	margin-top: auto;
	padding-top: 12px;
}
.mt-event-card__cta {
	align-self: flex-start;
	margin-top: auto;
}
.mt-events-empty {
	background: var(--wp--preset--color--base);
	border-radius: 28px;
	padding: clamp(44px, 6vw, 80px) 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}
.mt-events-empty__icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #f5f9f9;
	border: 1.5px dashed color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
}
.mt-events-empty h3 {
	margin: 0;
	font: 600 clamp(19px, 2vw, 25px) var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--contrast);
}
.mt-events-empty p {
	margin: 0;
	max-width: 46ch;
	font: 400 15px/1.7 var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--neutral);
}

/* ---------- Resources ---------- */
.mt-resources-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 22px;
}
.mt-resource-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	cursor: pointer;
	text-decoration: none;
}
.mt-resource-card__thumb {
	position: relative;
	height: 290px;
	border-radius: 22px;
	overflow: hidden;
	background: var(--wp--preset--color--primary);
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 10px, rgba(0, 0, 0, 0) 10px 20px);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 2px rgba(11, 110, 110, 0.08);
	transition: transform 0.3s, box-shadow 0.3s;
}
.mt-resource-card:hover .mt-resource-card__thumb {
	transform: translateY(-6px);
	box-shadow: 0 18px 38px rgba(11, 110, 110, 0.18);
}
.mt-resource-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
}
.mt-resource-card__play {
	position: relative;
	z-index: 1;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.25s ease;
}
.mt-resource-card:hover .mt-resource-card__play {
	transform: scale(1.08);
}
.mt-resource-card__play span {
	width: 0;
	height: 0;
	border-left: 16px solid var(--wp--preset--color--contrast);
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	margin-left: 5px;
}
.mt-resource-card__quote {
	position: relative;
	z-index: 1;
	font: 800 64px/1 Georgia, "Times New Roman", serif;
	color: rgba(255, 255, 255, 0.35);
}
.mt-resource-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.mt-resource-card__category {
	font: 700 11px var(--wp--preset--font-family--inter);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-dark);
}
.mt-resource-card__title {
	margin: 0;
	font: 700 24px/1.3 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--contrast);
	transition: color 0.2s ease;
}
.mt-resource-card:hover .mt-resource-card__title {
	color: var(--wp--preset--color--primary);
}