/**
 * VCourse Content & Layout Styles
 *
 * Page-level layout (main + sidebar), long-form article styling, comments,
 * widgets, search and 404. Split from components.css so archive-only pages
 * are not forced to parse single-post rules they never use.
 */

/* ===============================================================
 * Content layout (main + optional sidebar)
 * ============================================================= */

.vc-layout {
	display: grid;
	gap: var(--vc-space-8);
}

.vc-layout--sidebar {
	grid-template-columns: minmax(0, 1fr) 320px;
}

@media (max-width: 992px) {
	.vc-layout--sidebar { grid-template-columns: 1fr; }
}

.vc-layout__aside {
	align-self: start;
	/* Keeps the sidebar in view on long articles without a scroll listener. */
	position: sticky;
	top: 100px;
}

/* ===============================================================
 * Widgets
 * ============================================================= */

.vc-widget {
	background: var(--vc-white);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius-lg);
	padding: var(--vc-space-5);
	box-shadow: var(--vc-shadow-sm);
}

.vc-widget + .vc-widget { margin-top: var(--vc-space-5); }

.vc-widget__title {
	font-size: var(--vc-text-lg);
	margin-bottom: var(--vc-space-4);
	padding-bottom: var(--vc-space-3);
	border-bottom: 2px solid var(--vc-primary-soft);
}

.vc-widget ul li + li { margin-top: var(--vc-space-3); }
.vc-widget a { color: var(--vc-text); }
.vc-widget a:hover { color: var(--vc-primary); }

/* ===============================================================
 * Search form
 * ============================================================= */

.vc-search-form__group {
	display: flex;
	gap: var(--vc-space-2);
}

.vc-search-form__input { flex: 1; }
.vc-search-form__submit { flex-shrink: 0; padding-inline: var(--vc-space-5); }

.vc-search-page__form,
.vc-404__search {
	max-width: 560px;
	margin-inline: auto;
}

/* ===============================================================
 * Post meta
 * ============================================================= */

.vc-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vc-space-2) var(--vc-space-4);
}

/* Dot separators between meta items. */
.vc-post-meta > * + *::before {
	content: "\2022";
	margin-right: var(--vc-space-3);
	color: var(--vc-border-strong);
}

/* ===============================================================
 * Single post
 * ============================================================= */

.vc-single__meta {
	display: flex;
	justify-content: flex-start;
}

/* The page hero is a light card now, so the byline is dark text on it. */
.vc-single__meta .vc-post-meta { color: #4b5675; }
.vc-single__meta .vc-post-meta a { color: var(--vc-heading); }

.vc-single__feature {
	margin-top: var(--vc-space-5);
	position: relative;
	z-index: 2;
	border-radius: var(--vc-radius-xl);
	overflow: hidden;
	box-shadow: var(--vc-shadow-xl);
}

.vc-single__feature img { width: 100%; }

.vc-single__feature figcaption {
	padding: var(--vc-space-3) var(--vc-space-4);
	font-size: var(--vc-text-sm);
	color: var(--vc-text-muted);
	background: var(--vc-light);
	text-align: center;
}

.vc-single__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vc-space-2);
	margin-top: var(--vc-space-7);
	padding-top: var(--vc-space-5);
	border-top: 1px solid var(--vc-border);
}

.vc-author-box {
	flex-direction: row;
	gap: var(--vc-space-5);
	align-items: flex-start;
	margin-top: var(--vc-space-7);
	background: var(--vc-light);
}

.vc-author-box__avatar { border-radius: 50%; flex-shrink: 0; }

@media (max-width: 560px) {
	.vc-author-box { flex-direction: column; }
}

/* ===============================================================
 * Previous / next post navigation
 * ============================================================= */

.vc-post-nav {
	margin-top: var(--vc-space-7);
}

.vc-post-nav .nav-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--vc-space-4);
}

.vc-post-nav a {
	display: block;
	padding: var(--vc-space-5);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius-lg);
	background: var(--vc-white);
	transition: border-color var(--vc-duration) var(--vc-ease), box-shadow var(--vc-duration) var(--vc-ease);
}

.vc-post-nav a:hover {
	border-color: var(--vc-primary);
	box-shadow: var(--vc-shadow-md);
}

.vc-post-nav .nav-next { text-align: right; }

.vc-post-nav__label {
	display: block;
	font-size: var(--vc-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--vc-primary);
	margin-bottom: var(--vc-space-2);
}

.vc-post-nav__title {
	font-family: var(--vc-font-heading);
	font-weight: 600;
	color: var(--vc-heading);
}

/* ===============================================================
 * Card "read more" affordance
 * ============================================================= */

.vc-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--vc-space-2);
	font-weight: 600;
	font-size: var(--vc-text-sm);
	color: var(--vc-primary);
}

.vc-card__more svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
	transition: transform var(--vc-duration) var(--vc-ease);
}

.vc-card__more:hover svg { transform: translateX(4px); }

/* ===============================================================
 * Comments
 * ============================================================= */

.vc-comments {
	margin-top: var(--vc-space-9);
	padding-top: var(--vc-space-7);
	border-top: 1px solid var(--vc-border);
}

.vc-comments__title { margin-bottom: var(--vc-space-6); }

.vc-comments__list,
.vc-comments__list .children {
	list-style: none;
	padding: 0;
}

.vc-comments__list .children {
	margin-left: var(--vc-space-6);
	padding-left: var(--vc-space-5);
	border-left: 2px solid var(--vc-border);
}

.vc-comment { margin-bottom: var(--vc-space-5); }

.vc-comment__body {
	background: var(--vc-light);
	border-radius: var(--vc-radius-lg);
	padding: var(--vc-space-5);
}

.vc-comment__header {
	display: flex;
	align-items: center;
	gap: var(--vc-space-3);
	margin-bottom: var(--vc-space-3);
}

.vc-comment__avatar { border-radius: 50%; }
.vc-comment__author { display: block; font-weight: 600; color: var(--vc-heading); }
.vc-comment__date { font-size: var(--vc-text-sm); color: var(--vc-text-faint); }

.vc-comment__footer { margin-top: var(--vc-space-3); }

.vc-comment__reply a {
	font-size: var(--vc-text-sm);
	font-weight: 600;
}

/* ===============================================================
 * 404
 * ============================================================= */

.vc-404__code {
	font-family: var(--vc-font-heading);
	font-size: clamp(5rem, 18vw, 10rem);
	font-weight: 800;
	line-height: 1;
	margin-bottom: var(--vc-space-4);
}

.vc-404__recent { text-align: left; }

.vc-404__recent .vc-section-title {
	text-align: center;
	font-size: var(--vc-text-2xl);
	margin-bottom: var(--vc-space-6);
}

/* ===============================================================
 * No results
 * ============================================================= */

.vc-no-results {
	max-width: 680px;
	margin-inline: auto;
	display: block;
}

/* ===============================================================
 * wp_link_pages
 * ============================================================= */

.vc-page-links {
	display: flex;
	gap: var(--vc-space-2);
	align-items: center;
	margin-top: var(--vc-space-6);
	font-weight: 600;
}

.vc-page-links .page-numbers {
	display: grid;
	place-items: center;
	min-width: 36px;
	height: 36px;
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius-sm);
}

/* ===============================================================
 * Core block alignment support
 * ============================================================= */

.vc-prose .alignleft {
	float: left;
	margin: 0 var(--vc-space-5) var(--vc-space-4) 0;
	max-width: 50%;
}

.vc-prose .alignright {
	float: right;
	margin: 0 0 var(--vc-space-4) var(--vc-space-5);
	max-width: 50%;
}

.vc-prose .aligncenter {
	display: block;
	margin-inline: auto;
}

.vc-prose .alignwide { max-width: min(1140px, 100%); }
.vc-prose .alignfull { max-width: none; }

.vc-prose .wp-caption-text,
.vc-prose figcaption {
	font-size: var(--vc-text-sm);
	color: var(--vc-text-muted);
	text-align: center;
	margin-top: var(--vc-space-2);
}

/* Password-protected post form. */
.post-password-form input[type="submit"] {
	background: var(--vc-primary);
	color: var(--vc-white);
	border: none;
	border-radius: var(--vc-radius-sm);
	padding: 0.8rem 1.75rem;
	font-weight: 600;
	cursor: pointer;
}

/* ===============================================================
 * Front-end auth (login / register / password reset)
 * ============================================================= */

.vc-auth {
	display: flex;
	align-items: center;
	min-height: 50vh;
	padding-block: var(--vc-space-6);
}

.vc-auth__card {
	width: 100%;
	max-width: 480px;
	margin-inline: auto;
	background: var(--vc-white);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius-xl);
	box-shadow: var(--vc-shadow-lg);
	padding: var(--vc-space-6);
}

.vc-auth__title {
	font-size: var(--vc-text-xl);
	margin-bottom: 4px;
}

.vc-auth__subtitle {
	color: var(--vc-text-muted);
	font-size: var(--vc-text-sm);
	margin-bottom: var(--vc-space-5);
}

.vc-auth__form .vc-field { margin-bottom: var(--vc-space-3); }
.vc-auth__form .vc-input { padding: 0.65rem 0.9rem; font-size: var(--vc-text-sm); }
.vc-auth__form .vc-label { margin-bottom: 6px; font-size: 0.825rem; }
.vc-auth__form [type="submit"] { margin-top: var(--vc-space-1); }

.vc-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-space-3);
	margin-bottom: var(--vc-space-5);
	flex-wrap: wrap;
}

.vc-auth__link,
.vc-auth__alt a {
	font-weight: 600;
	font-size: var(--vc-text-sm);
}

.vc-auth__alt {
	margin-top: var(--vc-space-6);
	padding-top: var(--vc-space-5);
	border-top: 1px solid var(--vc-border);
	text-align: center;
	color: var(--vc-text-muted);
	font-size: var(--vc-text-sm);
}

/* "or" divider + Continue with Google button under the login/sign-up form. */
.vc-auth__divider {
	display: flex;
	align-items: center;
	gap: var(--vc-space-3);
	margin: var(--vc-space-5) 0 var(--vc-space-4);
	color: var(--vc-text-muted);
	font-size: var(--vc-text-sm);
}

.vc-auth__divider::before,
.vc-auth__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--vc-border);
}

.vc-google-btn {
	gap: var(--vc-space-3);
	color: var(--vc-heading);
	border-color: var(--vc-border);
	background: var(--vc-white);
}

.vc-google-btn:hover {
	background: var(--vc-surface-alt);
	color: var(--vc-heading);
	border-color: var(--vc-border-strong, var(--vc-border));
}

/* Built-in captcha question (contact, sign-up, login, lost password). */
.vc-captcha .vc-label strong { color: var(--vc-primary); font-size: 1.05em; }
.vc-captcha .vc-input { max-width: 140px; }

/* Honeypot: pushed far off-screen rather than display:none, which some bots
 * detect and skip. Real users never see or focus it. */
.vc-hp {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	height: 0;
	overflow: hidden;
}

@media (max-width: 480px) {
	.vc-auth__card { padding: var(--vc-space-6); }
}

/* ===============================================================
 * My Orders table
 * ============================================================= */

.vc-orders-table table {
	width: 100%;
	border-collapse: collapse;
	background: var(--vc-white);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius-lg);
	overflow: hidden;
}

.vc-orders-table th,
.vc-orders-table td {
	padding: var(--vc-space-4);
	text-align: left;
	border-bottom: 1px solid var(--vc-border);
}

.vc-orders-table thead th {
	background: var(--vc-light);
	font-size: var(--vc-text-sm);
	font-weight: 700;
	color: var(--vc-text-muted);
}

.vc-orders-table tbody tr:last-child td { border-bottom: none; }

/* Card layout on small screens. */
@media (max-width: 640px) {
	.vc-orders-table thead { display: none; }
	.vc-orders-table table, .vc-orders-table tbody, .vc-orders-table tr, .vc-orders-table td { display: block; width: 100%; }
	.vc-orders-table tr {
		border: 1px solid var(--vc-border);
		border-radius: var(--vc-radius-lg);
		margin-bottom: var(--vc-space-4);
	}
	.vc-orders-table td { border: none; display: flex; justify-content: space-between; gap: var(--vc-space-4); }
	.vc-orders-table td::before { content: attr(data-label); font-weight: 600; color: var(--vc-text-muted); }
}

/* ===============================================================
 * Invoice
 * ============================================================= */

.vc-invoice-actions {
	display: flex;
	justify-content: space-between;
	gap: var(--vc-space-3);
	margin-bottom: var(--vc-space-5);
	flex-wrap: wrap;
}

.vc-invoice {
	background: var(--vc-white);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius-lg);
	padding: var(--vc-space-8);
}

.vc-invoice__head {
	display: flex;
	justify-content: space-between;
	gap: var(--vc-space-5);
	flex-wrap: wrap;
	padding-bottom: var(--vc-space-5);
	border-bottom: 2px solid var(--vc-border);
}

.vc-invoice__title { font-size: var(--vc-text-3xl); margin: 0; }
.vc-invoice__number { color: var(--vc-text-muted); font-weight: 600; }
.vc-invoice__company { text-align: right; font-size: var(--vc-text-sm); line-height: 1.6; }

.vc-invoice__meta {
	display: flex;
	justify-content: space-between;
	gap: var(--vc-space-5);
	flex-wrap: wrap;
	margin: var(--vc-space-6) 0;
}

.vc-invoice__label {
	display: block;
	font-size: var(--vc-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--vc-text-faint);
	margin-top: var(--vc-space-3);
}

.vc-invoice__table { width: 100%; border-collapse: collapse; margin-top: var(--vc-space-4); }
.vc-invoice__table th, .vc-invoice__table td { padding: var(--vc-space-3) var(--vc-space-4); border-bottom: 1px solid var(--vc-border); }
.vc-invoice__table thead th { text-align: left; background: var(--vc-light); font-size: var(--vc-text-sm); }
.vc-invoice__num { text-align: right; }
.vc-invoice__table tfoot td { border-bottom: none; color: var(--vc-text-muted); }
.vc-invoice__total td { font-weight: 800; font-size: var(--vc-text-lg); color: var(--vc-heading); border-top: 2px solid var(--vc-border); }

.vc-invoice__foot {
	margin-top: var(--vc-space-6);
	padding-top: var(--vc-space-5);
	border-top: 1px solid var(--vc-border);
	color: var(--vc-text-muted);
	font-size: var(--vc-text-sm);
	text-align: center;
}

/* Print: show only the invoice. */
@media print {
	.vc-header, .vc-footer, .vc-topbar, .vc-mobile-cta, .vc-invoice-actions, .vc-breadcrumbs { display: none !important; }
	.vc-invoice { border: none; padding: 0; }
	body { background: #fff; }
}

/* ===============================================================
 * Profile
 * ============================================================= */

.vc-profile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--vc-space-6);
	align-items: start;
}

.vc-profile__avatar { text-align: center; margin-bottom: var(--vc-space-5); }
.vc-profile__avatar-img { border-radius: 50%; width: 120px; height: 120px; object-fit: cover; margin-inline: auto; }
.vc-profile__avatar-card { text-align: center; }
.vc-profile__avatar-card form { text-align: left; }

/* Password card spans full width on wide screens. */
@media (min-width: 640px) {
	.vc-profile__password { grid-column: 1 / -1; max-width: 520px; }
}

/* Verify-account page. */
.vc-verify__icon {
	width: 72px;
	height: 72px;
	margin: var(--vc-space-5) auto 0;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--vc-primary-soft);
}
.vc-verify__icon svg { width: 32px; height: 32px; fill: var(--vc-primary); }

.vc-otp-input {
	text-align: center;
	font-size: var(--vc-text-2xl);
	letter-spacing: 0.5em;
	font-weight: 700;
	padding-inline: var(--vc-space-4);
}

/* ===============================================================
 * Certificate
 * ============================================================= */

.vc-cert-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--vc-space-3);
	margin-bottom: var(--vc-space-5);
	flex-wrap: wrap;
}
.vc-cert-actions .vc-badge svg { width: 14px; height: 14px; fill: currentColor; vertical-align: middle; }

.vc-cert {
	background: var(--vc-white);
	border: 2px solid var(--vc-navy);
	border-radius: var(--vc-radius-lg);
	padding: 8px;
	box-shadow: var(--vc-shadow-lg);
}

.vc-cert__inner {
	border: 1px solid var(--vc-border-strong);
	border-radius: var(--vc-radius-md);
	padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
	text-align: center;
	background:
		radial-gradient(circle at 12% 12%, rgba(37,99,235,0.05), transparent 40%),
		radial-gradient(circle at 88% 88%, rgba(124,58,237,0.05), transparent 40%);
}

.vc-cert__seal {
	width: 64px; height: 64px;
	margin: 0 auto var(--vc-space-5);
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--vc-gradient-primary);
	color: #fff;
}
.vc-cert__seal svg { width: 32px; height: 32px; fill: var(--vc-green-light); }

.vc-cert__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.25em;
	font-weight: 700;
	font-size: var(--vc-text-sm);
	color: var(--vc-primary);
	margin-bottom: var(--vc-space-6);
}

.vc-cert__intro { color: var(--vc-text-muted); margin: var(--vc-space-3) 0; }

.vc-cert__name {
	font-family: var(--vc-font-heading);
	font-size: clamp(1.8rem, 5vw, 3rem);
	color: var(--vc-navy);
	border-bottom: 2px solid var(--vc-primary-soft);
	display: inline-block;
	padding-bottom: var(--vc-space-3);
	margin-bottom: var(--vc-space-2);
}

.vc-cert__course {
	font-size: clamp(1.2rem, 3vw, 1.75rem);
	color: var(--vc-heading);
	margin: var(--vc-space-3) 0 var(--vc-space-6);
}

.vc-cert__meta {
	display: flex;
	justify-content: center;
	gap: clamp(2rem, 8vw, 5rem);
	margin: var(--vc-space-6) 0;
	flex-wrap: wrap;
}
.vc-cert__label {
	display: block;
	font-size: var(--vc-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--vc-text-faint);
	margin-bottom: 2px;
}

.vc-cert__foot {
	margin-top: var(--vc-space-6);
	padding-top: var(--vc-space-5);
	border-top: 1px solid var(--vc-border);
	display: flex;
	justify-content: space-between;
	gap: var(--vc-space-4);
	flex-wrap: wrap;
	font-size: var(--vc-text-xs);
	color: var(--vc-text-faint);
}
.vc-cert__id { font-family: var(--vc-font-mono); font-weight: 700; color: var(--vc-text-muted); }

@media print {
	.vc-header, .vc-footer, .vc-topbar, .vc-mobile-cta, .vc-cert-actions, .vc-breadcrumbs { display: none !important; }
	.vc-cert { border-color: #1e2656; box-shadow: none; }
}

/* Custom forms. */
.vc-form { max-width: 640px; }
.vc-form__form .vc-field { margin-bottom: var(--vc-space-4); }
.vc-form__form button[type="submit"] { margin-top: var(--vc-space-2); }

/* ===============================================================
 * Courses archive (clean grid)
 * ============================================================= */

.vc-courses__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-space-4);
	flex-wrap: wrap;
	margin-bottom: var(--vc-space-6);
}

.vc-courses__bar .vc-course-filter { justify-content: flex-start; }

.vc-courses__count {
	font-size: var(--vc-text-sm);
	font-weight: 600;
	color: var(--vc-text-muted);
	white-space: nowrap;
}

.vc-courses__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--vc-space-5);
}

/* ===============================================================
 * Popular Courses — horizontal split cards
 * ============================================================= */

.vc-h4-courses__grid-v2 {
	display: grid;
	/* min(380px, 100%) instead of a bare 380px — otherwise this minimum
	 * forces the track (and the card inside it) wider than a narrow
	 * viewport's own container, silently clipping the card's right edge
	 * instead of wrapping to one column. */
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: var(--vc-space-5);
}

.vc-h4-course-v2 {
	display: grid;
	/* One column: the course image on top, always 16:9, and the text below it.
	 * The image never shares a row with the text, so how long the title or
	 * excerpt is can no longer squeeze, stretch or overlap it. Equal-height cards
	 * in a row keep their price row at the bottom (the excerpt grows). */
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	align-items: stretch;
	background: var(--vc-white);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius-xl);
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(14, 38, 75, 0.05);
	transition: box-shadow var(--vc-duration) var(--vc-ease), transform var(--vc-duration) var(--vc-ease);
}

.vc-h4-course-v2:hover { box-shadow: var(--vc-shadow-lg); transform: translateY(-4px); }

/* A fixed-ratio box with a real <img> + object-fit — same proven pattern as
 * .vc-ccard__media above, so the course's featured image always fills this
 * box cleanly instead of being read as a CSS background at whatever size the
 * row happened to stretch to (see the note on .vc-h4-course-v2 above). */
.vc-h4-course-v2__visual {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--vc-surface-alt);
}

/* Absolutely positioned, so the picture's own size (a 640px thumbnail or a 4000px
 * original) can never change the size of the box it sits in. */
.vc-h4-course-v2__visual img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--vc-duration-slow) var(--vc-ease-out);
}

.vc-h4-course-v2:hover .vc-h4-course-v2__visual img { transform: scale(1.05); }

/* A transparent cut-out of the instructor (1:1 mentorship card) sits on a soft backdrop instead of being cropped. */
.vc-h4-course-v2__visual--person { background: radial-gradient(90% 80% at 50% 100%, #c9dcff 0%, #e4edff 55%, #f4f8ff 100%); }
.vc-h4-course-v2__visual--person img { object-fit: contain; object-position: center bottom; inset: 8% 0 0 0; height: 92%; }

.vc-h4-course-v2__off {
	position: absolute;
	top: var(--vc-space-3);
	right: var(--vc-space-3);
	padding: 0.25rem 0.65rem;
	border-radius: var(--vc-radius-pill);
	background: var(--vc-cta);
	color: var(--vc-white);
	font-size: var(--vc-text-xs);
	font-weight: 800;
	letter-spacing: 0.02em;
}

.vc-h4-course-v2__body { padding: var(--vc-space-5); display: flex; flex-direction: column; }

.vc-h4-course-v2__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	font-size: 0.68rem;
	font-weight: 800;
	text-transform: uppercase;
	padding: 6px 11px;
	border-radius: var(--vc-radius-pill);
	color: var(--vc-white);
	margin-bottom: var(--vc-space-3);
}

.vc-h4-course-v2__badge svg { width: 12px; height: 12px; fill: currentColor; }
.vc-h4-course-v2__badge--green { background: linear-gradient(135deg, #23b879, #0c8f61); }
.vc-h4-course-v2__badge--purple { background: linear-gradient(135deg, #6757ff, #a969ff); }
.vc-h4-course-v2__badge--blue { background: linear-gradient(135deg, var(--vc-primary-light), var(--vc-primary-dark)); }

.vc-h4-course-v2__body h3 { font-size: var(--vc-text-xl); letter-spacing: -0.02em; color: var(--vc-heading); margin-bottom: var(--vc-space-2); }
.vc-h4-course-v2__body p { font-size: var(--vc-text-sm); color: var(--vc-text-muted); flex: 1; margin-bottom: var(--vc-space-4); }

.vc-h4-course-v2__rating {
	display: flex;
	align-items: center;
	gap: var(--vc-space-1);
	margin-bottom: var(--vc-space-3);
	font-size: var(--vc-text-sm);
}

.vc-h4-course-v2__meta {
	display: flex;
	gap: var(--vc-space-3);
	flex-wrap: wrap;
	font-size: 0.72rem;
	color: #54637b;
	font-weight: 750;
	padding: var(--vc-space-3) 0;
	border-top: 1px solid var(--vc-border);
	border-bottom: 1px solid var(--vc-border);
	margin-bottom: var(--vc-space-4);
}

.vc-h4-course-v2__meta span { display: inline-flex; gap: 6px; align-items: center; }
.vc-h4-course-v2__meta svg { width: 13px; height: 13px; fill: var(--vc-primary); }

.vc-h4-course-v2__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--vc-space-3); }
.vc-h4-course-v2__price { display: flex; align-items: baseline; gap: 8px; }
.vc-h4-course-v2__amount { font-size: var(--vc-text-xl); font-weight: 800; color: var(--vc-heading); }
.vc-h4-course-v2__amount--free { color: var(--vc-success); }
.vc-h4-course-v2__price del { color: var(--vc-text-faint); font-size: var(--vc-text-sm); }

/* --- Clean course card --- */
.vc-ccard {
	display: flex;
	flex-direction: column;
	background: var(--vc-white);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius-lg);
	overflow: hidden;
	transition: transform var(--vc-duration) var(--vc-ease), box-shadow var(--vc-duration) var(--vc-ease), border-color var(--vc-duration) var(--vc-ease);
}

.vc-ccard:hover {
	transform: translateY(-6px);
	box-shadow: var(--vc-shadow-lg);
	border-color: var(--vc-primary-border);
}

.vc-ccard__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--vc-surface-alt);
}

.vc-ccard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--vc-duration-slow) var(--vc-ease-out);
}

.vc-ccard:hover .vc-ccard__media img { transform: scale(1.05); }

.vc-ccard__level {
	position: absolute;
	top: var(--vc-space-3);
	left: var(--vc-space-3);
	padding: 0.25rem 0.7rem;
	border-radius: var(--vc-radius-pill);
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(4px);
	font-size: var(--vc-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--vc-primary);
}

.vc-ccard__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--vc-space-2);
	padding: var(--vc-space-4) var(--vc-space-4) var(--vc-space-5);
}

.vc-ccard__title {
	font-size: var(--vc-text-lg);
	font-weight: 700;
	line-height: var(--vc-leading-snug);
	margin: 0;
}

.vc-ccard__title a { color: var(--vc-heading); }
.vc-ccard__title a:hover { color: var(--vc-primary); }

.vc-ccard__rating {
	display: flex;
	align-items: center;
	gap: var(--vc-space-1);
	font-size: var(--vc-text-sm);
}

.vc-ccard__stars { display: inline-flex; gap: 1px; }
.vc-ccard__stars svg { width: 14px; height: 14px; fill: var(--vc-accent); }
.vc-ccard__rating-val { font-weight: 700; color: var(--vc-heading); }
.vc-ccard__rating-count { color: var(--vc-text-faint); }

.vc-ccard__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vc-space-2) var(--vc-space-4);
	font-size: var(--vc-text-sm);
	color: var(--vc-text-muted);
}

.vc-ccard__meta span { display: inline-flex; align-items: center; gap: 5px; }
.vc-ccard__meta svg { width: 14px; height: 14px; fill: currentColor; }

.vc-ccard__foot {
	margin-top: auto;
	padding-top: var(--vc-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--vc-space-3);
}

.vc-ccard__price {
	display: flex;
	align-items: baseline;
	gap: var(--vc-space-2);
}

.vc-ccard__amount {
	font-family: var(--vc-font-heading);
	font-size: var(--vc-text-xl);
	font-weight: 800;
	color: var(--vc-heading);
}

.vc-ccard__amount--free { color: var(--vc-green-dark); }

.vc-ccard__was {
	font-size: var(--vc-text-sm);
	color: var(--vc-text-faint);
}