/* ==========================================================================
   promo-banner-card.css — بطاقة بانر ترويجي ثابتة (Static promo banner)
   شركة السرعة المطلقة | كل القيم من tokens.css — RTL.
   صورة كاملة بنص مدمج من التصميم — لا نص HTML فوقها.
   ========================================================================== */

.promo-banner-card {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.promo-banner-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.promo-banner-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background-color: var(--color-bg-alt);
  display: block;
}

/* ---- سكشن "عرض قوي" — عنوان ورابط "عرض الكل" بنمط مخصّص (Figma) ---- */
.promo-strip-section .section-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  text-transform: uppercase;
}

.promo-strip-section .section-view-all {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 26px;
  color: var(--color-gradient-end);
}

/* ---- سلايدر "عرض قوي" المضغوط (Swiper) ---- */
.promo-strip-swiper .swiper-slide {
  height: auto; /* البطاقة تملأ ارتفاع الشريحة */
}

/* نقاط التنقّل أسفل السلايدر — تُخفى تلقائيًا (swiper-pagination-lock) عند عدم الحاجة للسحب */
.promo-strip-swiper__pagination {
  position: static;
  width: auto;
  text-align: center;
  margin-top: var(--space-16);
}

.promo-strip-swiper__pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 var(--space-4) !important;
  background: var(--color-border);
  opacity: 1;
  transition: width 0.25s ease, background-color 0.25s ease;
}

.promo-strip-swiper__pagination .swiper-pagination-bullet-active {
  width: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}
/* ---- الجوال: البانر بعرض الشاشة الكامل ----
   طلب العميل: «يكون ظاهر 1 كامل فى كل سلايد ولو نقدر نخليه بعرض الصفحة
   الكامل ماشي». الشقّ الأول (slidesPerView: 1) في promo-strip-slider.js،
   وهذا هو الشقّ الثاني: السلايدر وحده يخرج من حشوة .container بهامش سالب
   بمقدارها — مشتق من --container-pad نفسه فلا ينفصل عنه لو تغيّر التوكن،
   نفس أسلوب .tire-search-banner في pages/home.css. العنوان ورابط «عرض الكل»
   يبقيان داخل الحاوية، فالمحاذاة لا تنكسر.

   وتُلغى الحواف الدائرية والظلّ: حافة مدوّرة ملاصقة لحرف الشاشة تُقرأ كخطأ
   لا كتصميم، والظلّ يُقصّ عند الحرف أصلًا فلا يبقى منه إلا الأعلى والأسفل. */
@media (max-width: 767px) {
  .promo-strip-swiper {
    margin-inline: calc(var(--container-pad) * -1);
  }

  .promo-strip-swiper .promo-banner-card {
    border-radius: 0;
    box-shadow: none;
  }

  .promo-strip-swiper .promo-banner-card:hover {
    box-shadow: none;
    transform: none;
  }
}