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