/**
 * Kids Learners — design system enforcement & UI locking (§49)
 *
 * Loads AFTER kl-platform.css (and kl-single.css on singles).
 * Final authority: containers, grids, buttons, cards, spacing, typography.
 * Do NOT add aesthetic variation here — only normalize drift.
 *
 * @package Kids_Learners_Classic
 */

/* =============================================================================
   Page shell & hero rhythm
   ============================================================================= */

.kl-page-shell {
	padding-bottom: var(--kl-section-gap-sm);
}

.kl-page-header {
	padding: var(--kl-space-8) 0 var(--kl-space-4);
}

.kl-page-header__copy {
	display: flex;
	flex-direction: column;
	gap: var(--kl-stack-gap);
}

.kl-page-header__title {
	margin: 0;
	font-family: var(--kl-font-display);
	font-size: var(--kl-text-3xl);
	line-height: var(--kl-leading-tight);
	font-weight: var(--kl-weight-regular);
	letter-spacing: var(--kl-tracking-tight);
	color: var(--kl-ink);
}

.kl-page-header__lead {
	margin: 0;
	max-width: var(--kl-measure-comfort);
	font-size: var(--kl-text-md);
	line-height: var(--kl-leading-relaxed);
	color: var(--kl-ink-muted);
}

.kl-page-header__actions {
	margin-top: var(--kl-space-2);
}

.kl-page-utility .kl-container,
.kl-page-404 .kl-container {
	max-width: var(--kl-container-reading);
}

/* =============================================================================
   Section rhythm (canonical — overrides legacy platform duplicates)
   ============================================================================= */

.kl-platform .kl-section {
	padding-block: var(--kl-section-gap);
}

.kl-platform .kl-section--compact {
	padding-block: var(--kl-section-gap-sm);
}

.kl-platform .kl-section--flush-top {
	padding-top: 0;
}

.kl-platform .kl-section--filter {
	padding-top: 0;
}

.kl-platform .kl-section__head {
	margin-bottom: var(--kl-space-6);
}

.kl-platform .kl-section__title {
	margin: 0 0 var(--kl-space-2);
	font-family: var(--kl-font-display);
	font-size: clamp(1.35rem, 2.5vw, var(--kl-text-2xl));
	line-height: var(--kl-leading-snug);
	font-weight: var(--kl-weight-regular);
	letter-spacing: var(--kl-tracking-tight);
	color: var(--kl-ink);
}

.kl-platform .kl-section__lead {
	margin: 0;
	max-width: var(--kl-measure-comfort);
	font-size: var(--kl-text-md);
	line-height: var(--kl-leading-relaxed);
	color: var(--kl-ink-muted);
}

/* Unified section dividers across template families */
.kl-hub-section + .kl-hub-section,
.kl-bundle-section + .kl-bundle-section,
.kl-letter-section + .kl-letter-section,
.kl-utility-section + .kl-utility-section,
.kl-archive-section + .kl-archive-section,
.kl-discover-section + .kl-discover-section,
.kl-home-page .kl-section + .kl-section,
.kl-letter-hub .kl-section + .kl-section {
	border-top: var(--kl-border-width) solid var(--kl-border);
	padding-top: var(--kl-section-gap-sm);
}

/* =============================================================================
   Buttons — unified height, padding, calm hover
   ============================================================================= */

.kl-platform .kl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--kl-space-2);
	min-height: var(--kl-touch-min);
	padding: var(--kl-space-3) var(--kl-space-5);
	border-radius: var(--kl-radius-pill);
	font-family: var(--kl-font);
	font-size: var(--kl-text-sm);
	font-weight: var(--kl-weight-bold);
	line-height: 1.2;
}

.kl-platform .kl-btn--primary {
	background: var(--kl-primary);
	color: var(--kl-surface);
	border: var(--kl-border-width) solid transparent;
	box-shadow: var(--kl-shadow-xs);
}

.kl-platform .kl-btn--primary:hover:not(:disabled) {
	background: var(--kl-primary-dark);
	transform: none;
	box-shadow: var(--kl-shadow-md);
}

.kl-platform .kl-btn--ghost {
	background: var(--kl-surface);
	color: var(--kl-ink);
	border: var(--kl-border-width) solid var(--kl-border);
}

.kl-platform .kl-btn--ghost:hover:not(:disabled) {
	border-color: var(--kl-primary);
	color: var(--kl-primary);
	transform: none;
}

.kl-platform .kl-btn--download {
	width: 100%;
	max-width: 22rem;
}

/* =============================================================================
   Resource grids & cards — calm educational density
   ============================================================================= */

.kl-platform .kl-resource-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--kl-grid-card-min), 1fr));
	gap: var(--kl-grid-gap-lg);
}

.kl-platform .kl-resource-grid--archive {
	grid-template-columns: 1fr;
	gap: var(--kl-space-6);
}

@media (min-width: 640px) {
	.kl-platform .kl-resource-grid--archive {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.kl-platform .kl-resource-grid--archive {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.kl-platform .kl-resource-grid--archive {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.kl-platform .kl-resource-grid--compact {
	grid-template-columns: repeat(auto-fill, minmax(var(--kl-grid-card-min-compact), 1fr));
	gap: var(--kl-grid-gap);
}

.kl-platform .kl-resource-card {
	border-radius: var(--kl-card-radius);
	border: var(--kl-border-width) solid var(--kl-border);
	box-shadow: var(--kl-shadow);
	transform: none;
	transition:
		box-shadow var(--kl-duration) var(--kl-ease-out),
		border-color var(--kl-duration) var(--kl-ease-out);
}

.kl-platform .kl-resource-card:hover {
	transform: none;
	box-shadow: var(--kl-shadow-hover);
	border-color: var(--kl-border-strong);
}

.kl-platform .kl-resource-card__body {
	padding: var(--kl-card-padding);
}

.kl-platform .kl-resource-card__title {
	font-size: var(--kl-text-sm);
	line-height: var(--kl-leading-snug);
}

.kl-platform .kl-resource-card__chip {
	padding: 0.15rem var(--kl-space-2);
	border-radius: var(--kl-radius-xs);
	font-size: var(--kl-text-xs);
	font-weight: var(--kl-weight-semibold);
	color: var(--kl-ink-muted);
	background: var(--kl-surface-soft);
}

.kl-platform .kl-resource-card--kl_clipart .kl-resource-card__title {
	-webkit-line-clamp: 2;
}

.kl-platform .kl-resource-card--kl_clipart .kl-resource-card__chip--primary {
	color: var(--kl-ink);
	border-color: color-mix(in srgb, var(--kl-primary) 26%, var(--kl-border));
	background: color-mix(in srgb, var(--kl-primary-soft) 46%, white);
}

.kl-platform .kl-resource-card--kl_clipart .kl-resource-card__chip--context {
	color: var(--kl-ink-muted);
	background: var(--kl-surface-soft);
}

.kl-platform .kl-resource-card--kl_clipart .kl-resource-card__chip--technical {
	font-weight: var(--kl-weight-medium);
	color: color-mix(in srgb, var(--kl-ink-muted) 82%, #6b7280);
	border-color: color-mix(in srgb, var(--kl-border) 86%, transparent);
	background: transparent;
}

/* Worksheet archive: horizontal cards, tokenized (no rogue grays) */
.kl-archive--worksheets .kl-resource-card__title {
	margin: 0 0 var(--kl-space-2);
	min-height: 2.6em;
}

.kl-archive--worksheets .kl-resource-card__meta {
	margin-top: 0;
	gap: var(--kl-space-1);
}

/* =============================================================================
   Chips & metadata
   ============================================================================= */

.kl-platform .kl-chip {
	padding: var(--kl-space-2) var(--kl-space-3);
	border-radius: var(--kl-radius-pill);
	font-size: var(--kl-text-sm);
	font-weight: var(--kl-weight-semibold);
	border: var(--kl-border-width) solid var(--kl-border);
}

.kl-platform .kl-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kl-space-3);
	font-size: var(--kl-text-sm);
	color: var(--kl-ink-muted);
}

/* =============================================================================
   Hub / pathway / bundle cards
   ============================================================================= */

.kl-platform .kl-hub-card,
.kl-platform .kl-bundle-card,
.kl-platform .kl-pathway-card {
	border-radius: var(--kl-card-radius);
	border: var(--kl-border-width) solid var(--kl-border);
	padding: var(--kl-space-5);
	box-shadow: var(--kl-shadow);
	transition:
		border-color var(--kl-duration) var(--kl-ease-out),
		box-shadow var(--kl-duration) var(--kl-ease-out);
}

.kl-platform .kl-hub-card:hover,
.kl-platform .kl-bundle-card:hover,
.kl-platform .kl-pathway-card:hover {
	border-color: var(--kl-primary);
	box-shadow: var(--kl-shadow-hover);
	transform: none;
}

.kl-platform .kl-authority-card:hover {
	background: color-mix(in srgb, var(--kl-primary) 8%, var(--kl-surface-soft));
	transform: none;
}

/* =============================================================================
   Pagination & empty states
   ============================================================================= */

.kl-platform .kl-pagination,
.kl-platform .kl-archive-pagination {
	margin-top: var(--kl-space-8);
	gap: var(--kl-space-2);
}

.kl-platform .kl-empty {
	padding: var(--kl-space-8);
	border-radius: var(--kl-radius);
	border: var(--kl-border-width) solid var(--kl-border);
	background: var(--kl-surface-soft);
}

.kl-platform .kl-empty__title {
	font-size: var(--kl-text-lg);
	font-weight: var(--kl-weight-bold);
	color: var(--kl-ink);
}

.kl-platform .kl-empty__message {
	font-size: var(--kl-text-sm);
	line-height: var(--kl-leading-relaxed);
	color: var(--kl-ink-muted);
}

/* =============================================================================
   Header chrome (token alignment)
   ============================================================================= */

.kl-site-header {
	background: var(--kl-surface);
	border-bottom: var(--kl-border-width) solid transparent;
}

.kl-site-header.is-scrolled {
	border-bottom-color: var(--kl-border);
	box-shadow: var(--kl-shadow-xs);
}

/* =============================================================================
   Singles — align key surfaces to tokens where kl-single.css drifts
   ============================================================================= */

.kl-single .kl-section {
	padding-block: var(--kl-section-gap-sm);
}

.kl-single .kl-single-title {
	font-family: var(--kl-font-display);
	font-size: var(--kl-text-3xl);
	line-height: var(--kl-leading-tight);
	color: var(--kl-ink);
}

.kl-single .kl-single-lead {
	font-size: var(--kl-text-md);
	line-height: var(--kl-leading-relaxed);
	color: var(--kl-ink-muted);
}

/* =============================================================================
   Mobile rhythm
   ============================================================================= */

@media (max-width: 767px) {
	.kl-platform .kl-section {
		padding-block: var(--kl-section-gap-sm);
	}

	.kl-page-header {
		padding: var(--kl-space-6) 0 var(--kl-space-3);
	}

	.kl-platform .kl-resource-grid {
		gap: var(--kl-grid-gap);
	}

	.kl-platform .kl-section__head--row {
		align-items: flex-start;
	}
}

/* Homepage pathways — calm hover (no lift) */
.kl-platform .kl-home-pathway {
	transition: box-shadow var(--kl-duration) var(--kl-ease-out);
}

.kl-platform .kl-home-pathway:hover {
	transform: none;
	box-shadow: var(--kl-shadow-hover);
}

/* =============================================================================
   §49 UI LOCKING — containers, grids, buttons, cards (beats platform drift)
   ============================================================================= */

.kl-platform .kl-container,
.kl-platform.kl-home-page .kl-container,
.kl-platform.kl-home-redesign .kl-container {
	width: var(--kl-container);
	margin-inline: auto;
}

.kl-platform .kl-container--wide {
	width: var(--kl-container-wide);
}

.kl-platform .kl-container--reading {
	width: var(--kl-container-reading);
}

.kl-platform .kl-container--narrow {
	width: var(--kl-container-narrow);
}

.kl-site-header__shell {
	max-width: var(--kl-header-max);
}

/* Archive-like resource grids — ONE system (discover, archives, featured, hubs) */
.kl-platform .kl-resource-grid--featured,
.kl-platform .kl-home-featured-grid {
	grid-template-columns: 1fr;
	gap: var(--kl-space-6);
}

@media (min-width: 640px) {
	.kl-platform .kl-resource-grid--featured,
	.kl-platform .kl-home-featured-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.kl-platform .kl-resource-grid--featured,
	.kl-platform .kl-home-featured-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.kl-platform .kl-resource-grid--featured,
	.kl-platform .kl-home-featured-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.kl-platform .kl-hub-grid,
.kl-platform .kl-pathway-grid,
.kl-platform .kl-bundle-grid,
.kl-platform .kl-hub-grid--compact {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--kl-hub-grid-min), 1fr));
	gap: var(--kl-grid-gap-lg);
}

.kl-platform .kl-letter-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--kl-letter-grid-min), 1fr));
	gap: var(--kl-space-2);
}

/* Buttons — locked hierarchy (primary, ghost, soft, download, sm, lg) */
.kl-platform .kl-btn--soft {
	min-height: var(--kl-touch-min);
	padding: var(--kl-space-3) var(--kl-space-5);
	border-radius: var(--kl-radius-pill);
	font-size: var(--kl-text-sm);
	font-weight: var(--kl-weight-bold);
	background: var(--kl-primary-soft);
	color: var(--kl-primary-dark);
	border: var(--kl-border-width) solid transparent;
}

.kl-platform .kl-btn--sm {
	min-height: var(--kl-touch-min);
	padding: var(--kl-space-2) var(--kl-space-4);
	border-radius: var(--kl-radius-pill);
	font-size: var(--kl-text-sm);
	font-weight: var(--kl-weight-bold);
}

.kl-platform .kl-btn--lg {
	min-height: var(--kl-touch-min);
	padding: var(--kl-space-3) var(--kl-space-5);
	border-radius: var(--kl-radius-pill);
	font-size: var(--kl-text-sm);
	font-weight: var(--kl-weight-bold);
}

.kl-platform .kl-text-link {
	font-size: var(--kl-text-sm);
	font-weight: var(--kl-weight-bold);
}

/* Cards — one padding, radius, shadow, metadata rhythm */
.kl-platform .kl-resource-card,
.kl-platform .kl-resource-card--featured,
.kl-platform .kl-resource-card--compact {
	border-radius: var(--kl-card-radius);
	box-shadow: var(--kl-shadow);
}

.kl-platform .kl-resource-card__body,
.kl-platform .kl-resource-card--featured .kl-resource-card__body {
	padding: var(--kl-card-padding);
	gap: var(--kl-space-2);
}

.kl-platform .kl-resource-card--compact .kl-resource-card__body {
	padding: var(--kl-card-padding-sm);
}

.kl-platform .kl-resource-card__title {
	font-size: var(--kl-text-sm);
	font-weight: var(--kl-weight-semibold);
	line-height: var(--kl-leading-snug);
}

.kl-platform .kl-resource-card__meta {
	gap: var(--kl-space-1);
	margin-top: auto;
}

.kl-platform .kl-resource-card__chip {
	padding: 0.125rem var(--kl-space-2);
	border-radius: var(--kl-radius-xs);
	border: var(--kl-border-width) solid var(--kl-border);
	background: transparent;
	font-size: 0.6875rem;
	font-weight: var(--kl-weight-medium);
	color: var(--kl-ink-subtle);
}

.kl-platform .kl-resource-card--kl_clipart .kl-resource-card__chip--primary {
	font-weight: var(--kl-weight-semibold);
	color: var(--kl-ink);
	border-color: color-mix(in srgb, var(--kl-primary) 26%, var(--kl-border));
	background: color-mix(in srgb, var(--kl-primary-soft) 46%, white);
}

.kl-platform .kl-resource-card--kl_clipart .kl-resource-card__chip--context {
	font-weight: var(--kl-weight-semibold);
	color: var(--kl-ink-muted);
	background: var(--kl-surface-soft);
}

.kl-platform .kl-resource-card--kl_clipart .kl-resource-card__chip--technical {
	font-weight: var(--kl-weight-medium);
	color: color-mix(in srgb, var(--kl-ink-muted) 82%, #6b7280);
	border-color: color-mix(in srgb, var(--kl-border) 86%, transparent);
	background: transparent;
}

.kl-platform .kl-hub-card,
.kl-platform .kl-pathway-card,
.kl-platform .kl-bundle-card {
	padding: var(--kl-card-padding);
	border-radius: var(--kl-card-radius);
	gap: var(--kl-space-2);
}

.kl-platform .kl-pathway-card {
	border-top-width: var(--kl-border-width-strong);
}

/* Typography — locked measures */
.kl-platform .kl-page-header__title {
	font-size: var(--kl-text-3xl);
	max-width: none;
}

.kl-platform .kl-section__title {
	font-size: clamp(1.35rem, 2.5vw, var(--kl-text-2xl));
}

.kl-platform .kl-authority-hub__prose,
.kl-platform .kl-hub-prose {
	max-width: var(--kl-measure-wide);
}

/* Prose / utility widths */
.kl-single .kl-container--worksheet {
	max-width: var(--kl-container-wide);
}

@media (max-width: 767px) {
	.kl-platform .kl-resource-grid--archive,
	.kl-platform .kl-resource-grid--featured,
	.kl-platform .kl-home-featured-grid {
		gap: var(--kl-grid-gap);
	}

	.kl-platform .kl-hub-grid,
	.kl-platform .kl-pathway-grid,
	.kl-platform .kl-bundle-grid {
		gap: var(--kl-grid-gap);
	}
}