/**
 * === Card-on-Canvas Utility — Direction E ===
 *
 * Mô tả: Utility CSS cho pattern outer canvas (full-width nền mềm) +
 *        inner card (max 1440 bo góc đổ bóng). Dùng cho hero + section cards.
 *
 * Flow:
 *   1. .canvas-wrapper — full-width background sử dụng --color-canvas
 *   2. .card-on-canvas — centered card max 1440px với border-radius + shadow
 *   3. Modifier classes — cream, forest, size variants
 *   4. .section-gap — spacing utility giữa các sections
 */

.canvas-wrapper {
	background: #ffffff;
	padding: 0 clamp(16px, 3vw, 48px) 0;
}

.card-on-canvas {
	max-width: 1440px;
	margin-inline: auto;
	background: var(--color-surface);
	border-radius: 28px;
	box-shadow: 0 12px 36px rgba(26, 43, 34, 0.06);
	padding: clamp(32px, 4vw, 56px);
}

.card-on-canvas--md {
	border-radius: 22px;
}

.card-on-canvas--cream {
	background: var(--color-surface-warm);
}

.card-on-canvas--forest {
	background: var(--color-brand-primary);
	color: var(--color-surface);
}

.section-gap {
	margin-block: clamp(32px, 5vw, 64px);
}