/* ============================================
   AstroVault Layout System
   ============================================ */

.page-mobile {
  min-height: 100vh;
  padding-bottom: calc(var(--nav-bottom-height) + var(--space-4));
}

.page-desktop {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
}

.page-fullscreen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Containers */
.container {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.container-sm { max-width: var(--max-content-sm); }
.container-lg { max-width: 1400px; }

/* Grid */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }

/* Sections */
.section { padding: var(--space-6) 0; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.section-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--font-semibold); }
.section-link { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-accent-teal); display: flex; align-items: center; gap: var(--space-1); }

/* Horizontal Scroll */
.scroll-x {
  display: flex; gap: var(--space-3); overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-2); scrollbar-width: none;
}
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x > * { scroll-snap-align: start; flex-shrink: 0; }

/* Desktop Multi-Panel */
.panel-layout { display: flex; height: calc(100vh - var(--nav-height)); overflow: hidden; }
.panel { flex: 1; overflow-y: auto; border-right: 1px solid var(--glass-border); padding: var(--space-4); }
.panel:last-child { border-right: none; }
.panel-fixed { width: 360px; flex-shrink: 0; }
.panel-wide { flex: 2; }

/* Page Content */
.page-content { padding: var(--space-4) 0; }
.page-header { padding: var(--space-5) 0 var(--space-4); }
.page-header-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--font-bold); margin-bottom: var(--space-1); }
.page-header-subtitle { font-size: var(--text-sm); color: var(--color-text-tertiary); }

/* Responsive */
@media (max-width: 1024px) {
  .page-desktop { margin-left: 0; }
  .nav-side { display: none; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .panel-layout { flex-direction: column; height: auto; }
  .panel-fixed { width: 100%; }
  .panel { border-right: none; border-bottom: 1px solid var(--glass-border); }
  .hide-tablet { display: none !important; }
}

@media (max-width: 768px) {
  :root { --text-4xl: 1.875rem; --text-3xl: 1.5rem; --text-2xl: 1.25rem; }
  .container { padding: 0 var(--space-4); }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding: var(--space-4) 0; }
  .hide-mobile { display: none !important; }
}

@media (max-width: 420px) {
  .container { padding: 0 var(--space-3); }
  .grid-2 { grid-template-columns: 1fr; }
}

@media (min-width: 1025px) {
  .show-mobile { display: none !important; }
  .nav-bottom { display: none; }
}

@media (max-width: 768px) {
  .show-desktop { display: none !important; }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .page-mobile { padding-bottom: calc(var(--nav-bottom-height) + var(--space-4) + env(safe-area-inset-bottom)); }
}