/**
 * Layout CSS — Ontwo Theme
 *
 * Defines structural layout patterns for the theme
 * Uses spacing and width tokens from base.css
 *
 * Structure:
 * 1. Container & Layout Wrapper
 * 2. Main Content Area
 * 3. Post List Layout
 * 4. Post Card Grid Layout
 *
 * Note: No colors, typography, or component-specific styling
 * Responsive rules will be added separately
 */

/* ==========================================================================
   1. Container & Layout Wrapper
   ========================================================================== */

/**
 * .container
 * Primary layout constraint
 * Centered content with max-width of 1280px
 */
.container {
	width: var(--container-width);
	max-width: var(--container-max-width);
	margin-left: auto;
	margin-right: auto;
}

/**
 * .layout-container
 * Alternative container class used in legacy theme
 * Matches .container behavior
 */
.layout-container {
	width: var(--container-width);
	max-width: var(--container-max-width);
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   2. Main Content Area
   ========================================================================== */

/**
 * main content area
 * Primary content wrapper with flex layout support
 * Provides spacing and structural foundation
 */
main.main {
	position: relative;
	z-index: 1;
	margin-top: -1px;
}

/**
 * Homepage main content area
 * Stacks sections vertically at full width
 */
body.home main.main {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	width: 100%;
	margin-top: -1px;
}

/**
 * Main content area for non-home pages
 * Applies container constraints and vertical spacing
 */
body:not(.home) main.main {
	width: var(--container-width);
	max-width: var(--container-max-width);
	margin-left: auto;
	margin-right: auto;
	margin-top: 45px;
	padding-bottom: var(--spacing-unit);
}

/**
 * .content-main
 * Primary content column (65% width on desktop)
 * Works in conjunction with sidebar layout
 */
.content-main {
	flex-grow: 1;
	width: var(--content-width);
}

/* ==========================================================================
   3. Page Layout (Two-Column with Sidebar)
   ========================================================================== */

/**
 * .page-layout
 * Two-column layout for inner pages
 * Main content on left (65%), sidebar on right (21%)
 * Gap between columns handled by flex gap
 */
.page-layout {
	display: flex;
	gap: var(--spacing-unit);
	align-items: flex-start;
}

/**
 * .page-layout__main
 * Primary content column (65% of container width)
 * Fixed width, no flex grow
 */
.page-layout__main {
	flex: 0 0 var(--content-width);
	min-width: 0; /* Prevent flex item overflow */
}

/**
 * .page-layout__sidebar
 * Sidebar column (21% of container width)
 * Fixed width, no flex grow
 */
.page-layout__sidebar {
	flex: 0 0 var(--sidebar-width);
	min-width: 0; /* Prevent flex item overflow */
}

/* ==========================================================================
   4. Post List Layout
   ========================================================================== */

/**
 * .post-list
 * Vertical list of posts with spacing
 * Used for archive pages and search results
 */
.post-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-list .card {
	margin-top: var(--spacing-half);
	margin-bottom: var(--spacing-half);
	padding-top: var(--spacing-half);
	padding-bottom: var(--spacing-half);
}

/**
 * Post list item spacing
 * First item has no top margin
 * Last item has no bottom margin
 */
.post-list .card:first-child {
	margin-top: 0;
}

.post-list .card:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   4. Post Card Grid Layout
   ========================================================================== */

/**
 * .post-card-grid
 * Grid layout for post cards
 * Uses flexible gap spacing
 */
.post-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--spacing-widget);
	margin: 0;
	padding: 0;
	list-style: none;
}

/**
 * Individual grid item
 * No additional spacing (handled by grid gap)
 */
.post-card-grid .card {
	margin: 0;
	padding: 0;
}