@import "./blog-content.css";
@import "./blog-nav.css";

/**
 * Blog Layout CSS Grid Foundation
 * Phase 01-01: Responsive sidebar + content grid with sticky navigation
 */

:root {
	/* Layout dimensions */
	--sidebar-width: 250px;
	--outline-width: 250px;
	--content-max-width: 70ch;
	--grid-gap: 1.5rem;
	--breakpoint-tablet: 768px;

	/* Z-index scale */
	--z-sticky-nav: 50;
	--z-footer: 100;
	--z-modal: 200;
}

/**
 * Mobile-first base layout
 * Single column: nav stacked above content
 */
.blog-layout {
	display: grid;
	grid-template-areas:
		"nav"
		"content";
	gap: var(--grid-gap);
	padding: 1rem;
	min-height: 100dvh;
}

.blog-layout__nav {
	grid-area: nav;
}

.blog-layout__content {
	grid-area: content;
	max-width: min(90vw, var(--content-max-width));
	margin-inline: auto;
}

.blog-layout__outline {
	display: none;
}

/**
 * Desktop layout (tablet and above)
 * Three columns: sidebar on left, content in center, outline on right
 */
@media (width >= 768px) {
	.blog-layout {
		grid-template-columns: var(--sidebar-width) 1fr var(--outline-width);
		grid-template-areas: "nav content outline";
		align-items: start; /* CRITICAL: enables sticky positioning */
		padding: 2rem;
	}

	.blog-layout__nav {
		position: sticky;
		top: 0;
		height: fit-content;
		max-height: 100dvh;
		overflow-y: auto;
		z-index: var(--z-sticky-nav);
	}

	.blog-layout__content {
		max-width: var(--content-max-width);
		margin-inline: auto;
	}

	.blog-layout__outline {
		display: block;
		grid-area: outline;
		position: sticky;
		top: 0;
		height: fit-content;
		max-height: 100dvh;
		overflow-y: auto;
	}
}

/**
 * Override main.css conflict
 * main.css sets `main { height: 100vh }` which breaks grid layout
 * This override ensures proper auto-height behavior
 */
main.blog-layout {
	height: auto;
	min-height: 100dvh;
}

/**
 * Smooth scroll for anchor navigation (LAY-04)
 * Applied to html element, respects reduced motion preference
 */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/**
 * Footer z-index note
 * Footer in main.css is position: fixed but missing z-index.
 * Apply z-index: var(--z-footer) in main.css or inline on footer element
 * to ensure footer appears above content when scrolling.
 */