/* ==========================================================================
   IKSORA AI — Responsive rules
   ========================================================================== */

/* ---------- Tablet / small desktop (<=1024px) ---------- */
@media (max-width: 1024px) {
  .editorial-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .editorial__grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .contact-layout { grid-template-columns: 1fr; gap: var(--space-4); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Mobile nav breakpoint (<=860px) ---------- */
@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .mobile-menu { display: flex; }
}

/* ---------- Tablet portrait (<=768px) ---------- */
@media (max-width: 768px) {
  .container { padding: 0 var(--space-3); }
  .hero { min-height: 82vh; padding: var(--space-6) 0 var(--space-5); }
  .hero__nodes { display: none; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  .section { padding: var(--space-6) 0; }
  .service-row { grid-template-columns: 50px 1fr; }
  .service-row__arrow { display: none; }

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

  .solution-block { grid-template-columns: 1fr; gap: var(--space-2); }
  .solution-block__grid { grid-template-columns: 1fr; }

  .careers-teaser__inner { flex-direction: column; align-items: flex-start; }

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

  .footer__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ---------- Small phones (<=430px) ---------- */
@media (max-width: 430px) {
  .nav__inner { padding: 1rem var(--space-3); }
  .nav__logo { font-size: 0.95rem; }
  .hero__title { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .cta-block__title { font-size: clamp(1.5rem, 7vw, 2rem); }
  .btn--lg { width: 100%; }
}

/* ---------- Very small phones (<=375px) ---------- */
@media (max-width: 375px) {
  .container { padding: 0 var(--space-2); }
  .eyebrow { font-size: 0.72rem; }
}

/* ---------- Large desktop (>=1920px) ---------- */
@media (min-width: 1920px) {
  .container { max-width: 1440px; }
  .hero__title { font-size: clamp(3.2rem, 5vw, 6.2rem); }
}