/* ==========================================================================
   Responsive Design — Premium Dark/Light Portfolio
   ========================================================================== */

/* ----------------------------------------
   Large Desktops (1280px+)
   ---------------------------------------- */
@media (min-width: 1280px) {
  .hero-title { font-size: 3.75rem; }
  .section-title-light,
  .section-title-dark { font-size: 3rem; }
}

/* ----------------------------------------
   Laptops (1024px - 1279px)
   ---------------------------------------- */
@media (max-width: 1279px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .about-content { gap: 3.5rem; }
  .about-content { grid-template-columns: 340px 1fr; }
  .casestudy-body { grid-template-columns: 1fr 240px; gap: 2rem; }
}

/* ----------------------------------------
   Tablets (768px - 1023px)
   ---------------------------------------- */
@media (max-width: 1023px) {
  .container { padding: 0 1.5rem; }
  :root { --nav-height: 4rem; }

  /* Nav */
  .nav-menu {
    position: fixed;
    top: var(--nav-height);
    left: 0; right: 0;
    background: rgba(6,13,31,0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
    gap: 0.25rem;
    border-bottom: 1px solid var(--dark-border);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 300ms ease;
  }
  .nav-menu.active { transform: none; opacity: 1; visibility: visible; }
  .nav-toggle { display: flex; }
  .nav-link { width: 100%; padding: 0.75rem 1rem; font-size: 1rem; }
  .nav-link--cta { border-radius: var(--radius-md); text-align: center; margin-top: 0.5rem; }

  /* Hero */
  .hero { padding-top: var(--nav-height); min-height: auto; padding-bottom: 4rem; }
  .hero .container { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; padding-top: 3rem; }
  .hero-visual { order: -1; }
  .hero-image-wrap { width: 240px; height: 240px; }
  .hero-description { margin-left: auto; margin-right: auto; }
  .hero-trust-tags { justify-content: center; }
  .hero-actions { justify-content: center; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; gap: 1.25rem; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Process */
  .process-steps { flex-direction: column; align-items: center; gap: 1.5rem; }
  .process-connector { width: 2px; height: 2rem; margin: 0; }
  .process-step { padding: 0 2rem; max-width: 480px; }

  /* Case Study */
  .casestudy-body { grid-template-columns: 1fr; gap: 2.5rem; }
  .casestudy-sidebar { flex-direction: row; flex-wrap: wrap; gap: 1.5rem; }
  .cs-sidebar-block { flex: 1; min-width: 160px; }
  .cs-metrics { grid-template-columns: repeat(2, 1fr); }

  /* Projects */
  .projects-grid { grid-template-columns: repeat(2, 1fr); }

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

  /* About */
  .about-content { grid-template-columns: 1fr; gap: 3rem; text-align: center; }
  .about-image { max-width: 320px; margin: 0 auto; }
  .about-actions { justify-content: center; }
  .about-image-accent { display: none; }

  /* Contact */
  .contact-content { grid-template-columns: 1fr; gap: 3rem; }
  .contact.section-light .contact .container { text-align: left; }

  /* Footer */
  .footer-content { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ----------------------------------------
   Large Phones (640px - 767px)
   ---------------------------------------- */
@media (max-width: 767px) {
  .container { padding: 0 1.25rem; }
  .section-dark, .section-light { padding: 4.5rem 0; }

  /* Hero */
  .hero-title { font-size: 2.125rem; }
  .hero-image-wrap { width: 200px; height: 200px; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn { width: 100%; max-width: 280px; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-block { padding: 1.75rem 1rem; }

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

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

  /* Section titles */
  .section-title-light,
  .section-title-dark { font-size: 1.75rem; }

  /* Case Study */
  .casestudy-sidebar { flex-direction: column; }
  .cs-metrics { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer-content { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { gap: 0.25rem; }
}

/* ----------------------------------------
   Small Phones (max 480px)
   ---------------------------------------- */
@media (max-width: 480px) {
  .hero-title { font-size: 1.875rem; }
  .hero-badge { font-size: 0.75rem; }
  .trust-tag { font-size: 0.75rem; padding: 0.3rem 0.7rem; }

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

  .service-card { padding: 1.5rem; }

  .contact-form { padding: 1.5rem; }

  .casestudy-title { font-size: 1.5rem; }
  .casestudy-summary { font-size: 1rem; }

  .footer-content { gap: 1.5rem; }

  .back-to-top { bottom: 1.25rem; right: 1.25rem; }
}