{
	"$schema": "../schemas/code-crispies-module-schema.json",
	"id": "layouts",
	"title": "Layouts",
	"description": "Master modern CSS layout techniques with Flexbox and Grid for responsive, powerful designs.",
	"difficulty": "intermediate",
	"lessons": [
		{
			"id": "layouts-1",
			"title": "Flex Basics",
			"description": "Learn the core properties of Flexbox to align, distribute space, and order items in a container.",
			"task": "Set .flex to display: flex, and center its children both horizontally and vertically.",
			"previewHTML": "<div class=\"flex\"><div>1</div><div>2</div><div>3</div></div>",
			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .flex > div { background: #eceff1; margin: 0.5rem; padding: 1rem; }",
			"sandboxCSS": "",
			"codePrefix": "/* Enable and center Flexbox */\n.flex {",
			"initialCode": "",
			"codeSuffix": "}",
			"previewContainer": "preview-area",
			"validations": [
				{ "type": "contains", "value": "display", "message": "Use <kbd>display: flex</kbd>", "options": { "caseSensitive": false } },
				{
					"type": "contains",
					"value": "justify-content",
					"message": "Use <kbd>justify-content: center</kbd>",
					"options": { "caseSensitive": false }
				},
				{ "type": "contains", "value": "align-items", "message": "Use <kbd>align-items: center</kbd>", "options": { "caseSensitive": false } }
			]
		},
		{
			"id": "layouts-2",
			"title": "Flex Advanced",
			"description": "Control wrapping, ordering, and flexible growth/shrink of items in a flex container.",
			"task": "Allow items to wrap and set .item to flex: 1 1 100px.",
			"previewHTML": "<div class=\"flex\"><div class=\"item\">A</div><div class=\"item\">B</div><div class=\"item\">C</div></div>",
			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .item { background: #c5cae9; margin: 0.5rem; padding: 1rem; }",
			"sandboxCSS": "",
			"codePrefix": "/* Enable wrap and flexible items */\n.flex {",
			"initialCode": "",
			"codeSuffix": "}\n.item { }",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "contains",
					"value": "flex-wrap: wrap",
					"message": "Use <kbd>flex-wrap: wrap</kbd>",
					"options": { "caseSensitive": false }
				},
				{
					"type": "regex",
					"value": ".item.*flex:\\s*1\\s+1\\s+100px",
					"message": "Set <kbd>flex: 1 1 100px</kbd> on items",
					"options": { "caseSensitive": false }
				}
			]
		},
		{
			"id": "layouts-3",
			"title": "Grid Basics",
			"description": "Define grid containers, set rows and columns, and place items in a structured grid.",
			"task": "Set .grid to display: grid with three equal columns and a 1rem gap.",
			"previewHTML": "<div class=\"grid\"><div>1</div><div>2</div><div>3</div><div>4</div></div>",
			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .grid > div { background: #ffe082; padding: 1rem; }",
			"sandboxCSS": "",
			"codePrefix": "/* Define Grid */\n.grid {",
			"initialCode": "",
			"codeSuffix": "}",
			"previewContainer": "preview-area",
			"validations": [
				{ "type": "contains", "value": "display: grid", "message": "Use <kbd>display: grid</kbd>", "options": { "caseSensitive": false } },
				{
					"type": "contains",
					"value": "grid-template-columns",
					"message": "Define <kbd>grid-template-columns</kbd>",
					"options": { "caseSensitive": false }
				},
				{
					"type": "regex",
					"value": "grid-template-columns:\\s*repeat\\(3,\\s*1fr\\)\\s*",
					"message": "Create three equal columns with <kbd>repeat(3, 1fr)</kbd>",
					"options": { "caseSensitive": false }
				},
				{ "type": "contains", "value": "gap", "message": "Use <kbd>gap</kbd> property", "options": { "caseSensitive": false } }
			]
		},
		{
			"id": "layouts-4",
			"title": "Grid Placement",
			"description": "Control the span and position of grid items with grid-column and grid-row.",
			"task": "Span the first grid item across 2 columns using grid-column: 1 / span 2.",
			"previewHTML": "<div class=\"grid\"><div class=\"item1\">Featured</div><div>2</div><div>3</div><div>4</div></div>",
			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .grid > div { background: #c8e6c9; padding: 1rem; }",
			"sandboxCSS": "",
			"codePrefix": "/* Span item */\n.item1 {",
			"initialCode": "",
			"codeSuffix": "}",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "contains",
					"value": "grid-column",
					"message": "Use <kbd>grid-column</kbd> property",
					"options": { "caseSensitive": false }
				},
				{
					"type": "property_value",
					"value": { "property": "grid-column", "expected": "1 / span 2" },
					"message": "Span across 2 columns with <kbd>grid-column: 1 / span 2</kbd>",
					"options": { "caseSensitive": false }
				}
			]
		}
	]
}