// PaperMod inspired layout styles
.content-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem 1.5rem;
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 3rem;
	align-items: start;
	
	@media (max-width: 1024px) {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding: 1.5rem 1rem;
	}
	
	@media (max-width: 768px) {
		padding: 1rem;
	}
}

.site-main {
	min-width: 0; // Prevent grid blowout
	
	// Full width on pages without sidebar
	.no-sidebar & {
		grid-column: 1 / -1;
		max-width: 800px;
		margin: 0 auto;
	}
	
	// Single posts and pages
	.single &,
	.page & {
		max-width: 800px;
		
		.no-sidebar & {
			max-width: 900px;
		}
	}
}

// Archive and blog layouts
.home,
.archive,
.search-results {
	.content-wrapper {
		grid-template-columns: 1fr;
		max-width: 1000px;
	}
	
	.site-main {
		display: grid;
		gap: 2rem;
		
		// Card grid for archive pages
		&.card-grid {
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 2rem;
			
			@media (max-width: 768px) {
				grid-template-columns: 1fr;
				gap: 1.5rem;
			}
		}
	}
}

// Site container
#page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: var(--color-bg-primary);
}

// Skip to content
.skip-link {
	&.screen-reader-text {
		position: absolute !important;
		clip-path: inset(50%);
		width: 1px;
		height: 1px;
		overflow: hidden;
		
		&:focus {
			background: var(--color-text-primary);
			color: var(--color-bg-primary);
			clip-path: none;
			display: block;
			font-size: 0.875rem;
			font-weight: $font__weight-bold;
			height: auto;
			left: 1rem;
			line-height: normal;
			padding: 1rem 1.5rem;
			text-decoration: none;
			top: 1rem;
			width: auto;
			z-index: 100000;
			border-radius: 4px;
		}
	}
}