/* =============================================================
   RESPONSIVE — responsive.css
   All breakpoints live here. No styles are duplicated from
   the component files — only overrides.
   Test breakpoints in VSCode with Live Server + browser DevTools.
   ============================================================= */

/* ── TABLET / SMALL DESKTOP (< 960px) ── */
@media (max-width: 960px) {

  nav {
    padding: 16px var(--space-md);
  }

  /* Hide desktop nav links, show hamburger */
  .nav-links     { display: none; }
  .nav-hamburger { display: flex; }

  /* Hero: stack columns */
  .hero { grid-template-columns: 1fr; }
  .hero-l { padding: var(--space-lg) var(--space-md); border-right: none; }
  .hero-r { border-top: 1px solid var(--rule); min-height: 70vw; }
  .hero-photo-wrap { min-height: 70vw; }
  .hero-cta { padding: 20px var(--space-md); }

  /* About: stack columns */
  .about-wrap { grid-template-columns: 1fr; }
  .about-l    { padding: var(--space-lg) var(--space-md); border-right: none; }
  .about-r    { padding: 0 var(--space-md) var(--space-lg); }

  /* Section headers */
  .sec-ttl-wrap { padding: 20px var(--space-md); }
  .sec-aside    { padding: 20px var(--space-md); }

  /* Projects: hide side column, collapse to 2 cols */
  .proj { grid-template-columns: 44px 1fr; }
  .ps   { display: none; }
  .pc   { padding: var(--space-md); border-right: none; }

  /* Capabilities: 2 columns instead of 4 */
  .cap-grid { grid-template-columns: 1fr 1fr; }
  .cap-item:nth-child(4n) { border-right: 1px solid rgba(255,255,255,0.1); }
  .cap-item:nth-child(2n) { border-right: none; }
  .cap-item:nth-last-child(-n+4) { border-bottom: 1px solid rgba(255,255,255,0.1); }
  .cap-item:nth-last-child(-n+2) { border-bottom: none; }

  /* Timeline: collapse sidebar */
  .tl-wrap { grid-template-columns: 1fr; }
  .tl-side {
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding: 28px var(--space-md);
  }
  .tl-track        { padding: 40px var(--space-md) 40px 44px; }
  .tl-track::before{ left: 24px; }

  /* Blog: single column */
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card {
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .blog-card:last-child { border-bottom: none; }

  /* Certs: 2 columns */
  .certs-grid { grid-template-columns: 1fr 1fr; }
  .cert-item:nth-child(3n) { border-right: 1px solid var(--rule); }
  .cert-item:nth-child(2n) { border-right: none; }

  /* Contact: stack columns */
  .contact-inner { grid-template-columns: 1fr; }
  .contact-l, .contact-r {
    padding: var(--space-lg) var(--space-md);
    border-right: none;
  }

  footer {
    padding: 16px var(--space-md);
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* ── MOBILE (< 600px) ── */
@media (max-width: 600px) {

  /* Capabilities & certs: single column */
  .cap-grid { grid-template-columns: 1fr; }
  .cap-item:nth-child(n) { border-right: none; }

  .certs-grid { grid-template-columns: 1fr; }
  .cert-item:nth-child(n) { border-right: none; }

  /* Slightly tighter hero text */
  .hero-name { letter-spacing: -0.03em; }

  /* About quote smaller */
  .about-quote { font-size: clamp(18px, 5vw, 26px); }
}