/* ============================================================================
   RAVIX — LAYOUT
   ============================================================================
   Container, sections, and structural utilities. All layout primitives
   used by the theme live here. No component-specific styles.
   ============================================================================ */


/* ============================================================================
   CONTAINER
   ============================================================================
   Maximum content width, with responsive horizontal padding. Used by
   every section that isn't full-bleed.
   ============================================================================ */

.ravix-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

@media (min-width: 768px) {
	.ravix-container {
		padding-inline: var(--space-lg);
	}
}

@media (min-width: 1280px) {
	.ravix-container {
		padding-inline: var(--space-xl);
	}
}


/* ============================================================================
   SECTION — vertical rhythm
   ============================================================================ */

.ravix-section {
	position: relative;
	padding-block: var(--space-xxl);
}

.ravix-section--tight {
	padding-block: var(--space-xl);
}

.ravix-section--full-bleed {
	padding-inline: 0;
}


/* ============================================================================
   GRID UTILITIES
   ============================================================================
   Lightweight grid helpers used by some sections. Most layouts will be
   built with bespoke grids in their component CSS — these are baseline
   2-col / 3-col helpers for content-heavy pages.
   ============================================================================ */

.ravix-grid {
	display: grid;
	gap: var(--space-md);
}

.ravix-grid--2 { grid-template-columns: 1fr; }
.ravix-grid--3 { grid-template-columns: 1fr; }

@media (min-width: 768px) {
	.ravix-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.ravix-grid--3 { grid-template-columns: repeat(3, 1fr); }
}


/* ============================================================================
   MAIN ELEMENT — leave room for the fixed nav
   ============================================================================ */

.ravix-main {
	display: block;
	min-height: 100vh;
}