/* ================================================================
   Portfolio Rina — Responsive
   ================================================================ */

/* ─── TABLET (≤ 1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
  #apropos {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
  .apropos-photo {
    max-width: 300px;
    margin: 0 auto;
    aspect-ratio: 1/1;
  }
  .apropos-loc { justify-content: center; }
  .apropos-badge { margin: 1rem auto 0; }

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

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

/* ─── MOBILE (≤ 768px) ───────────────────────────────────── */
@media (max-width: 768px) {
  :root { --section-pad: 5rem 5%; }

  .nav-links { display: none; }
  #hamburger { display: flex; }

  .hero-title { font-size: clamp(2.2rem, 8vw, 3.5rem); }

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

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

  .contact-links {
    flex-direction: column;
    align-items: center;
  }

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

/* ─── SMALL MOBILE (≤ 480px) ─────────────────────────────── */
@media (max-width: 480px) {
  :root { --section-pad: 4rem 4%; }
  .filter-bar { gap: 0.4rem; }
  .filter-btn { padding: 0.35rem 0.8rem; font-size: 0.8rem; }
}