/**
 * KISHAN SHARMA — PREMIUM PORTFOLIO
 * Responsive Design
 */

/* =========================================
   LARGE DESKTOP (1440px+)
   ========================================= */
@media (min-width: 1440px) {
  .hero-grid {
    gap: 8rem;
  }
  section {
    padding: 10rem 4vw;
  }
  .hero {
    padding-top: 10rem;
  }
}

/* =========================================
   DESKTOP (1024px - 1439px)
   ========================================= */
@media (max-width: 1439px) {
  .hero-grid {
    gap: 5rem;
  }
  .proof-grid {
    gap: 1.5rem;
  }
  .expertise-grid {
    gap: 1.25rem;
  }
}

/* =========================================
   TABLET (768px - 1023px)
   ========================================= */
@media (max-width: 1023px) {
  .nav-links-wrapper {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-content {
    max-width: 640px;
    margin: 0 auto;
  }

  .hero-cta-group {
    justify-content: center;
  }

  .hero-status {
    justify-content: center;
  }

  .hero-image-wrapper {
    max-width: 380px;
    margin: 0 auto;
  }

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

  .proof-item:nth-child(2) {
    border-right: none;
  }

  .proof-item:nth-child(3) {
    border-top: 1px solid var(--border-subtle);
  }

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

  .work-item {
    margin-bottom: 6rem;
  }

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

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

  .speed-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

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

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

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

  .timeline {
    max-width: 100%;
    padding-left: 1.5rem;
  }
}

/* =========================================
   MOBILE (480px - 767px)
   ========================================= */
@media (max-width: 767px) {
  .site-header {
    padding: 1rem 4vw;
  }

  .hero {
    min-height: auto;
    padding: 8rem 4vw 4rem;
  }

  .hero-headline {
    font-size: 2.2rem;
    line-height: 1.05;
  }

  .hero-body {
    font-size: 0.95rem;
  }

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

  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
  }

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

  .proof-item {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }

  .proof-item:last-child {
    border-bottom: none;
  }

  .proof-number {
    font-size: 2.8rem;
  }

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

  .work-visual {
    border-radius: var(--radius-md);
  }

  .work-desc {
    font-size: 0.95rem;
  }

  .process-steps {
    grid-template-columns: 1fr;
  }

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

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

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

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

  .contact-details {
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
  }

  .section-header {
    margin-bottom: 2.5rem;
  }

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

  .hero-eyebrow {
    font-size: 0.7rem;
  }

  section {
    padding: 5rem 4vw;
  }

  .timeline-item {
    padding-left: 1.25rem;
  }
}

/* =========================================
   SMALL MOBILE (375px - 479px)
   ========================================= */
@media (max-width: 479px) {
  .hero-headline {
    font-size: 1.9rem;
  }

  .hero-body {
    font-size: 0.9rem;
  }

  .proof-number {
    font-size: 2.4rem;
  }

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

  .contact h2 {
    font-size: 1.6rem;
  }
}

/* =========================================
   TOUCH & ACCESSIBILITY
   ========================================= */
@media (hover: none) and (pointer: coarse) {
  .work-visual-overlay {
    opacity: 1;
  }

  .work-visual:hover img {
    transform: none;
  }
}