/* ==========================================================================
   VBL — page specific styles
   course landing · lesson player · dashboard · auth · checkout · blog
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Course landing
   -------------------------------------------------------------------------- */

.vbl-course-hero { padding-block: var(--vbl-gap-6) var(--vbl-gap-7); }

.vbl-course-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: var(--vbl-gap-6);
	align-items: start;
}

@media (max-width: 1024px) { .vbl-course-hero__grid { grid-template-columns: 1fr; } }

.vbl-course-hero__title { margin-bottom: 12px; }
.vbl-course-hero__sub { font-size: 1.02rem; color: var(--vbl-text-soft); margin-bottom: 20px; }

.vbl-course-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	font-size: .86rem;
	color: var(--vbl-text-muted);
	margin-bottom: 22px;
}

.vbl-course-meta__item { display: inline-flex; align-items: center; gap: 6px; }
.vbl-course-meta strong { color: var(--vbl-text); font-weight: 600; }

.vbl-course-trailer {
	border-radius: var(--vbl-r-lg);
	overflow: hidden;
	border: 1px solid var(--vbl-border);
	background: var(--vbl-surface);
	aspect-ratio: 16 / 9;
	position: relative;
}

.vbl-course-trailer img { width: 100%; height: 100%; object-fit: cover; }

.vbl-course-trailer iframe,
.vbl-course-trailer video { width: 100%; height: 100%; border: 0; display: block; }

.vbl-course-trailer__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, rgba(3, 8, 18, .1), rgba(3, 8, 18, .55));
	cursor: pointer;
	border: 0;
	width: 100%;
	color: #fff;
}

.vbl-play-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: var(--vbl-r-full);
	background: var(--vbl-accent);
	color: var(--vbl-accent-ink);
	box-shadow: 0 10px 30px -10px rgba(3, 8, 18, .8);
	transition: transform var(--vbl-base);
}

.vbl-course-trailer__play:hover .vbl-play-badge { transform: scale(1.07); }

/* purchase card */
.vbl-buy-card { position: sticky; top: calc(var(--vbl-header-h) + 20px); }

.vbl-buy-card__media { border-radius: var(--vbl-r-lg) var(--vbl-r-lg) 0 0; overflow: hidden; background: var(--vbl-surface-3); }
.vbl-buy-card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/*
 * The price is the decision point on this page, so it gets its own panel
 * rather than sitting as one more line of text in the card.
 */
.vbl-buy-card__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
	padding: 16px 18px;
	border-radius: var(--vbl-r-md);
	background: linear-gradient(180deg, var(--vbl-accent-soft), transparent), var(--vbl-surface-2);
	border: 1px solid var(--vbl-accent-line);
}

.vbl-buy-card__price .vbl-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.vbl-buy-card__price .vbl-price__now {
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--vbl-text);
	line-height: 1.25;
	/* Persian digits and the currency word must not split across lines */
	white-space: nowrap;
}

.vbl-buy-card__price .vbl-price__was { font-size: .92rem; }
.vbl-buy-card__price .vbl-price--free .vbl-price__now { color: var(--vbl-accent); }

.vbl-buy-card__save { font-size: .84rem; margin-bottom: 16px; }

.vbl-buy-card__includes { list-style: none; padding: 0; margin: var(--vbl-gap-5) 0 0; }
.vbl-buy-card__includes li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .89rem;
	color: var(--vbl-text-soft);
	padding: 8px 0;
	border-bottom: 1px dashed var(--vbl-border);
	margin: 0;
}
.vbl-buy-card__includes li:last-child { border-bottom: 0; }
.vbl-buy-card__includes .vbl-icon { color: var(--vbl-accent); flex: none; }

/* outcomes / requirements lists */
.vbl-check-list { list-style: none; padding: 0; margin: 0; }
.vbl-check-list li {
	position: relative;
	padding-inline-start: 30px;
	margin-bottom: 13px;
	font-size: .94rem;
	color: var(--vbl-text-soft);
}

.vbl-check-list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 7px;
	width: 18px;
	height: 18px;
	border-radius: var(--vbl-r-full);
	background: var(--vbl-accent-soft);
	border: 1px solid var(--vbl-accent-line);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2312a862' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

[data-theme="dark"] .vbl-check-list li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233ddb8d' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E"); }

/* instructor */
.vbl-instructor { display: flex; gap: 18px; align-items: flex-start; }
.vbl-instructor__avatar {
	width: 76px; height: 76px; border-radius: var(--vbl-r-full); overflow: hidden; flex: none;
	background: var(--vbl-accent-soft); color: var(--vbl-accent);
	display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800;
	border: 2px solid var(--vbl-accent-line);
}
.vbl-instructor__avatar img { width: 100%; height: 100%; object-fit: cover; }
.vbl-instructor__name { margin: 0 0 3px; font-size: 1.05rem; }
.vbl-instructor__role { font-size: .84rem; color: var(--vbl-muted, var(--vbl-text-muted)); color: var(--vbl-text-muted); }
.vbl-instructor__bio { font-size: .9rem; color: var(--vbl-text-muted); margin: 10px 0 0; }

/* tabs */
.vbl-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--vbl-border); margin-bottom: var(--vbl-gap-5); overflow-x: auto; }

.vbl-tab {
	padding: 12px 17px;
	border: 0;
	background: none;
	color: var(--vbl-text-muted);
	font-family: inherit;
	font-size: .92rem;
	font-weight: 600;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
	transition: color var(--vbl-fast), border-color var(--vbl-fast);
}

.vbl-tab:hover { color: var(--vbl-text); }
.vbl-tab[aria-selected="true"] { color: var(--vbl-accent); border-bottom-color: var(--vbl-accent); }
.vbl-tabpanel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   2. Lesson player
   -------------------------------------------------------------------------- */

.vbl-player-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 372px;
	gap: var(--vbl-gap-5);
	align-items: start;
	padding-block: var(--vbl-gap-5) var(--vbl-gap-7);
}

@media (max-width: 1080px) { .vbl-player-layout { grid-template-columns: 1fr; } }

.vbl-player { border-radius: var(--vbl-r-lg); overflow: hidden; border: 1px solid var(--vbl-border); background: #05080f; }
.vbl-player iframe, .vbl-player video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #05080f; }

.vbl-player__lock {
	aspect-ratio: 16 / 9;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	padding: 30px;
	background: var(--vbl-surface-2);
}

.vbl-player__lock h2 { margin: 0; font-size: 1.15rem; }
.vbl-player__lock p { margin: 0; color: var(--vbl-text-muted); font-size: .9rem; max-width: 46ch; }

.vbl-lesson-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.vbl-lesson-head h1 { font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); margin: 0; }
.vbl-lesson-head__course { font-size: .84rem; color: var(--vbl-text-muted); margin-bottom: 6px; display: block; }

.vbl-player-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: var(--vbl-gap-4);
	padding-top: var(--vbl-gap-4);
	border-top: 1px solid var(--vbl-border);
}

.vbl-complete-btn.is-done { --btn-bg: var(--vbl-accent-soft); --btn-ink: var(--vbl-accent); --btn-line: var(--vbl-accent-line); }

/* lesson sidebar */
.vbl-lesson-side { position: sticky; top: calc(var(--vbl-header-h) + 20px); }

.vbl-side-head { padding: var(--vbl-gap-4) var(--vbl-gap-4) 0; }
.vbl-side-head h2 { font-size: .96rem; margin-bottom: 12px; }
.vbl-side-head .vbl-progress { margin-bottom: 6px; }
.vbl-side-head__meta { display: flex; justify-content: space-between; font-size: .8rem; color: var(--vbl-text-muted); margin-bottom: 14px; }

.vbl-side-list { max-height: min(62vh, 620px); overflow-y: auto; padding: 6px; }

.vbl-side-sect { margin-bottom: 4px; }

.vbl-side-sect__head {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 11px 12px;
	background: none;
	border: 0;
	color: var(--vbl-text);
	font-family: inherit;
	font-size: .87rem;
	font-weight: 700;
	text-align: right;
	cursor: pointer;
	border-radius: var(--vbl-r-sm);
}

.vbl-side-sect__head:hover { background: var(--vbl-surface-2); }
.vbl-side-sect__head .vbl-icon { color: var(--vbl-text-muted); margin-inline-start: auto; transition: transform var(--vbl-base); }
.vbl-side-sect.is-open .vbl-side-sect__head .vbl-icon { transform: rotate(180deg); }
.vbl-side-sect__list[hidden] { display: none; }

.vbl-side-lesson {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--vbl-r-sm);
	font-size: .86rem;
	color: var(--vbl-text-soft);
	transition: background var(--vbl-fast);
}

.vbl-side-lesson:hover { background: var(--vbl-surface-2); color: var(--vbl-text); }
.vbl-side-lesson.is-current { background: var(--vbl-accent-soft); color: var(--vbl-accent); font-weight: 600; }
.vbl-side-lesson.is-current .vbl-icon { color: var(--vbl-accent); }
.vbl-side-lesson__title { flex: 1; }
.vbl-side-lesson__dur { font-size: .76rem; color: var(--vbl-text-muted); direction: ltr; }
.vbl-side-lesson .vbl-icon { flex: none; }
.vbl-side-lesson.is-locked { color: var(--vbl-text-muted); }
.vbl-side-lesson.is-done .vbl-side-lesson__title { color: var(--vbl-text-muted); }

/* --------------------------------------------------------------------------
   3. Dashboard
   -------------------------------------------------------------------------- */

.vbl-dash { padding-block: var(--vbl-gap-6) var(--vbl-gap-8); }

.vbl-dash__layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--vbl-gap-5); align-items: start; }

/*
 * A grid item's automatic minimum is its min-content width, so the tab list —
 * whose labels do not wrap — sized the whole column to about 830px on a phone
 * and dragged the stats and course cards out with it. That also pushed the
 * layout viewport past every mobile breakpoint, so none of them applied.
 */
.vbl-dash__layout > * { min-width: 0; }

@media (max-width: 900px) { .vbl-dash__layout { grid-template-columns: 1fr; } }

.vbl-dash__nav { position: sticky; top: calc(var(--vbl-header-h) + 20px); }

.vbl-dash__user { display: flex; align-items: center; gap: 12px; padding: var(--vbl-gap-4); border-bottom: 1px solid var(--vbl-border); }
.vbl-dash__user .vbl-avatar { width: 44px; height: 44px; font-size: 1rem; }
.vbl-dash__user strong { display: block; font-size: .93rem; }
.vbl-dash__user span { font-size: .78rem; color: var(--vbl-text-muted); }

.vbl-dash__menu { list-style: none; padding: 8px; margin: 0; }
.vbl-dash__menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 13px;
	border-radius: var(--vbl-r-sm);
	color: var(--vbl-text-soft);
	font-size: .9rem;
	font-weight: 500;
}

.vbl-dash__menu a:hover { background: var(--vbl-surface-2); color: var(--vbl-text); }
.vbl-dash__menu .is-active a { background: var(--vbl-accent-soft); color: var(--vbl-accent); font-weight: 600; }

.vbl-dash__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--vbl-gap-4); margin-bottom: var(--vbl-gap-5); }

.vbl-dash__stat { padding: var(--vbl-gap-4) var(--vbl-gap-5); }
.vbl-dash__stat strong { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.vbl-dash__stat span { font-size: .82rem; color: var(--vbl-text-muted); }

.vbl-dash__title { font-size: 1.15rem; margin-bottom: var(--vbl-gap-4); }

.vbl-my-course { display: flex; gap: 16px; padding: var(--vbl-gap-4); align-items: center; }

.vbl-my-course__thumb {
	width: 118px; height: 74px; border-radius: var(--vbl-r-sm); overflow: hidden; flex: none;
	background: var(--vbl-surface-3);
}

.vbl-my-course__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vbl-my-course__body { flex: 1; min-width: 0; }
.vbl-my-course__title { font-size: .96rem; font-weight: 600; margin: 0 0 5px; }
.vbl-my-course__title a { color: var(--vbl-text); }
.vbl-my-course__title a:hover { color: var(--vbl-accent); }
.vbl-my-course__meta { font-size: .8rem; color: var(--vbl-text-muted); margin-bottom: 9px; }

@media (max-width: 620px) {
	.vbl-my-course { flex-direction: column; align-items: stretch; }
	.vbl-my-course__thumb { width: 100%; height: 160px; }
}

.vbl-order-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--vbl-border);
	flex-wrap: wrap;
}

.vbl-order-row:last-child { border-bottom: 0; }
.vbl-order-row__key { font-family: var(--vbl-font-mono); font-size: .78rem; color: var(--vbl-text-muted); direction: ltr; }

/* --------------------------------------------------------------------------
   4. Auth
   -------------------------------------------------------------------------- */

.vbl-auth { padding-block: clamp(36px, 6vw, 74px); }

.vbl-auth__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 60px); align-items: center; }

@media (max-width: 900px) { .vbl-auth__wrap { grid-template-columns: 1fr; } }

.vbl-auth__pitch h1 { margin-bottom: 14px; }
.vbl-auth__pitch .vbl-check-list li { margin-bottom: 11px; }

.vbl-auth__card { padding: clamp(24px, 3vw, 36px); }

.vbl-auth__switch {
	display: flex;
	gap: 4px;
	background: var(--vbl-surface-2);
	border: 1px solid var(--vbl-border);
	border-radius: var(--vbl-r-sm);
	padding: 4px;
	margin-bottom: var(--vbl-gap-5);
}

.vbl-auth__switch a {
	flex: 1;
	text-align: center;
	padding: 9px;
	border-radius: var(--vbl-r-xs);
	font-size: .88rem;
	font-weight: 600;
	color: var(--vbl-text-muted);
}

.vbl-auth__switch a.is-active { background: var(--vbl-surface); color: var(--vbl-text); box-shadow: var(--vbl-shadow-sm); }

.vbl-auth__foot { font-size: .85rem; color: var(--vbl-text-muted); text-align: center; margin: var(--vbl-gap-4) 0 0; }

/* --------------------------------------------------------------------------
   5. Checkout
   -------------------------------------------------------------------------- */

.vbl-checkout { padding-block: var(--vbl-gap-6) var(--vbl-gap-8); }
.vbl-checkout__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--vbl-gap-5); align-items: start; }

@media (max-width: 980px) { .vbl-checkout__grid { grid-template-columns: 1fr; } }

.vbl-summary-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px dashed var(--vbl-border);
	font-size: .92rem;
}

.vbl-summary-row:last-of-type { border-bottom: 0; }
.vbl-summary-row--total { border-top: 1px solid var(--vbl-border); margin-top: 6px; padding-top: 15px; font-size: 1.05rem; font-weight: 700; }
.vbl-summary-row--total span:last-child { color: var(--vbl-accent); }

.vbl-gateway {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 15px 17px;
	border: 1px solid var(--vbl-border);
	border-radius: var(--vbl-r-md);
	margin-bottom: 10px;
	cursor: pointer;
	background: var(--vbl-surface);
	transition: border-color var(--vbl-fast), background var(--vbl-fast);
}

.vbl-gateway:hover { border-color: var(--vbl-border-strong); }
.vbl-gateway:has(input:checked) { border-color: var(--vbl-accent); background: var(--vbl-accent-soft); }
.vbl-gateway input { margin-top: 6px; accent-color: var(--vbl-accent); flex: none; }
.vbl-gateway strong { display: block; font-size: .93rem; margin-bottom: 3px; }
.vbl-gateway span { font-size: .83rem; color: var(--vbl-text-muted); }

.vbl-order-success { text-align: center; padding: clamp(40px, 7vw, 80px) 24px; }
.vbl-order-success__icon {
	width: 76px; height: 76px; margin: 0 auto 20px;
	border-radius: var(--vbl-r-full);
	background: var(--vbl-accent-soft);
	color: var(--vbl-accent);
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--vbl-accent-line);
}

/* --------------------------------------------------------------------------
   6. Blog / archive
   -------------------------------------------------------------------------- */

.vbl-post-card { display: flex; gap: 16px; padding: var(--vbl-gap-4); align-items: center; }

.vbl-post-card__thumb { width: 150px; height: 96px; border-radius: var(--vbl-r-sm); overflow: hidden; flex: none; background: var(--vbl-surface-3); }
.vbl-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vbl-post-card h3 { font-size: 1rem; margin: 0 0 6px; }
.vbl-post-card h3 a { color: var(--vbl-text); }
.vbl-post-card h3 a:hover { color: var(--vbl-accent); }
.vbl-post-card p { font-size: .87rem; color: var(--vbl-text-muted); margin: 0; }

@media (max-width: 560px) {
	.vbl-post-card { flex-direction: column; align-items: stretch; }
	.vbl-post-card__thumb { width: 100%; height: 170px; }
}

/* --------------------------------------------------------------------------
   7. Comments / reviews
   -------------------------------------------------------------------------- */

.vbl-reviews { display: flex; flex-direction: column; gap: var(--vbl-gap-4); }

.vbl-rating-summary {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: var(--vbl-gap-6);
	align-items: center;
	padding: var(--vbl-gap-5);
}

@media (max-width: 640px) { .vbl-rating-summary { grid-template-columns: 1fr; } }

.vbl-rating-summary__score { text-align: center; }
.vbl-rating-summary__score strong { display: block; font-size: 3rem; font-weight: 800; line-height: 1.15; letter-spacing: -.03em; }
.vbl-rating-summary__score span { font-size: .84rem; color: var(--vbl-text-muted); }

.vbl-rating-bars { display: flex; flex-direction: column; gap: 9px; }
.vbl-rating-bar { display: flex; align-items: center; gap: 11px; font-size: .82rem; color: var(--vbl-text-muted); }
.vbl-rating-bar__track { flex: 1; height: 7px; background: var(--vbl-surface-3); border-radius: var(--vbl-r-full); overflow: hidden; }
.vbl-rating-bar__fill { height: 100%; background: var(--vbl-warn); border-radius: inherit; }
.vbl-rating-bar__count { min-width: 34px; text-align: left; direction: ltr; }

.vbl-review { padding: var(--vbl-gap-5); }
.vbl-review + .vbl-review { margin-top: var(--vbl-gap-4); }
.vbl-review__head { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; flex-wrap: wrap; }
.vbl-review__who { flex: 1; min-width: 140px; }
.vbl-review__who strong { display: block; font-size: .92rem; }
.vbl-review__who span { font-size: .78rem; color: var(--vbl-text-muted); }
.vbl-review__title { font-size: 1rem; margin: 0 0 8px; }
.vbl-review__text { font-size: .93rem; color: var(--vbl-text-soft); margin: 0 0 14px; }
.vbl-review__text p:last-child { margin-bottom: 0; }
.vbl-review__foot { display: flex; align-items: center; gap: 14px; font-size: .82rem; color: var(--vbl-text-muted); flex-wrap: wrap; }
.vbl-review__vote { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: inherit; font-family: inherit; font-size: .82rem; cursor: pointer; padding: 4px 8px; border-radius: var(--vbl-r-xs); }
.vbl-review__vote:hover { background: var(--vbl-surface-2); color: var(--vbl-accent); }

.vbl-review-form { padding: var(--vbl-gap-5); }
.vbl-review-form .comment-form > p { margin-bottom: var(--vbl-gap-4); }
.vbl-review-form .comment-form label { display: block; font-size: .87rem; font-weight: 600; margin-bottom: 7px; color: var(--vbl-text-soft); }
.vbl-review-form .comment-form input[type="text"],
.vbl-review-form .comment-form input[type="email"],
.vbl-review-form .comment-form input[type="url"],
.vbl-review-form .comment-form textarea {
	width: 100%;
	background: var(--vbl-surface-2);
	border: 1px solid var(--vbl-border);
	border-radius: var(--vbl-r-sm);
	color: var(--vbl-text);
	font-family: inherit;
	font-size: .93rem;
	padding: 12px 14px;
}

.vbl-review-form .comment-form textarea { min-height: 140px; line-height: 1.9; }
.vbl-review-form .comment-form input:focus,
.vbl-review-form .comment-form textarea:focus { outline: 0; border-color: var(--vbl-accent-line); box-shadow: 0 0 0 3px var(--vbl-accent-soft); }
.vbl-review-form .comment-form .submit {
	background: var(--vbl-accent);
	border: 0;
	color: var(--vbl-accent-ink);
	font-family: inherit;
	font-size: .95rem;
	font-weight: 700;
	padding: 13px 26px;
	border-radius: var(--vbl-r-sm);
	cursor: pointer;
}
.vbl-review-form .comment-form .submit:hover { background: var(--vbl-accent-hover); }
.vbl-review-form .comment-notes, .vbl-review-form .logged-in-as, .vbl-review-form .comment-form-cookies-consent { font-size: .82rem; color: var(--vbl-text-muted); }
.vbl-review-form .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; }
.vbl-review-form .comment-form-cookies-consent label { margin: 0; font-weight: 400; }

/* star input */
.vbl-rating-input { margin-bottom: var(--vbl-gap-4); }
.vbl-rating-input__label { display: block; font-size: .87rem; font-weight: 600; margin-bottom: 8px; color: var(--vbl-text-soft); }
.vbl-rating-input__stars { display: inline-flex; gap: 4px; }
.vbl-rating-input__star {
	background: none; border: 0; padding: 2px; cursor: pointer; color: var(--vbl-warn);
	line-height: 0; transition: transform var(--vbl-fast);
}
.vbl-rating-input__star svg { fill: none; }
.vbl-rating-input__star.is-on svg { fill: currentColor; }
.vbl-rating-input__star:hover { transform: scale(1.12); }

/* comments list */
.vbl-comment-list { list-style: none; padding: 0; margin: 0; }
.vbl-comment-list .children { list-style: none; padding-inline-start: 26px; margin-top: var(--vbl-gap-4); }

/* --------------------------------------------------------------------------
   8. Empty states
   -------------------------------------------------------------------------- */

.vbl-empty {
	text-align: center;
	padding: clamp(36px, 6vw, 66px) 24px;
	color: var(--vbl-text-muted);
}

.vbl-empty .vbl-icon-box { margin: 0 auto 16px; width: 54px; height: 54px; }
.vbl-empty h3 { color: var(--vbl-text); margin-bottom: 8px; }
.vbl-empty p { margin: 0 0 20px; font-size: .92rem; }

/* --------------------------------------------------------------------------
   9. 404 & search
   -------------------------------------------------------------------------- */

.vbl-404 { text-align: center; padding-block: clamp(60px, 12vw, 140px); }
.vbl-404__code { font-size: clamp(5rem, 16vw, 10rem); font-weight: 800; line-height: 1; color: var(--vbl-accent); opacity: .16; letter-spacing: -.05em; margin-bottom: -20px; }

/* --------------------------------------------------------------------------
   10. Shared shells (forms, comments, widgets, nav fallback)
   -------------------------------------------------------------------------- */

/* Generic stacked form used by the auth cards and the comment forms. */
.vbl-form { display: grid; gap: var(--vbl-gap-4); }
.vbl-form .vbl-field { margin: 0; }
.vbl-form .vbl-field label { display: block; font-size: .87rem; font-weight: 600; margin-bottom: 7px; color: var(--vbl-text-soft); }
.vbl-form .vbl-field input,
.vbl-form .vbl-field textarea,
.vbl-form .vbl-field select { width: 100%; }
.vbl-form .vbl-hint,
.vbl-form .description { font-size: .8rem; color: var(--vbl-text-muted); }
.vbl-form .form-submit,
.vbl-form .submit { margin: 0; }

/* Comments block on lessons and posts. */
.vbl-comments { margin-top: var(--vbl-gap-7); }
.vbl-comments .comment-respond { margin-top: var(--vbl-gap-6); }
.vbl-comments .comment-reply-title { display: block; font-size: 1.1rem; font-weight: 700; color: var(--vbl-text); margin-bottom: var(--vbl-gap-4); }
.vbl-comments .comment-reply-title small { font-size: .8rem; font-weight: 400; margin-inline-start: 8px; }

/* Main column — the sticky header needs the anchor offset. */
.vbl-main { display: block; scroll-margin-top: var(--vbl-header-h); }

/* Menu fallback + footer menus. */
.vbl-nav__list { list-style: none; margin: 0; padding: 0; }

/* Sidebar widgets. */
.vbl-widget { margin-bottom: var(--vbl-gap-6); }
.vbl-widget__title { font-size: 1rem; font-weight: 700; color: var(--vbl-text); margin: 0 0 var(--vbl-gap-3); }
.vbl-widget ul { list-style: none; margin: 0; padding: 0; }
.vbl-widget li + li { margin-top: 8px; }
.vbl-widget a { color: var(--vbl-text-soft); }
.vbl-widget a:hover { color: var(--vbl-accent); }

/* --------------------------------------------------------------------------
   11. Page-specific responsive overrides
   -------------------------------------------------------------------------- */

/* Course landing responsive */
@media (max-width: 767px) {
	.vbl-course-hero { padding-block: var(--vbl-gap-5) var(--vbl-gap-6); }
	.vbl-course-hero__grid { gap: var(--vbl-gap-4); }
	.vbl-course-meta { gap: 6px 14px; font-size: .82rem; }
	.vbl-course-trailer__play .vbl-play-badge { width: 52px; height: 52px; }
	.vbl-buy-card { position: static; }
	.vbl-buy-card__price { padding: 14px 15px; }
	.vbl-tabs { gap: 0; }
	.vbl-tab { padding: 10px 12px; font-size: .85rem; }
	.vbl-instructor { flex-direction: column; align-items: center; text-align: center; }
	.vbl-instructor__avatar { width: 64px; height: 64px; }
}

/* Lesson player responsive */
@media (max-width: 767px) {
	.vbl-player-layout { padding-block: var(--vbl-gap-4) var(--vbl-gap-6); }
	.vbl-player iframe, .vbl-player video { aspect-ratio: 16 / 9; }
	.vbl-lesson-head { flex-direction: column; gap: 8px; }
	.vbl-lesson-head h1 { font-size: 1.15rem; }
	.vbl-player-actions { flex-direction: column; align-items: stretch; }
	.vbl-player-actions .vbl-btn { width: 100%; }
	.vbl-side-list { max-height: 50vh; }
	.vbl-side-lesson { padding: 8px 10px; font-size: .82rem; }
}

/* Dashboard responsive */
@media (max-width: 767px) {
	.vbl-dash { padding-block: var(--vbl-gap-5) var(--vbl-gap-7); }
	.vbl-dash__layout { gap: var(--vbl-gap-4); }
	.vbl-dash__nav { position: static; }
	/*
	 * A tile grid, not a scroll strip. The strip sliced the last Persian label
	 * mid-word with no fade and no affordance, so it read as a layout fault
	 * rather than as something scrollable. Every destination is on screen here
	 * and nothing is ever clipped.
	 */
	.vbl-dash__menu {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--vbl-gap-2);
		padding: var(--vbl-gap-2);
		margin: 0;
		min-width: 0;
	}

	/* Five or seven items would leave a hole in the last row, so the final
	   tile — always «خروج از حساب» — takes the whole row. Six already pairs. */
	.vbl-dash__menu > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

	.vbl-dash__menu a {
		height: 100%;
		min-height: 44px;
		gap: 8px;
		padding-block: 8px;
		padding-inline: 11px;
		border: 1px solid var(--vbl-border);
		border-radius: var(--vbl-r-md);
		background: var(--vbl-surface-2);
		color: var(--vbl-text-soft);
		font-size: .8rem;
		line-height: 1.35;
		white-space: normal;
		word-break: keep-all;
	}

	.vbl-dash__menu a .vbl-icon { flex: none; color: var(--vbl-text-muted); }
	.vbl-dash__menu a:hover { background: var(--vbl-surface-3); border-color: var(--vbl-border-strong); color: var(--vbl-text); }
	.vbl-dash__menu a:hover .vbl-icon { color: var(--vbl-accent); }

	/* Sign-out stays quiet so it is not mistaken for a destination. */
	.vbl-dash__menu > li:last-child a { color: var(--vbl-text-muted); }

	.vbl-dash__menu .is-active a,
	.vbl-dash__menu .is-active a:hover {
		background: var(--vbl-accent);
		border-color: var(--vbl-accent);
		color: var(--vbl-accent-ink);
		font-weight: 700;
	}

	.vbl-dash__menu .is-active a .vbl-icon { color: inherit; }
	.vbl-dash__stats { grid-template-columns: repeat(2, 1fr); }
	.vbl-dash__stat { padding: var(--vbl-gap-3) var(--vbl-gap-4); }
	.vbl-dash__stat strong { font-size: 1.25rem; }
	.vbl-my-course { padding: var(--vbl-gap-3); gap: 12px; }
	.vbl-my-course__thumb { width: 90px; height: 58px; }
	.vbl-my-course__title { font-size: .9rem; }
	.vbl-order-row { padding: 12px 14px; flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Auth responsive */
@media (max-width: 767px) {
	.vbl-auth { padding-block: var(--vbl-gap-5); }
	.vbl-auth__wrap { gap: var(--vbl-gap-5); }
	.vbl-auth__pitch { text-align: center; }
	.vbl-auth__pitch .vbl-check-list { display: inline-block; text-align: right; }
	.vbl-auth__card { padding: var(--vbl-gap-4); }
	.vbl-auth__switch { flex-direction: row; }
	.vbl-auth__switch a { padding: 10px 8px; font-size: .85rem; }
}

/* Checkout responsive */
@media (max-width: 767px) {
	.vbl-checkout { padding-block: var(--vbl-gap-5) var(--vbl-gap-7); }
	.vbl-checkout__grid { gap: var(--vbl-gap-4); }
	.vbl-summary-row { font-size: .88rem; padding: 9px 0; }
	.vbl-summary-row--total { font-size: 1rem; }
	.vbl-gateway { padding: 12px 14px; }
	.vbl-order-success { padding: var(--vbl-gap-6) 16px; }
	.vbl-order-success__icon { width: 64px; height: 64px; }
}

/* Blog responsive */
@media (max-width: 767px) {
	.vbl-post-card { padding: var(--vbl-gap-3); }
	.vbl-post-card__thumb { width: 100%; height: 160px; }
	.vbl-post-card h3 { font-size: .95rem; }
}

/* Reviews responsive */
@media (max-width: 767px) {
	.vbl-rating-summary { padding: var(--vbl-gap-4); }
	.vbl-rating-summary__score strong { font-size: 2.5rem; }
	.vbl-review { padding: var(--vbl-gap-4); }
	.vbl-review__head { gap: 8px; }
	.vbl-review-form { padding: var(--vbl-gap-4); }
}

/* Empty states responsive */
@media (max-width: 767px) {
	.vbl-empty { padding: var(--vbl-gap-6) 16px; }
	.vbl-empty .vbl-icon-box { width: 48px; height: 48px; }
}

/* 404 responsive */
@media (max-width: 767px) {
	.vbl-404 { padding-block: var(--vbl-gap-7); }
	.vbl-404__code { font-size: clamp(4rem, 20vw, 8rem); margin-bottom: -10px; }
}

/* Tablet adjustments */
/* Roomier phones: three across, and the last tile still fills the row. */
@media (min-width: 520px) and (max-width: 767px) {
	.vbl-dash__menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vbl-dash__menu > li:last-child:nth-child(odd) { grid-column: auto; }
	.vbl-dash__menu > li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
	.vbl-dash__menu > li:last-child:nth-child(3n + 2) { grid-column: span 2; }
}

@media (min-width: 768px) and (max-width: 1023px) {
	.vbl-course-hero__grid { grid-template-columns: 1fr 300px; }
	.vbl-player-layout { grid-template-columns: 1fr 320px; }
	.vbl-dash__layout { grid-template-columns: 220px 1fr; }
	.vbl-checkout__grid { grid-template-columns: 1fr 340px; }
	.vbl-rating-summary { grid-template-columns: 160px 1fr; }
}
/* --- profile picture editor ---------------------------------------------- */

.vbl-avatar-edit { display: flex; align-items: center; gap: var(--vbl-gap-4); flex-wrap: wrap; }

.vbl-avatar-edit__pic {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	flex: none;
	border-radius: var(--vbl-r-full);
	overflow: hidden;
	background: var(--vbl-accent-soft);
	color: var(--vbl-accent);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	border: 1px solid var(--vbl-border);
}

/* the global `img { height: auto }` would letterbox this, so pin both axes */
.vbl-avatar-edit__pic img {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: inherit;
	display: block;
}

.vbl-avatar-edit__controls { display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1 1 220px; }
.vbl-avatar-edit__controls .vbl-input { padding: 9px 11px; }

.vbl-avatar-edit__remove {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--vbl-text-muted);
	font-size: .85rem;
	cursor: pointer;
}

/* ==========================================================================
   Course page — hero, sidebar cards, description, FAQ, sections
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */

.vbl-chero {
	background: var(--vbl-surface);
	border: 1px solid var(--vbl-border);
	border-radius: var(--vbl-r-lg);
	padding: var(--vbl-gap-6);
	margin-bottom: var(--vbl-gap-5);
}

.vbl-chero__grid { display: grid; gap: var(--vbl-gap-6); align-items: center; }

.vbl-chero__title { margin: 0 0 12px; font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.2rem); line-height: 1.5; }
.vbl-chero__sub { margin: 0 0 var(--vbl-gap-5); color: var(--vbl-text-soft); font-size: 1rem; line-height: 1.9; }

.vbl-chero__media { border-radius: var(--vbl-r-md); overflow: hidden; background: var(--vbl-surface-3); }
.vbl-chero__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

.vbl-chero__buy { display: flex; align-items: center; flex-wrap: wrap; gap: var(--vbl-gap-4); }

.vbl-chero__jump {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--vbl-text-soft);
	font-size: .9rem;
	font-weight: 500;
	min-height: 44px;
}

.vbl-chero__jump:hover { color: var(--vbl-accent); }

/* the price is the decision point, so it is the largest thing in the row */
.vbl-chero__price { display: inline-flex; align-items: baseline; gap: 7px; margin-inline-start: auto; }
.vbl-chero__amount { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); font-weight: 800; color: var(--vbl-text); letter-spacing: -.02em; white-space: nowrap; }
.vbl-chero__unit { font-size: .82rem; color: var(--vbl-text-muted); }
.vbl-chero__was { font-size: .88rem; color: var(--vbl-text-muted); text-decoration: line-through; }
.vbl-chero__price--free { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem); font-weight: 800; color: var(--vbl-accent); }

/* shown in place of the price once the visitor is a student of the course */
.vbl-chero__enrolled {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-inline-start: auto;
	padding: 10px 16px;
	border-radius: var(--vbl-r-full);
	background: var(--vbl-accent-soft);
	border: 1px solid var(--vbl-accent-line);
	color: var(--vbl-accent);
	font-size: .9rem;
	font-weight: 600;
}

/* --- share + engagement row ---------------------------------------------- */

.vbl-cshare {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--vbl-gap-4);
	margin-top: var(--vbl-gap-5);
	padding-top: var(--vbl-gap-5);
	border-top: 1px solid var(--vbl-border);
}

.vbl-cshare__links { display: flex; align-items: center; gap: 10px; }
.vbl-cshare__label { color: var(--vbl-text-muted); font-size: .86rem; }

.vbl-cshare__links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border-radius: var(--vbl-r-full);
	color: var(--vbl-text-muted);
}

.vbl-cshare__links a:hover { background: var(--vbl-surface-2); color: var(--vbl-accent); }

.vbl-cshare__stats { display: flex; align-items: center; gap: var(--vbl-gap-5); }
.vbl-cstat { display: inline-flex; align-items: center; gap: 7px; color: var(--vbl-text-muted); font-size: .88rem; }
.vbl-cstat__num { font-weight: 700; color: var(--vbl-text-soft); }

/* --- two column body ----------------------------------------------------- */

.vbl-clayout { display: grid; gap: var(--vbl-gap-6); align-items: start; }
.vbl-cmain { min-width: 0; display: flex; flex-direction: column; gap: var(--vbl-gap-5); }
.vbl-cside { min-width: 0; display: flex; flex-direction: column; gap: var(--vbl-gap-4); }

/* --- rating card --------------------------------------------------------- */

.vbl-crate { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.vbl-crate .vbl-stars { display: inline-flex; gap: 3px; }
.vbl-crate__score { margin: 0; color: var(--vbl-text-soft); font-size: .88rem; }

.vbl-crate__status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--vbl-text-muted);
	font-size: .84rem;
}

.vbl-crate__status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: var(--vbl-r-full);
	background: var(--vbl-warn);
}

.vbl-crate__status.is-done::before { background: var(--vbl-accent); }

/* --- stat tiles ---------------------------------------------------------- */

.vbl-ctiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vbl-gap-3); }

.vbl-ctile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	text-align: center;
	padding: 16px 12px;
	background: var(--vbl-surface);
	border: 1px solid var(--vbl-border);
	border-radius: var(--vbl-r-md);
}

.vbl-ctile__icon { color: var(--vbl-accent); display: inline-flex; }
.vbl-ctile__label { color: var(--vbl-text-muted); font-size: .78rem; }
.vbl-ctile__value { color: var(--vbl-text); font-size: .92rem; font-weight: 700; }

/* --- certificate --------------------------------------------------------- */

.vbl-ccert { display: flex; align-items: flex-start; gap: 12px; }
.vbl-ccert__icon { color: var(--vbl-accent); flex: none; display: inline-flex; }
.vbl-ccert__title { display: block; color: var(--vbl-text); font-weight: 700; font-size: .95rem; margin-bottom: 6px; }
.vbl-ccert__status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--vbl-text-muted); font-size: .82rem; }

/* --- instructor ---------------------------------------------------------- */

.vbl-cteacher { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }

.vbl-cteacher__avatar {
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	border-radius: var(--vbl-r-full);
	overflow: hidden;
	border: 3px solid var(--vbl-border-strong);
	background: var(--vbl-surface-2);
}

/* the global `img { height: auto }` would letterbox the portrait */
.vbl-cteacher__avatar img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }

.vbl-cteacher__name { display: inline-flex; align-items: center; gap: 6px; color: var(--vbl-text); font-weight: 700; font-size: 1rem; }
.vbl-cteacher__verified { display: inline-flex; color: var(--vbl-accent); }
.vbl-cteacher__role { color: var(--vbl-text-muted); font-size: .82rem; }

.vbl-cteacher__bio {
	margin: 8px 0 0;
	color: var(--vbl-text-soft);
	font-size: .84rem;
	line-height: 1.9;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- community ----------------------------------------------------------- */

.vbl-ccommunity { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.vbl-ccommunity__icon { color: var(--vbl-accent); display: inline-flex; }
.vbl-ccommunity__title { color: var(--vbl-text); font-weight: 700; font-size: 1rem; }
.vbl-ccommunity__text { color: var(--vbl-text-muted); font-size: .82rem; line-height: 1.8; }

.vbl-ccommunity__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	color: var(--vbl-accent);
	font-size: .88rem;
	font-weight: 600;
	min-height: 44px;
}

/* --- clamped description ------------------------------------------------- */

.vbl-cdesc { position: relative; }

.vbl-cdesc--clamped { max-height: 320px; overflow: hidden; }

.vbl-cdesc__fade {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 150px;
	background: linear-gradient(to bottom, transparent, var(--vbl-surface));
	pointer-events: none;
}

.vbl-cdesc:not(.vbl-cdesc--clamped) .vbl-cdesc__fade { display: none; }

.vbl-cdesc__more {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	margin-inline: auto;
	width: max-content;
	z-index: 1;
}

.vbl-cdesc:not(.vbl-cdesc--clamped) .vbl-cdesc__more { position: static; margin-top: var(--vbl-gap-4); }
.vbl-cdesc__more .vbl-icon { transition: transform var(--vbl-fast); }
.vbl-cdesc:not(.vbl-cdesc--clamped) .vbl-cdesc__more .vbl-icon { transform: rotate(180deg); }

/* --- FAQ and curriculum accordions --------------------------------------- */

.vbl-cfaq, .vbl-csects { display: flex; flex-direction: column; gap: 10px; }

.vbl-cfaq__q, .vbl-csect__row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 56px;
	padding: 14px 16px;
	background: var(--vbl-surface-2);
	border: 1px solid var(--vbl-border);
	border-radius: var(--vbl-r-md);
	color: var(--vbl-text);
	font-family: inherit;
	font-size: .95rem;
	font-weight: 600;
	text-align: start;
	cursor: pointer;
	transition: background var(--vbl-fast), border-color var(--vbl-fast);
}

.vbl-cfaq__q:hover, .vbl-csect__row:hover { background: var(--vbl-surface-3); border-color: var(--vbl-border-strong); }

.vbl-cfaq__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: var(--vbl-r-sm);
	background: var(--vbl-accent-soft);
	color: var(--vbl-accent);
}

.vbl-cfaq__q > span:nth-child(2), .vbl-csect__title { flex: 1; min-width: 0; }

.vbl-csect__index {
	flex: none;
	padding-inline-end: 12px;
	border-inline-end: 1px solid var(--vbl-border-strong);
	color: var(--vbl-accent);
	font-weight: 700;
}

.vbl-cfaq__chev, .vbl-csect__chev { flex: none; color: var(--vbl-text-muted); transition: transform var(--vbl-fast); }
.vbl-cfaq__item.is-open .vbl-cfaq__chev, .vbl-csect.is-open .vbl-csect__chev { transform: rotate(180deg); }

.vbl-cfaq__a, .vbl-csect__body {
	padding: 4px 16px 14px;
	color: var(--vbl-text-soft);
	font-size: .9rem;
	line-height: 1.95;
}

.vbl-cfaq__a p, .vbl-csect__body p { margin: 0; }

/* collapsed by default only once JS confirms it can reopen them */
.vbl-js .vbl-cfaq__item:not(.is-open) .vbl-cfaq__a,
.vbl-js .vbl-csect:not(.is-open) .vbl-csect__body { display: none; }

.vbl-csect__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.vbl-clesson {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	color: var(--vbl-text-soft);
	font-size: .89rem;
}

.vbl-clesson > .vbl-icon { color: var(--vbl-text-muted); flex: none; }

/* the title takes the slack so the time and button sit on the inline-end edge */
.vbl-clesson__title { flex: 1; min-width: 0; }

.vbl-clesson__time { flex: none; color: var(--vbl-text-muted); font-size: .8rem; }

.vbl-clesson__cta { flex: none; }

.vbl-clesson__cta--locked {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 13px;
	border-radius: var(--vbl-r-sm);
	background: var(--vbl-surface-3);
	color: var(--vbl-text-muted);
	font-size: .82rem;
	white-space: nowrap;
}

.vbl-clesson.is-locked .vbl-clesson__title { color: var(--vbl-text-muted); }

@media (max-width: 479px) {
	/* the row would otherwise squeeze the title to nothing */
	.vbl-clesson { flex-wrap: wrap; }
	.vbl-clesson__title { flex: 1 1 100%; order: -1; }
	.vbl-clesson__cta { margin-inline-start: auto; }
}

/* --- breakpoints --------------------------------------------------------- */

@media (min-width: 768px) {
	.vbl-chero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
}

@media (min-width: 1024px) {
	/* main column first (inline-start), the card rail beside it */
	.vbl-clayout { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
	.vbl-cside { position: sticky; top: calc(var(--vbl-header-h) + 20px); }
}

/* the instructor's own badge reads as a credential, not a purchase */
.vbl-chero__enrolled--teacher {
	background: var(--vbl-warn-soft);
	border-color: var(--vbl-warn);
	color: var(--vbl-warn);
}

/* "مدرس دوره" beside a reviewer's name */
.vbl-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-inline-start: 7px;
	padding: 3px 9px;
	border-radius: var(--vbl-r-full);
	font-size: .72rem;
	font-weight: 600;
	vertical-align: middle;
	white-space: nowrap;
}

.vbl-tag--teacher {
	background: var(--vbl-accent-soft);
	border: 1px solid var(--vbl-accent-line);
	color: var(--vbl-accent);
}

/* --- review replies ------------------------------------------------------ */

.vbl-review__reply a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 4px;
	color: var(--vbl-text-muted);
	font-size: .85rem;
	font-weight: 600;
}

.vbl-review__reply a:hover { color: var(--vbl-accent); }

.vbl-replies {
	list-style: none;
	margin: var(--vbl-gap-4) 0 0;
	padding: 0;
	/* indented from the inline-start edge so the thread reads as nested in RTL */
	padding-inline-start: var(--vbl-gap-5);
	border-inline-start: 2px solid var(--vbl-border);
	display: flex;
	flex-direction: column;
	gap: var(--vbl-gap-3);
}

.vbl-reply { display: flex; gap: 11px; }

.vbl-reply__avatar {
	width: 36px;
	height: 36px;
	flex: none;
	border-radius: var(--vbl-r-full);
	overflow: hidden;
}

.vbl-reply__avatar img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }

.vbl-reply__main {
	flex: 1;
	min-width: 0;
	background: var(--vbl-surface-2);
	border: 1px solid var(--vbl-border);
	border-radius: var(--vbl-r-md);
	padding: 12px 14px;
}

.vbl-reply__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 5px; }
.vbl-reply__head strong { color: var(--vbl-text); font-size: .9rem; }
.vbl-reply__head > span { color: var(--vbl-text-muted); font-size: .78rem; }

.vbl-reply__text { color: var(--vbl-text-soft); font-size: .89rem; line-height: 1.95; }
.vbl-reply__text p { margin: 0; }

/*
 * An instructor answer is marked by an accent rail and a faint tint, not a
 * solid block of colour — the whole reply reading as one green slab was heavier
 * than the message it carries.
 */
.vbl-reply--teacher .vbl-reply__main {
	background: color-mix(in srgb, var(--vbl-accent) 7%, var(--vbl-surface-2));
	border-color: var(--vbl-border);
	border-inline-start: 3px solid var(--vbl-accent);
}

.vbl-reply--teacher .vbl-reply__avatar { box-shadow: 0 0 0 2px var(--vbl-accent-line); }

/* --- reply tools --------------------------------------------------------- */

.vbl-reply__tools { display: flex; align-items: center; gap: 4px; margin-top: 9px; }
.vbl-reply__tools form { margin: 0; }

.vbl-reply__tool {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 36px;
	padding: 6px 10px;
	border: 0;
	border-radius: var(--vbl-r-sm);
	background: transparent;
	color: var(--vbl-text-muted);
	font-family: inherit;
	font-size: .8rem;
	cursor: pointer;
}

.vbl-reply__tool:hover { background: var(--vbl-surface-3); color: var(--vbl-text); }
.vbl-reply__tool--danger:hover { background: var(--vbl-danger-soft); color: var(--vbl-danger); }

.vbl-reply__edit { margin-top: 10px; }
.vbl-reply__edit-actions { display: flex; gap: 8px; margin-top: 8px; }

/* --- the comment form while it is answering a review --------------------- */

#respond.is-reply {
	margin-top: var(--vbl-gap-4);
	padding: var(--vbl-gap-4);
	background: var(--vbl-surface-2);
	border: 1px solid var(--vbl-border);
	border-radius: var(--vbl-r-md);
}

/* a reply carries no star rating and no review title — those belong to a review */
#respond.is-reply .vbl-rating-input,
#respond.is-reply .vbl-field:has( #vbl_review_title ),
#respond.is-reply .logged-in-as { display: none; }

#respond.is-reply .form-submit {
	display: flex;
	align-items: center;
	gap: var(--vbl-gap-3);
	flex-wrap: wrap;
	margin-bottom: 0;
}

#respond.is-reply #cancel-comment-reply-link {
	color: var(--vbl-text-muted);
	font-size: .85rem;
}

#respond.is-reply #cancel-comment-reply-link:hover { color: var(--vbl-danger); }

@media (max-width: 479px) {
	.vbl-replies { padding-inline-start: var(--vbl-gap-3); }
}

/* course archive filters */
.vbl-cfilters {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	/* a toolbar, not a column: it must not stretch to the head's full width */
	flex: none;
	width: auto;
	padding: 8px;
	background: var(--vbl-surface);
	border: 1px solid var(--vbl-border);
	border-radius: var(--vbl-r-md);
}

.vbl-cfilters .vbl-select {
	width: auto;
	min-width: 0;
	flex: 0 0 auto;
	padding: 9px 34px 9px 12px;
	font-size: .88rem;
}

.vbl-cfilters .vbl-btn { flex: none; }

@media (max-width: 639px) {
	/* on a phone the toolbar becomes a full-width two-up grid */
	.vbl-cfilters { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
	.vbl-cfilters .vbl-select { width: 100%; }
	.vbl-cfilters .vbl-btn { grid-column: span 1; justify-content: center; }
}

/* watch button on the curriculum tab rows */
.vbl-lesson-row__cta { flex: none; margin-inline-start: auto; }

.vbl-lesson-row__cta--locked {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 12px;
	border-radius: var(--vbl-r-sm);
	background: var(--vbl-surface-3);
	color: var(--vbl-text-muted);
	font-size: .8rem;
	white-space: nowrap;
}

@media (max-width: 560px) {
	.vbl-lesson-row { flex-wrap: wrap; }
	.vbl-lesson-row__title { flex: 1 1 100%; }
}

/* --- support: choose who should answer ----------------------------------- */

.vbl-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--vbl-gap-4); margin-top: var(--vbl-gap-4); }

.vbl-pick__card {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: var(--vbl-gap-5);
	background: var(--vbl-surface-2);
	border: 1px solid var(--vbl-border);
	border-radius: var(--vbl-r-lg);
	color: var(--vbl-text-soft);
	transition: border-color var(--vbl-fast), background var(--vbl-fast);
}

.vbl-pick__card:hover { border-color: var(--vbl-accent-line); background: var(--vbl-accent-soft); }
.vbl-pick__card strong { color: var(--vbl-text); font-size: 1rem; }
.vbl-pick__card > span:last-child { font-size: .84rem; color: var(--vbl-text-muted); line-height: 1.8; }

.vbl-pick__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--vbl-r-md);
	background: var(--vbl-accent-soft);
	color: var(--vbl-accent);
	margin-bottom: 4px;
}

/* --- support: ticket list and thread ------------------------------------- */

.vbl-trow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vbl-gap-3);
	padding: 14px 16px;
	background: var(--vbl-surface-2);
	border: 1px solid var(--vbl-border);
	border-radius: var(--vbl-r-md);
	color: var(--vbl-text-soft);
}

.vbl-trow:hover { border-color: var(--vbl-accent-line); }
.vbl-trow__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vbl-trow__main strong { color: var(--vbl-text); font-size: .93rem; }
.vbl-trow__main span { color: var(--vbl-text-muted); font-size: .8rem; }

.vbl-tickets__thread { display: flex; flex-direction: column; gap: var(--vbl-gap-3); margin-top: var(--vbl-gap-4); }

.vbl-tmsg { display: flex; gap: 11px; }

.vbl-tmsg__avatar { width: 38px; height: 38px; flex: none; border-radius: var(--vbl-r-full); overflow: hidden; }
.vbl-tmsg__avatar img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }

.vbl-tmsg__main {
	flex: 1;
	min-width: 0;
	background: var(--vbl-surface-2);
	border: 1px solid var(--vbl-border);
	border-radius: var(--vbl-r-md);
	padding: 12px 14px;
}

.vbl-tmsg--mine .vbl-tmsg__main { background: var(--vbl-accent-soft); border-color: var(--vbl-accent-line); }
.vbl-tmsg__head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.vbl-tmsg__head strong { font-size: .87rem; color: var(--vbl-text); }
.vbl-tmsg__head time { font-size: .74rem; color: var(--vbl-text-muted); }
.vbl-tmsg__body { font-size: .89rem; color: var(--vbl-text-soft); white-space: pre-wrap; line-height: 1.9; }

/* coupon row in the order summary */
.vbl-coupon { display: flex; gap: 8px; margin-top: var(--vbl-gap-4); }
.vbl-coupon__input { flex: 1; min-width: 0; }
.vbl-coupon__btn { flex: none; }
.vbl-coupon__msg { margin: 8px 0 0; color: var(--vbl-text-soft); }

/* ======================================================================
   Articles
   ====================================================================== */

/* --- list header ---------------------------------------------------- */

.vbl-ahero { margin-block: var(--vbl-gap-5) var(--vbl-gap-4); }
.vbl-ahero__title { font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.25; margin: 0 0 10px; }
.vbl-ahero__lede { max-width: 62ch; }

.vbl-achips {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: var(--vbl-gap-5);
}

.vbl-achip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 38px;
	padding: 0 15px;
	border: 1px solid var(--vbl-border);
	border-radius: var(--vbl-r-full);
	background: var(--vbl-surface);
	color: var(--vbl-text-soft);
	font-size: .86rem;
	text-decoration: none;
	transition: border-color var(--vbl-fast), color var(--vbl-fast), background var(--vbl-fast);
}

.vbl-achip:hover { color: var(--vbl-text); border-color: var(--vbl-accent-line); }

.vbl-achip.is-active {
	background: var(--vbl-accent-soft);
	border-color: var(--vbl-accent-line);
	color: var(--vbl-accent);
}

.vbl-achip span {
	font-size: .74rem;
	color: var(--vbl-text-muted);
	padding-inline-start: 7px;
	border-inline-start: 1px solid var(--vbl-border);
}

/* --- the lead article ----------------------------------------------- */

.vbl-alead {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: var(--vbl-gap-5);
	align-items: center;
	margin-bottom: var(--vbl-gap-6);
	padding: var(--vbl-gap-4);
	border: 1px solid var(--vbl-border);
	border-radius: var(--vbl-r-lg);
	background: var(--vbl-surface);
}

.vbl-alead__media {
	display: block;
	aspect-ratio: 16 / 10;
	max-width: 100%;
	border-radius: var(--vbl-r-md);
	overflow: hidden;
	background: var(--vbl-surface-2);
}

.vbl-alead__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vbl-alead__kicker {
	display: inline-block;
	margin-bottom: 12px;
	padding: 5px 12px;
	border-radius: var(--vbl-r-full);
	background: var(--vbl-accent-soft);
	color: var(--vbl-accent);
	font-size: .76rem;
	font-weight: 700;
}

.vbl-alead__title { font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.4; margin: 0 0 12px; }
.vbl-alead__title a { color: inherit; text-decoration: none; }
.vbl-alead__title a:hover { color: var(--vbl-accent); }
.vbl-alead__excerpt { color: var(--vbl-text-soft); line-height: 2; margin: 0 0 16px; }

.vbl-alead__meta {
	color: var(--vbl-text-muted);
	font-size: .82rem;
	margin-bottom: 18px;
}

.vbl-alead__meta > span { display: inline-flex; align-items: center; gap: 8px; }
.vbl-alead__meta img { width: 28px; height: 28px; border-radius: var(--vbl-r-full); }

/* --- the grid ------------------------------------------------------- */

.vbl-agrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: var(--vbl-gap-4);
}

.vbl-acard {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--vbl-border);
	border-radius: var(--vbl-r-lg);
	background: var(--vbl-surface);
	overflow: hidden;
	transition: transform var(--vbl-fast), border-color var(--vbl-fast), box-shadow var(--vbl-fast);
}

.vbl-acard:hover {
	transform: translateY(-3px);
	border-color: var(--vbl-accent-line);
	box-shadow: var(--vbl-shadow-md);
}

.vbl-acard__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	max-width: 100%;
	background: var(--vbl-surface-2);
	overflow: hidden;
}

.vbl-acard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vbl-acard__fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vbl-text-muted);
}

.vbl-acard__cat {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	padding: 5px 11px;
	border-radius: var(--vbl-r-full);
	background: rgba(8, 14, 10, .62);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: .72rem;
	font-weight: 600;
}

.vbl-acard__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	padding: 16px 18px 14px;
}

.vbl-acard__title { font-size: 1.02rem; line-height: 1.65; margin: 0; }
.vbl-acard__title a { color: var(--vbl-text); text-decoration: none; }
.vbl-acard__title a:hover { color: var(--vbl-accent); }

.vbl-acard__excerpt {
	flex: 1;
	margin: 0;
	color: var(--vbl-text-soft);
	font-size: .87rem;
	line-height: 1.95;
}

.vbl-acard__foot {
	padding-top: 12px;
	border-top: 1px solid var(--vbl-border);
	color: var(--vbl-text-muted);
	font-size: .78rem;
}

.vbl-acard__author,
.vbl-acard__time { display: inline-flex; align-items: center; gap: 7px; }
.vbl-acard__author img { width: 24px; height: 24px; border-radius: var(--vbl-r-full); }

/* --- reading progress ----------------------------------------------- */

.vbl-areading {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	z-index: 60;
	pointer-events: none;
	background: transparent;
}

.vbl-areading span {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--vbl-green-400), var(--vbl-green-600));
	transition: width .1s linear;
}

/* --- the article ---------------------------------------------------- */

.vbl-asingle__head { padding-block: var(--vbl-gap-5) 0; }
.vbl-asingle__title { font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.35; margin: 14px 0 0; }

.vbl-asingle__sub {
	margin: 12px 0 0;
	color: var(--vbl-text-soft);
	font-size: 1.06rem;
	line-height: 2;
}

.vbl-asingle__byline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin-block: 22px 0;
	padding-block: 18px;
	border-block: 1px solid var(--vbl-border);
}

.vbl-asingle__author { display: inline-flex; align-items: center; gap: 11px; }
.vbl-asingle__author img { width: 44px; height: 44px; border-radius: var(--vbl-r-full); }
.vbl-asingle__author strong { display: block; font-size: .94rem; }
.vbl-asingle__author small { color: var(--vbl-text-muted); font-size: .79rem; }

/*
 * Wider than the reading column and centred on the same axis, so it reads as a
 * deliberate hero. 16:9 is the ratio the covers are drawn at, and the height
 * cap stops it pushing the article itself off the first screen — at the full
 * container width, 16:9 alone came to 787px tall.
 */
.vbl-asingle__cover {
	margin: var(--vbl-gap-5) auto 0;
	width: min(1040px, 100%);
	aspect-ratio: 16 / 9;
	max-height: 520px;
	border-radius: var(--vbl-r-lg);
	border: 1px solid var(--vbl-border);
	overflow: hidden;
	background: var(--vbl-surface-2);
}

.vbl-asingle__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vbl-asingle__wrap {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: var(--vbl-gap-6);
	align-items: start;
	padding-block: var(--vbl-gap-6);
}

/* No sidebar means the prose should not stretch the full width. */
.vbl-asingle__wrap > .vbl-aprose:only-child {
	grid-column: 1 / -1;
	max-width: 74ch;
	margin-inline: auto;
}

/* --- table of contents ---------------------------------------------- */

.vbl-atoc {
	position: sticky;
	top: 96px;
	padding: 18px;
	border: 1px solid var(--vbl-border);
	border-radius: var(--vbl-r-md);
	background: var(--vbl-surface);
	max-height: calc(100vh - 130px);
	overflow-y: auto;
}

.vbl-atoc__title {
	margin: 0 0 12px;
	font-size: .82rem;
	font-weight: 700;
	color: var(--vbl-text-muted);
	letter-spacing: .02em;
}

.vbl-atoc__list { list-style: none; margin: 0; padding: 0; }

.vbl-atoc__item a {
	display: block;
	padding: 7px 0;
	color: var(--vbl-text-soft);
	font-size: .86rem;
	line-height: 1.7;
	text-decoration: none;
	border-inline-start: 2px solid transparent;
	padding-inline-start: 11px;
	transition: color var(--vbl-fast), border-color var(--vbl-fast);
}

.vbl-atoc__item a:hover { color: var(--vbl-text); }

.vbl-atoc__item.is-active a {
	color: var(--vbl-accent);
	border-inline-start-color: var(--vbl-accent);
}

.vbl-atoc__item--h3 a { padding-inline-start: 24px; font-size: .81rem; }

/* --- prose ----------------------------------------------------------- */

.vbl-prose { color: var(--vbl-text-soft); font-size: 1.02rem; line-height: 2.15; }
.vbl-prose > * + * { margin-block-start: 1.25em; }

.vbl-prose h2 {
	margin-block-start: 2em;
	font-size: clamp(1.3rem, 2.2vw, 1.6rem);
	line-height: 1.5;
	color: var(--vbl-text);
	scroll-margin-top: 110px;
}

.vbl-prose h3 {
	margin-block-start: 1.7em;
	font-size: clamp(1.08rem, 1.8vw, 1.25rem);
	line-height: 1.6;
	color: var(--vbl-text);
	scroll-margin-top: 110px;
}

.vbl-prose p { margin-block: 0; }
.vbl-prose a { color: var(--vbl-accent); text-underline-offset: 4px; }
.vbl-prose strong { color: var(--vbl-text); }

.vbl-prose ul,
.vbl-prose ol { padding-inline-start: 1.4em; margin-block: 0; }
.vbl-prose li + li { margin-block-start: .6em; }

.vbl-prose img,
.vbl-prose figure img {
	max-width: 100%;
	height: auto;
	border-radius: var(--vbl-r-md);
	display: block;
}

.vbl-prose figure { margin-inline: 0; }

.vbl-prose figcaption {
	margin-block-start: 10px;
	color: var(--vbl-text-muted);
	font-size: .82rem;
	text-align: center;
}

.vbl-prose blockquote {
	margin-inline: 0;
	padding: 4px 20px;
	border-inline-start: 3px solid var(--vbl-accent);
	color: var(--vbl-text);
	font-size: 1.06rem;
}

.vbl-prose code {
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--vbl-surface-2);
	font-size: .88em;
	direction: ltr;
	display: inline-block;
}

.vbl-prose pre {
	padding: 16px 18px;
	border: 1px solid var(--vbl-border);
	border-radius: var(--vbl-r-md);
	background: var(--vbl-surface-2);
	overflow-x: auto;
	direction: ltr;
	text-align: left;
	font-size: .86rem;
	line-height: 1.8;
}

.vbl-prose pre code { padding: 0; background: none; }

.vbl-prose table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.vbl-prose th,
.vbl-prose td { padding: 10px 12px; border: 1px solid var(--vbl-border); text-align: start; }
.vbl-prose th { background: var(--vbl-surface-2); color: var(--vbl-text); font-weight: 700; }

.vbl-prose hr { border: 0; border-top: 1px solid var(--vbl-border); margin-block: 2.4em; }

/* --- tags and author ------------------------------------------------- */

.vbl-atags { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 2.5em; }

.vbl-atag {
	padding: 6px 13px;
	border: 1px solid var(--vbl-border);
	border-radius: var(--vbl-r-full);
	color: var(--vbl-text-muted);
	font-size: .8rem;
	text-decoration: none;
}

.vbl-atag:hover { color: var(--vbl-accent); border-color: var(--vbl-accent-line); }

.vbl-abio {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin-block-start: 2.5em;
	padding: 20px;
	border: 1px solid var(--vbl-border);
	border-radius: var(--vbl-r-lg);
	background: var(--vbl-surface);
}

.vbl-abio__pic img { width: 64px; height: 64px; border-radius: var(--vbl-r-full); display: block; }
.vbl-abio__name { display: block; margin-bottom: 6px; font-size: 1rem; }
.vbl-abio__text { margin: 0; color: var(--vbl-text-soft); font-size: .88rem; line-height: 1.95; }

.vbl-apages { margin-block-start: 2em; color: var(--vbl-text-muted); font-size: .88rem; }

/* --- 404 -------------------------------------------------------------- */

.vbl-404__head { padding-block: var(--vbl-gap-6) var(--vbl-gap-5); text-align: center; }
.vbl-404__art { max-width: 320px; margin-inline: auto; }
.vbl-404__art svg { width: 100%; height: auto; display: block; }
.vbl-404__title { font-size: clamp(1.6rem, 3.5vw, 2.3rem); margin: 0 0 12px; }
.vbl-404__lede { max-width: 54ch; margin-inline: auto; }

.vbl-404__search {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 520px;
	margin: var(--vbl-gap-5) auto 0;
}

.vbl-404__search .vbl-input { flex: 1 1 240px; }

.vbl-404__links {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	margin-block-start: var(--vbl-gap-4);
}

/* --- empty state ------------------------------------------------------ */

.vbl-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: var(--vbl-gap-6) var(--vbl-gap-4);
	border: 1px dashed var(--vbl-border);
	border-radius: var(--vbl-r-lg);
	color: var(--vbl-text-muted);
	text-align: center;
}

.vbl-empty h2 { margin: 0; font-size: 1.15rem; color: var(--vbl-text); }
.vbl-empty p { margin: 0; font-size: .9rem; }

/* --- narrow ----------------------------------------------------------- */

@media (max-width: 1024px) {
	.vbl-asingle__wrap { grid-template-columns: minmax(0, 1fr); }
	.vbl-atoc { position: static; max-height: none; }
	.vbl-atoc__list { columns: 2; column-gap: 24px; }
}

@media (max-width: 780px) {
	.vbl-alead { grid-template-columns: minmax(0, 1fr); }
	.vbl-atoc__list { columns: 1; }
}

@media (max-width: 560px) {
	.vbl-agrid { grid-template-columns: minmax(0, 1fr); }
	.vbl-asingle__byline { flex-direction: column; align-items: stretch; }
}

/* --- compact article row ---------------------------------------------
   The landing page and the related-reading strip show a row of four or
   five, so the cards are smaller than on the article index. */

.vbl-agrid--compact {
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--vbl-gap-3);
}

.vbl-acard--compact .vbl-acard__body { padding: 13px 15px 11px; gap: 8px; }
.vbl-acard--compact .vbl-acard__title { font-size: .92rem; line-height: 1.6; }
.vbl-acard--compact .vbl-acard__excerpt { font-size: .8rem; line-height: 1.85; }
.vbl-acard--compact .vbl-acard__foot { padding-top: 10px; font-size: .73rem; }
.vbl-acard--compact .vbl-acard__author img { width: 20px; height: 20px; }
.vbl-acard--compact .vbl-acard__cat { font-size: .68rem; padding: 4px 9px; }

/* Five across once there is room for them. */
@media (min-width: 1240px) {
	.vbl-agrid--compact { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 900px) and (max-width: 1239px) {
	.vbl-agrid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.vbl-agrid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vbl-acard--compact .vbl-acard__excerpt { display: none; }
}

/* The archive's kind label: "برچسب", "دسته‌بندی", "نوشته‌های". */
.vbl-ahero__kind {
	display: inline-block;
	margin-bottom: 10px;
	padding: 5px 13px;
	border-radius: var(--vbl-r-full);
	background: var(--vbl-accent-soft);
	color: var(--vbl-accent);
	font-size: .76rem;
	font-weight: 700;
}