/* ============================================================
   PAGE — Kurs Detailseite  (Figma node 0:787, design width 1920)
   Course-detail page: a 2-column title/intro row, a reused global
   VIDEO module, then a curriculum grid of module cards.
   All values from docs/kurs-detailseite/blueprint-*.txt.
   Prefix: .kd-  ·  new token: --color-highlight-border #FFD599.
   Reuses shared: global `video` module (.video__*), .container,
   tokens, fonts. Nothing here redefines a shared class.
   ============================================================ */

/* The whole content column sits on the light-grey field (#F7F7F8) between the
   white shared header and footer. The grey field + the title/intro row are the
   SHARED `page_intro` module — its CSS (.page-intro*, the .site-main:has(...)
   background and the footer-margin cancel) lives in main.css so it renders on
   every title page. This file only carries the page-specific rhythm below. */

/* ---------- Video module rhythm ----------
   The video is the SHARED global `video` module (.video__* live in main.css).
   It renders <section class="section section--video video"> whose margin-top is
   100px (main.css .section--video) — exactly the Figma title→video gap. Nothing
   to redefine; documented here for the reader. */

/* ---------- Curriculum grid (0:838) ---------- */
/* video-bottom → curriculum-top = 100px; curriculum-bottom → footer-top = 120px. */
.kd-curriculum {
	width: 100%;
	margin-top: 100px;
	margin-bottom: 120px;
}

/* 2-column grid, 30px both axes (count-aware). 5 cards → card 5 lands in the
   left cell of row 3, right cell empty (Figma padding-right 813 on that row).
   align-items: stretch (default) makes cards in a row equal height — matching
   Figma's cross-axis FILL (card 02 stretches up to card 01's natural height). */
.kd-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}

/* ---------- Module card (0:840) ---------- */
/* Height is content-driven; cards in a row equalise via grid stretch. */
.kd-mod {
	display: flex;
	flex-direction: column;
	gap: 50px;
	padding: 50px;
	background: var(--color-white); /* #FFFFFF */
	border-radius: var(--radius-lg); /* 12 */
}

/* Number "01": 80px/700, right-aligned. Figma line-height is 24px but the node's
   ink box is 59px tall and that 59 is what the card's gap math uses (50+59+50+36+
   50+items+50 = card height). Render at line-height 59 so the box occupies 59px
   and the glyph fills it — matching both the layout AND the visual. */
.kd-mod__num {
	font-family: var(--font-body);
	font-size: 80px;
	line-height: 59px;
	font-weight: 700;
	text-align: right;
	color: var(--color-heading); /* #262626 */
}

.kd-mod__heading {
	font-family: var(--font-body);
	font-size: 24px;
	line-height: 36px;
	font-weight: 600;
	letter-spacing: -0.144px;
	color: var(--color-text-dark); /* #333333 */
}

/* Lessons list (0:843) */
.kd-mod__lessons {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* ---------- Lesson item (0:844) ---------- */
/* Height content-driven (a 2-line title makes a taller item — correct). */
.kd-lesson {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	padding: 24px 30px;
	border-radius: var(--radius-md); /* 8 */
	/* transparent fill + 1px inset border (#F1F1F3) — no added layout size. */
	box-shadow: inset 0 0 0 1px var(--color-border); /* #F1F1F3 */
}

/* text column FILL, vertically centred; pill HUG on the right */
.kd-lesson__text {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
}

.kd-lesson__title {
	font-family: var(--font-body);
	font-size: 20px;
	line-height: 30px;
	font-weight: 500;
	color: var(--color-text-dark); /* #333333 */
}

.kd-lesson__sub {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: var(--color-text-muted); /* #59595A */
}

/* duration pill (0:848) — HUG, must not stretch */
.kd-lesson__pill {
	flex: none;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	padding: 12px 14px;
	background: var(--color-surface); /* #F7F7F8 */
	border-radius: var(--radius-sm); /* 6 */
}

.kd-lesson__clock {
	flex: none;
	width: 24px;
	height: 24px;
}

.kd-lesson__dur {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 22.77px;
	font-weight: 400;
	color: var(--color-text-muted); /* #59595A */
	white-space: nowrap;
}

/* ---------- Highlighted lesson (0:852 — module 01 / lesson 02) ----------
   White fill, 1px #FFD599 border, PLUS a 4px halo in #FFF4E5 (DROP_SHADOW spread
   4, no blur → solid ring outside the box). Text colours are UNCHANGED; only the
   border, halo and pill change. */
.kd-lesson--hl {
	background: var(--color-white); /* #FFFFFF */
	box-shadow:
		inset 0 0 0 1px var(--color-highlight-border, #FFD599), /* #FFD599 */
		0 0 0 4px var(--color-primary-tint); /* #FFF4E5 halo */
}

.kd-lesson--hl .kd-lesson__pill {
	background: var(--color-primary-border); /* #FFEACC */
}

.kd-lesson--hl .kd-lesson__dur {
	color: var(--color-text); /* #4C4C4D */
}

/* ============================================================
   RESPONSIVE  (page-scoped — mirrors the theme's 1024/768/480
   breakpoints; only .kd- selectors, never :root overrides).
   The 1920→1024 fluid zone needs no media query: the intro row's
   calc()-gutter + fluid side padding + flex:1 columns and the
   grid's repeat(2,1fr) compress the 1920 composition smoothly.
   1024 is the first real layout breakpoint (intro stacks, grid
   collapses); 768/480 are proportional type/spacing reductions
   (no Figma mobile frame exists for this page).
   ============================================================ */

/* ---------- TABLET  max-width: 1024px ---------- */
@media (max-width: 1024px) {
	/* Intro row stacking is handled by the shared .page-intro__row @media in
	   main.css. */

	/* Curriculum: 2-col module grid → single column (first layout shift,
	   matching the sibling course-listing page). Cards go full width. */
	.kd-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- MOBILE  max-width: 768px ---------- */
@media (max-width: 768px) {
	/* Tighten the header→content gap and the content→footer gap on phones. */
	.kd-intro {
		margin-top: 100px;
	}

	.kd-curriculum {
		margin-top: 60px;
		margin-bottom: 80px;
	}

	/* Cards: smaller padding + inner rhythm. */
	.kd-mod {
		padding: 30px;
		gap: 40px;
	}

	/* Decorative number scales down (card height is content-driven here, so
	   the desktop line-height:59 layout-math no longer needs to hold). */
	.kd-mod__num {
		font-size: 60px;
		line-height: 46px;
	}

	/* Scale the largest type down (proportional — no Figma mobile frame). */
	.kd-intro__heading {
		font-size: 32px;
		line-height: 44px;
	}

	.kd-mod__heading {
		font-size: 22px;
		line-height: 32px;
	}
}

/* ---------- SMALL MOBILE  max-width: 480px ---------- */
@media (max-width: 480px) {
	.kd-intro__row {
		gap: 20px;
		padding-bottom: 30px;
	}

	.kd-intro__heading {
		font-size: 28px;
		line-height: 38px;
	}

	.kd-intro__text {
		font-size: 16px;
		line-height: 24px;
	}

	.kd-mod {
		padding: 24px;
		gap: 30px;
	}

	.kd-mod__num {
		font-size: 52px;
		line-height: 40px;
	}

	.kd-mod__heading {
		font-size: 20px;
		line-height: 30px;
	}

	/* Lesson: stack the duration pill under the text so the title is never
	   crushed into a narrow column on the smallest phones. */
	.kd-lesson {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 20px;
	}

	.kd-lesson__title {
		font-size: 18px;
		line-height: 28px;
	}

	.kd-lesson__sub {
		font-size: 16px;
		line-height: 24px;
	}
}