/* =====================================================================
   SAELIX — RESPONSIVE STYLES (mobile-first adjustments)
   Breakpoints: 1080 / 900 / 720 / 540
   ===================================================================== */

/* Large tablet / small desktop */
@media (max-width: 1080px) {
  :root { --header-h: 76px; }
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .hero-visual { max-width: 460px; margin-inline: auto; }
  .trust-strip .container { grid-template-columns: repeat(3,1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-contact { grid-column: 1 / -1; }
}

/* Tablet */
@media (max-width: 900px) {
  .nav-menu, .nav-actions .lang-select, .nav-actions .btn { display: none; }
  .nav-actions .btn.nav-cta-mobile { display: inline-flex; }
  .hamburger { display: grid; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
  .steps-row { grid-template-columns: repeat(2,1fr); }
  .stats { grid-template-columns: repeat(2,1fr); gap: var(--sp-6); }
  .form-card { padding: var(--sp-6); }
  .float-card.tl { left: 8px; } .float-card.br { right: 8px; }
  .mega { grid-template-columns: 1fr; }
}

/* Large phone */
@media (max-width: 720px) {
  :root { --sp-9: 4rem; --sp-8: 3rem; }
  body { padding-bottom: 68px; } /* room for the sticky mobile bar */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .steps-row { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .trust-strip .container { grid-template-columns: repeat(2,1fr); }

  /* The sticky bottom bar replaces the floating buttons on mobile
     so WhatsApp/Call are not shown twice. */
  .mobile-bar { display: block; }
  .float-actions { display: none; }
  .back-top { bottom: 82px; right: 16px; }
  .a11y-toggle { bottom: 82px; left: 16px; }
  .a11y-panel { bottom: 140px; left: 16px; }

  .hero { min-height: auto; padding-block: calc(var(--header-h) + var(--sp-6)) var(--sp-8); }
  .hero h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
  .float-card { display: none; }
  .section { padding-block: var(--sp-8); }
  .cookie-bar { left: 12px; right: 12px; bottom: 80px; }
  .timeline::before { left: 22px; }
  .tl-step { padding-left: 64px; }
  .tl-num { width: 46px; height: 46px; font-size: 0.9rem; }

  /* Footer: stack copyright + links cleanly */
  .footer-bottom .container { flex-direction: column; gap: 8px; text-align: center; }
  .footer-disclaimer { font-size: 0.74rem; }

  /* Contact page: show only the main consultation form on mobile.
     (Report uploads can be sent via WhatsApp from the same page.) */
  #report-form { display: none; }
}

/* Header on phones: logo + hamburger only (cleaner; drawer + bottom bar
   already provide the CTAs) */
@media (max-width: 640px) {
  .nav-actions .btn.nav-cta-mobile { display: none; }
}

/* Small phone */
@media (max-width: 540px) {
  .container { padding-inline: var(--sp-4); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-contact { grid-column: auto; }
  /* Full-width buttons in CONTENT only, never in the header/nav/bottom bar */
  main .btn, .modal .btn, .assess-card .btn, #planner-mount .btn { width: 100%; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn, .page-hero .hero-cta .btn { width: 100%; }
  .form-card { padding: var(--sp-5); }
  .assess-body { padding: var(--sp-5); }
  .section-head p { font-size: 1rem; }
  .ig-stats { gap: var(--sp-4); }
}

/* RTL support for Arabic */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .eyebrow::before { margin-left: 8px; margin-right: 0; }
html[dir="rtl"] .timeline::before { left: auto; right: 27px; }
html[dir="rtl"] .tl-step { padding-left: 0; padding-right: 80px; }
html[dir="rtl"] .tl-num { left: auto; right: 0; }
html[dir="rtl"] .float-actions { right: auto; left: 20px; }
html[dir="rtl"] .a11y-toggle, html[dir="rtl"] .a11y-panel { left: auto; right: 20px; }
html[dir="rtl"] .back-top { right: auto; left: 20px; }
html[dir="rtl"] .service-card:hover .card-link svg { transform: translateX(-5px); }
html[dir="rtl"] .float-card.tl { left: auto; right: -28px; }
html[dir="rtl"] .float-card.br { right: auto; left: -24px; }

/* =====================================================================
   MULTILINGUAL & MOBILE-SAFETY LAYER
   The whole site is translated live (EN / RU / AR / TR / AZ / KK via
   Google Translate). Translated strings run 20–40% longer than English,
   so nothing below may force horizontal scroll — long copy must WRAP.
   ===================================================================== */

/* 1. Never allow the page to scroll sideways on any device/language. */
html, body { max-width: 100%; overflow-x: hidden; }

/* 2. Long translated words / compounds break instead of overflowing. */
h1, h2, h3, h4, h5, p, li, a, span, strong, em, label, summary, blockquote,
.btn, .eyebrow, .hero-eyebrow, .breadcrumb, .tag, .brand-name {
  overflow-wrap: break-word;
  word-break: normal;
}

/* 3. Flex/grid children must be allowed to shrink below their content size
      (otherwise a long label widens the whole row past the viewport). */
.nav, .hero-grid, .hero-content, .hero-visual, .footer-grid, .footer-col,
.footer-contact, .form-grid, .field, .grid, .grid-2, .grid-3, .grid-4,
.stats, .steps-row, .feature, .with-sidebar, .ig-info, .planner-tabs,
.mb-inner, .hero-cta, .hero-trust { min-width: 0; }

/* 4. Pills / chips that carry translated copy wrap rather than clip. */
.eyebrow, .breadcrumb { flex-wrap: wrap; max-width: 100%; white-space: normal; }
.tag, .pill-choice label, .country-chip, .trust-pill span { white-space: normal; }
.hero-trust .ht { max-width: 100%; white-space: normal; }
.hero-trust .ht svg { flex-shrink: 0; }

/* 5. RTL (Arabic): keep the language dropdown inside the viewport. */
html[dir="rtl"] .lang-menu { right: auto; left: 0; }

/* ----- Tablet & phone: let buttons + long labels reflow ----- */
@media (max-width: 900px) {
  /* The mobile CTA in the header stays on one line but may shrink. */
  .nav-actions .btn.nav-cta-mobile { white-space: nowrap; font-size: 0.9rem; padding: 11px 16px; }
}

@media (max-width: 720px) {
  /* Buttons in content/hero/drawer/modals: wrap translated labels onto
     two lines and reduce size so RU/AR/TR text always fits. Header buttons
     are intentionally excluded so the top bar height stays stable. */
  main .btn, .hero-cta .btn, .page-hero .hero-cta .btn, .mobile-panel .btn,
  .modal .btn, .cookie-bar .btn, .assess-card .btn, #planner-mount .btn,
  .form-card .btn, .sidebar-cta .btn {
    white-space: normal; line-height: 1.25; text-align: center; height: auto;
  }
  .btn-lg { padding: 14px 22px; font-size: 1rem; }

  /* Hero CTAs stack full-width early so longer translations never overflow. */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn, .page-hero .hero-cta .btn { width: 100%; }

  /* Trust badges: one per line so long translations wrap cleanly. */
  .hero-trust { flex-direction: column; gap: var(--sp-2); }
  .hero-trust .ht { align-items: flex-start; }

  /* Eyebrow pill: block-level gives it a definite width so the (often long)
     translated label wraps to multiple lines instead of clipping. */
  .hero-eyebrow { display: block; max-width: 100%; white-space: normal; line-height: 1.5; }
  .hero-eyebrow .dot { display: inline-block; vertical-align: middle; margin-right: 8px; }

  /* Headings: a touch smaller + full width so long words break cleanly. */
  .page-hero h1 { font-size: clamp(1.7rem, 6.5vw, 2.4rem); max-width: 100%; }
  .hero h1 { max-width: 100%; }
  .hero-sub, .page-hero .lead, .section-head, .section-head p { max-width: 100%; }

  /* Inputs at 16px prevent iOS Safari from auto-zooming on focus. */
  .field input, .field select, .field textarea, .faq-search input { font-size: 16px; }

  /* RTL timeline mirrors the LTR mobile offsets. */
  html[dir="rtl"] .timeline::before { right: 22px; left: auto; }
  html[dir="rtl"] .tl-step { padding-right: 64px; padding-left: 0; }
}

/* ----- Very small phones (≤400px) ----- */
@media (max-width: 400px) {
  .brand img { height: 46px; }
  .scrolled .brand img { height: 42px; }
  .btn-lg { padding: 13px 18px; font-size: 0.95rem; }
  .hero h1 { font-size: clamp(1.6rem, 7.6vw, 2.1rem); }
  .hero-eyebrow { font-size: 0.74rem; padding: 7px 12px; }
  .lang-btn { padding: 8px 10px; }
  /* Keep the bottom action bar labels on one tidy line. */
  .mobile-bar a { font-size: 0.66rem; }
}