/* ============================================
   PORTFOLIO — responsive.css
   Mobile-first breakpoints
   ============================================ */

/* ---------- Large desktop down ---------- */
@media (max-width: 1199px) {
  .section { padding: 100px 0; }
  .hero__avatar-wrap { width: 320px; }
  .hero__badge--top { right: -10px; }
  .hero__badge--bottom { left: -10px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
  .section { padding: 80px 0; }
  .section__head { margin-bottom: 44px; }

  /* Show hamburger, hide desktop nav */
  .custom-nav .navbar-collapse { display: none !important; }
  .nav-toggle { display: flex; }

  .hero { text-align: center; }
  .hero__content { margin-bottom: 40px; }
  .hero__desc { margin-left: auto; margin-right: auto; }
  .hero__actions { justify-content: center; }
  .hero__socials { justify-content: center; }
  .hero__visual { order: -1; }
  .hero__avatar-wrap { width: 280px; }

  .about__img-wrap { max-width: 400px; margin: 0 auto 30px; }

  .contact__info { text-align: center; margin-bottom: 30px; }
  .contact__list { display: inline-block; text-align: left; }
  .contact__socials { justify-content: center; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .section { padding: 64px 0; }
  .section__title { font-size: 1.8rem; }
  .section__tag { font-size: 0.75rem; }

  .hero { min-height: auto; padding: 100px 0 60px; }
  .hero__name { font-size: 2.5rem; }
  .hero__profession { font-size: 1.3rem; }
  .hero__desc { font-size: 0.95rem; }
  .hero__actions { flex-direction: column; }
  .hero__actions a { width: 100%; justify-content: center; }
  .hero__avatar-wrap { width: 220px; }
  .hero__badge { padding: 8px 12px; }
  .hero__badge i { font-size: 1.1rem; }
  .hero__badge strong { font-size: 1rem; }
  .hero__badge--top { right: 0; top: 10px; }
  .hero__badge--bottom { left: 0; bottom: 10px; }
  .hero__scroll { display: none; }

  .about__title { font-size: 1.4rem; }
  .about__info > div { font-size: 0.88rem; }

  .stat-card { padding: 20px 14px; }
  .stat-card h3 { font-size: 1.8rem; }
  .stat-card i { font-size: 1.6rem; }

  .circle-skill { width: 100px; }
  .circle-skill svg { width: 100px; height: 100px; }
  .circle-skill__center { width: 100px; height: 100px; }
  .circle-skill__center .num { font-size: 1.25rem; }

  .timeline { padding-left: 26px; }
  .timeline__dot { left: -26px; }
  .timeline__content { padding: 18px 20px; }

  .portfolio__filters { gap: 6px; }
  .filter-btn { padding: 6px 16px; font-size: 0.78rem; }

  .pricing-card--featured { transform: none; }
  .pricing-card--featured:hover { transform: translateY(-10px); }

  .contact__form { padding: 24px 20px; }

  .footer__links { gap: 14px; }
  .footer__links a { font-size: 0.82rem; }

  .back-to-top { width: 44px; height: 44px; bottom: 20px; right: 20px; }
}

/* ---------- Small mobile ---------- */
@media (max-width: 420px) {
  .hero__name { font-size: 2rem; }
  .hero__profession { font-size: 1.1rem; }
  .section__title { font-size: 1.5rem; }
  .brand__text { display: none; }
  .hero__avatar-wrap { width: 180px; }
  .hero__badge { display: none; }
  .pricing-card__price .amount { font-size: 2.2rem; }
}