/* responsive.css - UPDATED */
*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

/* کانتینر اصلی */
.container {
  width: 100%;
  max-width: 100%;
  padding: 0 clamp(12px, 3vw, 24px);
  margin: auto;
}

/* تایپوگرافی ریسپانسیو */
html {
  font-size: 16px;
  overflow-x: hidden;
}

@media (max-width: 992px) {
  html { font-size: 15px; }
}

@media (max-width: 768px) {
  html { font-size: 14px; }
  
  .container {
    padding: 0 15px;
  }
}

@media (max-width: 480px) {
  html { font-size: 13px; }
  
  .container {
    padding: 0 12px;
  }
}

/* کلاس‌های کمکی */
.mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block;
  }
  
  .desktop-only {
    display: none;
  }
}

/* رفع مشکلات flex و grid */
.flex-responsive {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.grid-responsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .grid-responsive {
    grid-template-columns: 1fr;
  }
}