/* ============================================
   Responsive layout for tablet and mobile
   ============================================ */

@media (max-width: 1100px) {
  .nav-links a {
    font-size: 0.66rem;
    padding: 7px 7px;
  }

  .stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .masonry {
    column-count: 2;
  }
}

@media (max-width: 900px) {
  .menu-toggle {
    display: grid;
  }

  .nav-links {
    position: fixed;
    top: var(--nav-h);
    right: 16px;
    width: min(280px, calc(100% - 32px));
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    padding: 12px;
    align-items: stretch;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    font-size: 0.82rem;
    padding: 10px 12px;
  }

  .hero-grid,
  .about-preview,
  .why-grid,
  .about-block,
  .about-block.reverse,
  .featured-project,
  .love-hero,
  .contact-wrap,
  .two-col,
  .skills-dash,
  .cert-grid,
  .blog-grid,
  .footer-grid,
  .horizontal-card {
    grid-template-columns: 1fr;
  }

  .project-copy {
    padding: 24px;
  }

  .horizontal-card .project-shot {
    min-height: 180px;
  }

  .hero-visual {
    height: 380px;
    order: -1;
  }

  .laptop {
    width: 280px;
    height: 190px;
  }

  .laptop-base {
    width: 330px;
  }
}

@media (max-width: 640px) {
  .edu-photos {
    grid-template-columns: 1fr;
  }

  .journey-cover img,
  .edu-photos img {
    height: 180px;
  }

  .container {
    width: min(var(--max), calc(100% - 28px));
  }

  .section {
    padding: 68px 0;
  }

  .stats,
  .enjoy-grid,
  .hobby-row,
  .skill-icons {
    grid-template-columns: 1fr 1fr;
  }

  .masonry {
    column-count: 1;
  }

  .resume-sheet {
    padding: 28px 20px;
  }

  .footer-bottom {
    flex-direction: column;
  }

  .hero h1 {
    font-size: 2.6rem;
  }

  .page-hero {
    padding: calc(var(--nav-h) + 48px) 0 36px;
  }
}

@media (max-width: 420px) {
  .stats,
  .enjoy-grid {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
}