/* ============================================================
   DevFolio Pro — responsive.css
   Breakpoints: 1180 / 1024 / 860 / 720 / 560
   Layout grids collapse progressively; nav itself flips at 860.
   ============================================================ */

/* ---------- ≤ 1180px ---------- */
@media (max-width: 1180px) {
  .hero__avatar-card--1 { right: -4%; }
  .hero__avatar-card--2 { left: -6%; }
}

/* ---------- ≤ 1024px ---------- */
@media (max-width: 1024px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__stats { grid-template-columns: repeat(4, 1fr); }

  .hero__container {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
  .hero__content { order: 1; }
  .hero__visual { order: 2; }
  .hero__cta, .hero__socials { justify-content: center; margin-inline: auto; }
  .hero__tagline { margin-inline: auto; }
  .hero__avatar-wrap { width: min(300px, 70vw); }

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

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* ---------- ≤ 860px (nav flip) ---------- */
@media (max-width: 860px) {
  :root { --nav-h: 62px; }

  .nav__menu {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px 24px 24px;
    background: color-mix(in srgb, var(--bg-2) 92%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: var(--shadow-pop);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s var(--ease);
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .nav__menu.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .nav__link { padding: 12px 16px; font-size: 1rem; border-radius: 12px; }
  .nav__link.is-active::after { display: none; }

  .nav__burger { display: flex; }
  .nav__resume span { display: none; } /* icon-only resume button on mobile */
  .nav__resume { padding: 12px; }

  .projects__grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

  .skills__grid { grid-template-columns: 1fr; }
  .about__stats { grid-template-columns: repeat(2, 1fr); }

  .section__header { margin-bottom: 2.6rem; }
  .timeline { max-width: 100%; }
}

/* ---------- ≤ 720px ---------- */
@media (max-width: 720px) {
  .container { width: calc(100% - 40px); }

  .form__row { grid-template-columns: 1fr; }
  .form__row .form__group { margin-bottom: 1.15rem; }

  .modal { padding: 14px; }
  .modal__panel { max-height: 92vh; }
  .modal__scroll > * { margin-left: 1.3rem; margin-right: 1.3rem; }

  .hero { padding-top: calc(var(--nav-h) + 1.6rem); min-height: auto; }
  .hero__scroll-hint { display: none; }

  .project__media-overlay { display: none; } /* touch users open details via the card button */
  .project__media { aspect-ratio: 16/10; }

  .skills__list { grid-template-columns: 1fr; }
  .about__stack { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; text-align: center; }

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

/* ---------- ≤ 560px ---------- */
@media (max-width: 560px) {
  .container { width: calc(100% - 32px); }

  .hero__cta { flex-direction: column; align-items: stretch; max-width: 320px; margin-inline: auto; }
  .hero__title { font-size: clamp(2.2rem, 11vw, 3rem); }

  .projects__grid { grid-template-columns: 1fr; }
  .projects__filters { gap: 8px; }
  .filter { padding: 8px 14px; font-size: 0.8rem; }

  .about__stats { grid-template-columns: 1fr 1fr; }
  .contact__socials { grid-template-columns: 1fr; }

  .form__actions { flex-direction: column; }
  .form__actions .btn { width: 100%; }

  .to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }

  .modal__links { flex-direction: column; }
  .modal__links .btn { width: 100%; }

  .nav { gap: 10px; }
}

/* ---------- ≤ 400px ---------- */
@media (max-width: 400px) {
  .nav__logo-text { display: none; }
  .hero__avatar-wrap { width: min(240px, 78vw); }
  .hero__avatar-card--1 { top: 4%; right: 0; }
  .hero__avatar-card--2 { bottom: 6%; left: 0; }
}

/* ---------- Short viewports (landscape phones) ---------- */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding-bottom: 3rem; }
  .hero__scroll-hint { display: none; }
}

/* ---------- Hover-capable devices only ---------- */
@media (hover: none) {
  .project__media-overlay {
    opacity: 1;
    background: none;
    display: none; /* "Details" button below the card covers this on touch */
  }
  .card-hover:hover { transform: none; }
}