/* ============================================================
   BREAKPOINTS

   The fluid type scale and clamp()-based spacing in style.css
   handle most resizing on their own. What's left here is only
   the work that genuinely needs a breakpoint: layouts that must
   collapse from multi-column to single, and the desktop/mobile
   navigation swap.
   ============================================================ */

/* ---------- Tablet & below: collapse hero and about ---------- */

@media screen and (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--s-8);
  }

  /* Photo above the text on narrow screens */
  .hero-media {
    grid-row: 1;
  }

  .hero .btn-group,
  .socials,
  .hero-location {
    justify-content: center;
  }

  .socials {
    justify-content: center;
  }

  .avatar {
    width: min(300px, 72vw);
  }

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

  .prose p {
    max-width: none;
  }
}

/* ---------- Navigation swap ---------- */

@media screen and (max-width: 780px) {
  .nav-desktop {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .mobile-sheet {
    display: block;
  }
}

/* ---------- Phone: single-column projects ---------- */

@media screen and (max-width: 720px) {
  .project {
    grid-template-columns: 1fr;
  }

  /* Reset the alternating placement — media always leads */
  .project .project-media,
  .project:nth-child(even) .project-media {
    grid-column: 1;
    grid-row: 1;
  }

  .project .project-body,
  .project:nth-child(even) .project-body {
    grid-column: 1;
    grid-row: 2;
  }

  .contact-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  /* Stack label above its skills, count beside the name */
  .stack-row {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }

  .stack-row-label {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
  }

  .stack-row-label .count {
    margin-top: 0;
    font-size: 1.35rem;
  }
}

/* ---------- Small phone ---------- */

@media screen and (max-width: 480px) {
  .prose p:last-child {
    padding-left: var(--s-4);
  }

  .btn {
    flex: 1 1 auto;
  }

  .footer-inner {
    flex-direction: column;
    text-align: center;
  }

  .butterfly--3 {
    display: none;
  }
}