/* ============================================================================ Page Container Standardized container layout for all page types: - Two-column layout (sidebar + content) - Responsive breakpoints - Consistent spacing - Main content wrapper ============================================================================ */ /* Main Content Wrapper - Global layout container */ .main-content { flex: 1; width: 100%; } /* Standard page container with sidebar */ .page-with-sidebar { --sidebar-width: 300px; --section-grid-columns: 2; display: grid; grid-template-columns: var(--sidebar-width) 1fr; gap: var(--spacing-5); width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-3) var(--spacing-6) var(--spacing-3); flex: 1; transition: grid-template-columns var(--duration-normal) var(--easing-ease-in-out), gap var(--duration-normal) var(--easing-ease-in-out); } /* Desktop: 3 columns for section cards grid */ @media (min-width: 1293px) { .page-with-sidebar { --section-grid-columns: 3; } } /* Collapsed sidebar state - class on set server-side from cookie */ html.sidebar-collapsed .page-with-sidebar { --sidebar-width: 48px; --section-grid-columns: 4; gap: var(--spacing-1); } /* Main content area - ensure it maintains width during loading */ /* Applies to direct children of page-with-sidebar (article or section) */ .page-with-sidebar > article, .page-with-sidebar > section { min-width: 0; /* Prevent grid blowout */ width: 100%; max-width: 100%; } /* Standard page container without sidebar */ .page-without-sidebar { max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-3) var(--spacing-6) var(--spacing-3); flex: 1; } /* Responsive - Single column on smaller screens */ @media (max-width: 1292px) { .page-with-sidebar { --section-grid-columns: 2; grid-template-columns: 1fr; gap: var(--spacing-3); transition: none; } /* Disable collapsed state on mobile */ html.sidebar-collapsed .page-with-sidebar { --sidebar-width: 300px; --section-grid-columns: 2; } } @media (max-width: 768px) { .page-with-sidebar { padding: 0 var(--spacing-2) var(--spacing-4) var(--spacing-2); } .page-without-sidebar { padding: 0 var(--spacing-2) var(--spacing-4) var(--spacing-2); } }