/* =============================================================
   RESPONSIVE.CSS — Mobile-first responsive rules
   A.BABA CYBERLORD Portfolio
   ============================================================= */

/* ------------------------------------------------------------------
   ≤ 480px  SMALL MOBILE
------------------------------------------------------------------ */
@media (max-width: 480px) {

  :root { --container-pad: var(--space-4); }

  /* Hero — stack vertically, center */
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-6);
    justify-items: center;
  }

  .hero__content  { order: 2; }
  .hero__avatar-wrap { order: 1; }     /* old pages */
  .hero__photo-wrap  { order: 1; }     /* homepage */

  .hero__actions, .hero__badges { justify-content: center; }
  .hero__intro { max-width: 100%; margin-inline: auto; }
  .hero__scroll-hint, .hero__scroll { display: none; }

  /* Profile pic smaller on small phones */
  .profile-pic { width: 170px; height: 170px; }
  .profile-pic__img,
  .profile-pic__initials { width: 140px; height: 140px; }
  .profile-pic__ring--1 { width: 155px; height: 155px; }
  .profile-pic__ring--2 { width: 170px; height: 170px; }

  /* Homepage photo */
  .hero__photo-wrap { height: 240px; }
  .photo-frame      { width: 200px; height: 200px; }
  .photo-ring--1    { width: 220px; height: 220px; }
  .photo-ring--2    { width: 260px; height: 260px; }
  .photo-ring--3    { width: 300px; height: 300px; }
  .photo-chip       { display: none; }  /* hide chips on tiny screens */

  /* Quick nav */
  .quick-nav__grid { grid-template-columns: repeat(3, 1fr); }

  /* About */
  .about__grid { grid-template-columns: 1fr; gap: var(--space-8); }

  /* Skills */
  .skills__grid { grid-template-columns: 1fr; }

  /* Projects */
  .project-grid { grid-template-columns: 1fr; }
  .project-filters { gap: var(--space-2); }
  .filter-btn { font-size: 0.7rem; padding: var(--space-1) var(--space-3); }

  /* Platforms */
  .platform-grid { grid-template-columns: 1fr; }

  /* Social */
  .social-grid { grid-template-columns: 1fr; }

  /* Contact */
  .contact__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .hire-banner__inner { flex-direction: column; }

  /* Footer */
  .footer__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer__social { flex-direction: row; flex-wrap: wrap; }

  /* Roadmap */
  .roadmap-list { grid-template-columns: 1fr; }

  /* Values */
  .values__grid { grid-template-columns: 1fr; }

  /* Opportunities */
  .opportunity-grid { grid-template-columns: 1fr; }

  /* Modal */
  .modal-overlay { padding: var(--space-4) var(--space-3); }
  .modal__content { padding: var(--space-5); }
  .modal-project__title { font-size: var(--text-2xl); }
  .modal__close { top: var(--space-3); right: var(--space-3); }

  /* Back to top */
  .back-to-top { bottom: var(--space-5); right: var(--space-5); }

  /* CTA block */
  .cta-block { padding: var(--space-8) var(--space-4); }
  .cta-block__title { font-size: var(--text-2xl); }
}

/* ------------------------------------------------------------------
   ≤ 640px  SMALL TABLET / LARGE PHONE
------------------------------------------------------------------ */
@media (max-width: 640px) {

  .section { padding-block: var(--space-16); }
  .project-grid { grid-template-columns: 1fr; }
  .roadmap-list { grid-template-columns: 1fr; }
  .quick-nav__grid { grid-template-columns: 1fr 1fr; }
  .values__grid { grid-template-columns: 1fr; }
  .hero__name { word-break: break-word; }
  .page-hero { background-attachment: scroll; } /* fixed bg bad on mobile */
  .hero { background-attachment: scroll; }
}

/* ------------------------------------------------------------------
   ≤ 768px  TABLET
------------------------------------------------------------------ */
@media (max-width: 768px) {

  /* Mobile nav */
  .nav__toggle { display: flex; }
  .nav__logo-text { display: none; }

  .nav__menu {
    position: fixed;
    top: var(--header-height);
    left: 0; right: 0; bottom: 0;
    background: rgba(11, 13, 18, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 1px solid var(--color-border);
    z-index: 99;
  }

  .nav__menu.open { transform: translateX(0); }

  .nav__link {
    font-size: var(--text-xl);
    padding: var(--space-4) var(--space-8);
    width: 100%;
    text-align: center;
  }

  .nav__link.active::after { display: none; }

  .btn--hire.btn--sm {
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-8);
    margin-left: 0;
  }

  /* Hero */
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-8);
    justify-items: center;
  }

  .hero__content    { order: 2; }
  .hero__avatar-wrap{ order: 1; }
  .hero__photo-wrap { order: 1; height: 280px; }
  .photo-frame      { width: 240px; height: 240px; }
  .photo-ring--1    { width: 260px; height: 260px; }
  .photo-ring--2    { width: 310px; height: 310px; }
  .photo-ring--3    { width: 360px; height: 360px; }
  .photo-chip       { display: none; }

  .hero__actions, .hero__badges { justify-content: center; }
  .hero__intro { max-width: 100%; margin-inline: auto; }

  /* About */
  .about__grid { grid-template-columns: 1fr; gap: var(--space-8); }

  /* Skills */
  .skills__grid { grid-template-columns: 1fr; }

  /* Contact */
  .contact__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .hire-banner__inner { flex-direction: column; }

  /* Footer */
  .footer__inner { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .footer__brand { grid-column: 1 / -1; }
  .footer__social { flex-direction: row; align-items: center; }

  /* Quick nav */
  .quick-nav__grid { grid-template-columns: repeat(3, 1fr); }

  /* Platform grid */
  .platform-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   ≤ 1024px  LAPTOP
------------------------------------------------------------------ */
@media (max-width: 1024px) {

  .about__grid { grid-template-columns: 1fr; gap: var(--space-10); }

  .about__facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .contact__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .skills__grid { grid-template-columns: repeat(2, 1fr); }

  /* Old profile pic */
  .profile-pic { width: 180px; height: 180px; }
  .profile-pic__img,
  .profile-pic__initials { width: 150px; height: 150px; }
  .profile-pic__ring--1 { width: 165px; height: 165px; }
  .profile-pic__ring--2 { width: 180px; height: 180px; }

  /* Homepage photo — slightly smaller at laptop size */
  .hero__photo-wrap { height: 380px; }
  .photo-frame      { width: 240px; height: 240px; }
  .photo-ring--1    { width: 265px; height: 265px; }
  .photo-ring--2    { width: 320px; height: 320px; }
  .photo-ring--3    { width: 375px; height: 375px; }

  .quick-nav__grid { grid-template-columns: repeat(3, 1fr); }

  .hire-banner__inner { flex-direction: column; align-items: flex-start; }

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

/* ------------------------------------------------------------------
   ≥ 1400px  WIDE SCREENS
------------------------------------------------------------------ */
@media (min-width: 1400px) {
  :root { --container-max: 1320px; }
  .hero__name { font-size: 5rem; }
  .quick-nav__grid { grid-template-columns: repeat(6, 1fr); }
}

/* ------------------------------------------------------------------
   PRINT
------------------------------------------------------------------ */
@media print {
  .site-header, .back-to-top, .hero__scroll-hint,
  .nav__toggle, .contact-form, .project-filters,
  .modal-overlay, .hire-banner { display: none !important; }

  body { background: #fff; color: #000; }
  .hero, .section { padding-block: 2rem; }
  a { text-decoration: underline; }
  .project-card { break-inside: avoid; border: 1px solid #ccc; }

  /* Undo gradient text for print */
  .hero__name, .footer__name, .hire-banner__title {
    -webkit-text-fill-color: #000;
    background: none;
  }
}

/* ------------------------------------------------------------------
   TOUCH — comfortable tap targets
------------------------------------------------------------------ */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .filter-btn { min-height: 40px; }
  .nav__link { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .form-input { min-height: 48px; }
  .back-to-top { width: 48px; height: 48px; }

  /* Disable fixed background on touch — avoids iOS scroll stutter */
  .hero, .page-hero { background-attachment: scroll; }
}