/* =====================================================
   responsive.css — تجاوب شامل لجميع صفحات إبقي
   ===================================================== */

/* ══════════════════════════════════════
   GLOBAL — منع التمرير الأفقي نهائياً
══════════════════════════════════════ */
html, body {
  overflow-x: hidden;
}

/* page-hero: منع الفيض */
.page-hero {
  overflow: hidden;
  position: relative;
}

/* hero icon row في page-hero: يتكيف مع الموبايل */
.page-hero [style*="display:flex"] {
  flex-wrap: wrap;
}

/* الـ mobile-menu: لا يؤثر على تمرير الصفحة */
.mobile-menu {
  overflow-x: hidden;
}



/* ══════════════════════════════════════
   TABLET (≤ 1024px)
══════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Navbar ── */
  .navbar-menu       { display: none !important; }
  .client-area-btn   { display: none !important; }
  .navbar-actions .btn-primary { display: none !important; }
  .hamburger         { display: flex !important; }

  /* ── Generic grids ── */
  .grid-2 { grid-template-columns: 1fr !important; }
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── About page ── */
  .story-grid             { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(5, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Pricing grids ── */
  .pricing-grid { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(4,1fr)"].pricing-grid { grid-template-columns: 1fr !important; }


  /* ── Hero ── */
  .hero-grid   { grid-template-columns: 1fr !important; text-align: center; }
  .hero-visual { display: none !important; }
  .hero-cta    { justify-content: center; }
  .hero-features { justify-content: center; }

  /* ── Why Us ── */
  .why-us-grid { grid-template-columns: 1fr !important; }
  .why-us-image { order: -1; }

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

  /* ── Services ── */
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Portfolio preview ── */
  #portfolio-preview .portfolio-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Footer ── */
  .footer-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Page hero stats (inline flex) ── */
  .page-hero [style*="display:flex"][style*="gap"] { flex-wrap: wrap; gap: 16px !important; }
}

/* ══════════════════════════════════════
   MOBILE (≤ 768px)
══════════════════════════════════════ */
@media (max-width: 768px) {

  :root {
    --space-xl:  24px;
    --space-2xl: 40px;
    --space-3xl: 56px;
  }

  .section   { padding: var(--space-2xl) 0; }
  .container { padding: 0 16px; }

  /* ── Navbar ── */
  .navbar { padding: 10px 0; }
  .navbar-logo img { height: 34px; }

  /* ── ALL grids → 1 column ── */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* ── Hero ── */
  .hero { min-height: auto; padding: 90px 0 50px; }
  .hero-title { font-size: clamp(1.7rem, 6.5vw, 2.5rem) !important; }
  .hero-desc  { font-size: 0.93rem !important; }
  .hero-cta   { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-features { flex-wrap: wrap; gap: 10px; }

  /* ── Section header ── */
  .section-header { margin-bottom: var(--space-xl); }
  .section-desc   { font-size: 0.92rem; }

  /* ── Buttons ── */
  .btn-lg { padding: 13px 26px; font-size: 0.97rem; }
  .cta-buttons { flex-direction: column; align-items: center; gap: 12px; }
  .cta-buttons .btn { width: 100%; max-width: 340px; justify-content: center; }

  /* ── Stats ── */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }

  /* ── Pricing ── */
  .pricing-grid { grid-template-columns: 1fr !important; max-width: 420px; margin-left: auto; margin-right: auto; }

  /* ── Portfolio ── */
  .portfolio-grid,
  #portfolio-preview .portfolio-grid { grid-template-columns: 1fr !important; }
  .portfolio-item { margin-top: 0 !important; }

  /* ── About page ── */
  .story-grid         { grid-template-columns: 1fr !important; }
  .timeline-item      { flex-direction: column; }
  .timeline-item::before { display: none !important; }
  .value-card         { padding: var(--space-lg); }

  /* ── Team cards → 1 عمود ── */
  [style*="repeat(4,1fr)"] { grid-template-columns: 1fr !important; }

  /* ── Partners on about ── */
  [style*="repeat(5,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Pricing page tables ── */
  .table-pricing { font-size: 0.78rem; }
  .table-pricing th, .table-pricing td { padding: 8px 6px; }

  /* ── Contact ── */
  .contact-grid { grid-template-columns: 1fr !important; }

  /* ── Page hero ── */
  .page-hero { padding: 110px 0 50px; }
  .page-hero h1 { font-size: clamp(1.6rem, 6vw, 2.4rem) !important; }
  .page-hero [style*="display:flex"] { flex-wrap: wrap; gap: 12px !important; }
  .page-hero [style*="width:1px"]    { display: none; }

  /* ── Why us grid ── */
  .why-us-grid     { grid-template-columns: 1fr !important; }
  .why-card-stack  { gap: 12px; }

  /* ── FAQ grids ── */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* ── Footer ── */
  .footer-grid   { grid-template-columns: 1fr !important; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  /* ── Currency switcher ── */  
  .currency-switcher { flex-wrap: wrap; justify-content: center; }
}

/* ══════════════════════════════════════
   SMALL MOBILE (≤ 480px)
══════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Announcement bar ── */
  .announcement-bar { font-size: 0.75rem; padding: 8px 40px 8px 16px; }
  .announcement-bar .close-bar { left: 10px; }

  /* ── Navbar: only hamburger ── */
  .navbar-actions > *:not(.hamburger) { display: none !important; }
  .hamburger { display: flex !important; }

  /* ── Mobile menu full width ── */
  .mobile-menu { width: 100vw !important; border-radius: 0; }

  /* ── Stats → 1 column ── */
  .stats-grid { grid-template-columns: 1fr !important; }

  /* ── Section buttons ── */
  .btn { font-size: 0.88rem; }
  .btn-lg { padding: 12px 22px; font-size: 0.92rem; }

  /* ── Pricing category header ── */
  .pricing-category-header { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* ── Blog grid ── */
  .blog-grid { grid-template-columns: 1fr !important; }

  /* ── Testimonial swiper ── */  
  .swiper-button-next,
  .swiper-button-prev { display: none !important; }
}