/* ==========================================================================
   service-showcase.css — قسم "خدمتنا" (Services showcase) — Figma 52:2465
   شركة السرعة المطلقة | كل القيم من tokens.css — RTL.
   عنوان مركزي + ثلاث بطاقات: صورة علوية + شارة أيقونة متراكبة + عنوان + وصف.
   WC-NOTE: ثابت (static) — محتوى تعريفي للخدمات.
   ========================================================================== */

/* ---- ترويسة القسم (مركزية) ---- */
.services-showcase__head {
  text-align: center;
  margin-block-end: var(--space-48);
}
.services-showcase__eyebrow {
  display: block;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  margin-block-end: var(--space-4);
}
/* العنوان يعيد استخدام .section-title — نلغي هامشه لأن الترويسة تتكفّل بالتباعد */
.services-showcase__head .section-title {
  margin-bottom: 0;
}

/* ---- الشبكة: عمود على الجوال، ثلاثة أعمدة على سطح المكتب ---- */
.services-showcase__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
}
@media (min-width: 768px) {
  .services-showcase__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- البطاقة ---- */
.service-showcase-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* الصورة العلوية + الشارة المتراكبة */
.service-showcase-card__media {
  position: relative;
}
.service-showcase-card__img {
  width: 100%;
  aspect-ratio: 418 / 372;
  object-fit: cover;
  display: block;
}

/* شارة الأيقونة — مركزية أفقيًا، تتراكب على حافة الصورة السفلية.
   inset-inline:0 + margin-inline:auto = توسيط منطقي مستقل عن الاتجاه. */
.service-showcase-card__badge {
  position: absolute;
  inset-inline: 0;
  bottom: calc(-1 * var(--space-40));
  margin-inline: auto;
  width: 88px;
  height: 88px;
}
.service-showcase-card__badge img {
  width: 100%;
  height: 100%;
  display: block;
}

/* المتن — نص مركزي، مع حشوة علوية تفسح مجالًا للشارة المتراكبة */
.service-showcase-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: calc(var(--space-40) + var(--space-16)) var(--space-24) var(--space-32);
  text-align: center;
}
.service-showcase-card__title {
  font-size: var(--fs-section-cta);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
.service-showcase-card__text {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}