/* ============================================================
   Responsive layout (Media Queries)
   Order:
   1) Large tweaks (≤ 2500px)
   2) Desktop-only enhancements (≥ 1200px)
   3) Tablet & down (< 1200px)
   4) Smaller breakpoints for projects carousel (≤ 900 / ≤ 650)
   5) Phones (≤ 600px)
   ============================================================ */


/* ---------------------------
   ≤ 2500px (minor)
---------------------------- */
@media screen and (max-width: 2500px) {
  #profile {
    min-height: 83vh;
    height: auto;
    padding-bottom: 2.5rem;
  }

  .about-containers { flex-wrap: wrap; }

  #contact,
  #projects { height: fit-content; }
}


/* ---------------------------
   ≥ 1200px (desktop layout enhancements)
---------------------------- */
@media screen and (min-width: 1200px) {
  /* About stays side-by-side */
  #about .section-container {
    display: flex;
    align-items: center;
    gap: 2.5rem;
  }

  #about .section__about_pic-container {
    width: 400px;
    height: 400px;
    margin: auto 0;
    flex: 0 0 400px;
  }

  /* Desktop timeline alternating + centered line */
  .cd-timeline::before { left: 50%; margin-left: -2px; }
  .cd-timeline-block { margin: 4rem 0; }

  .cd-timeline-img {
    width: 60px;
    height: 60px;
    left: 50%;
    margin-left: -30px;
  }

  .cd-timeline-content {
    width: 45%;
    margin-left: 0;
    padding: 1.6rem;
  }

  .cd-timeline-content::before {
    top: 24px;
    left: 100%;
    right: auto;
    border-color: transparent;
    border-left-color: rgba(255, 255, 255, 0.88);
    display: block;
  }

  .cd-date {
    position: absolute;
    width: 100%;
    left: 122%;
    top: 18px;
    margin-top: 0;
    text-align: left;
  }

  .cd-timeline-block:nth-child(even) .cd-timeline-content { float: right; }

  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
    left: auto;
    right: 100%;
    border-color: transparent;
    border-right-color: rgba(255, 255, 255, 0.88);
  }

  .cd-timeline-block:nth-child(even) .cd-date {
    left: auto;
    right: 122%;
    text-align: right;
  }

  @keyframes cd-bounce-2 {
    from { opacity: 0; transform: translateX(-46px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  @keyframes cd-bounce-2-inverse {
    from { opacity: 0; transform: translateX(46px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  .cd-timeline-content.bounce-in {
    animation: cd-bounce-2 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
    animation: cd-bounce-2-inverse 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}


/* ---------------------------
   < 1200px (tablets / smaller laptops)
---------------------------- */
@media screen and (max-width: 1199px) {
  #desktop-nav { display: none; }
  #hamburger-nav { display: flex; }

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

  /* Stack layouts */
  #profile,
  .section-container {
    display: block;
  }

  /* About stacks: image centered on top */
  #about .section__about_pic-container {
    width: 275px;
    height: 275px;
    margin: 0 auto 2rem;
  }

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

  /* Smaller side margins */
  section { margin: 0 5%; }

  /* Profile image centered */
  .section__main_pic-container {
    width: 275px;
    height: 275px;
    margin: 0 auto 2rem;
  }

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

  .menu-links a {
    padding: 5px;
    font-size: 1rem;
  }

  .nav { display: flex; }

  .section__text {
    max-width: 100%;
    width: 100%;
    flex: none;
    margin: 0 auto;
    text-align: center;
  }

  @media screen and (max-width: 1199px) {
    .section__main_pic-container .image {
      transform: translateY(42px) scale(1.45);
      transform-origin: 62% 46%;
    }
  }

  .hero-rotator { justify-content: center; }

  .hero-rotator .section__text__p2 {
    width: min(520px, 92vw);
    margin: 0 auto 0.4rem;
  }

  /* Projects spacing tighter on tablets */
  #projects.section { padding: 1.25rem 0 2.5rem; }
  #projects .details-container { padding: 1.1rem; }
  #projects { margin: 0 3%; } /* optional but you wanted less padding */
}

/* ---------------------------
   1200px → 1600px (medium desktops)
   - keep smaller side padding (no jump)
---------------------------- */
@media screen and (min-width: 1200px) and (max-width: 1600px) {
  section {
    margin: 0 5%;
  }
}

/* ---------------------------
   ≥ 1600px (large desktops) — bigger PROFILE picture only
---------------------------- */
@media screen and (min-width: 1600px) {
  .section__main_pic-container{
    width: 460px;
    height: 460px;
  }

  /* optional: keep layout balanced when image grows */
  #profile{
    gap: 6rem; /* or 7rem */
  }
}



/* ---------------------------
   ≤ 900px (projects carousel sizing)
---------------------------- */
@media screen and (max-width: 900px) {
  :root{
    --projects-card-width: 280px;
    --projects-gap: 1.2rem;
  }
}


/* ---------------------------
   ≤ 650px (projects carousel sizing)
---------------------------- */
@media screen and (max-width: 650px) {
  :root{
    --projects-card-width: 340px;
    --projects-gap: 1.1rem;
  }

  /* Fit screen */
  #projects .details-container{
    width: min(84vw, var(--projects-card-width));
    flex-basis: min(84vw, var(--projects-card-width));
  }
}


/* ---------------------------
   ≤ 600px (phones)
---------------------------- */
@media screen and (max-width: 600px) {
  #contact { height: auto; padding-top: 2.5rem; padding-bottom: 1.5rem; }

  footer {
    height: auto;
    padding: 1rem 1rem 1.75rem;
  }

  #profile {
    height: auto;
    min-height: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  #about .section__text__p1 { margin-top: 6rem; }
  #about .title { margin-top: 0.4rem; }
  #about {
    position: relative;
    padding-left: 1rem;
    padding-right: 1rem;
  }

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

  .contact-info-container { margin: 0; }

  .contact-info-container p,
  .nav-links li a { font-size: 0.85rem; }

  .contact-info-upper-container { gap: 0.5rem; }
  .contact-info-container { gap: 0.35rem; }

  .experience-sub-title { font-size: 1.25rem; }
  .logo { font-size: 1.5rem; }

  .nav-links {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .menu-links a {
    padding: 0;
    font-size: 0.8rem;
  }

  .section__main_pic-container {
    width: min(62vw, 260px);
    height: min(62vw, 260px);
    justify-content: center;
    margin: 0 auto 2rem;
  }

  .section__main_pic-container .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% center;
    transform: translateY(18px) scale(1.18);
    transform-origin: 62% 50%;
  }

  #about .section__about_pic-container {
    width: 46vw;
    height: 46vw;
    justify-content: center;
    margin: 0 auto 2rem;
  }

  
  /* Timeline hover on phones */
  .cd-timeline-content:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
  }

  .section__text__p2 { font-size: 1.25rem; }
  #experience .title { font-size: 2rem; }
  #about .title { font-size: 3rem; }
  #projects .title { font-size: 2.5rem; }

  /* Projects even tighter on phones */
  #projects.section { padding: 0.9rem 0 2rem; }
  #projects .details-container { padding: 0.9rem; }
  #projects { margin: 0 2%; }
}