/* ============================================================
   AlgoVik Theme — responsive.css
   ============================================================ */
/* Dashboard metric grid uses auto-fit minmax(170px,1fr) —
   naturally responsive, no overrides needed until narrow */
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
  .about-2col { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-layout { grid-template-columns: 1fr; margin: 1.5rem 4vw; }
  .perf-stats { flex-wrap: wrap; }
  .perf-stat  { min-width: 50%; }
  .pnl-charts-grid { grid-template-columns: 1fr; }
  .comp-table th, .comp-table td { padding: 0.7rem 0.75rem; font-size: 0.68rem; }
}
@media (max-width: 700px) {
  .hero-h1 { font-size: clamp(3.5rem, 16vw, 6rem); }
  .form-grid { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .pie-wrap { flex-direction: column; height: auto; gap: 16px; }
  .pie-canvas-wrap { width: 140px; height: 140px; }
  .pnl-section { padding: 48px 16px 60px; }
  .spread-body { padding: 16px; }
  .scard-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .leg-table { display: block; overflow-x: auto; width: 100%; }
  .leg-table thead { display: none; }
  .leg-table tbody tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 4px 8px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(27,79,255,0.1);
  }
  .leg-table td { padding: 0; font-size: 0.72rem; }
  .leg-table td:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
  .leg-table td:nth-child(2) { grid-column: 2; grid-row: 1; font-size: 0.68rem; color: rgba(232,240,255,0.5); word-break: break-all; }
  .leg-table td:nth-child(3) { grid-column: 2; grid-row: 2; }
  .leg-table td:nth-child(4) { grid-column: 3; grid-row: 2; }
  .leg-table td:nth-child(5) { grid-column: 3; grid-row: 1; text-align: right; font-weight: 600; }
  .scard { padding: 14px; }
  .scard-dates { font-size: 0.65rem; }
  .instr-name { font-size: 0.65rem; word-break: break-all; }
}
@media (max-width: 480px) {
  .hero-btns { flex-direction: column; align-items: center; }
  .form-card { padding: 1.5rem; }
  .pnl-metrics-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}