/**
 * responsive.css
 * ─────────────────────────────────────────────────────────────
 * PURPOSE: All responsive breakpoint overrides.
 *          Ensures the site works on mobile, tablet, laptop,
 *          desktop, and ultrawide screens.
 *
 * LOGIC: Uses max-width breakpoints (desktop-first) with
 *        key overrides for layout, typography, and spacing.
 *
 * BREAKPOINTS:
 *   1400px — Ultrawide adjustments
 *   1200px — Laptop
 *    960px — Tablet landscape
 *    768px — Tablet portrait
 *    480px — Mobile
 *    360px — Small mobile
 * ─────────────────────────────────────────────────────────────
 */

/* ── ULTRAWIDE (> 1400px) ──────────────────────────────────── */
@media (min-width: 1400px) {
  :root { --container-max: 1360px; }
}

/* ── LAPTOP (max 1200px) ───────────────────────────────────── */
@media (max-width: 1200px) {
  /* Dataset section — stack to single column */
  .dataset__grid {
    grid-template-columns: 1fr;
    max-width: 700px;
    margin-inline: auto;
  }

  .dataset__profile-card {
    position: static;
    max-width: 400px;
    margin-inline: auto;
  }

  /* Deployment layout */
  .deployment__layout {
    grid-template-columns: 1fr;
    max-width: 600px;
    text-align: center;
  }

  .deployment__desc { margin-inline: auto; }
  .deployment__email-link { justify-content: center; }
}

/* ── TABLET LANDSCAPE (max 960px) ──────────────────────────── */
@media (max-width: 960px) {
  :root {
    --section-py: 4rem;
    --navbar-h: 64px;
  }

  /* ─ Navbar: hide desktop nav, show hamburger ─ */
  .navbar__nav { display: none; }
  .navbar__cmd { display: none; }
  .navbar__hamburger { display: flex; }

  /* ─ Hero: stack to single column ─ */
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    text-align: center;
    padding-top: var(--space-10);
  }

  .hero__content { align-items: center; }
  .hero__subtitle { max-width: 100%; }
  .hero__cta-group { justify-content: center; }
  .hero__scroll-hint { justify-content: center; }

  .hero__metrics { max-width: 500px; margin-inline: auto; }

  /* ─ Timeline: collapse to single column ─ */
  .timeline::before { left: 24px; }

  .epoch {
    grid-template-columns: 48px 1fr;
    gap: var(--space-4);
  }

  .epoch:nth-child(even) .epoch__card,
  .epoch:nth-child(odd) .epoch__card  { grid-column: 2; grid-row: 1; }
  .epoch:nth-child(even) .epoch__node,
  .epoch:nth-child(odd) .epoch__node  { grid-column: 1; grid-row: 1; }
  .epoch:nth-child(even) .epoch__spacer,
  .epoch:nth-child(odd) .epoch__spacer { display: none; }

  .epoch__node { align-items: flex-start; padding-top: var(--space-1); }
  .epoch__dot { width: 40px; height: 40px; font-size: var(--text-xs); }

  /* ─ Simulation: stack ─ */
  .simulation__layout {
    grid-template-columns: 1fr;
  }

  /* ─ Evaluation: stack ─ */
  .evaluation__layout {
    grid-template-columns: 1fr;
  }

  /* ─ Footer ─ */
  .footer__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer__links { justify-content: center; }
  .footer__status { flex-direction: column; align-items: center; }
  .footer__status-left { flex-wrap: wrap; justify-content: center; }
}

/* ── TABLET PORTRAIT (max 768px) ───────────────────────────── */
@media (max-width: 768px) {
  :root {
    --section-py: 3rem;
    --text-5xl: 2.5rem;
    --text-4xl: 2rem;
    --text-3xl: 1.6rem;
  }

  /* ─ General grid adjustments ─ */
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }

  /* ─ Experiments grid ─ */
  .experiments__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }

  /* ─ Features grid ─ */
  .features__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }

  /* ─ Research grid ─ */
  .research__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }

  /* ─ Evaluation stats row ─ */
  .evaluation__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ─ Learning list ─ */
  .learning-list {
    grid-template-columns: 1fr;
  }

  /* ─ Achievements grid ─ */
  .achievements-grid {
    grid-template-columns: 1fr;
  }

  /* ─ Meta rows ─ */
  .meta-row {
    grid-template-columns: 120px 1fr;
  }

  /* ─ Modal ─ */
  .modal {
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    max-height: 92vh;
  }

  /* ─ Chat window ─ */
  #chat-window {
    width: calc(100vw - var(--space-8));
    right: var(--space-4);
    bottom: calc(var(--space-4) + 56px + var(--space-3));
    height: 500px;
  }

  #chat-fab {
    right: var(--space-4);
    bottom: var(--space-4);
  }

  /* ─ Command palette ─ */
  #cmd-palette .cmd-palette__inner {
    max-width: calc(100vw - var(--space-8));
    margin: var(--space-4);
  }
}

/* ── MOBILE (max 480px) ────────────────────────────────────── */
@media (max-width: 480px) {
  :root { --section-py: 2.5rem; }

  .container { padding-inline: var(--space-4); }

  /* ─ Boot overlay text ─ */
  .boot__system-name { font-size: var(--text-xl); }
  .boot__log { padding: var(--space-4); }

  /* ─ Hero ─ */
  .hero__title { font-size: 2.2rem; }
  .hero__cta-group { flex-direction: column; align-items: stretch; }
  .hero__cta-group .btn { text-align: center; }

  /* ─ Metric cards ─ */
  .metric-card__bar { display: none; }

  /* ─ Section header ─ */
  .section-header { margin-bottom: var(--space-8); }

  /* ─ Epoch cards ─ */
  .epoch__card-header { flex-wrap: wrap; }

  /* ─ Simulation chips ─ */
  .simulation__chips { gap: var(--space-2); }
  .sim-chip { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); }

  /* ─ Evaluation stats ─ */
  .evaluation__stats { grid-template-columns: repeat(2, 1fr); }
  .stat-card { padding: var(--space-4); }
  .stat-card__value { font-size: var(--text-3xl); }

  /* ─ Research controls ─ */
  .research__controls { flex-direction: column; align-items: stretch; }
  .research__filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--space-2); }

  /* ─ Deployment ─ */
  .deployment__layout { gap: var(--space-8); }
  .endpoint-desc { display: none; }

  /* ─ Navbar ─ */
  .navbar__logo-text { display: none; }

  /* ─ Features chart ─ */
  .chart-bar-label { width: 100px; font-size: 11px; }
}

/* ── SMALL MOBILE (max 360px) ──────────────────────────────── */
@media (max-width: 360px) {
  .hero__title { font-size: 1.9rem; }
  .evaluation__stats { grid-template-columns: 1fr 1fr; }
  .sim-chip { font-size: 11px; }
}

/* ── PRINT STYLES ──────────────────────────────────────────── */
@media print {
  #boot-overlay,
  #navbar,
  #chat-fab,
  #chat-window,
  #cmd-palette,
  #easter-egg,
  .hero__orb,
  #neural-canvas,
  .simulation,
  .chatbot {
    display: none !important;
  }

  body {
    background: white;
    color: black;
    font-size: 12pt;
  }

  .section { break-inside: avoid; }
}

/* ── REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}