/* ==========================================================================
   warranty.css — خاص بصفحة "ضمان الإطارات" (Tire warranty)
   شركة السرعة المطلقة | كل القيم من tokens.css — RTL.
   Figma node 42:2672. يضمّ: البطل الداكن (WarrantyHero) + شبكة بطاقات
   الضمان (grid-3 من layout.css + warranty-card component).
   ========================================================================== */

/* ---- البطل (Hero) — بطاقة داكنة بحواف دائرية ---- */
.warranty-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #0B0B0D 0%, #1A0408 45%, #0B0B0D 100%);
}

/* المحتوى النصّي — يمين على سطح المكتب */
.warranty-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* start = يمين في RTL */
  gap: var(--space-24);
  padding: var(--space-40) var(--space-24);
  text-align: start;
}

/* شارة "ضمان رسمي معتمد" */
.warranty-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-16);
  border: var(--border-width) solid rgba(90, 13, 24, 0.6);
  border-radius: var(--radius-pill);
  background-color: rgba(90, 13, 24, 0.4);
  color: #F08A96;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.083em;
}

/* العنوان — "ضمان" أبيض ثم "الإطارات" بتدرّج */
.warranty-hero__title {
  font-size: 40px;
  font-weight: var(--fw-black);
  line-height: 1.1;
  color: var(--color-text-invert);
}

.warranty-hero__title-accent {
  display: block;
  /* "الإطارات" في سطر مستقل تحت "ضمان" */
  background-image: linear-gradient(90deg, #C94057 0%, #5A0D18 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.warranty-hero__text {
  max-width: 420px;
  font-size: var(--fs-base);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.6);
}

/* صف الإحصائيات — أول عنصر (6+) على اليمين في RTL */
.warranty-hero__stats {
  display: flex;
  gap: var(--space-32);
}

.warranty-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.warranty-hero__stat-num {
  /* أرقام لاتينية مثل "6+" و"24/7" تبقى بترتيبها الصحيح داخل سياق RTL */
  direction: ltr;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--color-text-invert);
}

.warranty-hero__stat-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.45);
}

/* صورة الإطارات — أسفل على الجوال، يسار على سطح المكتب */
.warranty-hero__media {
  position: relative;
  min-height: 220px;
  order: -1;
  /* الصورة أعلى المحتوى على الجوال */
}

.warranty-hero__media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

/* ---- سطح المكتب: البطل صفّان جنبًا إلى جنب ---- */
@media (min-width: 768px) {
  .warranty-hero {
    flex-direction: row;
    align-items: stretch;
    min-height: 460px;
  }

  .warranty-hero__content {
    flex: 1 1 50%;
    justify-content: center;
    padding: 72px 64px;
  }

  .warranty-hero__title {
    font-size: var(--fs-hero);
  }

  .warranty-hero__media {
    flex: 1 1 50%;
    order: 0;
    /* يعود إلى ترتيب DOM: يسار في RTL */
    min-height: auto;
  }

  .warranty-hero__media-img {
    position: absolute;
    inset: 0;
    height: 108%;
    inset-block-start: auto;
    inset-block-end: 0;
  }
}