/* ==========================================================================
   Tutor LMS: course detail (our template) + colour/font harmony for
   Tutor's own screens (dashboard, lesson player, login).
   ========================================================================== */

/* Tutor design tokens -> house palette. */
:root {
	--tutor-color-primary: #0f0f0f;
	--tutor-color-primary-rgb: 15, 15, 15;
	--tutor-color-primary-hover: #cc2a17;
	--tutor-color-primary-hover-rgb: 204, 42, 23;
	--tutor-body-color: #0f0f0f;
	--tutor-border-color: #d6d6d1;
	--tutor-color-gray: #5c5c57;
}

.tutor-wrap,
.tutor-dashboard,
.tutor-course-single-content-wrapper,
.tutor-login-wrap,
.tutor-page-wrap { font-family: var(--sans); }

.tutor-wrap h1,
.tutor-wrap h2,
.tutor-wrap h3,
.tutor-dashboard .tutor-fs-4,
.tutor-dashboard .tutor-fs-5,
.tutor-course-name { font-family: var(--serif) !important; }

.tutor-btn,
.tutor-form-control,
.tutor-card,
.tutor-modal-content { border-radius: var(--radius) !important; box-shadow: none !important; }
.tutor-btn-primary { background: var(--ink) !important; border-color: var(--ink) !important; }
.tutor-btn-primary:hover { background: var(--red) !important; border-color: var(--red) !important; }

/* --- Course detail -------------------------------------------------------- */

.course__head {
	padding-block: 40px 48px;
	border-bottom: 1px solid var(--rule);
}
.course__head-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: end;
}
@media (min-width: 1000px) {
	.course__head-grid { grid-template-columns: 6fr 5fr; gap: 48px; }
}
.course__title {
	margin: 4px 0 16px;
	font-size: clamp(40px, 5.6vw, 68px);
	line-height: 1.02;
	letter-spacing: -0.02em;
}
.course__lead {
	margin-bottom: 16px;
	font-family: var(--serif);
	font-size: clamp(19px, 2.2vw, 22px);
	line-height: 1.4;
	color: var(--gray-dark);
}
.course__media .tutor-video-player,
.course__media iframe { aspect-ratio: 16 / 10; width: 100%; }

.course__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	padding-block: 48px var(--space);
}
@media (min-width: 1000px) {
	.course__body { grid-template-columns: minmax(0, 8fr) minmax(300px, 4fr); gap: 64px; }
	.course__aside { order: 2; }
}

.course__block { margin-bottom: 56px; }
.course__h2 {
	margin-bottom: 20px;
	padding-top: 12px;
	border-top: 3px solid var(--ink);
	font-size: clamp(28px, 3.4vw, 36px);
}

/* Price box: plain, not sticky. */
.price-box {
	padding: 24px;
	border: 1px solid var(--ink);
	border-top-width: 3px;
	border-radius: var(--radius);
}
.price-box__price { margin-bottom: 16px; }
.price-box__price .price { font-size: 32px; }
.price-box__note { margin: 10px 0 0; color: var(--gray); font-size: 14px; }
.price-box__facts {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
}
.price-box__facts li { padding-block: 10px; border-top: 1px solid var(--rule); }

/* Curriculum */
.curriculum__topics { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule); }
.curriculum__topic details { border-top: 1px solid var(--rule); }
.curriculum__topic summary {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 56px;
	padding-block: 10px;
	cursor: pointer;
	list-style: none;
}
.curriculum__topic summary::-webkit-details-marker { display: none; }
.curriculum__topic summary::after {
	margin-left: auto;
	font-size: 22px;
	line-height: 1;
	content: "+";
}
.curriculum__topic details[open] summary::after { content: "\2212"; }
.curriculum__num {
	font-family: var(--serif);
	font-style: italic;
	font-size: 22px;
	color: var(--red);
}
.curriculum__topic-title { font-family: var(--serif); font-weight: 600; font-size: 20px; }
.curriculum__count { color: var(--gray); font-size: 14px; white-space: nowrap; }
.curriculum__items { margin: 0 0 16px; padding: 0 0 0 40px; list-style: none; }
.curriculum__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	padding-block: 8px;
	font-size: 16px;
}
.curriculum__kind {
	min-width: 56px;
	color: var(--gray);
	font-stretch: 75%;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.curriculum__preview { color: var(--red); font-size: 13px; font-weight: 700; }

/* Instructor */
.instructor__row { display: flex; gap: 20px; align-items: flex-start; }
.instructor__photo { flex: none; width: 96px; height: 96px; object-fit: cover; }
.instructor__name { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 24px; }
.instructor__job { margin: 0 0 8px; color: var(--red); font-size: 14px; font-weight: 600; }

/* --- Tutor login / registration forms ------------------------------------ */

.tutor-login-wrap,
.tutor-template-segment.tutor-login-wrap,
#tutor-registration-wrap,
.tutor-registration-wrap {
	max-width: 480px !important;
	margin-inline: auto !important;
	padding: 32px !important;
	border: 1px solid var(--ink) !important;
	border-top-width: 3px !important;
	border-radius: var(--radius) !important;
	box-shadow: none !important;
	background: var(--white) !important;
}
.tutor-login-wrap .tutor-fs-5,
.tutor-login-title,
.tutor-login-wrap h3 {
	font-family: var(--serif) !important;
	font-size: 30px !important;
	font-weight: 600 !important;
	color: var(--ink) !important;
}
.tutor-form-control,
.tutor-login-wrap input[type="text"],
.tutor-login-wrap input[type="password"],
#tutor-registration-wrap input {
	min-height: var(--tap) !important;
	border: 1px solid var(--ink) !important;
	border-radius: var(--radius) !important;
	background: var(--white) !important;
	font-size: 16px !important;
}
.tutor-form-control:focus { box-shadow: 0 0 0 2px rgba(204, 42, 23, 0.25) !important; border-color: var(--red) !important; }
.tutor-login-wrap .tutor-btn,
#tutor-registration-wrap .tutor-btn,
#tutor-registration-wrap button[type="submit"] { min-height: var(--tap); font-weight: 700 !important; }
.tutor-login-wrap a,
#tutor-registration-wrap a { color: var(--red) !important; }

/* --- Course page (Udemy-style order, editorial look) ---------------------- */

.course__format { margin: 12px 0 0; }
.course__learn .ticks {
	padding: 20px;
	border: 1px solid var(--rule);
}

.includes {
	display: grid;
	gap: 8px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 700px) { .includes { grid-template-columns: 1fr 1fr; } }
.includes li {
	padding: 8px 0;
	border-bottom: 1px solid var(--rule);
	font-size: 16px;
}

.curriculum__summary { margin: -8px 0 16px; color: var(--gray-dark); font-size: 15px; font-variant-numeric: tabular-nums; }
.curriculum__item {
	display: grid;
	grid-template-columns: 96px 1fr auto;
	align-items: baseline;
	gap: 12px;
	padding-block: 9px;
	border-top: 1px solid var(--rule);
	font-size: 16px;
}
.curriculum__item:first-child { border-top: 0; }
.curriculum__items { padding-left: 38px; }
@media (max-width: 599px) {
	.curriculum__items { padding-left: 0; }
	.curriculum__item { grid-template-columns: 1fr auto; }
	.curriculum__kind { grid-column: 1 / -1; }
}
.curriculum__item--in-person .curriculum__kind { color: var(--red); }
.curriculum__name { min-width: 0; }
.curriculum__time { color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.curriculum__time.is-unknown { color: var(--gray); }
.curriculum__preview {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 6px;
	border: 1px solid var(--red);
	color: var(--red);
	font-stretch: 75%;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: 2px;
}

.course__sessions { margin-top: 20px; }

/* "After the course" box under the price box. */
.after-course {
	margin-top: 20px;
	padding: 20px 24px;
	background: var(--paper);
	border-top: 3px solid var(--ink);
}
.after-course__head {
	margin: 0 0 12px;
	font-family: var(--serif);
	font-weight: 600;
	font-size: 22px;
}
.ticks--single { grid-template-columns: 1fr !important; font-size: 15px; }