/* ===== 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; }

  /* ── 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; }
  #float-wa { padding: 12px; border-radius: 50%; }

  /* ── 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; }
}