/* ==========================================================================
   home.css — تنسيقات خاصة بالصفحة الرئيسية (Home page-specific)
   شركة السرعة المطلقة | كل القيم من tokens.css — RTL.
   تجاوزات تخطيطية بسيطة فقط — لا يُعاد تنسيق المكوّنات.
   ========================================================================== */

/* مساعدات الأقسام العامة (.section-title / -label / -subtitle / -row / …)
   انتقلت إلى layout.css لأنها مشتركة عبر كل الصفحات. */

/* ---- اختر الخدمة المناسبة — عمودان على الجوال بحجم معقول ---- */
/* grid-products الأساسي عمود واحد تحت 480px؛ نفرض عمودين هنا لتقصير البطاقات.
   مقيّد بأقل من 480px حتى لا يطغى على أعمدة سطح المكتب (grid-products يتكفّل بها). */
@media (max-width: 479px) {
  .grid-service-categories {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16);
  }
}

/* ---- أفضل الاختيارات للطريق (Swiper) — كان .grid-products ثابتًا (4 فقط) ---- */
.best-picks-swiper {
  margin-block-start: var(--space-24);
  padding-block-end: var(--space-8); /* مساحة لظل البطاقة كي لا يُقصّ */
  overflow: hidden;
}
.best-picks-swiper .swiper-wrapper {
  align-items: stretch;
}
.best-picks-swiper .swiper-slide {
  height: auto;
  display: flex;
}

/* ---- شريط الماركات (Swiper) — شعارات بلا إطار على خلفية بيضاء ---- */
.brand-swiper {
  margin-block-start: var(--space-40);
}

.brand-swiper .brand-tile {
  border: none;
  background: transparent;
  padding: var(--space-16);
  height: auto;
}

.brand-swiper .brand-tile:hover {
  box-shadow: none;
  transform: none;
}

.brand-swiper .brand-tile__logo {
  max-height: var(--space-64);
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* ---- قسم بحث الإطارات (Tire Search Section — خلفية بيضاء) ---- */
.tire-search-section {
  background: var(--color-bg);
  padding-block: var(--space-48) var(--space-48);
}

/* بانر مخطط الإطار — صورة كاملة من التصميم */
.tire-search-banner {
  margin: 0 0 var(--space-32);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.tire-search-banner img {
  width: 100%;
  display: block;
}

/* صف نموذج البحث الأفقي — شريط رمادي بحشوة + صناديق بيضاء منفصلة */
.tire-search-bar-row {
  background: var(--color-bg-alt);
  border-radius: var(--radius-xl);
  padding: var(--space-32);
  margin-inline: auto;
}

.tire-search-form--row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-16);
}

.tire-search-form--row .select,
.tire-search-form--row .custom-select__trigger {
  flex: 1;
  min-width: 120px;
  height: 56px;
  border: none;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  padding-inline: var(--space-24);
}

/* الغلاف المخصّص يرث تمدّد الحقل داخل الصف (Progressive enhancement) */
.tire-search-form--row .custom-select {
  flex: 1;
  min-width: 120px;
}
.tire-search-form--row .custom-select__trigger {
  width: 100%;
}
/* لون قيمة مختارة يعود للنص الأساسي (placeholder يبقى باهتًا عبر المكوّن) */
.tire-search-form--row .custom-select__trigger:not([data-placeholder]) {
  color: var(--color-text);
}

.tire-search-form--row .btn {
  flex-shrink: 0;
  height: 56px;
  border-radius: var(--radius-lg);
  padding-inline: var(--space-40);
  background-color: var(--color-gradient-end);
  transition: background-color 0.2s ease;
}

.tire-search-form--row .btn:hover {
  background-color: var(--color-primary);
}

/* موبايل: تكديس بعرض كامل */
@media (max-width: 767px) {
  .tire-search-form--row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---- لماذا يثق بنا — تخطيط ثلاثي (Why-us) ---- */

/* العنوان بلونين — اللون والحجم من .section-title، والجزء المميّز عنابي */
.why-us-title__accent {
  color: var(--color-primary);
}

.why-us-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  align-items: center;
}

@media (min-width: 768px) {
  .why-us-layout {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-48);
  }

  /* البطاقات تلاصق الحافة الخارجية ليبقى خط الوصل ناحية المركز */
  .feature-item-group--right {
    align-items: flex-start;
  }

  .feature-item-group--left {
    align-items: flex-end;
  }
}

.why-us-center img {
  width: 360px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
}

/* الجوال: توحيد كل عناصر "لماذا يثق بنا" — الأيقونة يمين والنص شمال،
   وإخفاء الإطار المركزي لتوفير المساحة */
@media (max-width: 767px) {
  .why-us-center {
    display: none;
  }

  /* إلغاء عكس بطاقات جهة اليمين حتى تعود الأيقونة للبداية (يمين) مثل الباقي */
  .feature-item--right {
    flex-direction: row;
  }

  .feature-item--right .feature-item__body {
    text-align: start;
  }

  /* البطاقات بعرض كامل لمظهر موحّد */
  .feature-item {
    width: 100%;
  }
}

/* خطوط الوصل من البطاقات نحو دائرة الإطار — جريديانت يتلاشى ناحية المركز.
   الطول تقريبي، اضبطه عبر --connector-len. */
@media (min-width: 768px) {
  .why-us-layout {
    --connector-len: var(--space-64);
  }

  .feature-item {
    position: relative;
  }

  .feature-item--right::after,
  .feature-item--left::before {
    content: "";
    position: absolute;
    top: 50%;
    width: var(--connector-len);
    height: 1px;
  }

  /* المجموعة اليمنى: الخط يمتد نحو المركز ويتلاشى ناحيته */
  .feature-item--right::after {
    inset-inline-end: calc(-1 * var(--connector-len));
    background: linear-gradient(to left, var(--color-primary), transparent);
  }

  /* المجموعة اليسرى: الخط يمتد نحو المركز ويتلاشى ناحيته */
  .feature-item--left::before {
    inset-inline-start: calc(-1 * var(--connector-len));
    background: linear-gradient(to right, var(--color-primary), transparent);
  }

  /* عكس اتجاه التلاشي عند LTR */
  [dir="ltr"] .feature-item--right::after {
    background: linear-gradient(to right, var(--color-primary), transparent);
  }

  [dir="ltr"] .feature-item--left::before {
    background: linear-gradient(to left, var(--color-primary), transparent);
  }
}

/* ---- الإحصائيات — بطاقة بيضاء بفواصل رصاصية ---- */
.stat-counter-group {
  --stat-gap: calc(var(--space-64) + var(--space-48));
  /* 112px */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--stat-gap);
  margin-block-start: var(--space-48);
  padding: var(--space-24) var(--space-32);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.stat-counter {
  position: relative;
}

/* الفاصل الرصاصي بين كل إحصائيتين — 3×96 في منتصف الفجوة */
.stat-counter-group .stat-counter+.stat-counter::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * var(--stat-gap) / 2);
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: calc(var(--space-64) + var(--space-32));
  /* 96px */
  background: var(--color-divider);
}

/* موبايل: فجوة أصغر بدون فواصل */
@media (max-width: 767px) {
  .stat-counter-group {
    --stat-gap: var(--space-32);
  }

  .stat-counter-group .stat-counter+.stat-counter::before {
    display: none;
  }
}

@media (min-width: 768px) {
  .stat-counter-group {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- شريط العلامات (Brand strip) — 5 أعمدة ---- */
.brand-strip {
  align-items: center;
}

@media (min-width: 1024px) {
  .brand-strip {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* سكشن "عرض قوي" (.promo-strip-*) وصف العنوان (.section-title-row)
   انتقلا إلى promo-banner-card.css و layout.css على التوالي (مشتركان مع صفحات الفئات). */

/* ---- قسم العروض الترويجي الداكن (Promo section) ---- */
.promo-section {
  position: relative;
  background: #0B0B0D;
  color: var(--color-text-invert);
  overflow: hidden;
}

/* الجوال (mobile-first): الصورة فوق ← فاصل أحمر أفقي ← المحتوى تحت.
   .promo-inner بعرض الشريحة الكامل؛ المحتوى وحده مقيّد داخل .container. */
.promo-inner {
  position: relative;
  overflow: hidden;
}

/* --- زون الصورة --- */
/* الجوال: الصورة في التدفّق أعلى المحتوى، بطاقة مدوّرة بهوامش جانبية */
.promo-visual {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin-inline: var(--container-pad);
  border-radius: var(--radius-xl);
}

.promo-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* حاوية المحتوى داخل الشريحة — تباعد رأسي على الجوال */
.promo-inner>.container {
  position: relative;
  z-index: 2;
  padding-block: var(--space-40);
}

/* --- زون المحتوى --- */
.promo-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* الفاصل الأحمر — أفقي فوق المحتوى على الجوال */
.promo-content::before {
  content: "";
  width: 88px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #4A0E14 0%, #B02130 48%, #4A0E14 100%);
}

.promo-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0;
}

.promo-title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  color: var(--color-text-invert);
  margin-bottom: 1.5rem;
}

.promo-body {
  color: rgba(255, 255, 255, 0.65);
  line-height: var(--lh-base);
  font-size: var(--fs-base);
  max-width: 460px;
}

/* الشاشات الكبيرة: 3 زونات مفصولة — صورة يمين | خط أحمر مائل | محتوى يسار.
   .promo-inner بعرض الشريحة الكامل، فالصورة تصل لحافة الشاشة بـ inset-inline-start
   من غير أي حساب vw. */
@media (max-width: 768px) {
  .promo-visual {
    margin-top: 20px;
  }
}

@media (min-width: 768px) {
  .promo-inner {
    min-height: 520px;
    display: flex;
    align-items: center;
  }

  /* الصورة تُنزَّف حتى حافة الشاشة اليمنى (الحافة الخارجية = 100% + 60px، مُقتَطعة).
     الحافة الداخلية (الخط الأحمر) مرتبطة بالحاوية عند 42% من عرض محتواها،
     فتبقى المسافة بينها وبين المحتوى ثابتة على كل عرض شاشة (لا تداخل أبدًا).
     ‎--promo-cc‎ = عرض محتوى الحاوية = أقل من (عرض الشاشة، الحد الأقصى للحاوية). */
  .promo-visual {
    --promo-cc: min(100%, calc(var(--container-max) - 2 * var(--container-pad)));
    position: absolute;
    inset-block: 0;
    inset-inline-start: -60px;
    width: calc(45% + 60px + 0.08 * var(--promo-cc));
    margin-inline: 0;
    border-radius: 0;
    aspect-ratio: auto;
    transform: skewX(-9deg);
    transform-origin: center;
  }


  .promo-visual img {
    position: absolute;
    inset-block: 0;
    left: 47%;
    width: calc(100% + 220px);
    height: 100%;
    object-fit: cover;
    transform: translateX(-50%) skewX(9deg);
    transform-origin: center;
  }

  /* الخط الأحمر الفاصل المائل — على الحافة الداخلية (اليسرى) للصورة المواجهة للمحتوى */
  .promo-visual::before {
    content: "";
    position: absolute;
    inset-block: -30px;
    /* يمتد خارج الحواف لتغطية كامل الارتفاع بعد الميل */
    inset-inline-end: 0;
    /* النهاية = اليسار في RTL = الحافة المواجهة للمحتوى */
    width: 25px;
    background: linear-gradient(9deg, #4A0E14 0%, #B02130 48%, #4A0E14 100%);
    z-index: 2;
  }

  /* حاوية المحتوى: بعرض كامل، تتوسّط رأسيًا؛ إلغاء التباعد الرأسي للجوال */
  .promo-inner>.container {
    width: 100%;
    padding-block: 0;
  }

  /* المحتوى في العمود الأيسر — يُدفَع للنهاية (يسار في RTL) ولا يتداخل مع الصورة */
  .promo-content {
    width: 41%;
    margin-inline-start: auto;
    /* يدفع الكتلة نحو النهاية = اليسار في RTL */
    gap: var(--space-4);
  }

  /* لا فاصل أفقي على الشاشات الكبيرة — الفاصل هو الخط المائل */
  .promo-content::before {
    display: none;
  }
}

/* ---- نقاط تنقّل السلايدر (Swiper pagination) ---- */
/* الحاوية توضع أسفل السلايدر ومحاذاة مع عمود المحتوى، دون حجب النقر على الشرائح */
.promo-swiper__controls {
  position: absolute;
  inset-block-end: var(--space-24);
  inset-inline: 0;
  z-index: 5;
  pointer-events: none;
}

.promo-swiper__pagination {
  position: static;
  width: auto;
  text-align: center;
  /* على الجوال: توسيط */
  pointer-events: auto;
}

.promo-swiper__pagination .swiper-pagination-bullet {
  width: 16px;
  height: 6px;
  margin: 0 var(--space-4) !important;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.8);
  opacity: 1;
  transition: width 0.25s ease, background-color 0.25s ease;
}

.promo-swiper__pagination .swiper-pagination-bullet-active {
  width: 48px;
  background: var(--color-accent);
}

@media (min-width: 768px) {
  .promo-swiper__controls {
    inset-block-end: var(--space-40);
  }

  /* على الشاشات الكبيرة: النقاط أسفل عمود المحتوى (يسار) */
  .promo-swiper__pagination {
    text-align: start;
  }
}

/* ---- من نحن (About section) — بانر داكن ---- */
.about-section {
  /* background-color: var(--color-dark); */
  /* color: var(--color-text-invert); */
}

.about-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
  /* align-items: center; */
}

@media (min-width: 768px) {
  .about-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-64);
  }
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.about-title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  text-transform: uppercase;
}

/* النص الأساسي فاتح على الداكن، بارتفاع سطر مريح */
.about-text {
   /* line-height: 2; */
  font-size: var(--fs-base);
}
.about-text--muted {
   line-height: var(--lh-base);
   color: var(--color-text-muted);
}

/* صف الميزات مع فواصل رأسية بين العناصر */
.about-icons {
  display: flex;
  align-items: stretch;
  gap: var(--space-24);
  margin-block-start: var(--space-24);
}

.about-icon-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  text-align: center;
}
.about-icon-item + .about-icon-item {
  padding-inline-start: var(--space-24);
  border-inline-start: var(--border-width) solid color-mix(in srgb, var(--color-text-invert) 28%, transparent);
}

.about-icon-item__icon {
  font-size: var(--space-40);
  color: var(--color-primary);
  line-height: 1;
}
.about-icon-item__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.about-icon-item__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
 }
.about-icon-item__label {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  font-weight: normal;
}

.about-visual img {
  width: 100%;
  border-radius: var(--radius-lg);
  display: block;
}

/* موقعنا (Map section) — انتقل إلى css/components/map-card.css (Batch 8، مستخدَم أيضًا في branches.html) */

/* خلفيات الأقسام */
.section--dark {
  background: var(--color-surface-dark);
  color: var(--color-text-invert);
}