/* Visual integration for the handwritten WeDo instruction renderer. */
.wedo-catalog,
.wedo-instruction-full,
.wedo-instruction-single-page {
	width: min(calc(100% - 48px), var(--kp-container));
	max-width: var(--kp-container) !important;
	margin: 0 auto !important;
	padding: 46px 0 76px !important;
}

.wedo-catalog-title,
.wedo-instruction-title,
.wedo-single-title {
	margin-bottom: 12px !important;
}

.wedo-catalog-software {
	display: inline-flex;
	margin: 0 0 30px !important;
	padding: 10px 13px;
	border-radius: 12px;
	background: var(--kp-primary-soft);
}

.wedo-catalog-software a {
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.wedo-catalog-section {
	margin-top: 28px !important;
	padding: clamp(20px, 3vw, 32px);
	border: 1px solid var(--kp-line);
	border-radius: 24px;
	background: var(--kp-surface);
	box-shadow: var(--kp-shadow-small);
}

.wedo-catalog-section-title {
	margin-bottom: 20px !important;
	font-size: clamp(1.35rem, 2vw, 1.8rem) !important;
}

.wedo-catalog-grid {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px !important;
	justify-content: initial !important;
}

.wedo-catalog-card {
	position: relative;
	display: flex !important;
	width: auto !important;
	min-width: 0;
	padding: 10px 10px 14px !important;
	border: 1px solid var(--kp-line) !important;
	border-radius: 17px !important;
	background: #fff;
	color: var(--kp-text) !important;
	text-decoration: none !important;
	transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.wedo-catalog-card:hover {
	border-color: #b9d3f5 !important;
	box-shadow: var(--kp-shadow-small);
	transform: translateY(-2px);
}

.wedo-catalog-card-img {
	width: 100%;
	margin-bottom: 12px !important;
}

.wedo-catalog-card-img img {
	width: 100%;
	max-width: none !important;
	height: auto;
	max-height: none !important;
	aspect-ratio: 1 / 1;
	border-radius: 13px;
	background: #f8fafc;
	object-fit: contain;
}

.wedo-catalog-card-title {
	min-height: 2.8em;
	margin: 0 !important;
	color: var(--kp-heading);
	font-size: 14px;
	font-weight: 750 !important;
	line-height: 1.35;
	text-align: left !important;
}

.wedo-catalog-card-skills {
	width: 100%;
	margin-top: 10px;
	padding: 8px;
	border-radius: 10px;
	background: #f6f8fb;
	color: var(--kp-muted) !important;
	font-size: 11px !important;
	line-height: 1.45;
	text-align: center;
}

.wedo-catalog-notes {
	margin-top: 30px !important;
	padding: 22px !important;
	border: 1px solid var(--kp-line) !important;
	border-radius: 18px;
	background: #fff;
	color: var(--kp-muted);
}

.wedo-instruction-header {
	margin-bottom: 24px !important;
	padding: clamp(24px, 4vw, 44px);
	border-radius: 24px;
	background: linear-gradient(135deg, #eaf3ff, #fff);
	box-shadow: inset 0 0 0 1px rgba(18, 104, 232, 0.1);
}

.wedo-instruction-skills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 !important;
}

.wedo-instruction-skills span {
	margin: 0 !important;
	padding: 7px 10px;
	border-radius: 999px;
	background: #fff;
	color: var(--kp-primary-dark);
	font-size: 12px;
	font-weight: 750;
	box-shadow: inset 0 0 0 1px #d6e8ff;
}

.wedo-instruction-rating-placeholder,
.wedo-instruction-vote-placeholder {
	display: none;
}

.wedo-instruction-toc {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 20px 0 0 !important;
}

.wedo-instruction-toc > span {
	align-self: center;
	margin-right: 3px;
	color: var(--kp-muted);
	font-size: 12px;
	font-weight: 700;
}

.wedo-instruction-toc a,
.wedo-single-nav a,
.wedo-back a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	margin: 0 !important;
	padding: 7px 11px;
	border-radius: 10px;
	background: #fff;
	color: var(--kp-primary-dark);
	font-size: 13px;
	font-weight: 700 !important;
	text-decoration: none;
	box-shadow: inset 0 0 0 1px var(--kp-line);
}

.wedo-instruction-toc a:hover,
.wedo-single-nav a:hover,
.wedo-back a:hover {
	background: var(--kp-primary-soft);
	box-shadow: inset 0 0 0 1px #c9dffb;
}

.wedo-back {
	margin: 16px 0 !important;
}

.wedo-slides,
.wedo-single-slide,
.wedo-code-block,
.wedo-ads,
.wedo-single-ads,
.wedo-seo-article,
.wedo-photos-placeholder,
.wedo-comments {
	margin-top: 18px !important;
	padding: clamp(18px, 3vw, 30px);
	border: 1px solid var(--kp-line);
	border-radius: 20px;
	background: var(--kp-surface);
	box-shadow: var(--kp-shadow-small);
}

.wedo-slides-title,
.wedo-ads h2,
.wedo-seo-article h2,
.wedo-photos-placeholder h2,
.wedo-comments h2 {
	margin-top: 0 !important;
}

.wedo-pdf-container {
	margin: 14px 0 0 !important;
	padding: clamp(8px, 2vw, 18px);
	border-radius: 16px;
	background: #eef2f6;
}

.wedo-pdf-loading {
	color: var(--kp-muted);
}

.wedo-canvas-container {
	gap: 16px;
}

.wedo-canvas-container canvas {
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 12px 34px rgba(16, 24, 40, 0.13) !important;
}

.wedo-code-block pre {
	padding: 18px !important;
	border-radius: 14px !important;
	background: #101828 !important;
	color: #eaf3ff;
}

.wedo-wc-products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px !important;
}

.wedo-wc-product {
	width: auto !important;
	padding: 10px;
	border: 1px solid var(--kp-line);
	border-radius: 14px;
}

.wedo-wc-product a {
	color: var(--kp-text);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.wedo-wc-product img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	object-fit: contain;
}

.wedo-single-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px !important;
}

.wedo-single-nav + .wedo-single-title {
	margin-top: 24px !important;
}

.wedo-back-to-top {
	right: 20px !important;
	bottom: 20px !important;
	display: grid;
	place-items: center;
	width: 48px !important;
	height: 48px !important;
	border: 0 !important;
	border-radius: 15px !important;
	background: var(--kp-primary) !important;
	color: #fff;
	box-shadow: 0 12px 28px rgba(18, 104, 232, 0.25) !important;
}

@media (max-width: 1100px) {
	.wedo-catalog-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.wedo-catalog,
	.wedo-instruction-full,
	.wedo-instruction-single-page {
		width: min(calc(100% - 32px), var(--kp-container));
		padding-top: 30px !important;
	}

	.wedo-catalog-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.wedo-wc-products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.wedo-catalog,
	.wedo-instruction-full,
	.wedo-instruction-single-page {
		width: min(calc(100% - 24px), var(--kp-container));
	}

	.wedo-catalog-section {
		padding: 14px;
		border-radius: 18px;
	}

	.wedo-catalog-grid,
	.wedo-wc-products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 9px !important;
	}

	.wedo-catalog-card-title {
		font-size: 12px;
	}

	.wedo-catalog-card-skills {
		font-size: 9px !important;
	}

	.wedo-instruction-header,
	.wedo-slides,
	.wedo-single-slide,
	.wedo-code-block,
	.wedo-ads,
	.wedo-single-ads,
	.wedo-seo-article,
	.wedo-photos-placeholder,
	.wedo-comments {
		padding: 15px;
		border-radius: 17px;
	}

	.wedo-pdf-container {
		margin-inline: -7px !important;
	}
}