/* ===================================
   التصميم المتجاوب - Responsive Design
   Mobile-First Approach
   =================================== */

/* ===================================
   أحجام أزرار متجاوبة
   =================================== */
@media (max-width: 767px) {
  .btn {
    width: 100%;
    min-height: 44px; /* حد أدنى للمس */
  }

  .btn-large {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-base);
  }
}

/* ===================================
   الحاوية
   =================================== */
@media (max-width: 767px) {
  .container {
    padding: 0 var(--space-md);
  }

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

/* ===================================
   العناوين المتجاوبة
   =================================== */
@media (max-width: 767px) {
  h1 {
    font-size: var(--text-3xl);
    line-height: 1.3;
  }

  h2 {
    font-size: var(--text-2xl);
  }

  h3 {
    font-size: var(--text-xl);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  h1 {
    font-size: var(--text-4xl);
  }

  h2 {
    font-size: var(--text-3xl);
  }
}

/* ===================================
   إخفاء/إظهار على حسب الشاشة
   =================================== */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }

  .hide-desktop {
    display: none;
  }
}

/* ===================================
   Grid متجاوب عام
   =================================== */
.grid-responsive {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-responsive {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .grid-responsive {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }
}

/* ===================================
   تأثيرات الحركة - تعطيل على الأجهزة المحمولة
   =================================== */
@media (max-width: 767px) {
  /* تقليل التأثيرات على الجوال للأداء الأفضل */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* تعطيل hover effects على الأجهزة اللمسية */
@media (hover: none) {
  .glass-card:hover {
    transform: none;
    box-shadow: var(--shadow-glass);
  }

  .btn:hover {
    transform: none;
  }

  .tool-card:hover .tool-card-icon {
    transform: none;
  }
}

/* ===================================
   تكديس العناصر على الجوال
   =================================== */
@media (max-width: 767px) {
  .stack-mobile {
    flex-direction: column;
  }

  .stack-mobile > * {
    width: 100%;
  }
}

/* ===================================
   معاينات الملفات (Preview Cards)
   =================================== */
.preview-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

@media (min-width: 768px) {
  .preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

/* ===================================
   منطقة السحب والإفلات
   =================================== */
.upload-zone {
  min-height: 200px;
  padding: var(--space-xl);
}

@media (min-width: 768px) {
  .upload-zone {
    min-height: 300px;
    padding: var(--space-2xl);
  }
}

@media (min-width: 1024px) {
  .upload-zone {
    min-height: 350px;
    padding: var(--space-3xl);
  }
}

/* ===================================
   أحجام الخطوط المتجاوبة
   =================================== */
@media (max-width: 767px) {
  :root {
    --text-xs: 0.688rem;   /* 11px */
    --text-sm: 0.813rem;   /* 13px */
    --text-base: 0.938rem; /* 15px */
    --text-lg: 1.063rem;   /* 17px */
    --text-xl: 1.188rem;   /* 19px */
    --text-2xl: 1.375rem;  /* 22px */
    --text-3xl: 1.75rem;   /* 28px */
    --text-4xl: 2rem;      /* 32px */
  }
}

/* ===================================
   تحسينات الأداء
   =================================== */
/* استخدام will-change بحذر */
.tool-card {
  will-change: transform;
}

.tool-card:hover {
  will-change: auto;
}

/* ===================================
   Safe areas للأجهزة الحديثة (iPhone X+)
   =================================== */
@supports (padding: max(0px)) {
  .container {
    padding-right: max(var(--space-lg), env(safe-area-inset-right));
    padding-left: max(var(--space-lg), env(safe-area-inset-left));
  }
}