/**
 * Course landing (/course) — page-scoped styles.
 *
 * Loads on top of schools.css: the <main> carries both .schools-landing (so
 * every sl-* primitive — sections, buttons, cards, FAQ, steps — applies) and
 * .course-landing for the course-only blocks below (cl-*). Hand-written, not
 * Tailwind: the precompiled tailwind.min.css can't supply new utilities.
 *
 * Same monochrome palette as the rest of the site; the only new shapes are
 * the curriculum module list and the three pricing tiers.
 *
 * @package Robo9
 */

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

/* The hero render is the WHITE SO-ARM101 on a transparent background (matches
   the homepage). Drop the schools' white image-card so the white arm floats
   directly on the black hero instead of washing out on a white panel. */
.course-landing .sl-hero__shot {
	min-height: 0;
	align-items: center;
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Size by the render's own aspect ratio — the base .sl-shot img forces
   height:100%, which collapses once the white card's min-height is gone. */
.course-landing .sl-hero__shot img {
	height: auto;
	background: transparent;
	padding: 0;
	object-fit: contain;
}

/* ---- Mentor / kit image panels -------------------------------------------- */

/* Both render panels (transparent-bg product shots) sit on clean white rather
   than the schools' gray-50, so the arms read as a crisp studio shot. */
.course-landing .sl-diff__shot {
	background: var(--sl-white);
}

/* ---- Audience (two top-ruled cards) --------------------------------------- */

.cl-audience {
	grid-template-columns: repeat(2, 1fr);
}

/* ---- How it works (4 steps instead of schools' 5) ------------------------- */

.cl-steps {
	grid-template-columns: repeat(4, 1fr);
}

/* ---- Curriculum: 10 numbered modules -------------------------------------- */

.cl-modules {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 22px;
}

.cl-module {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--sl-white);
	border: 1px solid var(--sl-line-strong);
	border-radius: var(--sl-radius);
}

/* Lesson cover render with the module number badged over its corner. */
.cl-module__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--sl-bg-soft);
	border-bottom: 1px solid var(--sl-line);
}

.cl-module__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cl-module__n {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 44px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	font-family: "Space Grotesk", "Manrope", sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1;
	color: var(--sl-white);
	background: var(--sl-black);
	border-bottom-right-radius: var(--sl-radius);
}

.cl-module__body {
	padding: 20px 22px 24px;
}

.cl-module__title {
	font-family: "Space Grotesk", "Manrope", sans-serif;
	font-size: 1.08rem;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--sl-black);
}

.cl-module__desc {
	margin: 0;
	font-size: 0.93rem;
	color: var(--sl-muted);
}

/* ---- Kit section ----------------------------------------------------------- */

/* image left, copy right (mirror of the mentor split) */
.cl-kit {
	grid-template-columns: 0.9fr 1.1fr;
}

.cl-kit__shot {
	background: var(--sl-white);
}

.cl-kit__subhead {
	font-family: "Space Grotesk", "Manrope", sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sl-black);
	margin: 26px 0 12px;
}

.cl-kit__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.cl-kit__list li {
	position: relative;
	padding-left: 24px;
	color: var(--sl-ink);
	font-size: 0.98rem;
}

.cl-kit__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 9px;
	height: 9px;
	background: var(--sl-black);
}

.cl-kit__fine {
	margin: 26px 0 0;
	font-size: 0.9rem;
	color: var(--sl-muted);
}

/* ---- Pricing tiers ---------------------------------------------------------- */

.cl-tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}

.cl-tier {
	display: flex;
	flex-direction: column;
	padding: 30px 28px;
	background: var(--sl-white);
	border: 1px solid var(--sl-line-strong);
	border-radius: var(--sl-radius);
}

/* featured tier inverts to the site's black card */
.cl-tier--featured {
	background: var(--sl-black);
	border-color: var(--sl-black);
	color: var(--sl-white);
	box-shadow: var(--sl-shadow);
}

.cl-tier__tagline {
	font-family: "Space Grotesk", "Manrope", sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sl-muted);
	margin: 0 0 12px;
}

.cl-tier--featured .cl-tier__tagline {
	color: #9ca3af; /* gray-400 */
}

.cl-tier__name {
	font-family: "Space Grotesk", "Manrope", sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 4px;
	color: inherit;
}

.cl-tier__price {
	font-family: "Space Grotesk", "Manrope", sans-serif;
	font-size: clamp(1.9rem, 3vw, 2.4rem);
	font-weight: 700;
	margin: 0 0 18px;
	color: inherit;
}

.cl-tier__features {
	list-style: none;
	margin: 0 0 26px;
	padding: 18px 0 0;
	border-top: 1px solid var(--sl-line-strong);
	display: grid;
	gap: 10px;
	flex-grow: 1;
}

.cl-tier--featured .cl-tier__features {
	border-top-color: rgba(255, 255, 255, 0.2);
}

.cl-tier__features li {
	position: relative;
	padding-left: 22px;
	font-size: 0.93rem;
	color: var(--sl-muted);
}

.cl-tier--featured .cl-tier__features li {
	color: var(--sl-on-dark);
}

.cl-tier__features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 8px;
	height: 8px;
	background: var(--sl-black);
}

.cl-tier--featured .cl-tier__features li::before {
	background: var(--sl-white);
}

.cl-tier__cta {
	width: 100%;
}

/* white button on the featured black card */
.cl-tier--featured .sl-btn--primary {
	background: var(--sl-white);
	color: var(--sl-black);
	border-color: var(--sl-white);
}

.cl-tier--featured .sl-btn--primary:hover {
	background: #e5e7eb;
	border-color: #e5e7eb;
}

.cl-tiers__fine {
	margin: clamp(24px, 3vw, 36px) 0 0;
	font-size: 0.9rem;
	color: var(--sl-muted);
}

.cl-tiers__fine a {
	color: var(--sl-black);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Final CTA --------------------------------------------------------------- */

.cl-cta__inner {
	max-width: 760px;
	text-align: center;
}

.cl-cta__actions {
	justify-content: center;
	margin-top: 28px;
}

/* ---- Responsive --------------------------------------------------------------- */

@media (max-width: 1000px) {
	.cl-tiers {
		grid-template-columns: 1fr;
		max-width: 480px;
	}
}

@media (max-width: 900px) {
	.cl-audience {
		grid-template-columns: 1fr;
	}
	.cl-steps {
		grid-template-columns: repeat(2, 1fr);
	}
	.cl-kit {
		grid-template-columns: 1fr;
	}
	.cl-modules {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.cl-steps {
		grid-template-columns: 1fr;
	}
}