/* ============================================================
   PAGE — Kurs Übersicht  (Figma node 0:508, design width 1920)
   Course-listing page: a 2-column intro title, then 5 white
   course cards. All values from docs/kurs-uebersicht blueprints.
   Prefix: .kc-  ·  new token: --color-divider #E4E4E7 (title rule).
   Reuses shared: .btn/.btn-outline (View Course), .container width math.
   ============================================================ */

/* Page field — light grey (#F7F7F8) between the white header + white footer.
   header-bottom → title-top = 164px, cards-bottom → footer-top = 150px. */
.kc-page {
	width: 100%;
	background: var(--color-surface); /* #F7F7F8 */
	padding-top: 164px;
	padding-bottom: 150px;
}

/* The grey field must run flush into the footer. The shared footer carries a
   142px top-margin (home-page rhythm); cancel it for this template only so the
   150px grey gap above the footer is exact and not split by a white band. */
.site-main:has(.kc-page) + .site-footer {
	margin-top: 0;
}

/* ---------- Title / intro (0:556) ---------- */
/* Outer 1860 wide (30px page margins) with 132px side padding → 1596 content,
   matching the cards column. Full-width bottom rule under the row. */
.kc-title {
	/* calc → 24px min gutter below ~1908 (outer aligns with the course column);
	   at ≥1920 it caps at 1860 (30px gutter) exactly as Figma. */
	width: calc(100% - 48px);
	max-width: 1860px;
	margin-inline: auto;
	/* 132px @1920 (6.875vw) → text column is 1596, aligned with the cards; shrinks
	   fluidly on narrower viewports so the two columns are never crushed. */
	padding: 0 clamp(24px, 6.875vw, 132px) 50px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 100px;
	/* Bottom divider drawn as an inset shadow (Figma stroke is INSIDE, so it must
	   NOT add layout height — node bbox is 194). Fallback keeps the rule valid
	   before Wave B merges --color-divider (token-delta.txt) into style.css :root. */
	box-shadow: inset 0 -1px 0 var(--color-divider, #E4E4E7); /* #E4E4E7 */
}

.kc-title__heading {
	flex: 1 1 0;
	min-width: 0;
	font-family: var(--font-body);
	font-size: 48px;
	line-height: 72px;
	font-weight: 600;
	color: var(--color-heading); /* #262626 */
}

.kc-title__text {
	flex: 1 1 0;
	min-width: 0;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: var(--color-text-muted); /* #59595A */
}

/* ---------- Course list wrapper (0:559) ---------- */
/* 1596 content column, cards stacked with 50px rhythm. Sits 100px below the
   title (164 page pad-top covers header→title; this margin is title→cards). */
.kc-courses {
	/* calc (not padding) keeps the 1920 bounding box exactly 1596 while adding a
	   24px min side-gutter once the viewport drops below 1644 (matches .container). */
	width: calc(100% - 48px);
	max-width: var(--content-max); /* 1596 */
	margin: 100px auto 0;
	display: flex;
	flex-direction: column;
	gap: 50px;
}

/* ---------- Course card (0:560) ---------- */
/* Height is content-driven (longer curricula make taller cards — correct). */
.kc-course {
	display: flex;
	flex-direction: column;
	gap: 50px;
	padding: 50px;
	background: var(--color-white);
	border-radius: var(--radius-lg); /* 12 */
}

/* top block: header-row + images + meta (0:561) */
.kc-course__top {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* header-row: text ⟷ View Course button (0:562) */
.kc-course__head {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 50px;
}

.kc-course__headtext {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.kc-course__title {
	font-family: var(--font-body);
	font-size: 24px;
	line-height: 36px;
	font-weight: 600;
	color: var(--color-heading); /* #262626 */
}

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

/* "View Course" reuses the shared .btn .btn-outline (card face + hairline).
   HUG — must not stretch. */
.kc-course__cta {
	flex: none;
}

/* images row: 3 equal-width images, fixed 422 height (0:568) */
.kc-course__images {
	display: flex;
	flex-direction: row;
	gap: 30px;
}

.kc-course__img {
	flex: 1 1 0;
	min-width: 0;
	width: 100%;
	height: 422px;
	object-fit: cover;
	border-radius: var(--radius-md); /* 8 */
}

/* meta row: pills (left) ⟷ instructor (right) (0:572) */
.kc-course__meta {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

.kc-course__pills {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.kc-pill {
	padding: 10px 16px;
	background: var(--color-white);
	box-shadow: inset 0 0 0 1px var(--color-border); /* #F1F1F3 */
	border-radius: var(--radius-md); /* 8 */
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 22.77px;
	font-weight: 400;
	color: var(--color-text-muted); /* #59595A */
	white-space: nowrap;
}

.kc-course__instructor {
	font-family: var(--font-body);
	font-size: 20px;
	line-height: 25.3px;
	font-weight: 500;
	color: var(--color-heading); /* #262626 */
	white-space: nowrap;
}

/* ---------- Curriculum block (0:579) ---------- */
.kc-curriculum {
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	box-shadow: 0 0 0 1px var(--color-border); /* #F1F1F3, OUTSIDE stroke */
	overflow: hidden;
}

.kc-curriculum__head {
	padding: 24px 30px;
	/* inset shadow (not border-bottom) so the 1px rule doesn't add layout height */
	box-shadow: inset 0 -1px 0 var(--color-border); /* #F1F1F3 */
}

.kc-curriculum__title {
	font-family: var(--font-body);
	font-size: 22px;
	line-height: 33px;
	font-weight: 600;
	color: var(--color-heading); /* #262626 */
}

/* items row: 5 feature items separated by 4 vertical 1px lines (0:582) */
.kc-curriculum__items {
	display: flex;
	flex-direction: row;
	align-items: flex-start; /* items keep natural (HUG) height, top-aligned */
	gap: 50px;
	padding: 30px 50px;
	background: var(--color-white);
}

.kc-feat {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Number: 50px/800. Figma ink box is 37px tall (line-height 75 but box hugs);
   render tight so the 20px gap + item heights (84 / 111) match. */
.kc-feat__num {
	align-self: flex-start; /* HUG width (~58px) — do not stretch to item width */
	font-family: var(--font-body);
	font-size: 50px;
	line-height: 37px;
	font-weight: 800;
	color: var(--color-heading); /* #262626 */
}

.kc-feat__text {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 500;
	color: var(--color-text-dark); /* #333333 */
}

/* vertical divider between feature items (0:586 etc.) — 1px, full row height */
.kc-feat-divider {
	flex: 0 0 1px;
	width: 1px;
	align-self: stretch;
	background: var(--color-border); /* #F1F1F3 */
}

/* ============================================================
   RESPONSIVE  (page-scoped — mirrors the theme's 1024/768/480
   breakpoints; only .kc- selectors, never :root overrides).
   1920→1024 fluid zone is handled by the calc()-gutter + fluid
   title padding + flex:1 columns above — no media query needed.
   ============================================================ */

/* ---------- TABLET  max-width: 1024px ---------- */
@media (max-width: 1024px) {
	/* Intro: stack the heading over the paragraph */
	.kc-title {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		padding-bottom: 40px;
	}

	/* Curriculum: the 5-across row becomes a vertical list; the vertical 1px
	   separators become horizontal full-width rules between items. */
	.kc-curriculum__items {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		padding: 30px;
	}

	.kc-feat-divider {
		width: auto; /* let align-self:stretch make it full-width; flex:0 0 1px → 1px tall */
	}
}

/* ---------- MOBILE  max-width: 768px ---------- */
@media (max-width: 768px) {
	/* Tighten the page field so the grey band isn't huge on phones */
	.kc-page {
		padding-top: 100px;
		padding-bottom: 100px;
	}

	.kc-courses {
		margin-top: 60px;
		gap: 30px;
	}

	.kc-course {
		padding: 30px;
		gap: 40px;
	}

	/* header row: text over the CTA */
	.kc-course__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	/* images: 3-across → single column, shorter */
	.kc-course__images {
		flex-direction: column;
		gap: 20px;
	}

	.kc-course__img {
		height: 240px;
	}

	/* meta: pills over instructor, pills wrap */
	.kc-course__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.kc-course__pills {
		flex-wrap: wrap;
	}

	.kc-course__instructor {
		white-space: normal;
	}

	.kc-curriculum__head {
		padding: 20px 24px;
	}

	.kc-curriculum__items {
		padding: 24px;
	}

	/* scale the largest type down (no Figma mobile frame — proportional reduction) */
	.kc-title__heading {
		font-size: 32px;
		line-height: 44px;
	}

	.kc-course__title {
		font-size: 22px;
		line-height: 32px;
	}

	.kc-feat__num {
		font-size: 42px;
		line-height: 32px;
	}
}

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

	.kc-title__heading {
		font-size: 28px;
		line-height: 38px;
	}

	.kc-title__text {
		font-size: 16px;
		line-height: 24px;
	}

	.kc-course {
		padding: 24px;
		gap: 30px;
	}

	.kc-course__title {
		font-size: 20px;
		line-height: 30px;
	}

	.kc-course__desc {
		font-size: 16px;
		line-height: 24px;
	}

	.kc-course__img {
		height: 200px;
	}

	.kc-curriculum__items {
		padding: 20px;
	}

	.kc-feat__num {
		font-size: 38px;
		line-height: 30px;
	}

	.kc-pill {
		padding: 8px 12px;
		font-size: 16px;
		line-height: 20px;
	}
}