/* NeoYug Program Hub — shared upsell rail.
   One stylesheet for all three consumers (blog, masterclass, gift shop) so the
   rails are identical everywhere. Card proportions ported from the gift-shop
   "Take this further" card; the mentor line is the addition. */

.nyh-up {
	--nyh-cols: 5;
	--nyh-card-max: 220px;
	--nyh-container: 1240px;
	--nyh-pad: 24px;
	max-width: var(--nyh-container);
	margin: 0 auto;
	padding: 40px var(--nyh-pad) 64px;
	clear: both;
}
.nyh-up * { box-sizing: border-box; }

.nyh-up__divider { margin: 0 0 40px; }
.nyh-up__divider hr { border: none; height: 1px; background: rgba(38, 26, 72, 0.12); margin: 0; }

.nyh-up__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}
.nyh-up__headings { min-width: 0; }
.nyh-up__eyebrow {
	display: block;
	font-family: 'Lato', 'Poppins', sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #8D22C3;
}
.nyh-up__title {
	font-family: 'Poppins', sans-serif;
	font-size: 24px;
	font-weight: 700;
	color: #261A48;
	margin: 4px 0 0;
	padding: 0;
	border: 0;
	line-height: 1.2;
}
.nyh-up__lead {
	font-size: 15px;
	line-height: 1.55;
	color: #5b5470;
	margin: 8px 0 0;
	max-width: 56ch;
}
.nyh-up__viewall {
	font-size: 13px;
	color: #8D22C3;
	white-space: nowrap;
	text-decoration: none;
	transition: opacity 0.2s;
}
.nyh-up__viewall:hover { opacity: 0.7; }

.nyh-up__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 18px;
	max-width: calc(var(--nyh-cols) * var(--nyh-card-max) + (var(--nyh-cols) - 1) * 18px);
	margin: 0;
	padding: 0 0 8px;
}
@media (max-width: 1200px) { .nyh-up { --nyh-cols: 4; } }
@media (max-width: 980px)  { .nyh-up { --nyh-cols: 3; } }
@media (max-width: 700px)  { .nyh-up { --nyh-cols: 2; } }

/* ── Card ─────────────────────────────────────────────────────────────── */
.nyh-up-card {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 190px;
	width: auto;
	max-width: var(--nyh-card-max);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	border: 1.5px solid rgba(38, 26, 72, 0.12);
	box-shadow: 0 4px 18px rgba(20, 12, 40, 0.06);
	text-decoration: none;
	color: #261A48;
	transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.28s ease;
	transform-origin: center;
}
.nyh-up-card:hover {
	transform: translateY(-5px);
	z-index: 5;
	box-shadow: 0 16px 30px -16px rgba(20, 12, 40, 0.34);
}

.nyh-up-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.nyh-up-card__media--placeholder { background: linear-gradient(150deg, #261A48 0%, #442D80 60%, #8D22C3 100%); }
.nyh-up-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; border-radius: 0; }
.nyh-up-card__badge {
	position: absolute;
	left: 0;
	bottom: 12px;
	background: #8D22C3;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 9px;
	border-radius: 0 4px 4px 0;
}

.nyh-up-card__body { display: flex; flex-direction: column; flex: 1; padding: 11px 13px 13px; }
.nyh-up-card__title {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.25;
	min-height: calc(2 * 1.25em);
	color: #261A48;
	text-wrap: balance;
}
.nyh-up-card__meta {
	display: block;
	margin-top: 5px;
	font-size: 11.5px;
	line-height: 1.35;
	color: #6b6478;
}
.nyh-up-card__dot { opacity: 0.55; }

.nyh-up-card__foot { margin-top: auto; padding-top: 11px; display: flex; }
.nyh-up-card__btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #8D22C3;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 7px 12px;
	border-radius: 999px;
	white-space: nowrap;
	transition: background 0.2s ease;
}
.nyh-up-card:hover .nyh-up-card__btn { background: #7a1ba8; }

@media (max-width: 768px) {
	.nyh-up { padding: 28px 16px 48px; }
	.nyh-up__grid { gap: 14px; }
	.nyh-up-card { flex: 1 1 140px; width: auto; max-width: none; }
}