/* =========================================================================
   MazXai — responsive breakpoints & mobile navigation
   Mobile-first overrides layered on top of style.css. Tested around
   375 / 768 / 1024 / 1440 / 1920.
   ========================================================================= */

/* ---------- Mobile navigation (default: below 1024px) -------------------- */
@media (max-width: 1023.98px) {
  .nav-toggle { display: flex; }

  .primary-nav {
    position: fixed;
    top: var(--header-height);
    inset-inline-end: 0;
    width: min(88vw, 380px);
    height: calc(100vh - var(--header-height));
    background: var(--background);
    border-inline-start: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 1.5rem;
    gap: 0;
    overflow-y: auto;
    /* Hidden via clip-path (collapsed to a 0-width sliver at the panel's
       own trailing edge) rather than transform: translateX(100%). The box
       itself never moves past the viewport edge this way — a transformed
       fixed element's post-transform geometry still counts toward the
       root's scrollable overflow in Chrome, which was silently forcing
       the whole page wider than the viewport on mobile. clip-path only
       affects paint, never layout/overflow, so it can't cause that. */
    clip-path: inset(0 0 0 100%);
    transition: clip-path var(--transition-slow);
    z-index: 90;
  }
  [dir="rtl"] .primary-nav { clip-path: inset(0 100% 0 0); }
  .primary-nav.is-open { clip-path: inset(0); }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0.15rem; width: 100%; }
  .nav-item { width: 100%; }
  .nav-link { width: 100%; justify-content: space-between; padding: 0.9rem 0.5rem; }
  .dropdown {
    position: static; box-shadow: none; border: none; display: none;
    min-width: 0; width: 100%; padding-inline-start: 0.75rem; margin-bottom: 0.4rem;
  }
  .dropdown--grid { grid-template-columns: 1fr; }
  .has-dropdown.is-open .dropdown { display: flex; }

  .nav-actions {
    flex-direction: column; align-items: stretch; margin-inline-start: 0;
    margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border);
    gap: 0.75rem;
  }
  .nav-actions .btn { width: 100%; }
  .nav-actions .lang-switcher { align-self: flex-start; }

  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(11, 15, 26, 0.4);
    z-index: 80; opacity: 0; pointer-events: none; transition: opacity var(--transition-slow);
  }
  .nav-backdrop.is-visible { opacity: 1; pointer-events: auto; }
}

/* ---------- ≤ 1024px : tablet ------------------------------------------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero-visual { max-width: 480px; margin-inline: auto; width: 100%; }

  .split { grid-template-columns: 1fr; gap: 2.25rem; }
  .split-reverse .split-media { order: -1; }
  .row-alt:nth-child(even) .split { direction: ltr; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .process-row { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid--single { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
  .integration-grid { grid-template-columns: repeat(3, 1fr); }

  .agent-detail { grid-template-columns: 1fr; gap: 2rem; }
  .custom-panel { grid-template-columns: 1fr; }

  .footer-top { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- ≤ 768px : mobile --------------------------------------------- */
@media (max-width: 768px) {
  .container { padding-inline: 18px; }
  section { padding-block: 48px; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .process-row { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .integration-grid { grid-template-columns: repeat(2, 1fr); }

  .form-grid { grid-template-columns: 1fr; }
  .form-field.span-2 { grid-column: auto; }

  .chat-vs-agent { grid-template-columns: 1fr; }

  .footer-top { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }

  .cookie-banner-inner { flex-direction: column; align-items: stretch; }
  .cookie-banner-actions { justify-content: stretch; }
  .cookie-banner-actions .btn { flex: 1; }

  .cta-buttons { flex-direction: column; align-items: stretch; }
  .cta-buttons .btn { width: 100%; }

  .flow-branch { gap: 1rem; }
  .flow-node { min-width: 0; font-size: 0.8rem; padding: 0.65rem 0.85rem; }

  .approval-flow { flex-direction: column; }
  .approval-arrow { transform: rotate(90deg); width: auto; height: 30px; }
  [dir="rtl"] .approval-arrow svg { transform: rotate(90deg); }

  .timeline-item { padding-inline-start: 2.6rem; }
  [dir="rtl"] .timeline-item { padding-inline-end: 2.6rem; }
}

/* ---------- ≤ 480px : small phones ---------------------------------------- */
@media (max-width: 480px) {
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.6rem; }
  .hero-copy .section-subtitle { font-size: 1.02rem; }
  .integration-grid { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .price-card { padding: 1.5rem 1.25rem; }
}

/* ---------- ≥ 1440px : large desktop --------------------------------------- */
@media (min-width: 1440px) {
  :root { --container-width: 1320px; }
  h1 { font-size: 4rem; }
}

/* ---------- ≥ 1920px : extra-wide ------------------------------------------- */
@media (min-width: 1920px) {
  :root { --container-width: 1440px; }
}

/* ---------- Print ------------------------------------------------------------ */
@media print {
  .site-header, .site-footer, .cookie-banner, .nav-toggle { display: none; }
}