/* ========================================
   Responsive
   ======================================== */

/* ---- Tablet (769px – 1023px) ---- */
@media (min-width: 769px) and (max-width: 1100px) {
  :root { --sidebar-w: 300px; }

  .profile-card { max-width: 250px; }
  .profile-name { font-size: 1.3rem; }

  .section { padding: 4.5rem 3rem; }
  .footer { padding: 2.5rem 3rem; }

  .section-title__main,
  .section-title__ghost { font-size: clamp(2.5rem, 5.5vw, 5rem); }

  .section--hero .section-title__main,
  .section--hero .section-title__ghost { font-size: clamp(3rem, 7vw, 7rem); }

  .hero-intro { grid-template-columns: 1fr 220px; gap: 1.5rem; }

  .service-cards { grid-template-columns: 1fr; }

  .project-thumb { width: 160px; height: 110px; }
  .project-row__name { font-size: 1.25rem; }

  .tools-grid { gap: 1.25rem 2rem; }
  .tool-icon { width: 50px; height: 50px; border-radius: 12px; }
  .tool-name { font-size: 0.9rem; }
}

/* ---- Mobile (max 768px) — Stack layout ---- */
@media (max-width: 768px) {
  /* Switch to vertical stack */
  .layout {
    flex-direction: column;
  }

  /* Sidebar becomes top header (not sticky) */
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
    padding: 3rem 1.5rem 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .profile-card {
    max-width: 260px;
  }

  .profile-arc {
    width: 140px;
    height: 140px;
    top: -20px;
    left: -20px;
  }

  /* Content takes full width */
  .content {
    width: 100%;
  }

  .section {
    padding: 4rem 1.5rem;
  }

  .section-title__main,
  .section-title__ghost {
    font-size: clamp(2.5rem, 11vw, 4rem);
  }

  /* Hero intro: stack on mobile */
  .hero-intro {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero-side {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
  }

  .hero-scroll-hint { display: none; }

  /* Hero */
  .hero-stats {
    gap: 1.75rem;
    flex-wrap: wrap;
  }

  .hero-stat__num {
    font-size: clamp(2.5rem, 9vw, 3.5rem);
  }

  .service-cards {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .service-card { min-height: 180px; }

  /* Projects */
  .project-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .project-thumb {
    width: 100%;
    height: 160px;
  }

  .project-row__arrow {
    display: none;
  }

  /* Experience */
  .exp-row {
    padding: 1.75rem 0;
  }

  .exp-row__company { font-size: 1.2rem; }
  .exp-row__arrow { display: none; }

  /* Tech Stack */
  .tech-card__logo {
    width: 58px;
    height: 58px;
    border-radius: 14px;
  }

  /* Blog */
  .blog-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.5rem 0;
  }

  .blog-row__meta {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  .blog-row__arrow { display: none; }

  /* Contact */
  .contact-actions {
    flex-direction: column;
  }

  .contact-actions .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* Footer */
  .footer {
    padding: 2rem 1.5rem;
  }

  .footer__inner {
    flex-direction: column;
    gap: 1.25rem;
    text-align: center;
  }

  .footer__links { display: none; }
}

/* ---- Very small phones ---- */
@media (max-width: 374px) {
  .profile-card { max-width: 220px; }

  .section { padding: 3rem 1.25rem; }

  .section-title__main,
  .section-title__ghost { font-size: 2.25rem; }

  .hero-stat__num { font-size: 2.25rem; }
}

/* ---- Large desktop (1440px+) ---- */
@media (min-width: 1440px) {
  :root { --sidebar-w: 420px; }

  .section { padding: 6rem 5.5rem; }
  .footer { padding: 2.5rem 5.5rem; }

  .section-title__main,
  .section-title__ghost { font-size: 8rem; }

  .project-thumb { width: 240px; height: 160px; }
}

/* ---- Touch device hover fixes ---- */
@media (hover: none) {
  .project-row:hover,
  .exp-row:hover,
  .blog-row:hover { padding-left: 0; }

  .btn--primary:hover,
  .btn--outline:hover { transform: none; }

  .service-card:hover { transform: none; }
}