/* ==========================================================================
   PRIYANKAR SHUKLA — RESPONSIVE MEDIA QUERIES
   Mobile, Tablet, and Desktop Breakpoints
   ========================================================================== */

@media screen and (max-width: 860px) {
  .nav-quote-pill {
    display: none;
  }
}

@media screen and (max-width: 1024px) {
  .hero-container {
    text-align: center;
  }

  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

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

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .media-grid, .highlights-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --nav-height: 64px;
  }

  .nav-links, .nav-actions .btn-ghost-nav, .nav-cta {
    display: none;
  }

  .hamburger-btn {
    display: flex;
  }

  .hero-title {
    font-size: 2.5rem;
    letter-spacing: -0.8px;
  }

  .section {
    padding: 4.5rem 0;
  }

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

  .projects-grid, .skills-grid, .media-grid, .highlights-grid {
    grid-template-columns: 1fr;
  }

  .about-pillars-grid {
    grid-template-columns: 1fr;
  }

  .hero-preview-window {
    width: 100%;
  }

  .preview-window-body {
    padding: 1.15rem;
    font-size: 0.78rem;
  }

  .contact-card-wrapper {
    padding: 2.25rem 1.5rem;
  }

  .footer-container {
    grid-template-columns: 1fr;
  }

  .footer-bottom-inner {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .media-thumb-wrap {
    height: 210px;
  }
}

@media screen and (max-width: 480px) {
  .hero-stats-capsule {
    flex-direction: column;
    width: 100%;
    gap: 1rem;
    border-radius: 20px;
    padding: 1.25rem;
  }

  .stat-divider {
    width: 100%;
    height: 1px;
  }

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

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta-group .btn {
    width: 100%;
  }
}