/* ============================================================
   css/responsive.css
   All breakpoints and mobile-first overrides.
   Breakpoints:
     - Desktop  : > 1024px  (default — styles.css)
     - Tablet   : <= 1024px
     - Mobile L : <= 768px
     - Mobile S : <= 480px
============================================================ */

/* ── TABLET (≤ 1024px) ── */
@media (max-width: 1024px) {
  /* Hero */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .hero-right {
    display: none; /* hide hero card on tablet — too cramped */
  }

  .hero-sub {
    max-width: 100%;
  }

  /* About */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

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

/* ── MOBILE LARGE (≤ 768px) ── */
@media (max-width: 768px) {
  /* Nav */
  .nav-links {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: rgba(10, 10, 15, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition:
      max-height 0.35s ease,
      padding 0.35s ease;
  }

  .nav-links.open {
    max-height: 400px;
    padding: 1.5rem 0;
  }

  .nav-links li {
    width: 100%;
    text-align: center;
  }

  .nav-link {
    display: block;
    padding: 0.85rem 0;
    font-size: 1rem;
  }

  .nav-toggle {
    display: flex;
  }

  /* Sections */
  .section {
    padding: 5rem 6%;
    min-height: auto;
  }

  .section--hero {
    min-height: 100vh;
    padding-top: 80px;
  }

  /* Hero */
  .hero-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .hero-btns {
    flex-direction: column;
    gap: 0.75rem;
  }

  .btn-primary,
  .btn-secondary {
    text-align: center;
    width: 100%;
    padding: 0.85rem;
  }

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

  /* Timeline */
  .timeline {
    padding-left: 1.5rem;
  }

  .tl-dot {
    left: -1.85rem;
  }

  .tl-header {
    flex-direction: column;
    gap: 0.5rem;
  }

  .tl-date {
    align-self: flex-start;
  }

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

  /* Contact */
  .contact-form {
    padding: 1.5rem;
  }

  /* Section titles */
  .section-title {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }
}

/* ── MOBILE SMALL (≤ 480px) ── */
@media (max-width: 480px) {
  /* Nav */
  .nav-inner {
    padding: 0 1rem;
  }

  .logo {
    font-size: 1rem;
  }

  /* Hero chips — wrap tighter */
  .hero-chips {
    gap: 0.4rem;
  }

  .chip {
    font-size: 0.72rem;
    padding: 0.28rem 0.65rem;
  }

  /* Hero sub */
  .hero-sub {
    font-size: 0.95rem;
  }

  /* About highlights */
  .highlight-card {
    padding: 1.25rem;
  }

  /* Timeline card */
  .tl-card {
    padding: 1.25rem;
  }

  .tl-role {
    font-size: 1rem;
  }

  /* Project card */
  .proj-card {
    padding: 1.25rem;
  }

  /* Stat row in hero card */
  .stat-row {
    flex-direction: column;
    gap: 1rem;
  }

  /* Footer */
  #footer {
    padding: 2rem 6%;
  }

  #footer p {
    font-size: 0.78rem;
  }

  /* Section padding */
  .section {
    padding: 4rem 5%;
  }

  /* Form */
  .form-group input,
  .form-group textarea {
    font-size: 0.85rem;
    padding: 0.65rem 0.85rem;
  }
}

/* ── LARGE SCREENS (≥ 1400px) ── */
@media (min-width: 1400px) {
  :root {
    --section-pad: 8rem 5%;
  }

  .hero-title {
    font-size: 4.2rem;
  }

  .section-title {
    font-size: 2.8rem;
  }

  .hero-grid {
    grid-template-columns: 1fr 420px;
    gap: 5rem;
  }
}