/* ============================================================
   SAVOZI — Learn: free video courses
   ============================================================ */

.learn-page{padding-bottom:4rem}
.learn-hero{padding:1rem 0 2rem;text-align:center}
.learn-title{font-size:clamp(2rem,4.6vw,3rem);font-weight:800;letter-spacing:-.025em;margin:.6rem 0 .8rem}
.learn-tagline{color:var(--ink-soft);font-size:1.12rem;max-width:44rem;margin:0 auto 1.2rem;line-height:1.65}
.course-meta{display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap;color:var(--ink-soft);font-size:.95rem;font-weight:600}
.course-meta a{color:var(--brand-2);text-decoration:none}
.course-meta a:hover{text-decoration:underline}

/* ---------- Course cards (hub) ---------- */
.course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem;margin:0 0 3rem}
.course-card{
	position:relative;display:flex;flex-direction:column;gap:.55rem;
	background:#fff;border:1px solid var(--line);border-radius:20px;
	padding:1.8rem 1.6rem 1.5rem;text-decoration:none;color:var(--ink);
	box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s,border-color .25s;
	overflow:hidden;
}
.course-card::before{
	content:"";position:absolute;inset:0 0 auto 0;height:5px;
	background:var(--brand-grad);opacity:.9;
}
.course-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:#c9bdf5}
.course-card-icon{
	width:60px;height:60px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;
	background:linear-gradient(135deg,#ede9fe,#ddd0fb);color:var(--brand-2);margin-bottom:.3rem;
}
.course-card-badge{
	align-self:flex-start;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
	background:var(--bg-soft);border:1px solid var(--line);color:var(--ink-soft);
	padding:.28rem .7rem;border-radius:999px;
}
.course-card.is-live .course-card-badge{background:#ecfdf5;border-color:#a7f3d0;color:#047857}
.course-card h2{font-size:1.35rem;font-weight:800;margin:.2rem 0 0;letter-spacing:-.01em}
.course-card p{color:var(--ink-soft);font-size:.98rem;line-height:1.6;margin:0;flex:1}
.course-card-cta{font-weight:700;color:var(--brand-2);margin-top:.4rem}
.course-card.is-soon{opacity:.92}

/* ---------- Progress ---------- */
.progress-track{
	display:block;height:8px;border-radius:999px;background:#e9e4f7;overflow:hidden;margin-top:.6rem;
}
.progress-track-lg{max-width:26rem;margin:1.2rem auto .4rem;height:10px}
.progress-fill{display:block;height:100%;width:0;border-radius:999px;background:var(--brand-grad);transition:width .6s ease}
.progress-label{display:block;font-size:.85rem;font-weight:600;color:var(--ink-soft);margin-top:.3rem}
.course-progress{text-align:center}

/* ---------- Lesson list (course page) ---------- */
.lesson-list{list-style:none;margin:0 0 2.5rem;padding:0;display:flex;flex-direction:column;gap:.8rem}
.lesson-row{
	background:#fff;border:1px solid var(--line);border-radius:16px;
	transition:border-color .2s,box-shadow .2s;
}
.lesson-row.is-live:hover{border-color:#c9bdf5;box-shadow:var(--shadow-sm)}
.lesson-row.is-soon{opacity:.75;background:var(--bg-soft)}
.lesson-row-link{
	display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;
	text-decoration:none;color:var(--ink);
}
.lesson-num{
	flex:0 0 44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
	background:linear-gradient(135deg,#ede9fe,#ddd0fb);color:var(--brand-2);font-weight:800;font-size:1.05rem;
}
.lesson-info{flex:1;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.lesson-title{font-weight:700;font-size:1.02rem}
.lesson-duration{font-size:.85rem;color:var(--ink-faint);font-weight:600}
.lesson-state{display:inline-flex;align-items:center}
.lesson-play{
	width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
	background:var(--brand-grad);color:#fff;box-shadow:0 6px 16px rgba(124,58,237,.3);
}
.lesson-play svg{margin-left:2px}
.lesson-done{
	display:none;width:38px;height:38px;border-radius:50%;align-items:center;justify-content:center;
	background:#ecfdf5;color:#047857;border:1.5px solid #a7f3d0;
}
.lesson-row.is-completed .lesson-play{display:none}
.lesson-row.is-completed .lesson-done{display:inline-flex}
.lesson-row.is-completed .lesson-title{color:var(--ink-soft)}
.lesson-soon{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint)}

.course-soon{
	background:#fff;border:1px solid var(--line);border-radius:20px;
	padding:2.5rem 2rem;text-align:center;margin-bottom:2.5rem;box-shadow:var(--shadow-sm);
}
.course-soon h2{font-size:1.5rem;font-weight:800;margin-bottom:.6rem}
.course-soon p{color:var(--ink-soft);max-width:34rem;margin:0 auto 1.2rem;line-height:1.65}

/* ---------- Lesson page ---------- */
.video-wrap{
	position:relative;border-radius:20px;overflow:hidden;background:#14101f;
	box-shadow:var(--shadow-md);margin:0 0 1.4rem;border:1px solid var(--line);
}
.video-wrap video,.video-wrap iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#14101f}
.video-soon{color:#cfc6ec;padding:3rem 2rem;text-align:center;font-size:1.05rem}

.lesson-actions{display:flex;align-items:center;gap:1rem;margin-bottom:2.2rem;flex-wrap:wrap}
.btn-complete{
	display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.8rem;border-radius:999px;border:0;cursor:pointer;
	background:var(--brand-grad);color:#fff;font-weight:700;font-size:1rem;font-family:inherit;
	box-shadow:0 10px 26px rgba(124,58,237,.3);transition:transform .2s,box-shadow .2s,opacity .2s;
}
.btn-complete:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(124,58,237,.4)}
.btn-complete.is-done{opacity:.55;pointer-events:none}
.complete-note{font-weight:700;color:#047857}

.lesson-points{background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.8rem;margin-bottom:2.2rem;box-shadow:var(--shadow-sm)}
.lesson-points h2{font-size:1.3rem;font-weight:800;margin-bottom:1rem}
.lesson-points ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.7rem}
.lesson-points li{position:relative;padding-left:1.8rem;line-height:1.65;color:var(--ink)}
.lesson-points li::before{
	content:"";position:absolute;left:0;top:.42em;width:.9em;height:.9em;border-radius:50%;
	background:var(--brand-grad);
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

.lesson-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2.5rem 0 1rem}
.lesson-nav a{
	background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.3rem;
	text-decoration:none;color:var(--ink);transition:border-color .2s,box-shadow .2s;
	display:flex;flex-direction:column;gap:.25rem;
}
.lesson-nav a:hover{border-color:#c9bdf5;box-shadow:var(--shadow-sm)}
.lesson-nav-next{text-align:right}
.lesson-nav-label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--brand-2)}
.lesson-nav-title{font-weight:700}
@media (max-width:640px){
	.lesson-nav{grid-template-columns:1fr}
	.lesson-nav-next{text-align:left}
}