/* ══════════════════════════════════
   TABLET / SMALL DESKTOP ≤ 1400px
   ══════════════════════════════════ */
@media screen and (max-width: 1400px) {
  #profile { height: 83vh; margin-bottom: 6rem; }
  .about-containers { flex-wrap: wrap; }
}

/* ══════════════════════════════════
   TABLET ≤ 1200px
   ══════════════════════════════════ */
@media screen and (max-width: 1200px) {
  #desktop-nav { display: none; }
  #menu-nav    { display: flex; }

  #experience,
  .experience-details-container { margin-top: 2rem; }

  #profile,
  .section-container { display: block; }

  .arrow { display: none; }

  section, .section-container { height: fit-content; }

  section { margin: 0.5rem 2rem; }

  .section-pic-container {
    width: 275px;
    height: 275px;
    margin: 0 auto 2rem;
  }

  .about-containers { margin-top: 0; }

  /* ── About: image fully clears before boxes start ── */
  #about .section-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  #about .section-pic-container {
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
  }

  #about .about-pic {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.5rem;
  }

  #about .about-details-container { width: 100%; }

  /* Projects: 2-col on tablet */
  .proj-desktop-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
  }

  /* Modal: stack on tablet */
  .modal {
    flex-direction: column;
    max-width: 520px;
  }

  .modal-img-col {
    flex: unset;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 20px 20px 0 0;
  }

  .modal-info-col { padding: 22px 22px 24px; }

  /* misc */
  #contact, footer { height: 40vh; }
  #profile { height: 83vh; margin-bottom: 0; }
  article  { font-size: 1rem; }
  footer nav { height: fit-content; margin-bottom: 2rem; }

  /* Stack experience boxes vertically on tablet/mobile */
  #experience .about-container {
    flex-wrap: wrap;
  }

  #experience .details-container {
    flex: 1 1 100%;   /* full width when stacked */
    max-width: 100%;
  }

  .contact-info-upper-container,
  .btn-container { flex-wrap: wrap; }

  .contact-info-container { margin: 0; }
  .contact-info-container p, .nav-links li a { font-size: 1rem; }
  .experience-subtitle { font-size: 1.25rem; }
  .logo { font-size: 1.5rem; }
  .nav-links { flex-direction: column; gap: 0.5rem; text-align: center; }
  .section-text-p2 { font-size: 1.25rem; }
  .title { font-size: 2rem; }
  .text-container { text-align: justify; }
}

/* ══════════════════════════════════
   MOBILE ≤ 768px
   ══════════════════════════════════ */
@media screen and (max-width: 768px) {
  section { margin: 0.5rem 1rem; padding-top: 3vh; }

  /* About: same fix at mobile size */
  #about .section-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  #about .section-pic-container {
    width: 100%;
    max-width: 260px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
  }

  #about .about-pic {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.25rem;
  }

  #about .about-details-container { width: 100%; }

  /* Projects: hide desktop grid, show mobile strip */
  .proj-desktop-grid    { display: none; }
  .proj-mobile-strip-wrap { display: block; }

  /* Modal not used on mobile — no styles needed */

  .contact-info-upper-container { flex-direction: column; align-items: center; }
  .title  { font-size: 1.5rem; }
  .logo   { font-size: 1.1rem; }
}

/* ══════════════════════════════════
   SMALL MOBILE ≤ 480px
   ══════════════════════════════════ */
@media screen and (max-width: 480px) {
  section { margin: 0.5rem 0.75rem; }
  .proj-strip-card { flex: 0 0 180px; height: 230px; }
}