/* ==========================================================================
   RESPONSIVE — tablet and mobile adaptations
   ========================================================================== */

/* ---- ≤1024px : tablet ---- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { aspect-ratio: 16/9; order: -1; }
  .hero-copy { max-width: 100%; }

  .hero-visual-flow { flex-direction: row; flex-wrap: wrap; gap: 0.6rem; }
  .flow-connector { width: 14px; height: 1px; }
  .flow-node { max-width: none; flex: 1 1 auto; font-size: 0.72rem; padding: 0.65rem 0.85rem; }
  .hero-visual-caption { margin-bottom: 0.75rem; }

  .scale-grid { grid-template-columns: repeat(2, 1fr); }

  .problem-layout { grid-template-columns: 1fr; }

  .two-col-intro { grid-template-columns: 1fr; }
  .case-media-grid { grid-template-columns: repeat(2, 1fr); }
  .case-chapter { grid-template-columns: 1fr; gap: 0.75rem; }

  .impact-stat-row { grid-template-columns: repeat(2, 1fr); }

  .projects-grid { grid-template-columns: 1fr; }
  .project-card:first-child { grid-column: auto; }
  .project-card:first-child .project-card-media { aspect-ratio: 16/10; }

  .skills-grid { grid-template-columns: repeat(2, 1fr); }

  .contact-layout { grid-template-columns: 1fr; }
}

/* ---- ≤768px : mobile ---- */
@media (max-width: 768px) {
  :root { --section-pad-y: clamp(3.5rem, 12vw, 5.5rem); }

  .nav-links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(78vw, 320px);
    height: 100svh;
    background: var(--color-navy-90);
    backdrop-filter: blur(10px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.75rem;
    padding: 2rem var(--gutter);
    transform: translateX(100%);
    transition: transform var(--dur-med) var(--ease-standard);
    border-left: 1px solid var(--color-hairline);
  }

  .nav-links.is-open { transform: translateX(0); }

  .nav-link { font-size: 1.1rem; color: var(--color-white); }

  .nav-toggle { display: flex; }

  .hero-stats { grid-template-columns: 1fr; gap: 1.5rem; }

  .scale-grid { grid-template-columns: 1fr; }

  .problem-dataset { flex-wrap: wrap; }

  .data-grid { --cols: 10; }

  .flow-track { flex-direction: column; align-items: stretch; }
  .flow-arrow { align-self: center; transform: rotate(90deg); }

  .case-media-grid { grid-template-columns: 1fr; }

  .impact-stat-row { grid-template-columns: 1fr; gap: 2rem; }

  .skills-grid { grid-template-columns: 1fr; }

  .cv-actions { flex-direction: column; width: 100%; }
  .cv-actions .btn { width: 100%; justify-content: center; }

  .footer-row { flex-direction: column; align-items: flex-start; }
}

/* ---- ≤390px : small phones ---- */
@media (max-width: 390px) {
  :root { --gutter: 1.25rem; }
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta-row .btn { justify-content: center; }
  .hero-visual { aspect-ratio: 4/3; }
  .flow-node { font-size: 0.66rem; padding: 0.55rem 0.7rem; }
}

/* ---- Prevent any horizontal overflow globally ---- */
html, body { max-width: 100%; overflow-x: hidden; }