/**
 * ATORA-LMS — Frontend Design System
 * Covers: archive-course, single-course, single-lesson
 */

/* ══════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ══════════════════════════════════════════════════════ */
:root {
	--ac-brand:       #4353ff;
	--ac-brand-dk:    #3241e0;
	--ac-brand-lt:    #eef0ff;
	--ac-green:       #22c55e;
	--ac-amber:       #f59e0b;
	--ac-red:         #ef4444;

	--ac-gray-900:    #111827;
	--ac-gray-800:    #1f2937;
	--ac-gray-700:    #374151;
	--ac-gray-600:    #4b5563;
	--ac-gray-500:    #6b7280;
	--ac-gray-400:    #9ca3af;
	--ac-gray-300:    #d1d5db;
	--ac-gray-200:    #e5e7eb;
	--ac-gray-100:    #f3f4f6;
	--ac-gray-50:     #f9fafb;
	--ac-white:       #ffffff;

	--ac-radius-xs:   4px;
	--ac-radius-sm:   8px;
	--ac-radius:      12px;
	--ac-radius-lg:   16px;
	--ac-radius-xl:   24px;

	--ac-shadow-xs:   0 1px 2px rgba(0,0,0,.05);
	--ac-shadow-sm:   0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
	--ac-shadow:      0 4px 8px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
	--ac-shadow-md:   0 10px 20px rgba(0,0,0,.07), 0 4px 8px rgba(0,0,0,.04);
	--ac-shadow-lg:   0 20px 40px rgba(0,0,0,.09), 0 8px 16px rgba(0,0,0,.05);

	--ac-ease:        cubic-bezier(.4, 0, .2, 1);
	--ac-t:           .18s;
}

/* ══════════════════════════════════════════════════════
   2. BASE RESET (scoped)
   ══════════════════════════════════════════════════════ */
.atora-archive-courses *,
.atora-lesson-wrap *,
.cp-wrap * {
	box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════
   3. SHARED COMPONENTS
   ══════════════════════════════════════════════════════ */

/* Container */
.atora-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Buttons */
.atora-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	border-radius: var(--ac-radius-sm);
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: all var(--ac-t) var(--ac-ease);
	white-space: nowrap;
}
.atora-btn-primary {
	background: var(--ac-brand);
	color: var(--ac-white);
	border-color: var(--ac-brand);
}
.atora-btn-primary:hover {
	background: var(--ac-brand-dk);
	border-color: var(--ac-brand-dk);
	color: var(--ac-white);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(67,83,255,.38);
}
.atora-btn-outline {
	background: transparent;
	color: var(--ac-gray-900);
	border-color: var(--ac-gray-300);
}
.atora-btn-outline:hover {
	border-color: var(--ac-gray-900);
	color: var(--ac-gray-900);
	background: var(--ac-gray-50);
}
.atora-btn-sm { padding: 7px 14px; font-size: 13px; }
.atora-btn-lg { padding: 14px 32px; font-size: 16px; border-radius: var(--ac-radius); }

/* Badges */
.atora-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: 99px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	line-height: 1.4;
}
.atora-badge-brand  { background: var(--ac-brand-lt); color: var(--ac-brand); }
.atora-badge-green  { background: #dcfce7; color: #166534; }
.atora-badge-amber  { background: #fef9c3; color: #854d0e; }
.atora-badge-gray   { background: var(--ac-gray-100); color: var(--ac-gray-700); }
.atora-badge-red    { background: #fee2e2; color: #991b1b; }

/* Progress bar */
.atora-progress {
	height: 6px;
	background: var(--ac-gray-100);
	border-radius: 99px;
	overflow: hidden;
}
.atora-progress-fill {
	height: 100%;
	background: var(--ac-brand);
	border-radius: 99px;
	transition: width .6s ease;
}
.atora-progress-fill.is-complete { background: var(--ac-green); }

/* Gate */
.atora-gate {
	padding: 56px 32px;
	background: var(--ac-gray-50);
	border: 1px solid var(--ac-gray-200);
	border-radius: var(--ac-radius-lg);
	text-align: center;
}
.atora-gate p { margin: 0 0 20px; font-size: 16px; color: var(--ac-gray-700); }


/* ══════════════════════════════════════════════════════
   4. ARCHIVE COURSES
   ══════════════════════════════════════════════════════ */

.atora-archive-courses { padding-bottom: 80px; }

/* Hero */
.atora-archive-hero {
	padding: 64px 0 52px;
	margin-bottom: 48px;
	border-bottom: 1px solid var(--ac-gray-200);
}
.atora-archive-hero__kicker {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--ac-brand);
	margin: 0 0 10px;
}
.atora-archive-hero__title {
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 12px;
	color: var(--ac-gray-900);
}
.atora-archive-hero__sub {
	margin: 0;
	font-size: 17px;
	color: var(--ac-gray-500);
	max-width: 560px;
}

/* Course grid */
.atora-courses-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 28px;
}

/* Course card */
.atora-course-card {
	background: var(--ac-white);
	border: 1px solid var(--ac-gray-200);
	border-radius: var(--ac-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition:
		box-shadow var(--ac-t) var(--ac-ease),
		transform  var(--ac-t) var(--ac-ease);
}
.atora-course-card:hover {
	box-shadow: var(--ac-shadow-md);
	transform: translateY(-3px);
}

/* Thumbnail */
.atora-course-card__thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--ac-gray-100);
	position: relative;
	flex-shrink: 0;
}
.atora-course-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.atora-course-card:hover .atora-course-card__thumb img { transform: scale(1.04); }
.atora-course-card__thumb-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 48px;
	background: linear-gradient(135deg, var(--ac-brand-lt) 0%, #dde0ff 100%);
}

/* Badges overlay on thumb */
.atora-course-card__badges {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	gap: 6px;
	z-index: 1;
}

/* Card body */
.atora-course-card__body {
	padding: 20px 20px 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.atora-course-card__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ac-gray-900);
}
.atora-course-card__title a {
	text-decoration: none;
	color: inherit;
}
.atora-course-card__title a:hover { color: var(--ac-brand); }
.atora-course-card__excerpt {
	margin: 0;
	font-size: 14px;
	color: var(--ac-gray-500);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Meta row */
.atora-course-card__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 12px;
	color: var(--ac-gray-500);
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 4px;
}
.atora-course-card__meta-item {
	display: flex;
	align-items: center;
	gap: 4px;
	font-weight: 500;
}

/* Progress (enrolled) */
.atora-course-card__progress-wrap { padding-top: 2px; }
.atora-course-card__progress-label {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--ac-gray-500);
	margin-bottom: 5px;
	font-weight: 600;
}

/* Card footer */
.atora-course-card__footer {
	padding: 16px 20px 20px;
}

/* Empty state */
.atora-courses-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 80px 20px;
	color: var(--ac-gray-500);
}
.atora-courses-empty__icon { font-size: 48px; margin-bottom: 16px; }
.atora-courses-empty p { margin: 0; font-size: 16px; }

/* Pagination */
.atora-pagination {
	margin-top: 48px;
	display: flex;
	justify-content: center;
	gap: 4px;
}
.atora-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border-radius: var(--ac-radius-sm);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--ac-gray-700);
	background: transparent;
	transition: all var(--ac-t) var(--ac-ease);
}
.atora-pagination .page-numbers:hover { background: var(--ac-brand-lt); color: var(--ac-brand); }
.atora-pagination .page-numbers.current { background: var(--ac-brand); color: var(--ac-white); }
.atora-pagination .page-numbers.dots { pointer-events: none; }


/* ══════════════════════════════════════════════════════
   5. SINGLE COURSE (Course Player)
   ══════════════════════════════════════════════════════ */

.cp-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px 80px; }

/* Hero */
.cp-hero {
	padding: 48px 0 36px;
	border-bottom: 1px solid var(--ac-gray-200);
	margin-bottom: 48px;
}
.cp-hero-kicker {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--ac-brand);
	margin-bottom: 10px;
}
.cp-hero-title {
	margin: 0 0 12px;
	font-size: clamp(24px, 3vw, 38px);
	font-weight: 800;
	line-height: 1.2;
	color: var(--ac-gray-900);
}
.cp-hero-desc {
	margin: 0 0 24px;
	color: var(--ac-gray-500);
	font-size: 16px;
	line-height: 1.65;
	max-width: 680px;
}
.cp-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}
.cp-hero-meta {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--ac-gray-500);
}
.cp-hero-meta-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
}
.cp-hero-progress {
	display: flex;
	align-items: center;
	gap: 10px;
}
.cp-hero-progress-bar {
	width: 140px;
	height: 6px;
	background: var(--ac-gray-100);
	border-radius: 99px;
	overflow: hidden;
}
.cp-hero-progress-bar span {
	display: block;
	height: 100%;
	background: var(--ac-brand);
	border-radius: 99px;
}

/* Layout */
.cp-layout {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 48px;
	align-items: start;
}

/* Sidebar */
.cp-sidebar { position: sticky; top: 24px; }
.cp-outline-box {
	border: 1px solid var(--ac-gray-200);
	border-radius: var(--ac-radius-lg);
	overflow: hidden;
	background: var(--ac-white);
	box-shadow: var(--ac-shadow-sm);
	font-size: 13px;
}
.cp-outline-head {
	padding: 18px 20px;
	border-bottom: 1px solid var(--ac-gray-100);
	background: var(--ac-gray-50);
}
.cp-outline-head-title { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--ac-gray-900); }
.cp-outline-progress-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; font-size: 12px; color: var(--ac-gray-500); }
.cp-outline-bar { height: 5px; background: var(--ac-gray-100); border-radius: 99px; overflow: hidden; }
.cp-outline-bar span { display: block; height: 100%; background: var(--ac-brand); border-radius: 99px; transition: width .4s; }
.cp-outline-list { padding: 6px 0; max-height: 65vh; overflow-y: auto; }
.cp-outline-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	text-decoration: none;
	color: inherit;
	border-left: 3px solid transparent;
	transition: background var(--ac-t) var(--ac-ease), border-color var(--ac-t) var(--ac-ease);
	cursor: pointer;
}
.cp-outline-item:hover { background: var(--ac-gray-50); }
.cp-outline-item.is-active { background: var(--ac-brand-lt); border-left-color: var(--ac-brand); }
.cp-outline-item.is-done { opacity: .65; }
.cp-outline-item.is-done:hover { opacity: 1; }
.cp-outline-num {
	flex-shrink: 0;
	width: 24px; height: 24px;
	border-radius: 50%;
	border: 2px solid var(--ac-gray-300);
	display: flex; align-items: center; justify-content: center;
	font-size: 10px; font-weight: 700;
	background: var(--ac-white);
}
.cp-outline-item.is-active .cp-outline-num { border-color: var(--ac-brand); color: var(--ac-brand); }
.cp-outline-item.is-done .cp-outline-num {
	border-color: var(--ac-green);
	background: var(--ac-green);
	color: var(--ac-white);
}
.cp-outline-copy strong { display: block; font-size: 12px; line-height: 1.3; color: var(--ac-gray-900); }
.cp-outline-copy small { font-size: 10px; color: var(--ac-gray-500); text-transform: uppercase; letter-spacing: .04em; }

/* Lesson feed */
.cp-feed { display: flex; flex-direction: column; }
.cp-lesson-section {
	padding: 48px 0;
	border-bottom: 1px solid var(--ac-gray-100);
	scroll-margin-top: 24px;
}
.cp-lesson-section:last-child { border-bottom: none; }
.cp-lesson-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cp-lesson-num {
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--ac-gray-900);
	color: var(--ac-white);
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.cp-lesson-num.is-done { background: var(--ac-green); }
.cp-lesson-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ac-gray-400); }
.cp-lesson-title { margin: 0 0 8px; font-size: clamp(18px, 2.5vw, 26px); font-weight: 700; line-height: 1.25; color: var(--ac-gray-900); }
.cp-lesson-subtitle { margin: 0 0 24px; color: var(--ac-gray-500); font-size: 15px; line-height: 1.6; max-width: 640px; }

/* Cover & video */
.cp-lesson-cover { margin-bottom: 24px; border-radius: var(--ac-radius); overflow: hidden; }
.cp-lesson-cover img { width: 100%; height: auto; display: block; }
.cp-lesson-video { margin-bottom: 28px; border-radius: var(--ac-radius); overflow: hidden; background: #000; }
.cp-lesson-video-ratio { position: relative; padding-top: 56.25%; }
.cp-lesson-video-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block; }
.cp-lesson-video-player { width: 100%; display: block; }

/* Content */
.cp-lesson-content { color: var(--ac-gray-700); line-height: 1.75; font-size: 16px; }
.cp-lesson-content p { margin: 0 0 16px; }
.cp-lesson-content iframe { max-width: 100%; border-radius: var(--ac-radius-sm); }
.cp-lesson-content h2, .cp-lesson-content h3 { color: var(--ac-gray-900); margin: 1.5em 0 .6em; }

/* Gate & lock */
.cp-gate {
	padding: 56px 32px;
	background: var(--ac-gray-50);
	border: 1px solid var(--ac-gray-200);
	border-radius: var(--ac-radius-lg);
	text-align: center;
}
.cp-gate p { margin: 0 0 20px; font-size: 16px; color: var(--ac-gray-700); }
.cp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	background: var(--ac-gray-900);
	color: var(--ac-white);
	border-radius: var(--ac-radius-sm);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	transition: opacity var(--ac-t) var(--ac-ease);
}
.cp-btn-primary { background: var(--ac-brand); }
.cp-btn-secondary { background: var(--ac-white); color: var(--ac-gray-900); border: 1px solid var(--ac-gray-300); }
.cp-btn:hover { opacity: .85; color: var(--ac-white); }
.cp-btn-secondary:hover { color: var(--ac-gray-900); opacity: 1; background: var(--ac-gray-50); }
.cp-lesson-locked {
	padding: 20px 24px;
	background: var(--ac-gray-50);
	border: 1px dashed var(--ac-gray-300);
	border-radius: var(--ac-radius);
	color: var(--ac-gray-500);
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}


/* ══════════════════════════════════════════════════════
   6. SINGLE LESSON
   ══════════════════════════════════════════════════════ */

.atora-lesson-wrap { max-width: 1280px; margin: 0 auto; padding: 32px 24px 64px; }
.atora-lesson-layout { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.atora-lesson-layout.has-sidebar { grid-template-columns: 1fr 300px; }

/* Breadcrumb */
.atora-lesson-breadcrumb {
	margin-bottom: 24px;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.atora-lesson-breadcrumb a {
	color: var(--ac-gray-500);
	text-decoration: none;
	font-weight: 500;
	transition: color var(--ac-t) var(--ac-ease);
}
.atora-lesson-breadcrumb a:hover { color: var(--ac-brand); }
.atora-lesson-breadcrumb__sep { color: var(--ac-gray-300); }

/* Lesson header */
.atora-lesson-header { margin-bottom: 32px; }
.atora-lesson-header__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.atora-lesson-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 24px;
}
.atora-lesson-title {
	margin: 0 0 8px;
	font-size: clamp(22px, 3vw, 34px);
	font-weight: 800;
	line-height: 1.25;
	color: var(--ac-gray-900);
}
.atora-lesson-subtitle { margin: 0; color: var(--ac-gray-500); font-size: 16px; line-height: 1.55; }

/* Cover */
.atora-lesson-cover { margin-bottom: 28px; border-radius: var(--ac-radius); overflow: hidden; box-shadow: var(--ac-shadow); }
.atora-lesson-cover-img { width: 100%; height: auto; display: block; }

/* Video player */
.atora-lesson-video {
	margin-bottom: 32px;
	border-radius: var(--ac-radius);
	overflow: hidden;
	background: #000;
	box-shadow: var(--ac-shadow-md);
}
.atora-lesson-video-ratio {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding-top: 56.25%;
}
@supports (aspect-ratio: 16/9) {
	.atora-lesson-video-ratio { padding-top: 0; }
}
.atora-lesson-video-ratio iframe,
.atora-lesson-video-ratio video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}
.atora-lesson-video-player { width: 100%; display: block; }

/* Lite player */
.atora-lite-player { cursor: pointer; }
.atora-lite-thumb {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block; z-index: 0;
}
.atora-lite-overlay {
	position: absolute; inset: 0;
	background: rgba(0,0,0,.22);
	transition: background .2s;
	z-index: 1;
}
.atora-lite-player:hover .atora-lite-overlay { background: rgba(0,0,0,.08); }
.atora-lite-play {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	background: none; border: none; padding: 0; cursor: pointer; z-index: 2;
}
.atora-lite-play svg { filter: drop-shadow(0 2px 10px rgba(0,0,0,.6)); transition: transform .2s; }
.atora-lite-player:hover .atora-lite-play svg { transform: scale(1.1); }

/* Video description */
.atora-video-description {
	margin: 0 0 28px;
	color: var(--ac-gray-700);
	font-size: 16px;
	line-height: 1.75;
}
.atora-video-description p  { margin: 0 0 1em; }
.atora-video-description ul,
.atora-video-description ol { margin: 0 0 1em; padding-left: 1.6em; }
.atora-video-description li { margin-bottom: .35em; }
.atora-video-description a  { color: var(--ac-brand); text-decoration: underline; }
.atora-video-description strong, .atora-video-description b { font-weight: 700; }
.atora-video-description em, .atora-video-description i { font-style: italic; }
.atora-video-description h2, .atora-video-description h3 { margin: 1.2em 0 .5em; color: var(--ac-gray-900); }

/* Lesson content */
.atora-lesson-content { margin-bottom: 40px; color: var(--ac-gray-700); font-size: 16px; line-height: 1.75; }
.atora-lesson-content p { margin: 0 0 1em; }
.atora-lesson-content ul, .atora-lesson-content ol { margin: 0 0 1em; padding-left: 1.6em; }
.atora-lesson-content li { margin-bottom: .4em; }
.atora-lesson-content h2, .atora-lesson-content h3 { color: var(--ac-gray-900); margin: 1.5em 0 .6em; font-weight: 700; }
.atora-lesson-content img { max-width: 100%; border-radius: var(--ac-radius-sm); height: auto; }
.atora-lesson-content iframe { max-width: 100%; border-radius: var(--ac-radius-sm); }
.atora-lesson-content figure { margin: 0 0 24px; }
.atora-lesson-content blockquote {
	border-left: 4px solid var(--ac-brand);
	padding: 12px 20px;
	margin: 0 0 1em;
	background: var(--ac-brand-lt);
	border-radius: 0 var(--ac-radius-sm) var(--ac-radius-sm) 0;
	font-style: italic;
	color: var(--ac-gray-700);
}
.atora-lesson-content code {
	background: var(--ac-gray-100);
	padding: 2px 6px;
	border-radius: var(--ac-radius-xs);
	font-size: .9em;
	color: var(--ac-red);
}
.atora-lesson-content pre {
	background: var(--ac-gray-900);
	color: #e5e7eb;
	padding: 20px;
	border-radius: var(--ac-radius-sm);
	overflow-x: auto;
	margin: 0 0 1em;
}
.atora-lesson-content pre code { background: none; padding: 0; color: inherit; }

/* Key points */
.atora-lesson-tips {
	margin-bottom: 40px;
	padding: 20px 24px;
	background: var(--ac-brand-lt);
	border-left: 4px solid var(--ac-brand);
	border-radius: 0 var(--ac-radius) var(--ac-radius) 0;
}
.atora-lesson-tips-title {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ac-brand);
}
.atora-lesson-tips-list { margin: 0; padding-left: 20px; }
.atora-lesson-tips-list li { margin-bottom: 8px; font-size: 15px; line-height: 1.55; color: var(--ac-gray-700); }

/* Gate */
.atora-lesson-gate {
	padding: 56px 32px;
	background: var(--ac-gray-50);
	border: 1px solid var(--ac-gray-200);
	border-radius: var(--ac-radius-lg);
	text-align: center;
}
.atora-lesson-gate p { margin: 0 0 20px; font-size: 16px; color: var(--ac-gray-700); }
.atora-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: var(--ac-radius-sm); text-decoration: none; font-weight: 700; }
.atora-btn-primary { background: var(--ac-brand); color: var(--ac-white); }
.atora-btn-secondary { background: var(--ac-white); color: var(--ac-gray-900); border: 1px solid var(--ac-gray-300); }

/* Resources */
.atora-lesson-resources { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--ac-gray-200); }
.atora-lesson-resources-title { margin: 0 0 24px; font-size: 20px; font-weight: 700; color: var(--ac-gray-900); }
.atora-resources-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
.atora-resource-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px;
	border: 1px solid var(--ac-gray-200);
	border-radius: var(--ac-radius);
	background: var(--ac-white);
	transition: box-shadow var(--ac-t) var(--ac-ease);
}
.atora-resource-item:hover { box-shadow: var(--ac-shadow); }
.atora-resource-thumb { flex-shrink: 0; }
.atora-resource-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--ac-radius-sm); display: block; }
.atora-resource-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.atora-resource-title { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--ac-gray-900); }
.atora-resource-type {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	background: var(--ac-gray-100);
	padding: 2px 8px;
	border-radius: var(--ac-radius-xs);
	color: var(--ac-gray-600);
}
.atora-resource-desc { margin: 0; font-size: 12px; color: var(--ac-gray-500); line-height: 1.4; }
.atora-resource-link {
	margin-top: 6px;
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	color: var(--ac-brand);
}
.atora-resource-link:hover { text-decoration: underline; }
.atora-resource-video { margin-top: 8px; border-radius: var(--ac-radius-sm); overflow: hidden; aspect-ratio: 16/9; background: #000; }
.atora-resource-video iframe { width: 100%; height: 100%; border: none; display: block; }

/* Resources details */
.atora-resources-details {
	border: 1px solid var(--ac-gray-200);
	border-radius: var(--ac-radius);
	padding: 12px 16px;
	background: var(--ac-gray-50);
}
.atora-resources-summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--ac-gray-900);
	list-style: none;
}
.atora-resources-summary::-webkit-details-marker { display: none; }
.atora-resources-summary::after {
	content: '▾';
	margin-left: 8px;
	font-size: 12px;
	color: var(--ac-gray-500);
}
.atora-resources-details[open] .atora-resources-summary::after { content: '▴'; }
.atora-resources-details .atora-resources-list { margin-top: 14px; }

/* Next step */
.atora-lesson-next {
	margin-top: 40px;
	padding: 20px 22px;
	border-radius: var(--ac-radius-lg);
	border: 1px solid rgba(67,83,255,.2);
	background: linear-gradient(135deg, #ffffff 0%, #eef2ff 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.atora-lesson-next__eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ac-brand); }
.atora-lesson-next__title { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--ac-gray-900); }
.atora-lesson-next__text { margin: 0; font-size: 14px; color: var(--ac-gray-600); }

/* Prev/Next nav */
.atora-lesson-nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid var(--ac-gray-200);
}
.atora-lesson-nav a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
	text-decoration: none;
	font-weight: 600;
	max-width: 46%;
	color: var(--ac-gray-900);
	padding: 16px 20px;
	border: 1px solid var(--ac-gray-200);
	border-radius: var(--ac-radius);
	transition:
		border-color var(--ac-t) var(--ac-ease),
		background    var(--ac-t) var(--ac-ease),
		color         var(--ac-t) var(--ac-ease);
}
.atora-lesson-nav a:hover {
	border-color: var(--ac-brand);
	background: var(--ac-brand-lt);
	color: var(--ac-brand);
}
.atora-lesson-nav a small {
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ac-gray-400);
}
.atora-lesson-nav a:hover small { color: var(--ac-brand); }
.atora-lesson-nav-next { margin-left: auto; text-align: right; }

/* Sidebar */
.atora-lesson-sidebar { position: sticky; top: 24px; }
.clms-course-sidebar-box {
	border: 1px solid var(--ac-gray-200);
	border-radius: var(--ac-radius-lg);
	overflow: hidden;
	background: var(--ac-white);
	box-shadow: var(--ac-shadow-sm);
	font-size: 14px;
}
.clms-course-sidebar-head {
	padding: 20px;
	border-bottom: 1px solid var(--ac-gray-100);
	background: var(--ac-gray-50);
}
.clms-course-sidebar-kicker {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--ac-gray-400);
	margin-bottom: 4px;
}
.clms-course-sidebar-title { margin: 0 0 16px; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ac-gray-900); }
.clms-course-sidebar-progress-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	font-size: 12px;
	color: var(--ac-gray-500);
}
.clms-course-sidebar-progress-bar { height: 6px; background: var(--ac-gray-100); border-radius: 99px; overflow: hidden; }
.clms-course-sidebar-progress-bar span {
	display: block;
	height: 100%;
	background: var(--ac-brand);
	border-radius: 99px;
	transition: width .4s ease;
}
.clms-course-outline { padding: 8px 0; max-height: 60vh; overflow-y: auto; }
.clms-course-outline-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 20px;
	text-decoration: none;
	color: inherit;
	border-left: 3px solid transparent;
	transition: background var(--ac-t) var(--ac-ease), border-color var(--ac-t) var(--ac-ease);
}
.clms-course-outline-item:hover { background: var(--ac-gray-50); }
.clms-course-outline-item.is-current { background: var(--ac-brand-lt); border-left-color: var(--ac-brand); }
.clms-course-outline-item.is-done { opacity: .65; }
.clms-course-outline-item.is-done:hover { opacity: 1; }
.clms-course-outline-index {
	flex-shrink: 0;
	width: 26px; height: 26px;
	border-radius: 50%;
	border: 2px solid var(--ac-gray-300);
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 700;
	background: var(--ac-white);
}
.clms-course-outline-item.is-current .clms-course-outline-index { border-color: var(--ac-brand); color: var(--ac-brand); }
.clms-course-outline-item.is-done .clms-course-outline-index {
	border-color: var(--ac-green);
	background: var(--ac-green);
	color: var(--ac-white);
}
.clms-course-outline-copy strong { display: block; font-size: 13px; line-height: 1.3; color: var(--ac-gray-900); }
.clms-course-outline-copy small { font-size: 11px; color: var(--ac-gray-500); }


/* ══════════════════════════════════════════════════════
   7. RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (max-width: 960px) {
	.cp-layout { grid-template-columns: 1fr; }
	.cp-sidebar { position: static; order: -1; }
	.cp-outline-list { max-height: 260px; }

	.atora-lesson-layout.has-sidebar { grid-template-columns: 1fr; }
	.atora-lesson-sidebar { position: static; order: -1; }
	.clms-course-outline { max-height: 280px; }
}

@media (max-width: 640px) {
	.atora-container,
	.cp-wrap,
	.atora-lesson-wrap { padding-left: 16px; padding-right: 16px; }

	.atora-courses-grid { grid-template-columns: 1fr; gap: 16px; }
	.atora-archive-hero { padding: 40px 0 32px; }

	.atora-resources-list { grid-template-columns: 1fr; }

	.atora-lesson-nav { flex-direction: column; }
	.atora-lesson-nav a { max-width: 100%; }
	.atora-lesson-nav-next { text-align: left; margin-left: 0; }

	.cp-hero { padding: 32px 0 28px; margin-bottom: 32px; }
	.cp-hero-meta { flex-direction: column; align-items: flex-start; gap: 14px; }
	.cp-hero-progress { width: 100%; }
	.cp-hero-progress-bar { width: 100%; flex: 1 1 auto; }
	.cp-hero-actions { flex-direction: column; align-items: stretch; }
	.cp-btn { width: 100%; }
	.cp-outline-box { border-radius: 18px; }
	.cp-outline-list { max-height: 45vh; }
	.cp-outline-item { padding: 12px 14px; }
	.cp-lesson-section { padding: 32px 0; }
	.cp-lesson-subtitle,
	.cp-lesson-content,
	.atora-lesson-subtitle,
	.atora-lesson-content,
	.atora-video-description { font-size: 15px; line-height: 1.7; }
	.atora-lesson-breadcrumb { margin-bottom: 16px; }
	.atora-lesson-header { margin-bottom: 24px; }
	.atora-lesson-actions { flex-direction: column; align-items: stretch; }
	.atora-lesson-actions .atora-btn { width: 100%; }
	.atora-lesson-gate { padding: 32px 18px; }
	.atora-lesson-cover,
	.atora-lesson-video { margin-bottom: 20px; }
	.atora-resources-list { grid-template-columns: 1fr; }
	.atora-lesson-next { flex-direction: column; align-items: flex-start; }
	.clms-course-sidebar-head { padding: 16px; }
	.clms-course-outline-item { padding: 12px 16px; }
}

/* ══════════════════════════════════════════════════════
   9. SUBMISSION TIMELINE
   ══════════════════════════════════════════════════════ */
.clms-submission-timeline{
	display:flex;
	align-items:center;
	gap:16px;
	padding:12px 0 4px;
	flex-wrap:wrap;
}
.clms-submission-step{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:13px;
	color:var(--ac-gray-500);
}
.clms-submission-dot{
	width:10px;
	height:10px;
	border-radius:50%;
	background:var(--ac-gray-300);
	box-shadow:0 0 0 4px rgba(67,83,255,.08);
}
.clms-submission-step.is-active .clms-submission-dot,
.clms-submission-step.is-done .clms-submission-dot{
	background:var(--ac-brand);
	box-shadow:0 0 0 4px rgba(67,83,255,.18);
}
.clms-submission-step.is-active .clms-submission-label,
.clms-submission-step.is-done .clms-submission-label{
	color:var(--ac-gray-900);
	font-weight:600;
}
@media (max-width:640px){
	.clms-submission-timeline{flex-direction:column;align-items:flex-start}
}

/* ══════════════════════════════════════════════════════
   10. DOCENTES
   ══════════════════════════════════════════════════════ */
.atora-teacher-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
	gap:18px;
}
.atora-teacher-card{
	background:var(--ac-white);
	border:1px solid var(--ac-gray-200);
	border-radius:var(--ac-radius-lg);
	padding:18px;
	box-shadow:var(--ac-shadow-xs);
	display:grid;
	gap:14px;
}
.atora-teacher-head{
	display:grid;
	grid-template-columns:64px minmax(0,1fr);
	gap:14px;
	align-items:start;
}
.atora-teacher-avatar{
	width:64px;
	height:64px;
	border-radius:999px;
	overflow:hidden;
	background:var(--ac-gray-100);
	display:flex;
	align-items:center;
	justify-content:center;
}
.atora-teacher-avatar img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.atora-teacher-avatar-fallback{
	font-weight:800;
	color:var(--ac-brand);
	font-size:20px;
}
.atora-teacher-name{
	margin:0 0 4px;
	font-size:18px;
	font-weight:700;
	color:var(--ac-gray-900);
}
.atora-teacher-specialty{
	margin:0 0 6px;
	font-size:13px;
	color:var(--ac-brand);
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.05em;
}
.atora-teacher-bio{
	margin:0;
	font-size:14px;
	color:var(--ac-gray-600);
	line-height:1.6;
}
.atora-teacher-achievements{
	margin:0;
	padding-left:18px;
	display:grid;
	gap:6px;
	color:var(--ac-gray-700);
	font-size:13px;
}
.atora-teacher-socials{
	display:flex;
	flex-wrap:wrap;
	gap:10px 14px;
}
.atora-teacher-socials a{
	color:var(--ac-gray-700);
	font-size:13px;
	text-decoration:none;
	font-weight:600;
}
.atora-teacher-socials a:hover{color:var(--ac-brand)}
.atora-teacher-link{
	color:var(--ac-brand);
	font-weight:700;
	font-size:13px;
	text-decoration:none;
}
.atora-teacher-link:hover{text-decoration:underline}
@media (max-width:640px){
	.atora-teacher-head{grid-template-columns:1fr}
	.atora-teacher-avatar{width:56px;height:56px}
}