/* ============================================
   LAYOUT — Grid, containers, topbar, footer
   ============================================ */

/* Container */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-5); width: 100%; }
.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 var(--space-5); width: 100%; }
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-5); width: 100%; }

/* Page wrapper */
.page-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.page-content { flex: 1; padding-top: var(--topbar-height); }

/* Top Bar */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--topbar-height);
  background: rgba(10,10,11,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center;
  padding: 0 var(--space-5);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--container-max); margin: 0 auto; }
.topbar-logo { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--text-primary); text-decoration: none; }
.topbar-logo img { height: 28px; width: auto; }
.topbar-nav { display: flex; align-items: center; gap: var(--space-5); }
.topbar-nav a {
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-secondary); transition: color var(--transition-fast);
  padding: var(--space-1) 0;
}
.topbar-nav a:hover, .topbar-nav a.active { color: var(--text-primary); }
.topbar-actions { display: flex; align-items: center; gap: var(--space-3); }

/* Mobile menu toggle */
.mobile-menu-btn {
  display: none; background: none; border: none; color: var(--text-primary);
  padding: var(--space-2); cursor: pointer;
}
.mobile-menu-btn svg { width: 24px; height: 24px; }

/* Mobile menu overlay */
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: var(--bg-overlay);
}
.mobile-menu.open { display: block; }
.mobile-menu-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 280px;
  background: var(--bg-surface); padding: var(--space-6) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
  overflow-y: auto;
}
.mobile-menu-close { align-self: flex-end; color: var(--text-secondary); padding: var(--space-2); }
.mobile-menu-nav { display: flex; flex-direction: column; gap: var(--space-3); }
.mobile-menu-nav a {
  font-size: var(--text-base); color: var(--text-secondary); padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.mobile-menu-nav a:hover { color: var(--text-primary); }

/* Two-column layout (convert page) */
.layout-two-col { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-5); align-items: start; }
.layout-two-col .col-main { min-width: 0; }
.layout-two-col .col-side { position: sticky; top: calc(var(--topbar-height) + var(--space-5)); }

/* Footer */
.site-footer {
  background: var(--bg-surface); border-top: 1px solid var(--border-subtle);
  padding: var(--space-7) 0 var(--space-6);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-6); }
.footer-brand { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-brand p { font-size: var(--text-sm); color: var(--text-muted); max-width: 280px; }
.footer-col h6 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: var(--space-3); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col a { font-size: var(--text-sm); color: var(--text-secondary); }
.footer-col a:hover { color: var(--text-primary); }
.footer-bottom {
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--text-xs); color: var(--text-muted);
}

/* Section spacing */
.section { padding: var(--space-8) 0; }
.section-sm { padding: var(--space-6) 0; }

@media (max-width: 768px) {
  .topbar-nav { display: none; }
  .mobile-menu-btn { display: block; }
  .layout-two-col { grid-template-columns: 1fr; }
  .layout-two-col .col-side { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: var(--space-2); text-align: center; }
  .container { padding: 0 var(--space-4); }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}