/* ───────────────────────────────────────
   responsive.css — mobile / tablet
   ─────────────────────────────────────── */

/* ── Tablet ── */
@media (max-width: 900px) {
  .about__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

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

/* ── Mobile ── */
@media (max-width: 700px) {
  .nav {
    padding: 1rem 1.25rem;
  }

  .nav__links {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;        /* hides scrollbar on Firefox */
    padding-bottom: 2px;
  }
  
  .nav__links::-webkit-scrollbar {
    display: none;                /* hides scrollbar on Chrome/Safari */
  }

  .nav__links a {
    font-size: 13px;
  }

  .container {
    padding: 0 1.25rem;
  }

  .section {
    padding: 3.5rem 0;
  }

  .section__title {
    font-size: 1.6rem;
    margin-bottom: 2rem;
  }

  .hero {
    min-height: auto;
    padding: 7rem 0 4rem;
  }

  .hero__split {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .hero__photo-wrap {
    order: -1;
    display: flex;
    justify-content: center;
    margin: 0 auto;
  }

  .hero__photo {
    width: auto;
    height: auto;        /* natural height based on image ratio */
    border-radius: var(--radius-lg);
    object-fit: cover;
    object-position: center 20%;
    border: 3px solid var(--border);
    box-shadow: var(--shadow-md);
    max-width: 100%;
    flex-shrink: 0;
  }

  .hero__name {
    font-size: 2.5rem;
  }

  .hero__tagline {
    font-size: 1rem;
  }

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

  .btn {
    width: 100%;
  }
}