/**
 * VELYON Foundation LMS - Course Landing Page Styles
 *
 * Depends on vel-fdn-lms-public.css being loaded first (it declares the
 * shared --vel-fdn-* brand palette variables at :root — reused here
 * rather than redeclared, so the two files can never drift apart).
 *
 * Rewritten in Milestone 18 to match the site owner's reference design.
 */

.vel-fdn-landing-page {
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 20px 64px;
	color: var(--velyon-text);
}

/* ---------------------------------------------------------------- */
/* Breadcrumb                                                        */
/* ---------------------------------------------------------------- */

.vel-fdn-landing-breadcrumb {
	margin-bottom: 18px;
	font-size: 13px;
}

.vel-fdn-landing-breadcrumb a {
	color: var(--velyon-text-muted);
	text-decoration: none;
}

.vel-fdn-landing-breadcrumb a:hover {
	color: var(--velyon-accent);
}

/* ---------------------------------------------------------------- */
/* Intro (title, tagline, top badges)                                 */
/* ---------------------------------------------------------------- */

.vel-fdn-landing-intro {
	margin-bottom: 24px;
}

.vel-fdn-landing-title {
	font-size: 34px;
	line-height: 1.2;
	margin: 0 0 12px;
	color: var(--velyon-text);
}

.vel-fdn-landing-tagline {
	font-size: 17px;
	color: var(--velyon-text-muted);
	margin: 0 0 16px;
	max-width: 760px;
}

.vel-fdn-landing-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vel-fdn-landing-badge {
	display: inline-block;
	padding: 5px 14px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	border-radius: 999px;
}

.vel-fdn-landing-badge-stage {
	color: var(--velyon-accent);
	border: 1px solid color-mix(in srgb, var(--velyon-accent) 35%, transparent);
	background: color-mix(in srgb, var(--velyon-accent) 15%, transparent);
}

.vel-fdn-landing-badge-muted {
	color: var(--velyon-text-muted);
	border: 1px solid var(--velyon-border);
	background: transparent;
}

/* ---------------------------------------------------------------- */
/* Hero banner                                                        */
/* ---------------------------------------------------------------- */

.vel-fdn-landing-hero {
	position: relative;
	margin-bottom: 40px;
	border-radius: var(--velyon-radius-s);
	overflow: hidden;
	background-color: var(--velyon-surface);
	background-size: cover;
	background-position: center;
	min-height: 260px;
	display: flex;
	align-items: flex-end;
}

.vel-fdn-landing-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.25) 100%);
}

.vel-fdn-landing-hero-overlay {
	position: relative;
	z-index: 1;
	padding: 28px 32px;
	width: 100%;
}

.vel-fdn-landing-hero-duration {
	position: absolute;
	top: 20px;
	right: 24px;
	z-index: 2;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #fff; /* sits on the always-dark image scrim, so fixed light in both modes */
	background: rgba(0, 0, 0, .5);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	padding: 6px 14px;
}

.vel-fdn-landing-hero-headline {
	font-size: 24px;
	line-height: 1.3;
	margin: 0 0 14px;
	max-width: 640px;
	color: #fff; /* on the image scrim: fixed light in both modes */
}

.vel-fdn-landing-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vel-fdn-landing-chip {
	display: inline-block;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	color: #fff; /* on the image scrim: fixed light in both modes */
	background: rgba(0, 0, 0, .45);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
}

/* ---------------------------------------------------------------- */
/* Body layout                                                       */
/* ---------------------------------------------------------------- */

.vel-fdn-landing-body {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: flex-start;
}

.vel-fdn-landing-main {
	flex: 2 1 500px;
	min-width: 0;
}

.vel-fdn-landing-sidebar {
	flex: 1 1 280px;
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

@media (max-width: 780px) {
	.vel-fdn-landing-sidebar {
		position: static;
		width: 100%;
	}
	.vel-fdn-landing-hero-duration {
		top: 16px;
		right: 16px;
	}
}

.vel-fdn-landing-section {
	margin-bottom: 36px;
}

.vel-fdn-landing-section h2 {
	font-size: 22px;
	margin: 0 0 16px;
	color: var(--velyon-text);
}

.vel-fdn-landing-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vel-fdn-landing-list li {
	padding: 10px 0 10px 30px;
	position: relative;
	border-bottom: 1px solid var(--velyon-border);
	color: var(--velyon-text-muted);
}

.vel-fdn-landing-list li:last-child {
	border-bottom: none;
}

.vel-fdn-landing-list-check li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 14px;
	width: 14px;
	height: 8px;
	border-left: 2px solid var(--velyon-accent);
	border-bottom: 2px solid var(--velyon-accent);
	transform: rotate(-45deg);
}

@media (min-width: 640px) {
	.vel-fdn-landing-list-2col {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 24px;
	}
	.vel-fdn-landing-list-2col li {
		border-bottom: none;
		padding-top: 8px;
		padding-bottom: 8px;
	}
}

.vel-fdn-landing-description-content {
	color: var(--velyon-text-muted);
	line-height: 1.7;
}

.vel-fdn-landing-description-content p:first-child {
	margin-top: 0;
}

/* ---------------------------------------------------------------- */
/* Program Content accordion                                         */
/* ---------------------------------------------------------------- */

.vel-fdn-landing-accordion {
	border: 1px solid var(--velyon-border);
	border-radius: var(--velyon-radius-s);
	overflow: hidden;
}

.vel-fdn-landing-week {
	border-bottom: 1px solid var(--velyon-border);
	background: var(--velyon-surface);
}

.vel-fdn-landing-week:last-child {
	border-bottom: none;
}

.vel-fdn-landing-week-toggle {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	background: none;
	border: none;
	color: var(--velyon-text);
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.vel-fdn-landing-week-icon {
	flex-shrink: 0;
	color: var(--velyon-accent);
	transition: transform .15s ease;
}

.vel-fdn-landing-week.is-open .vel-fdn-landing-week-icon {
	transform: rotate(180deg);
}

.vel-fdn-landing-week-body {
	display: none;
	padding: 0 20px 18px;
}

.vel-fdn-landing-week-body p {
	margin: 0;
	color: var(--velyon-text-muted);
	line-height: 1.6;
}

/* ---------------------------------------------------------------- */
/* Certification + sample images                                     */
/* ---------------------------------------------------------------- */

.vel-fdn-landing-certification p {
	color: var(--velyon-text-muted);
	line-height: 1.6;
}

.vel-fdn-landing-samples {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 18px;
}

.vel-fdn-landing-sample {
	margin: 0;
	flex: 1 1 220px;
	max-width: 320px;
}

.vel-fdn-landing-sample img {
	width: 100%;
	height: auto;
	border-radius: var(--velyon-radius-s);
	border: 1px solid var(--velyon-border);
	display: block;
}

.vel-fdn-landing-sample figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--velyon-text-muted);
	text-align: center;
}

/* ---------------------------------------------------------------- */
/* Upgrade CTA box                                                    */
/* ---------------------------------------------------------------- */

.vel-fdn-landing-upgrade-box {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding: 22px 24px;
	border: 1px solid color-mix(in srgb, var(--velyon-accent) 35%, transparent);
	border-radius: var(--velyon-radius-s);
	background: color-mix(in srgb, var(--velyon-accent) 15%, transparent);
	margin-bottom: 12px;
}

.vel-fdn-landing-upgrade-box strong {
	display: block;
	font-size: 16px;
	margin-bottom: 4px;
	color: var(--velyon-text);
}

.vel-fdn-landing-upgrade-box p {
	margin: 0;
	color: var(--velyon-text-muted);
	font-size: 14px;
}

.vel-fdn-landing-upgrade-link {
	flex-shrink: 0;
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid color-mix(in srgb, var(--velyon-accent) 35%, transparent);
	border-radius: 999px;
	color: var(--velyon-text);
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
}

.vel-fdn-landing-upgrade-link:hover {
	background: var(--velyon-accent);
	color: var(--velyon-on-accent);
}

/* ---------------------------------------------------------------- */
/* Sidebar                                                            */
/* ---------------------------------------------------------------- */

.vel-fdn-landing-price-card {
	background: var(--velyon-surface-alt);
	border: 1px solid color-mix(in srgb, var(--velyon-accent) 35%, transparent);
	border-radius: var(--velyon-radius-s);
	padding: 24px;
}

.vel-fdn-landing-price {
	font-size: 30px;
	font-weight: 700;
	color: var(--velyon-accent);
	margin-bottom: 4px;
}

.vel-fdn-landing-stage-line {
	margin: 0 0 18px;
	font-size: 13px;
	color: var(--velyon-text-muted);
}

.vel-fdn-landing-price-card-cta .vel-fdn-enroll-btn {
	width: 100%;
	text-align: center;
	margin-bottom: 18px;
}

.vel-fdn-landing-price-meta {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vel-fdn-landing-price-meta li {
	padding: 8px 0 8px 22px;
	position: relative;
	border-bottom: 1px solid var(--velyon-border);
	font-size: 14px;
	color: var(--velyon-text-muted);
}

.vel-fdn-landing-price-meta li:last-child {
	border-bottom: none;
}

.vel-fdn-landing-price-meta li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 15px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--velyon-accent);
}

.vel-fdn-landing-sidebar-box {
	background: var(--velyon-surface);
	border: 1px solid var(--velyon-border);
	border-radius: var(--velyon-radius-s);
	padding: 20px;
}

.vel-fdn-landing-sidebar-box h3 {
	font-size: 15px;
	margin: 0 0 12px;
	color: var(--velyon-text);
}

.vel-fdn-landing-sidebar-box .vel-fdn-landing-list li {
	font-size: 13px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.vel-fdn-landing-instructors {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.vel-fdn-landing-instructor {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: var(--velyon-text-muted);
}

.vel-fdn-landing-instructor strong {
	color: var(--velyon-text);
	font-size: 14px;
}

.vel-fdn-landing-instructor-role {
	font-size: 12px;
}

.vel-fdn-landing-instructor-avatar {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--velyon-accent);
	border: 1px solid color-mix(in srgb, var(--velyon-accent) 35%, transparent);
	background: color-mix(in srgb, var(--velyon-accent) 15%, transparent);
}

/* ---------------------------------------------------------------- */
/* Chat with Mentor button + sticky mobile bar (1.48.0)              */
/* ---------------------------------------------------------------- */

.vel-fdn-chat-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	background: transparent;
	color: var(--velyon-accent);
	border: 2px solid var(--velyon-accent);
	border-radius: var(--velyon-radius-s);
	padding: 10px 22px;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.vel-fdn-chat-btn:hover,
.vel-fdn-chat-btn:focus {
	background: var(--velyon-accent);
	color: var(--velyon-on-accent);
}
.vel-fdn-chat-btn svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}
.vel-fdn-landing-price-card-cta .vel-fdn-chat-btn {
	width: 100%;
	margin-bottom: 18px;
}
.vel-fdn-landing-price-card-cta .vel-fdn-enroll-btn + .vel-fdn-chat-btn {
	margin-top: -6px;
}

.vel-fdn-mobile-bar {
	display: none;
}

@media (max-width: 780px) {
	/* Pinned just above the theme's bottom menu. --vel-fdn-bar-offset is
	   the menu height (Settings, default 64px). z-index 190 keeps it
	   below the theme's bottom nav (200) and the Workspace button (250). */
	.vel-fdn-mobile-bar {
		display: flex;
		gap: 10px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--vel-fdn-bar-offset, 64px);
		z-index: 190;
		box-sizing: border-box;
		padding: 10px 12px;
		background: var(--velyon-surface);
		border-top: 1px solid var(--velyon-border);
		box-shadow: 0 -6px 18px rgba(0, 0, 0, .12);
		transition: transform .2s ease, opacity .2s ease;
	}
	.vel-fdn-mobile-bar.is-hidden {
		transform: translateY(140%);
		opacity: 0;
		pointer-events: none;
	}
	.vel-fdn-mobile-bar .vel-fdn-enroll-btn,
	.vel-fdn-mobile-bar .vel-fdn-chat-btn {
		flex: 1 1 0;
		min-width: 0;
		margin: 0;
		padding: 12px 8px;
		font-size: 13px;
		text-align: center;
		box-sizing: border-box;
	}
	.vel-fdn-mobile-bar .vel-fdn-enroll-btn {
		box-shadow: none;
	}
	.vel-fdn-mobile-bar.is-single .vel-fdn-enroll-btn,
	.vel-fdn-mobile-bar.is-single .vel-fdn-chat-btn {
		flex-basis: 100%;
	}
	/* Room so the pinned bar never covers the last lines of the page. */
	body.vel-fdn-has-mobile-bar .vel-fdn-landing-page {
		padding-bottom: 84px;
	}
}