/* ===== RESPONSIVE.CSS — لمسة اللؤلؤ ===== */

/* Base responsive constraints */
img, table, iframe {
  max-width: 100%;
}

/* Tablet: ≤ 1024px */
@media (max-width: 1024px) {
  #categories .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .products-layout { grid-template-columns: 220px 1fr; }
  .cert-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
}

/* ===== Mobile: ≤ 768px ===== */
@media (max-width: 768px) {

  /* ── Nav ── */
  .nav-links, .nav-partner-badge { display: none; }
  .nav-hamburger { display: flex; }
  .nav-wa-btn span { display: none; }
  .nav-wa-btn { padding: 8px 10px; }

  /* ── Typography ── */
  h1 { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }
  h2, .section-title { font-size: clamp(1.4rem, 5.5vw, 2rem) !important; }
  h3 { font-size: 1rem !important; }
  p { font-size: 0.95rem; }
  .section { padding: 40px 0; }

  /* ── Hero ── */
  .hero-overlay {
    background: linear-gradient(
      to top,
      rgba(3,8,15,1) 0%,
      rgba(3,8,15,0.85) 50%,
      rgba(3,8,15,0.6) 100%
    );
  }
  .hero-content { max-width: 100%; }
  .hero-stats { gap: 20px; flex-wrap: wrap; justify-content: center !important; }
  .hero-stat .num { font-size: 1.7rem; }
  .hero-scroll-hint { display: none; }

  /* ── Hero: اتجاه النصوص حسب اللغة — عربي ── */
  html[data-lang="ar"] .hero-content,
  html[data-lang="ar"] .hero-title,
  html[data-lang="ar"] .hero-sub,
  html[data-lang="ar"] .hero-badge {
    text-align: right !important;
    direction: rtl !important;
  }
  html[data-lang="ar"] .hero-actions {
    justify-content: flex-end !important;
    direction: rtl;
  }
  html[data-lang="ar"] .hero-stats {
    justify-content: flex-end !important;
    direction: rtl;
  }

  /* ── Hero: اتجاه النصوص حسب اللغة — إنجليزي ── */
  html[data-lang="en"] .hero-content,
  html[data-lang="en"] .hero-title,
  html[data-lang="en"] .hero-sub,
  html[data-lang="en"] .hero-badge {
    text-align: left !important;
    direction: ltr !important;
  }
  html[data-lang="en"] .hero-actions {
    justify-content: flex-start !important;
    direction: ltr;
  }
  html[data-lang="en"] .hero-stats {
    justify-content: flex-start !important;
    direction: ltr;
  }

  /* ── Hero Actions: أزرار الهيرو على الهاتف ── */
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    padding-bottom: 8px;
  }
  .hero-actions .btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 140px;
    justify-content: center;
    padding: 12px 16px;
    font-size: 0.9rem;
  }

  /* ── 4-column category grid → 1 column ── */
  #categories .grid-4 {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cat-card { aspect-ratio: 16/9; min-height: 160px; }

  /* ── About stat cards → 1 column ── */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
  .about-visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .about-stat-card { padding: 16px 20px; }
  .stat-num { font-size: 2rem; }
  .about-certs { flex-direction: column; }

  /* ── Featured products grid → 1 column ── */
  .products-grid { grid-template-columns: 1fr; }

  /* ── Products page ── */
  .products-layout { grid-template-columns: 1fr; }
  .products-sidebar { position: static; }
  .products-grid-main {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  #products-hero { padding: 100px 0 32px !important; }
  .filter-bar { top: 60px; }
  .filter-dropdown { min-width: calc(50% - 6px); max-width: calc(50% - 6px); }
  .filter-bottom-row { gap: 10px; }
  .search-wrap-inline { max-width: 100%; }

  /* ── Why-us grid → 1 column ── */
  .why-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* ── Cert grid → 1 column ── */
  .cert-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .values-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px;
  }

  /* ── Social grid → column ── */
  .social-grid { flex-direction: column; width: 100%; align-items: stretch; }
  .social-card { padding: 16px; }

  /* ── Contact page ── */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .contact-method-label { font-size: 0.8rem; }
  .contact-method-value { font-size: 0.9rem; }
  .map-embed { width: 100%; }
  .map-embed iframe { width: 100% !important; height: 240px !important; }

  /* ── Contact hero section ── */
  .contact-hero { padding: 100px 0 48px !important; }

  /* ── CTA ── */
  .cta-buttons { flex-direction: column; align-items: center; width: 100%; gap: 12px; }
  .cta-buttons .btn { width: 100%; justify-content: center; }

  /* ── Float WA ── */
  #float-wa span { display: none !important; }
  #float-wa {
    padding: 12px !important;
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── Partner strip ── */
  .partner-strip-inner { flex-direction: column; text-align: center; gap: 10px; }
  .partner-divider { display: none; }

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

  /* ── About page hero ── */
  .about-page-hero { padding: 100px 0 48px !important; }

  /* ── Ensure no horizontal scroll ── */
  html, body { overflow-x: hidden; max-width: 100vw; }
  .container { padding: 0 16px; }
}

/* ===== Small Mobile: ≤ 480px ===== */
@media (max-width: 480px) {
  .container { padding: 0 14px; }

  /* Hero actions → column */
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  /* About stat cards → 1 column on very small screens */
  .about-visual { grid-template-columns: 1fr; }

  /* Values grid → 1 column */
  .values-grid { grid-template-columns: 1fr !important; }

  /* Filter dropdowns → full width */
  .filter-dropdown { min-width: 100%; max-width: 100%; }

  /* Product cards: reduce padding */
  .product-info { padding: 14px; }

  /* Why cards and cert rows */
  .why-card { padding: 20px 16px; }
  .cert-card { padding: 20px 16px !important; }
  .cert-row { font-size: 0.8rem; }

  /* Nav WA button → icon only */
  .nav-wa-btn { display: none; }
}

/* ===== NEW SECTIONS RESPONSIVE ===== */

@media (max-width: 768px) {
  .numbers-strip-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .numbers-strip-grid > div {
    border-right: none !important;
    border-bottom: 1px solid var(--glass-border);
  }
  .numbers-strip-grid > div:nth-child(odd) {
    border-right: 1px solid var(--glass-border) !important;
  }
  .numbers-strip-grid > div:last-child,
  .numbers-strip-grid > div:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
  }
  .how-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .how-connector-line { display: none !important; }
  .drill-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .drill-cat-card { aspect-ratio: 16/9; }
  .ticker-track { animation-duration: 20s !important; }
}

@media (max-width: 480px) {
  .numbers-strip-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .drill-cat-card { aspect-ratio: 16/9; min-height: 140px; }
}

/* ============================================================
   ⚡ MOBILE OVERRIDE — يُكسر أي تعارض CSS سابق بالكامل
   يجب أن يبقى هذا الكود في آخر الملف دائماً
   ============================================================ */
@media (max-width: 768px) {

  /* --- Mobile Navbar Fixes (Clean Architecture) --- */
  #navbar .nav-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* السماح للشعارات بالانكماش وتصغير حجمها بمرونة */
  #navbar .nav-logos {
    max-width: 55% !important;
    flex-shrink: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  #navbar .nav-logos img.logo-main {
    max-height: 28px !important;
    width: auto !important;
  }
  #navbar .nav-logos img.logo-siemens {
    max-height: 28px !important;
    width: auto !important;
    padding: 0 !important;
    border: none !important;
  }

  /* السماح للأزرار اليمنى بالتأقلم */
  #navbar .nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 1 !important;
  }
  /* تحويل زر البحث إلى أيقونة فقط */
  #search-btn span {
    display: none !important;
  }
  #search-btn {
    padding: 6px !important;
  }

  /* ── 2. Hero: أبعاد كاملة، بدون اختناق ── */
  #hero {
    height: auto !important;
    min-height: 100vh !important;
    padding-top: 110px !important;
    padding-bottom: 40px !important;
    display: flex !important;
    align-items: flex-start !important;
  }
  
  /* تقليل الهوامش الداخلية بين العناصر لتبدو متماسكة أكثر */
  .hero-badge {
    margin-bottom: 16px !important;
  }
  .hero-title {
    margin-bottom: 12px !important;
  }
  .hero-sub {
    margin-bottom: 24px !important;
  }
  .hero-inner {
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow: visible !important;
  }
  .hero-content {
    max-width: 100% !important;
    padding: 0 16px !important;
  }

  /* ── 3. RTL/LTR: اتجاهات النصوص بحسب اللغة ── */

  /* عربي → من اليمين */
  html[data-lang="ar"] .hero-content,
  html[data-lang="ar"] .hero-title,
  html[data-lang="ar"] .hero-sub {
    text-align: right !important;
    direction: rtl !important;
  }
  html[data-lang="ar"] .hero-actions,
  html[data-lang="ar"] .hero-badge {
    justify-content: flex-start !important;
    flex-direction: row !important;
  }

  /* إنجليزي → من اليسار */
  html[data-lang="en"] .hero-content,
  html[data-lang="en"] .hero-title,
  html[data-lang="en"] .hero-sub {
    text-align: left !important;
    direction: ltr !important;
  }
  html[data-lang="en"] .hero-actions,
  html[data-lang="en"] .hero-badge {
    justify-content: flex-start !important;
    flex-direction: row !important;
  }

  /* ── 4. Hero Actions: أزرار عمودية مريحة ── */
  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 24px !important;
  }
  .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 0 !important;
  }

}
/* ============================================================
   END MOBILE OVERRIDE
   ============================================================ */

/* ===== COMPREHENSIVE MOBILE FIXES ===== */
@media (max-width: 768px) {

  /* --- Navbar Search Bar --- */
  .nav-search-wrap {
    display: none !important;
  }

  /* --- Slider --- */
  #hero-slider {
    height: 55vh !important;
    min-height: 320px !important;
    margin-top: 58px !important;
  }
  .slide-title {
    font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
    line-height: 1.2 !important;
  }
  .slide-sub { font-size: 0.8rem !important; }
  .slide-tag { font-size: 0.7rem !important; }
  .slide-actions { gap: 8px !important; }
  .slide-actions .btn { padding: 10px 16px !important; font-size: 0.82rem !important; }
  .slide-text { max-width: 90% !important; }
  .slider-btn { display: none !important; }

  /* --- Identity Strip --- */
  #identity-strip { display: none !important; }

  /* --- Ticker --- */
  #ticker-bar { font-size: 0.72rem !important; }

  /* --- Stats Section --- */
  #stats-section [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }
  #stats-section [style*="font-size:3.5rem"] {
    font-size: 2.2rem !important;
  }

  /* --- How We Work --- */
  .how-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Drill Grid Cards --- */
  .drill-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 20px 0 !important;
  }
  .drill-cat-card { aspect-ratio: 4/3 !important; }
  .drill-cat-content h3 { font-size: 1rem !important; }
  .drill-cat-content p { display: none !important; }
  .drill-sub-card { padding: 0 !important; overflow: hidden !important; }
  .drill-sub-card-body { padding: 16px !important; }
  .drill-sub-card-title { font-size: 1rem !important; color: var(--white) !important; }
  .drill-sub-card-count { font-size: 0.82rem !important; }
  .drill-sub-img-wrap { height: 180px !important; }

  /* --- Products Grid --- */
  .products-grid-main {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .product-img-wrap { height: 200px !important; }
  .product-model { font-size: 0.95rem !important; color: var(--teal) !important; }
  .product-name { font-size: 0.85rem !important; color: var(--gray) !important; }
  .product-cat { font-size: 0.78rem !important; color: var(--gray-dim) !important; }
  .product-price { font-size: 0.88rem !important; color: var(--gold) !important; }
  .product-actions { flex-direction: column !important; gap: 8px !important; }
  .product-actions .btn { width: 100% !important; justify-content: center !important; font-size: 0.88rem !important; padding: 12px !important; }

  /* --- Drill Hero --- */
  .drill-hero { padding: 80px 0 24px !important; }
  .level-title { font-size: 1.4rem !important; }

  /* --- Breadcrumb --- */
  .breadcrumb { font-size: 0.75rem !important; gap: 4px !important; }

  /* --- Scroll Top Button --- */
  #scroll-top { bottom: 16px !important; left: 12px !important; width: 36px !important; height: 36px !important; }

  /* --- Float WA --- */
  #float-wa { bottom: 16px !important; right: 12px !important; padding: 10px 14px !important; }

  /* --- Footer --- */
  .footer-grid { grid-template-columns: 1fr !important; }
  #identity-strip { display: none !important; }

  /* --- Search Modal (if still used) --- */
  #search-modal > div { margin: 60px 12px 0 !important; }

  /* --- Pagination --- */
  .pagination { gap: 4px !important; }
  .page-btn { padding: 6px 10px !important; font-size: 0.8rem !important; }
}

/* ===== Small Mobile ≤ 480px ===== */
@media (max-width: 480px) {
  .drill-grid { grid-template-columns: 1fr !important; }
  .products-grid-main { grid-template-columns: 1fr !important; }
  #hero-slider { height: 65vh !important; }
  .slide-title { font-size: 1.2rem !important; }
  #stats-section [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }
}