/* =========================================================================
 * NeoYug Masterclasses — front-end styles
 * Scoped to .neoyug-masterclasses. Implements the finalised Variation A
 * (Magazine Grid + Editorial) wireframe tokens, dimensions, and layout.
 * ====================================================================== */

.neoyug-masterclasses {
	--neo-purple: #8D22C3;
	--neo-purple-deep: #261A48;
	--neo-purple-mid: #442D80;
	--neo-orange: #E96F46;
	--neo-teal: #16B8A6;
	--neo-ink: #15192C;
	--neo-dark: #333333;
	--neo-gray: #888888;
	--neo-gray-light: #bbbbbb;
	--neo-border: #DDDDDD;
	--neo-radius: 12px;
	--neo-shadow: 0 4px 74px rgba(0, 0, 0, 0.08);
	--neo-shadow-hover: 0 12px 26px 16px rgba(0, 0, 0, 0.3);
	--neo-hero-grad: linear-gradient(135deg, #261A48 0%, #442D80 60%, #E96F46 100%);
	--neo-peach: linear-gradient(180deg, #F7C6B5 0%, #FFEFEA 100%);
	--neo-font: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	--neo-display: 'Dosis', 'Poppins', sans-serif;
	--neo-pad-x: 120px;
	/* Top breathing room so the hero clears the site's fixed/sticky header
	 * (and the WP admin bar when logged in). Tune this one value if the
	 * header height changes. */
	--neo-hero-top: 148px;
	/* Catalogue-card width band (pre-2.6.9 sizing). The grid lays cards out
	 * between these widths and centres the row, so cards stay a consistent size
	 * instead of jumping a whole column. Nudge both to resize. */
	--neo-card-min: 200px;
	--neo-card-max: 220px;
	/* Catalogue + "Want to go deeper" column count. Pinned rather than
	 * auto-filled, so the row is always the same shape on desktop. Stepped
	 * down at the breakpoints below. */
	--neo-cols: 5;
	/* Phone (single-column) card width, as a % of the row. 85% = ~15% smaller
	 * than the old full-bleed card. Raise toward 100% for edge-to-edge. */
	--neo-card-phone-w: 85%;

	font-family: var(--neo-font);
	color: var(--neo-ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

.neoyug-masterclasses *,
.neoyug-masterclasses *::before,
.neoyug-masterclasses *::after {
	box-sizing: border-box;
}

.neoyug-masterclasses img {
	max-width: 100%;
	display: block;
}

/* ---------- Buttons ---------- */
.neoyug-masterclasses .neo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 26px;
	border-radius: 500px;
	font-family: var(--neo-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.neoyug-masterclasses .neo-btn:hover { transform: translateY(-1px); }

/* Defeat theme link-underline styles on every interactive anchor we render,
   in all interaction states. The cards, program tiles and hero thumbnails are
   themselves <a> elements, so a theme `a:hover { text-decoration: underline }`
   would otherwise underline the title and CTA text inside them on hover. */
.neoyug-masterclasses a.neo-btn,
.neoyug-masterclasses a.neo-btn:hover,
.neoyug-masterclasses a.neo-btn:focus,
.neoyug-masterclasses a.neo-btn:active,
.neoyug-masterclasses a.neo-btn:visited,
.neoyug-masterclasses a.neo-card,
.neoyug-masterclasses a.neo-card:hover,
.neoyug-masterclasses a.neo-card:focus,
.neoyug-masterclasses a.neo-card:active,
.neoyug-masterclasses a.neo-card:visited,
.neoyug-masterclasses a.neo-prog,
.neoyug-masterclasses a.neo-prog:hover,
.neoyug-masterclasses a.neo-prog:focus,
.neoyug-masterclasses a.neo-prog:active,
.neoyug-masterclasses a.neo-prog:visited,
.neoyug-masterclasses a.neo-hero__thumb,
.neoyug-masterclasses a.neo-hero__thumb:hover,
.neoyug-masterclasses a.neo-hero__thumb:focus,
.neoyug-masterclasses a.neo-hero__thumb:active,
.neoyug-masterclasses a.neo-hero__thumb:visited,
.neoyug-masterclasses .neo-card__cta,
.neoyug-masterclasses .neo-card__cta:hover,
.neoyug-masterclasses .neo-prog__cta,
.neoyug-masterclasses .neo-prog__cta:hover {
	text-decoration: none !important;
}
/* Belt-and-braces: no underline on any CTA / button, in any state, even if the
 * theme adds one on hover/focus. */
.neoyug-masterclasses .neo-btn,
.neoyug-masterclasses .neo-btn:hover,
.neoyug-masterclasses .neo-btn:focus,
.neoyug-masterclasses .neo-btn:active,
.neoyug-masterclasses [class*="__cta"],
.neoyug-masterclasses [class*="__cta"]:hover,
.neoyug-masterclasses [class*="__cta"]:focus,
.neoyug-masterclasses a.neo-card,
.neoyug-masterclasses a.neo-card:hover,
.neoyug-masterclasses a.neo-card:focus {
	text-decoration: none !important;
}
/* High-specificity override: the theme (Twenty Twenty / MasterStudy) underlines
 * links via an ID-scoped rule that out-ranks plain class selectors, so we match
 * its weight using the template's #neoyug-masterclasses-main wrapper. */
#neoyug-masterclasses-main a.neo-btn,
#neoyug-masterclasses-main a.neo-btn:hover,
#neoyug-masterclasses-main a.neo-btn:focus,
#neoyug-masterclasses-main a.neo-card,
#neoyug-masterclasses-main a.neo-card:hover,
#neoyug-masterclasses-main a.neo-card:focus,
#neoyug-masterclasses-main a.neo-prog,
#neoyug-masterclasses-main a.neo-prog:hover,
#neoyug-masterclasses-main a.neo-hero__cta,
#neoyug-masterclasses-main a.neo-hero__cta:hover,
#neoyug-masterclasses-main .neo-card__cta,
#neoyug-masterclasses-main .neo-prog__cta,
#neoyug-masterclasses-main .neo-shero__cta {
	text-decoration: none !important;
}
/* Category filter pills are <button>s, so they were not covered by the link/CTA
 * rules above; the theme still draws an underline on hover/focus. */
.neoyug-masterclasses .neo-pill,
.neoyug-masterclasses .neo-pill:hover,
.neoyug-masterclasses .neo-pill:focus,
.neoyug-masterclasses .neo-pill.is-active,
#neoyug-masterclasses-main .neo-pill,
#neoyug-masterclasses-main .neo-pill:hover,
#neoyug-masterclasses-main .neo-pill:focus,
#neoyug-masterclasses-main .neo-pill.is-active {
	text-decoration: none !important;
}
/* Catch-all: the plugin styles every interactive element as a button, card,
 * pill, or arrow, so none of them should ever carry a theme underline. This
 * covers the carousel arrows (.neo-hero__arrow) and anything added later, so
 * the underline issue does not resurface element by element. */
.neoyug-masterclasses a,
.neoyug-masterclasses button,
.neoyug-masterclasses a:hover,
.neoyug-masterclasses button:hover,
.neoyug-masterclasses a:focus,
.neoyug-masterclasses button:focus,
#neoyug-masterclasses-main a,
#neoyug-masterclasses-main button,
#neoyug-masterclasses-main a:hover,
#neoyug-masterclasses-main button:hover,
#neoyug-masterclasses-main a:focus,
#neoyug-masterclasses-main button:focus {
	text-decoration: none !important;
}
.neoyug-masterclasses .neo-btn--orange { background: var(--neo-orange); color: #fff; }
.neoyug-masterclasses .neo-btn--orange:hover { background: #d65e36; }
.neoyug-masterclasses .neo-btn--purple { background: var(--neo-purple); color: #fff; }
.neoyug-masterclasses .neo-btn--purple:hover { background: #7a1dab; }
.neoyug-masterclasses .neo-btn--ghost {
	background: transparent;
	color: var(--neo-purple);
	border-color: var(--neo-purple);
}
.neoyug-masterclasses .neo-btn--ghost:hover { background: var(--neo-purple); color: #fff; }

/* ---------- Headings ---------- */
.neoyug-masterclasses .neo-h2 {
	font-family: var(--neo-font);
	font-size: 28px;
	font-weight: 700;
	color: var(--neo-ink);
	text-align: center;
	margin: 0 0 8px;
	line-height: 1.2;
}
.neoyug-masterclasses .neo-h2--display {
	font-family: var(--neo-display);
	font-weight: 700;
}
.neoyug-masterclasses .neo-eyebrow {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--neo-purple);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 8px;
}

/* ---------- Badges (tag colours) ---------- */
.neoyug-masterclasses .neo-card__badge {
	display: inline-block;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 20px;
	line-height: 1.4;
}
.neoyug-masterclasses .neo-card__badge--orange { background: var(--neo-orange); }
.neoyug-masterclasses .neo-card__badge--purple { background: var(--neo-purple); }
.neoyug-masterclasses .neo-card__badge--teal { background: var(--neo-teal); }

/* ---------- Avatar + placeholders ---------- */
.neoyug-masterclasses .neo-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex-shrink: 0;
	background-size: cover;
	background-position: center;
	border: 2px solid rgba(255, 255, 255, 0.3);
}
.neoyug-masterclasses .neo-avatar--placeholder {
	background: linear-gradient(135deg, var(--neo-purple-mid), var(--neo-purple));
}
.neoyug-masterclasses .neo-card__img--placeholder,
.neoyug-masterclasses .neo-topic__img--placeholder {
	background: linear-gradient(150deg, var(--neo-purple-deep), var(--neo-purple-mid) 60%, var(--neo-purple));
}

/* =========================================================================
 * HERO CAROUSEL
 * ====================================================================== */
.neoyug-masterclasses .neo-hero {
	background: var(--neo-hero-grad);
	padding: var(--neo-hero-top) var(--neo-pad-x) 56px;
}
.neoyug-masterclasses .neo-hero__inner {
	display: flex;
	align-items: stretch;
	gap: 48px;
}
.neoyug-masterclasses .neo-hero__text {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	min-width: 0;
}
.neoyug-masterclasses .neo-hero__slide {
	display: none;
	flex-direction: column;
	gap: 12px;
}
.neoyug-masterclasses .neo-hero__slide.is-active {
	display: flex;
}
.neoyug-masterclasses .neo-hero__slide.is-active,
.neoyug-masterclasses .neo-hero__thumb.is-active { animation: neoFade 0.4s ease; }
@keyframes neoFade { from { opacity: 0; } to { opacity: 1; } }

.neoyug-masterclasses .neo-hero__title {
	font-family: var(--neo-font);
	font-size: 36px;
	font-weight: 700;
	color: #fff;
	line-height: 1.15;
	margin: 0;
	/* Always two lines, whatever the slide. A one-line title reserves the
	 * second line (min-height) and a long one is clamped to it, so the mentor,
	 * the CTA and the carousel nav sit at the same height on every slide
	 * instead of jumping as it rotates. Both values are in em, so the mobile
	 * font-size override below rescales them with no second breakpoint. */
	min-height: 2.3em; /* 2 x line-height */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.neoyug-masterclasses .neo-hero__mentor { display: flex; gap: 12px; align-items: center; }
.neoyug-masterclasses .neo-hero__mentor-name { display: block; color: #fff; font-size: 15px; font-weight: 700; }
.neoyug-masterclasses .neo-hero__mentor-cred { display: block; color: rgba(255, 255, 255, 0.55); font-size: 13px; }
.neoyug-masterclasses .neo-hero__cta { align-self: flex-start; margin-top: 8px; }
.neoyug-masterclasses .neo-hero__nocard { color: rgba(255, 255, 255, 0.5); font-size: 11px; }

.neoyug-masterclasses .neo-hero__nav { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
/* Bare chevrons — no circle / pill behind them. The 36px box stays for the tap
 * target, but it is fully transparent. */
.neoyug-masterclasses .neo-hero__arrow {
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s ease, transform 0.2s ease;
}
.neoyug-masterclasses .neo-hero__arrow:hover,
.neoyug-masterclasses .neo-hero__arrow:focus-visible { background: transparent; color: #fff; }
.neoyug-masterclasses .neo-hero__arrow[data-dir="prev"]:hover { transform: translateX(-2px); }
.neoyug-masterclasses .neo-hero__arrow[data-dir="next"]:hover { transform: translateX(2px); }
.neoyug-masterclasses .neo-hero__arrow-icon { display: block; pointer-events: none; }
.neoyug-masterclasses .neo-hero__dots { display: flex; gap: 8px; align-items: center; }
.neoyug-masterclasses .neo-hero__dot {
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.3);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: width 0.3s ease, background 0.3s ease;
}
.neoyug-masterclasses .neo-hero__dot.is-active { width: 28px; background: #fff; }
.neoyug-masterclasses .neo-hero__counter { color: rgba(255, 255, 255, 0.45); font-size: 12px; margin-left: 4px; }

.neoyug-masterclasses .neo-hero__media {
	width: 560px;
	aspect-ratio: 16 / 9;
	height: auto;
	flex-shrink: 0;
	border-radius: 16px;
	overflow: hidden;
	position: relative;
	background: var(--neo-hero-grad);
}
.neoyug-masterclasses .neo-hero__thumb[hidden] { display: none; }
.neoyug-masterclasses .neo-hero__thumb {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	overflow: hidden;
}
.neoyug-masterclasses .neo-hero__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(38, 26, 72, 0);
	transition: background 0.2s ease;
	z-index: 1;
}
.neoyug-masterclasses .neo-hero__thumb:hover::after,
.neoyug-masterclasses .neo-hero__thumb:focus-visible::after { background: rgba(38, 26, 72, 0.22); }
.neoyug-masterclasses .neo-hero__poster {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.neoyug-masterclasses .neo-hero__poster img,
.neoyug-masterclasses .neo-hero__poster .neo-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.neoyug-masterclasses .neo-hero__poster .neo-card__img--placeholder { display: block; width: 100%; height: 100%; }
.neoyug-masterclasses .neo-hero__thumb:hover .neo-hero__poster img,
.neoyug-masterclasses .neo-hero__thumb:hover .neo-hero__poster .neo-card__img { transform: scale(1.04); }

/* Shared play affordance — identical on the hero carousel and the single page. */
.neoyug-masterclasses .neo-thumb-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 76px;
	height: 76px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: transform 0.2s ease, background 0.2s ease;
}
.neoyug-masterclasses .neo-thumb-play::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 13px 0 13px 22px;
	border-color: transparent transparent transparent var(--neo-purple);
	margin-left: 5px;
}
.neoyug-masterclasses .neo-hero__thumb:hover .neo-thumb-play,
.neoyug-masterclasses .neo-thumb-play:hover,
.neoyug-masterclasses .neo-thumb-play:focus-visible { transform: translate(-50%, -50%) scale(1.08); background: #fff; }

/* =========================================================================
 * CATEGORY FILTER
 * ====================================================================== */
.neoyug-masterclasses .neo-filter {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding: 32px var(--neo-pad-x) 0;
}
.neoyug-masterclasses .neo-pill {
	padding: 8px 20px;
	border-radius: 40px;
	background: transparent;
	border: 1.5px solid var(--neo-border);
	color: var(--neo-ink);
	font-family: var(--neo-font);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.neoyug-masterclasses .neo-pill:hover { border-color: var(--neo-purple); color: var(--neo-purple); }
.neoyug-masterclasses .neo-pill.is-active { background: var(--neo-purple); color: #fff; border-color: var(--neo-purple); }

/* =========================================================================
 * CARD GRID
 * ====================================================================== */
.neoyug-masterclasses .neo-grid-wrap { padding: 24px var(--neo-pad-x) 8px; }
.neoyug-masterclasses .neo-grid {
	display: grid;
	grid-template-columns: repeat(var(--neo-cols), minmax(0, 1fr));
	justify-content: center;
	gap: 18px;
	/* Cap the row so cards never exceed --neo-card-max; centre it. */
	max-width: calc(var(--neo-cols) * var(--neo-card-max) + (var(--neo-cols) - 1) * 18px);
	margin-inline: auto;
}
/* Column count steps down; card width flexes between the steps. */
@media (max-width: 1200px) { .neoyug-masterclasses { --neo-cols: 4; } }
@media (max-width: 980px)  { .neoyug-masterclasses { --neo-cols: 3; } }
@media (max-width: 700px)  { .neoyug-masterclasses { --neo-cols: 2; } }
.neoyug-masterclasses .neo-card-slot.is-overflow,
.neoyug-masterclasses .neo-card-slot.is-hidden { display: none; }
.neoyug-masterclasses .neo-grid.is-expanded .neo-card-slot.is-overflow:not(.is-hidden) { display: block; }
/* Phone: keep the original single card per row, but ~15% smaller (centered). */
@media (max-width: 480px) {
	.neoyug-masterclasses .neo-grid { grid-template-columns: 1fr; justify-items: center; }
	.neoyug-masterclasses .neo-grid .neo-card-slot { width: var(--neo-card-phone-w); }
}
.neoyug-masterclasses .neo-grid__more { display: flex; justify-content: center; padding: 16px 0 40px; }
.neoyug-masterclasses .neo-empty { grid-column: 1 / -1; text-align: center; color: var(--neo-gray); padding: 40px 0; }

/* ---------- NeoYug 4:5 full-bleed card ---------- */
.neoyug-masterclasses .neo-card {
	position: relative;
	display: flex;
	flex-direction: column;
	container-type: inline-size;
	border-radius: 16px;
	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: var(--neo-purple-deep);
	isolation: isolate;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.neoyug-masterclasses .neo-card:hover { transform: translateY(-6px); box-shadow: 0 16px 30px -16px rgba(20, 12, 40, 0.34); }
.neoyug-masterclasses .neo-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.neoyug-masterclasses .neo-card__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center;
	background-size: cover;
	transition: transform 0.5s ease;
}
.neoyug-masterclasses .neo-card:hover .neo-card__bg { transform: scale(1.06); }
/* Deterministic dark brand gradients when a card has no thumbnail. */
.neoyug-masterclasses .neo-card__bg--ph0 { background: linear-gradient(150deg, #261A48, #442D80 55%, #8D22C3); }
.neoyug-masterclasses .neo-card__bg--ph1 { background: linear-gradient(150deg, #1d1336, #442D80 55%, #E96F46); }
.neoyug-masterclasses .neo-card__bg--ph2 { background: linear-gradient(150deg, #261A48, #5a2d8a 50%, #A93FDD); }
.neoyug-masterclasses .neo-card__bg--ph3 { background: linear-gradient(150deg, #2a1840, #442D80 60%, #16B8A6); }

.neoyug-masterclasses .neo-card__shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(11, 8, 24, 0.30) 0%, rgba(11, 8, 24, 0) 42%);
}

/* Top row: category pill (left) + optional status badge (right). */
.neoyug-masterclasses .neo-card__top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 6px;
	padding: 4.5cqi;
}
.neoyug-masterclasses .neo-card__cat {
	font-family: var(--neo-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: clamp(9px, 3.2cqi, 12px);
	line-height: 1;
	color: #fff;
	background: rgba(13, 9, 28, 0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	padding: 1.8cqi 3.4cqi;
	border-radius: 40px;
}
.neoyug-masterclasses .neo-card__top .neo-card__badge {
	margin-left: auto;
	font-family: var(--neo-display);
	font-weight: 700;
	letter-spacing: 0.04em;
	font-size: clamp(9px, 3.2cqi, 12px);
	padding: 1.6cqi 3.2cqi;
	border-radius: 9px;
}

/* ---------- Polished overlay (variant D) ---------- */
/* Warm brand glow, top-right, that lifts the flat dark gradients. */
.neoyug-masterclasses .neo-card__glow {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(circle at 72% 16%, rgba(233, 111, 70, 0.32) 0%, rgba(233, 111, 70, 0) 46%);
	pointer-events: none;
}

/* White text panel below the media. */
.neoyug-masterclasses .neo-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 11px 13px 13px;
}

/* Mentor line (name · duration) as plain text — no avatar chip. */
.neoyug-masterclasses .neo-card__mentor {
	color: var(--neo-purple-deep);
	opacity: 0.62;
	font-size: 12px;
	line-height: 1.4;
	margin-top: 8px;
	height: 1.5em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.neoyug-masterclasses .neo-card__title {
	color: var(--neo-purple-deep);
	font-family: var(--neo-font);
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.3;
	height: calc(2 * 1.3em);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-wrap: balance;
}

/* Labelled purple CTA pill, bottom-left. */
.neoyug-masterclasses .neo-card__foot { margin-top: auto; padding-top: 11px; display: flex; }
.neoyug-masterclasses .neo-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--neo-purple);
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	transition: background 0.2s ease;
}
.neoyug-masterclasses .neo-card__cta-arrow {
	font-size: 1.15em;
	line-height: 0;
	transition: transform 0.2s ease;
}
.neoyug-masterclasses .neo-card:hover .neo-card__cta { background: var(--neo-purple-mid); }
.neoyug-masterclasses .neo-card:hover .neo-card__cta-arrow { transform: translateX(2px); }
/* Visible keyboard focus ring (the global :focus-visible adds the outline). */
.neoyug-masterclasses .neo-card:focus-visible { outline: 3px solid var(--neo-purple); outline-offset: 3px; }

/* =========================================================================
 * BROWSE BY TOPIC
 * ====================================================================== */
.neoyug-masterclasses .neo-topics { padding: 32px var(--neo-pad-x); }
.neoyug-masterclasses .neo-topics__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 24px;
}
.neoyug-masterclasses .neo-topic {
	border: 1.5px solid #e3e3e3;
	border-radius: var(--neo-radius);
	overflow: hidden;
	background: #fafafa;
	cursor: pointer;
	padding: 0;
	text-align: center;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.neoyug-masterclasses .neo-topic:hover { transform: translateY(-2px); box-shadow: var(--neo-shadow); }
.neoyug-masterclasses .neo-topic__img { display: block; width: 100%; height: 100px; background-size: cover; background-position: center; }
.neoyug-masterclasses .neo-topic__body { display: block; padding: 12px 16px; }
.neoyug-masterclasses .neo-topic__name { display: block; font-size: 16px; font-weight: 700; color: var(--neo-ink); }
.neoyug-masterclasses .neo-topic__count { display: block; font-size: 12px; color: var(--neo-gray); margin-top: 2px; }

/* =========================================================================
 * UPGRADE PATH
 * ====================================================================== */
.neoyug-masterclasses .neo-upgrade {
	background: var(--neo-peach);
	padding: 48px var(--neo-pad-x);
	text-align: left;
}
.neoyug-masterclasses .neo-upgrade__sub {
	font-size: 16px;
	color: var(--neo-gray);
	max-width: 600px;
	margin: 8px 0 0;
	line-height: 1.5;
}
.neoyug-masterclasses .neo-upgrade__cards {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	justify-content: flex-start;
	max-width: calc(var(--neo-cols) * var(--neo-card-max) + (var(--neo-cols) - 1) * 18px);
	margin: 30px 0 0;
	padding: 30px 4px 38px;
}
.neoyug-masterclasses .neo-upgrade__cards::-webkit-scrollbar { display: none; }
.neoyug-masterclasses .neo-prog {
	position: relative;
	flex: 1 1 190px;
	width: auto;
	max-width: var(--neo-card-max);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-align: left;
	text-decoration: none;
	background: #fff;
	border: 1.5px solid rgba(38, 26, 72, 0.12);
	color: var(--neo-purple-deep);
	box-shadow: 0 4px 18px rgba(20, 12, 40, 0.06);
	transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.28s ease;
	transform-origin: center;
}
.neoyug-masterclasses .neo-prog:hover {
	transform: translateY(-5px);
	z-index: 5;
	box-shadow: 0 16px 30px -16px rgba(20, 12, 40, 0.34);
}
.neoyug-masterclasses .neo-prog__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}
.neoyug-masterclasses .neo-prog__media--placeholder {
	background-image: linear-gradient(150deg, var(--neo-purple-deep), var(--neo-purple-mid) 60%, var(--neo-purple));
}
.neoyug-masterclasses .neo-prog__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 11px 13px 13px;
}
.neoyug-masterclasses .neo-prog__name {
	font-family: var(--neo-font);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--neo-purple-deep);
	line-height: 1.25;
	height: calc(2 * 1.25em);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-wrap: balance;
}
.neoyug-masterclasses .neo-prog__foot { margin-top: auto; padding-top: 11px; display: flex; }
.neoyug-masterclasses .neo-prog__cta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--neo-purple);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	transition: background 0.2s ease;
}
.neoyug-masterclasses .neo-prog:hover .neo-prog__cta { background: var(--neo-purple-mid); }
.neoyug-masterclasses .neo-prog__cta-sep { opacity: 0.65; }
.neoyug-masterclasses .neo-prog__cta-price { white-space: nowrap; }

/* =========================================================================
 * SINGLE — SPLIT HERO
 * ====================================================================== */
.neoyug-masterclasses.neo-single { background: #fff; }
.neoyug-masterclasses .neo-shero {
	display: flex;
	align-items: stretch;
	gap: 40px;
	padding: var(--neo-hero-top) 40px 48px;
	min-height: 520px;
	background: linear-gradient(135deg, var(--neo-purple-deep) 0%, var(--neo-purple-mid) 55%, var(--neo-purple) 100%);
}
.neoyug-masterclasses .neo-shero__photo {
	flex: 1 1 0;
	align-self: center;
	aspect-ratio: 16 / 9;
	position: relative;
	min-height: 0;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28);
}
.neoyug-masterclasses .neo-shero__photo .neo-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.neoyug-masterclasses .neo-shero__photo .neo-card__img--placeholder { display: block; }
.neoyug-masterclasses .neo-shero__namecard {
	position: absolute;
	bottom: 24px;
	left: 24px;
	background: rgba(38, 26, 72, 0.85);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-radius: 12px;
	padding: 12px 20px;
}
.neoyug-masterclasses .neo-shero__mentor { display: block; color: #fff; font-size: 20px; font-weight: 700; }
.neoyug-masterclasses .neo-shero__cred { display: block; color: #ccc; font-size: 13px; }
.neoyug-masterclasses .neo-shero__content {
	flex: 1 1 0;
	padding: 24px 56px 24px 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
}
.neoyug-masterclasses .neo-shero__badges { display: flex; gap: 8px; align-items: center; }
.neoyug-masterclasses .neo-shero__free-pill {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 20px;
}
.neoyug-masterclasses .neo-shero__duration { font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.neoyug-masterclasses .neo-shero__title { font-size: 36px; font-weight: 700; line-height: 1.2; margin: 0; color: #fff; }
.neoyug-masterclasses .neo-shero__desc { font-size: 16px; color: rgba(255, 255, 255, 0.75); line-height: 1.6; margin: 0; }
/* Prose variant: multi-paragraph body copy from the Description field. The
 * hero column is a flex stack with its own 16px gap, so paragraphs space
 * themselves inside the block and the block sits flush with its neighbours. */
.neoyug-masterclasses .neo-shero__desc--prose > p { margin: 0 0 12px; }
.neoyug-masterclasses .neo-shero__desc--prose > p:last-child { margin-bottom: 0; }
.neoyug-masterclasses .neo-shero__desc--prose a { color: #fff; text-decoration: underline; }
.neoyug-masterclasses .neo-shero__desc--prose strong { color: #fff; }
.neoyug-masterclasses .neo-shero__bullets { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.neoyug-masterclasses .neo-shero__bullets li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: rgba(255, 255, 255, 0.92); }
.neoyug-masterclasses .neo-check {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;
}
.neoyug-masterclasses .neo-shero__cta { align-self: flex-start; margin-top: 8px; box-shadow: 0 20px 28px rgba(0, 0, 0, 0.2); }
.neoyug-masterclasses .neo-shero__micro { font-size: 12px; color: rgba(255, 255, 255, 0.55); }

/* =========================================================================
 * SINGLE — LEAD-GATE MODAL
 * Mirrors the Gift Shop gate: a high-z-index overlay (so it sits above the WP
 * admin bar, sticky theme header, and floating chat widgets) with a native
 * country-code phone picker — no external intl-tel-input dependency.
 * ====================================================================== */
body.neo-modal-lock { overflow: hidden; }

.neoyug-masterclasses .neo-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(38, 26, 72, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 2147483000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.neoyug-masterclasses .neo-modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.neoyug-masterclasses .neo-modal {
	width: 480px;
	max-width: 100%;
	background: #fff;
	border-radius: 20px;
	padding: 40px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
	position: relative;
	text-align: center;
	transform: translateY(20px);
	transition: transform 0.3s ease;
}
.neoyug-masterclasses .neo-modal-overlay.is-open .neo-modal { transform: translateY(0); }
.neoyug-masterclasses .neo-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	background: var(--neo-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: var(--neo-gray);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.neoyug-masterclasses .neo-modal__close:hover { background: var(--neo-gray); color: #fff; }
.neoyug-masterclasses .neo-modal__icon {
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: rgba(141, 34, 195, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: var(--neo-purple);
}
.neoyug-masterclasses .neo-modal__eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--neo-purple);
}

.neoyug-masterclasses .neo-gate__heading { font-size: 24px; font-weight: 700; margin: 8px 0 0; color: var(--neo-ink); }
.neoyug-masterclasses .neo-gate__sub { font-size: 14px; color: var(--neo-gray); margin: 8px 0 0; }
.neoyug-masterclasses .neo-gate__form { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; text-align: left; }

/* Inputs */
.neoyug-masterclasses .neo-input {
	width: 100%;
	height: 48px;
	border-radius: 40px;
	background: #f5f5f5;
	border: 1.5px solid var(--neo-border);
	padding: 0 20px;
	font-family: var(--neo-font);
	font-size: 14px;
	color: var(--neo-ink);
	outline: none;
	transition: border-color 0.2s ease;
}
.neoyug-masterclasses .neo-input::placeholder { color: var(--neo-gray); }
.neoyug-masterclasses .neo-input:focus { border-color: var(--neo-purple); }

/* Native country-code phone input */
.neoyug-masterclasses .neo-phone { display: flex; width: 100%; }
.neoyug-masterclasses .neo-phone__code {
	height: 48px;
	flex-shrink: 0;
	border-radius: 40px 0 0 40px;
	background: #f5f5f5;
	border: 1.5px solid var(--neo-border);
	border-right: none;
	padding: 0 14px;
	font-family: var(--neo-font);
	font-size: 14px;
	color: var(--neo-ink);
	cursor: pointer;
	outline: none;
}
.neoyug-masterclasses .neo-phone__number {
	flex: 1;
	min-width: 0;
	height: 48px;
	border-radius: 0 40px 40px 0;
	background: #f5f5f5;
	border: 1.5px solid var(--neo-border);
	padding: 0 20px;
	font-family: var(--neo-font);
	font-size: 14px;
	color: var(--neo-ink);
	outline: none;
	transition: border-color 0.2s ease;
}
.neoyug-masterclasses .neo-phone__number::placeholder { color: var(--neo-gray); }
.neoyug-masterclasses .neo-phone__number:focus { border-color: var(--neo-purple); }

.neoyug-masterclasses .neo-gate__submit { margin-top: 6px; width: 100%; }
.neoyug-masterclasses .neo-gate__submit[disabled] { opacity: 0.6; pointer-events: none; }
.neoyug-masterclasses .neo-gate__error { display: block; color: var(--neo-orange); font-size: 13px; text-align: center; margin: 4px 0 0; }
.neoyug-masterclasses .neo-gate__privacy { font-size: 11px; color: var(--neo-gray-light); text-align: center; margin: 14px 0 0; }

/* =========================================================================
 * SINGLE — PLAYER
 * ====================================================================== */
.neoyug-masterclasses .neo-player {
	padding: 40px var(--neo-pad-x) 56px;
	background: var(--neo-purple-deep);
	animation: neoFade 0.5s ease;
}
/* Logged-in (already unlocked) visitors: hide every gate trigger so the modal
 * never appears — the player is rendered open below the hero. */
.neoyug-masterclasses.neo-single--unlocked [data-neo-gate-open] { display: none !important; }
.neoyug-masterclasses .neo-player__frame {
	position: relative;
	max-width: 1040px;
	margin: 0 auto;
	/* --neo-poster is set inline by single_player() from the masterclass's
	 * landscape hero/carousel image. It sits behind the embed so the frame shows
	 * the masterclass instead of a black box while the video loads. Falls back to
	 * plain black when the var is absent (no image, or the locked poster screen,
	 * which is deliberately image-free). */
	background: #000 var(--neo-poster, none) center / cover no-repeat;
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.neoyug-masterclasses .neo-player__frame iframe,
.neoyug-masterclasses .neo-player__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
/* Transparent, not black: the video element's own background would otherwise
 * hide the poster above until the first frame decodes — the exact gap the
 * poster exists to fill. The frame behind it is already black. */
.neoyug-masterclasses .neo-player__frame video { object-fit: contain; background: transparent; }
/* Once playback starts the poster has done its job. Dropping it stops it
 * showing in the letterbox bars of a video that isn't a perfect 16:9. */
.neoyug-masterclasses .neo-player__frame.is-playing { background-image: none; }
.neoyug-masterclasses .neo-player__empty { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; color: #fff; padding: 24px; text-align: center; }
.neoyug-masterclasses .neo-player__admin-hint { display: block; max-width: 520px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.66); }
.neoyug-masterclasses .neo-player__admin-hint a { color: #fff; text-decoration: underline; }

/* Branded play button overlaid on the resolved player (injected by single.js). */
.neoyug-masterclasses .neo-player__frame .neo-player__playbtn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 4;
	width: 84px;
	height: 84px;
	border: 0;
	border-radius: 50%;
	background: var(--neo-purple);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
	transition: transform 0.2s ease, background 0.2s ease;
}
.neoyug-masterclasses .neo-player__frame .neo-player__playbtn::before {
	content: "";
	border-style: solid;
	border-width: 13px 0 13px 22px;
	border-color: transparent transparent transparent #fff;
	margin-left: 5px;
}
.neoyug-masterclasses .neo-player__frame .neo-player__playbtn:hover { transform: translate(-50%, -50%) scale(1.06); filter: brightness(1.12); }
.neoyug-masterclasses .neo-player__frame.is-playing .neo-player__playbtn { display: none; }

/* Locked player: always-visible dark "video ready" screen (no thumbnail image),
 * just a play button and copy. The real embed is injected by single.js only
 * after the lead gate is cleared, then this poster is removed. */
.neoyug-masterclasses .neo-player__poster {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px;
	text-align: center;
	cursor: pointer;
	background:
		radial-gradient(circle at 50% 40%, rgba(141, 34, 195, 0.30) 0%, rgba(141, 34, 195, 0) 58%),
		linear-gradient(160deg, #261a48 0%, #0c0a16 100%);
}
.neoyug-masterclasses .neo-player__play { position: relative; top: auto; left: auto; transform: none; margin-bottom: 4px; }
.neoyug-masterclasses .neo-player__poster:hover .neo-player__play,
.neoyug-masterclasses .neo-player__play:hover,
.neoyug-masterclasses .neo-player__play:focus-visible { transform: scale(1.08); background: #fff; }
.neoyug-masterclasses .neo-player__poster-eyebrow {
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.neoyug-masterclasses .neo-player__poster-note {
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	font-weight: 500;
	max-width: 360px;
}

/* =========================================================================
 * SINGLE — TESTIMONIALS
 * ====================================================================== */
.neoyug-masterclasses .neo-tests {
	background: var(--neo-peach);
	padding: 40px var(--neo-pad-x);
	display: flex;
	gap: 32px;
	justify-content: center;
}
.neoyug-masterclasses .neo-test {
	flex: 1;
	background: #fff;
	border-radius: 16px;
	box-shadow: var(--neo-shadow);
	padding: 24px;
}
.neoyug-masterclasses .neo-test__head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.neoyug-masterclasses .neo-test__head .neo-avatar { width: 40px; height: 40px; border: none; }
.neoyug-masterclasses .neo-test__name { display: block; font-size: 14px; font-weight: 700; color: var(--neo-ink); }
.neoyug-masterclasses .neo-test__org { display: block; font-size: 11px; color: var(--neo-gray); }
.neoyug-masterclasses .neo-test__quote { font-size: 14px; color: var(--neo-gray); font-style: italic; line-height: 1.5; margin: 0; }

/* =========================================================================
 * SINGLE — MENTOR DEEP DIVE
 * ====================================================================== */
.neoyug-masterclasses .neo-mentor {
	background: linear-gradient(180deg, #f8f5ff 0%, #fff 100%);
	padding: 56px var(--neo-pad-x);
	display: flex;
	gap: 56px;
	align-items: center;
}
.neoyug-masterclasses .neo-mentor__photo {
	width: 280px;
	aspect-ratio: 3 / 4;
	border-radius: 20px;
	overflow: hidden;
	flex-shrink: 0;
	position: relative;
}
.neoyug-masterclasses .neo-mentor__photo .neo-card__img { width: 100%; height: 100%; object-fit: cover; }
.neoyug-masterclasses .neo-mentor__photo .neo-card__img--placeholder { display: block; width: 100%; height: 100%; }
.neoyug-masterclasses .neo-mentor__body { flex: 1; }
.neoyug-masterclasses .neo-mentor__name { font-size: 28px; font-weight: 700; margin: 0 0 4px; color: var(--neo-ink); }
.neoyug-masterclasses .neo-mentor__cred { font-size: 15px; color: var(--neo-gray); margin: 0 0 16px; }
.neoyug-masterclasses .neo-mentor__bio { font-size: 15px; color: var(--neo-gray); line-height: 1.7; margin: 0; }
.neoyug-masterclasses .neo-mentor__stats { display: flex; gap: 32px; margin-top: 24px; flex-wrap: wrap; }
.neoyug-masterclasses .neo-mentor__actions { display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.neoyug-masterclasses .neo-stat { text-align: center; }
.neoyug-masterclasses .neo-stat__value { display: block; font-size: 24px; font-weight: 700; color: var(--neo-purple); }
.neoyug-masterclasses .neo-stat__label { display: block; font-size: 12px; color: var(--neo-gray); }

/* =========================================================================
 * SINGLE — RELATED ROW
 * ====================================================================== */
.neoyug-masterclasses .neo-related { padding: 40px var(--neo-pad-x); }
.neoyug-masterclasses .neo-related__h { text-align: left; }
.neoyug-masterclasses .neo-related__row { display: flex; gap: 20px; margin-top: 20px; }
.neoyug-masterclasses .neo-related__row .neo-card-slot { flex: 0 0 220px; width: 220px; }
.neoyug-masterclasses .neo-related__row .neo-card { height: auto; }

/* Solo card (shortcode) */
.neoyug-masterclasses .neo-card-slot--solo { max-width: 220px; }
.neoyug-masterclasses .neo-card-slot--solo .neo-card { height: auto; }

/* =========================================================================
 * RESPONSIVE — tablet
 * ====================================================================== */
@media (max-width: 1100px) {
	.neoyug-masterclasses { --neo-pad-x: 40px; --neo-hero-top: 112px; }
	.neoyug-masterclasses .neo-topics__grid { grid-template-columns: repeat(3, 1fr); }
	.neoyug-masterclasses .neo-hero__media { width: 420px; aspect-ratio: 16 / 9; height: auto; }
}

/* =========================================================================
 * RESPONSIVE — mobile
 * ====================================================================== */
@media (max-width: 760px) {
	.neoyug-masterclasses { --neo-pad-x: 20px; --neo-hero-top: 124px; }

	/* Hero stacks, thumbnail first */
	.neoyug-masterclasses .neo-hero { padding: var(--neo-hero-top) 20px 20px; }
	.neoyug-masterclasses .neo-hero__inner { flex-direction: column; gap: 16px; }
	.neoyug-masterclasses .neo-hero__media { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 14px; order: -1; }
	.neoyug-masterclasses .neo-hero__title { font-size: 22px; }
	.neoyug-masterclasses .neo-hero__cta { width: 100%; }
	.neoyug-masterclasses .neo-hero__nav { justify-content: center; }

	/* Filter scrolls horizontally */
	.neoyug-masterclasses .neo-filter {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding: 20px 20px 0;
	}
	.neoyug-masterclasses .neo-filter::-webkit-scrollbar { display: none; }
	.neoyug-masterclasses .neo-pill { padding: 6px 14px; font-size: 13px; }

	/* Grid: 2 columns, 240px tall cards */
	.neoyug-masterclasses .neo-grid-wrap { padding: 16px 20px; }

	/* Mobile shows first 4 before "Show All" */
	.neoyug-masterclasses .neo-grid .neo-card-slot:nth-child(n+5) { display: none; }
	.neoyug-masterclasses .neo-grid.is-expanded .neo-card-slot:nth-child(n+5):not(.is-hidden) { display: block; }

	/* Topics: 2 columns */
	.neoyug-masterclasses .neo-topics { padding: 24px 20px; }
	.neoyug-masterclasses .neo-topics__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.neoyug-masterclasses .neo-topic__img { height: 80px; }

	/* Upgrade: stacked */
	.neoyug-masterclasses .neo-upgrade { padding: 40px 16px; }
	.neoyug-masterclasses .neo-upgrade__cards { gap: 14px; margin-top: 22px; padding: 24px 0 32px; }
	.neoyug-masterclasses .neo-prog { flex: 1 1 140px; width: auto; max-width: none; }

	/* Single hero stacks */
	.neoyug-masterclasses .neo-shero { flex-direction: column; min-height: 0; gap: 16px; padding: var(--neo-hero-top) 16px 20px; }
	.neoyug-masterclasses .neo-shero__photo { width: 100%; flex: 0 0 auto; min-height: 0; aspect-ratio: 16 / 9; height: auto; border-radius: 18px; }
	.neoyug-masterclasses .neo-shero__content { width: 100%; padding: 8px 8px 16px; }
	.neoyug-masterclasses .neo-shero__title { font-size: 24px; }
	.neoyug-masterclasses .neo-shero__cta { width: 100%; }

	/* Gate: peach full-width section */
	.neoyug-masterclasses .neo-modal-overlay { align-items: flex-end; padding: 0; }
	.neoyug-masterclasses .neo-modal {
		width: 100%;
		max-width: 100%;
		border-radius: 20px 20px 0 0;
		padding: 32px 20px 36px;
	}

	/* Player edge-to-edge on phones (full width, no side padding) */
	.neoyug-masterclasses .neo-player { padding: 16px 0; }
	.neoyug-masterclasses .neo-player__frame { border-radius: 0; max-width: none; }
	.neoyug-masterclasses .neo-player__frame .neo-player__playbtn { width: 64px; height: 64px; }
	.neoyug-masterclasses .neo-player__frame .neo-player__playbtn::before { border-width: 10px 0 10px 17px; margin-left: 4px; }

	/* Testimonials + mentor stack */
	.neoyug-masterclasses .neo-tests { flex-direction: column; padding: 32px 20px; }
	.neoyug-masterclasses .neo-mentor { flex-direction: column; padding: 32px 20px; gap: 20px; }
	.neoyug-masterclasses .neo-mentor__photo { width: 100%; max-width: 280px; aspect-ratio: 3 / 4; height: auto; margin: 0 auto; }

	/* Related: horizontal scroll, 2 visible */
	.neoyug-masterclasses .neo-related { padding: 24px 20px; }
	.neoyug-masterclasses .neo-related__row {
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.neoyug-masterclasses .neo-related__row::-webkit-scrollbar { display: none; }
	.neoyug-masterclasses .neo-related__row .neo-card-slot { flex: 0 0 45%; width: 45%; }
}

/* =========================================================================
 * ACCESSIBILITY
 * ====================================================================== */
.neoyug-masterclasses a:focus-visible,
.neoyug-masterclasses button:focus-visible,
.neoyug-masterclasses input:focus-visible {
	outline: 2px solid var(--neo-purple);
	outline-offset: 2px;
}
.neoyug-masterclasses .neo-hero a:focus-visible,
.neoyug-masterclasses .neo-hero button:focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.neoyug-masterclasses *,
	.neoyug-masterclasses *::before,
	.neoyug-masterclasses *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}