/* ============================================================
   ZUVINTEL — RESPONSIVE
   File: assets/css/responsive.css
   Ultra-wide → laptop → tablet → mobile, portrait & landscape
   ============================================================ */

/* ─── ULTRA-WIDE (≥1800px) ─── */
@media (min-width: 1800px) {
  .container { max-width: 1400px; }
  html { font-size: 17px; }
}

/* ─── LAPTOP / SMALL DESKTOP (≤1200px) ─── */
@media (max-width: 1200px) {
  .about-inner, .ceo-inner, .why-inner, .capabilities-inner, .contact-inner { gap: 64px; }
  .techniques-inner { gap: 64px; }
}

/* ─── NAV COLLAPSE (≤1200px) ───
   Seven top-level items need the full desktop width; below this
   the hamburger + overlay menu takes over. */
@media (max-width: 1200px) {
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
}

/* ─── TABLET (≤1024px) ─── */
@media (max-width: 1024px) {
  .container { padding: 0 32px; }

  .blog-layout, .post-layout, .job-layout { grid-template-columns: 1fr; gap: 48px; }
  .blog-sidebar, .apply-panel { position: static; }
  .related-grid { grid-template-columns: 1fr; }

  .about-inner { grid-template-columns: 1fr; }
  .ceo-inner { grid-template-columns: 1fr; gap: 60px; }
  .ceo-portrait-wrap { max-width: 420px; margin: 0 auto; }

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

  .industry-feature { grid-template-columns: 1fr; }
  .industry-feature.reverse { direction: ltr; }
  .sectors-bar { grid-template-columns: 1fr 1fr; }
  .sector-item { border-right: 1px solid var(--border); }
  .sector-item:nth-child(2n) { border-right: none; }

  .techniques-inner { grid-template-columns: 1fr; }
  .techniques-left { position: static; }

  .technique-showcase { grid-template-columns: 1fr; }
  .technique-nav { flex-direction: row; overflow-x: auto; }
  .technique-nav-item {
    border-left: none;
    border-bottom: 3px solid transparent;
    min-width: 220px;
  }
  .technique-nav-item:hover, .technique-nav-item.active {
    border-left-color: transparent;
    border-bottom-color: var(--gold);
  }
  .technique-panel { padding: 48px; }
  .tp-features { grid-template-columns: 1fr; }

  .process-steps { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .process-steps::before { display: none; }

  .capabilities-inner { grid-template-columns: 1fr; gap: 60px; }
  .why-inner { grid-template-columns: 1fr; gap: 60px; }
  .contact-inner { grid-template-columns: 1fr; gap: 60px; }

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

  /* Team duo stacks on tablet portrait per spec */
  .team-grid--duo { grid-template-columns: 1fr; max-width: 520px; }

  .team-banner-card { width: 170px; }
  .team-banner-set { gap: 28px; }
  .team-banner-edge { width: 80px; }
}

/* ─── MOBILE (≤768px) ─── */
@media (max-width: 768px) {
  h1 { font-size: 2.8rem; }
  .section-pad { padding: 80px 0; }
  .container { padding: 0 24px; }

  .page-hero { min-height: 40vh; padding-top: 120px; padding-bottom: 56px; }

  .hero-stats { flex-wrap: wrap; gap: 24px; }
  .hero-actions { gap: 20px; }

  /* Deepen the banner veil where the text spans the full width */
  .hero-slider-overlay {
    background:
      linear-gradient(180deg,
        rgba(var(--navy-rgb), 0.82) 0%,
        rgba(var(--navy-rgb), 0.68) 50%,
        var(--navy) 100%);
  }

  .services-grid { grid-template-columns: 1fr; }
  .services-header { flex-direction: column; align-items: flex-start; gap: 20px; }
  .services-header .services-intro-copy { text-align: left; }

  .industries-grid, .industries-grid--three { grid-template-columns: 1fr; }
  .sectors-bar { grid-template-columns: 1fr 1fr; }

  .achievements-inner { grid-template-columns: 1fr; }
  .ach-item { padding: 40px 24px; }
  .ach-item + .ach-item::before { display: none; }

  .tab-content.active { grid-template-columns: 1fr; gap: 40px; }
  .types-tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .tab-btn { padding: 14px 18px; white-space: nowrap; }

  .technique-showcase { display: block; }
  .technique-nav { display: block; }
  .technique-nav-item { border-left: 3px solid transparent; border-bottom: none; width: 100%; }
  .technique-nav-item.active { border-left-color: var(--gold); }
  .technique-panel { padding: 36px 24px; }
  .tp-num { display: none; }

  .industry-feature-content { padding: 48px 28px; }

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

  .form-row { grid-template-columns: 1fr; }

  .cta-banner { padding: 48px 28px; }
  .cta-actions { flex-direction: column; }

  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .ceo-badge { display: none; }
  .ceo-quote { padding: 24px; }

  .team-grid--duo { grid-template-columns: 1fr; }
  .team-card { padding: 44px 24px 36px; }

  .team-banner { padding: 64px 0; }
  .team-banner-card { width: 140px; }
  .team-banner-set { gap: 20px; padding: 0 12px; }
  .team-banner-edge { width: 48px; }

  .comparison-table th, .comparison-table td { padding: 14px 16px; }

  .media-frame__accent { display: none; }

  .blog-grid { grid-template-columns: 1fr; }
  .job-card { grid-template-columns: 1fr; }
  .job-card .btn { justify-self: start; }
  .apply-panel { padding: 32px 24px; }
  .post-share { gap: 8px; }
}

/* ─── SMALL MOBILE (≤420px) ─── */
@media (max-width: 420px) {
  h1 { font-size: 2.3rem; }
  .container { padding: 0 18px; }
  .btn { padding: 13px 24px; letter-spacing: 0.15em; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form input { border-right: 1px solid var(--border); }

  .team-banner-card { width: 120px; }
}

/* ─── MOBILE LANDSCAPE ─── */
@media (max-height: 500px) and (orientation: landscape) {
  #hero { min-height: auto; padding-top: 120px; padding-bottom: 60px; }
  .page-hero { min-height: auto; padding-top: 110px; }
  .mobile-nav { gap: 18px; }
  .mobile-nav a { font-size: 1.3rem; }
}

/* ─── PRINT ─── */
@media print {
  body::before, .cursor-dot, .cursor-ring, #header, .mobile-nav,
  .hamburger, .hero-particles, .newsletter-form, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  p, .team-desc, .cap-text span { color: #222; }
}