/* ============================================================
   بطاقات الخدمات بالصور — قسم «ما نقدمه» في الرئيسية

   ملف CSS عادي (بلا Vite): الخادم لا يملك Node لإعادة البناء.
   يُحمَّل بعد plumbkw-home على قالب الرئيسية فقط، ويستخدم رموز
   src/css/tokens.css نفسها. نسخة مطابقة في نهاية src/css/home.css
   ليستوعبها أي بناء لاحق — عندها احذف هذا الملف وتحميله من inc/assets.php.
   ============================================================ */
@layer components {
  .svc-grid {
    --col: 300px;
  }

  .svc-card {
    isolation: isolate;
  }

  .svc-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-sunken);
  }
  .svc-card__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: scale var(--dur-slow) var(--ease-out);
  }
  .svc-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(11 18 32 / .55), rgb(11 18 32 / 0) 55%);
    pointer-events: none;
  }
  .svc-card:hover .svc-card__media img { scale: 1.06; }

  /* بلا صورة بارزة: ترويسة بلون العلامة */
  .svc-card__media--empty {
    display: grid;
    place-items: center;
    background:
      radial-gradient(420px 220px at 85% 0%, rgb(255 255 255 / .18), transparent 60%),
      linear-gradient(135deg, var(--c-brand-600), var(--c-brand-900));
  }
  .svc-card__media--empty::after { display: none; }
  .svc-card__placeholder {
    display: grid;
    place-items: center;
    inline-size: 76px;
    block-size: 76px;
    border-radius: var(--r-full);
    background: rgb(255 255 255 / .14);
    color: var(--c-n-0);
    font-size: 38px;
  }

  .svc-card__price {
    position: absolute;
    z-index: 1;
    inset-block-end: var(--s-3);
    inset-inline-start: var(--s-3);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-full);
    background: rgb(255 255 255 / .94);
    color: var(--text);
    font-size: var(--t-xs);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
  }
  .svc-card__price strong { color: var(--brand); font-size: var(--t-sm); }

  .svc-card__body {
    position: relative;
    padding-block-start: var(--s-8);
  }

  /* الأيقونة تتداخل مع حافة الصورة */
  .svc-card__icon {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: var(--s-5);
    translate: 0 -50%;
    display: grid;
    place-items: center;
    inline-size: 52px;
    block-size: 52px;
    border-radius: var(--r-md);
    background: var(--brand);
    color: var(--text-on-brand);
    font-size: 24px;
    border: 3px solid var(--bg-raised);
    box-shadow: var(--shadow-brand);
    transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease);
  }
  .svc-card:hover .svc-card__icon {
    transform: rotate(-8deg) scale(1.06);
    background: var(--urgent);
  }

  .svc-card .card__title { font-size: var(--t-base); }

  .svc-card__more {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-block-start: auto;
    padding-block-start: var(--s-3);
    border-block-start: 1px solid var(--border);
    color: var(--brand);
    font-size: var(--t-sm);
    font-weight: 700;
  }
  .svc-card__more .icon { transition: translate var(--dur) var(--ease-out); }
  .svc-card:hover .svc-card__more .icon { translate: -4px 0; }

  @media (prefers-reduced-motion: reduce) {
    .svc-card__media img,
    .svc-card__icon,
    .svc-card__more .icon { transition: none; }
  }
}