/* ==========================================================
   Q-MAX — Responsive Styles
   ========================================================== */

/* ── Tablet ≤ 1024px ─────────────────────────────────────── */
@media (max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1 / -1; }
  .about-grid { grid-template-columns:1fr; gap:44px; }
  .contact-layout { grid-template-columns:1fr; }
  .mission-grid { grid-template-columns:1fr; }
  .modal-grid { grid-template-columns:1fr; }
  .modal-img-side { border-right:none; border-bottom:1px solid var(--border); padding:28px; }
  html[dir="rtl"] .modal-img-side { border-left:none; border-bottom:1px solid var(--border); }
}

/* ── Mobile landscape ≤ 768px ────────────────────────────── */
@media (max-width:768px) {
  :root { --nav-h:64px; --nav-h-sm:52px; }

  /* Hamburger visible */
  .hamburger { display:flex; }
  .nav-phone  { display:none; }

  /* Mobile nav drawer */
  .nav-links {
    display:none;
    position:fixed;
    top:var(--nav-h); left:12px; right:12px;
    background:rgba(10,10,10,.98);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--border-gold);
    border-radius:var(--radius-lg);
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    padding:12px 8px;
    gap:4px;
    z-index:899;
    overflow-x:hidden;
  }
  .navbar.scrolled ~ .nav-links { top:var(--nav-h-sm); }
  .nav-links.open { display:flex; }
  .nav-links li { flex:0 0 auto; }
  .nav-links a {
    padding:9px 12px; font-size:.92rem; border-radius:var(--radius);
    text-align:center; display:block; white-space:nowrap;
  }
  .nav-links a::after { display:none; }
  .nav-links a.active { background:rgba(212,160,23,.1); color:var(--gold-bright); }

  /* Hero */
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-actions .btn { justify-content:center; }

  /* Stats */
  .stats-grid { grid-template-columns:1fr; }
  .stat-item { padding:36px 24px; }

  /* Products */
  .products-grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }

  /* Features */
  .features-grid { grid-template-columns:1fr 1fr; }

  /* About */
  .quality-grid { grid-template-columns:1fr 1fr; }

  /* Contact */
  .contact-card, .form-wrapper { padding:26px; }

  /* Footer */
  .footer-grid { grid-template-columns:1fr; gap:30px; }
  .footer-brand { grid-column:1; text-align:center; }
  .footer-brand p { max-width:100%; }
  .footer-brand img { margin:0 auto 18px; display:block; }
  .footer-social { justify-content:center; }
  .footer-col { text-align:center; }
  .footer-col ul { align-items:center; }
  .footer-c-item { justify-content:center; }
  .footer-bottom .inner { flex-direction:column; text-align:center; }

  /* Section spacing */
  .section { padding:68px 0; }
  .page-hero { padding:120px 0 56px; }

  /* WA fab */
  .wa-fab { width:48px; height:48px; bottom:20px; right:20px; }
  html[dir="rtl"] .wa-fab { right:auto; left:20px; }
  .wa-fab svg { width:24px; height:24px; }
}

/* ── Mobile portrait ≤ 480px ─────────────────────────────── */
@media (max-width:480px) {
  html { font-size:15px; }
  .container { padding:0 16px; }

  .hero-title { letter-spacing:-1.5px; }

  .features-grid { grid-template-columns:1fr; }
  .products-grid { grid-template-columns:1fr 1fr; }
  .quality-grid  { grid-template-columns:1fr; }
  .filter-bar    { gap:6px; }
  .filter-btn    { padding:6px 14px; font-size:.77rem; }

  .modal-grid { grid-template-columns:1fr; }
  .modal-body { padding:22px; }

  .social-row { flex-direction:column; }
  .footer { padding-top:44px; }

  .section { padding:48px 0; }
  .section-header { margin-bottom:40px; }

  .map-wrap iframe { height:280px; }
}

/* ── RTL layout adjustments ──────────────────────────────── */
/* desktop row-reverse is set with !important in style.css */
html[dir="rtl"] .footer-brand p { text-align:right; }

html[dir="rtl"] .c-item         { flex-direction:row; }
html[dir="rtl"] .footer-c-item  { flex-direction:row; }
html[dir="rtl"] .modal-list li  { flex-direction:row; }
html[dir="rtl"] .breadcrumb     { flex-direction:row-reverse; }


/* ── Large screens ≥ 1400px ──────────────────────────────── */
@media (min-width:1400px) {
  .container { max-width:1320px; }
  .products-grid { grid-template-columns:repeat(4,1fr); }
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .navbar, #hero-canvas, .scroll-hint, .wa-fab, .hamburger,
  .modal-overlay { display:none !important; }
  body { background:#fff; color:#000; opacity:1 !important; }
}