/* ==========================================================================
   mtemps7 — SERVICES (srv): "فهرس المشاهد" على خلفية كحلي بحبيبات فيلم
   • موبايل/تابلت: كارت لكل خدمة (كادر صورة فوق + صف مرقّم تحت)
   • ديسكتوب (≥1024): الـ ul بيبقى grid عمودين. الـ li والـ article بيبقوا display:contents
     فصور الخدمات كلها بتترصّ في نفس الخانة (شاشة sticky) والصف النشط بيظهّر صورته.
   ========================================================================== */
.mtemps7-srv-list { display: grid; gap: var(--mtemps7-sp-5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) and (max-width: 1023.98px) { .mtemps7-srv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mtemps7-srv-card { display: grid; height: 100%; overflow: hidden; border: var(--mtemps7-hair) solid var(--mtemps7-deep-line); border-radius: var(--mtemps7-r-md); background: var(--mtemps7-deep-2); }
.mtemps7-srv-media { position: relative; display: block; }
.mtemps7-srv-media .mtemps7-ui-media { --mtemps7-ratio: 16 / 10; border-radius: 0; }
.mtemps7-srv-media-num { position: absolute; inset-block-end: var(--mtemps7-sp-4); inset-inline-end: var(--mtemps7-sp-5); z-index: 3; color: transparent; font-size: var(--mtemps7-fs-3xl); font-weight: var(--mtemps7-fw-bold); line-height: 1; -webkit-text-stroke: 1px var(--mtemps7-on-deep); opacity: 0.8; }

/* الصف */
.mtemps7-srv-body { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--mtemps7-sp-4); padding: var(--mtemps7-sp-5); }
.mtemps7-srv-num { padding-block-start: 0.35rem; color: var(--mtemps7-accent); font-size: var(--mtemps7-fs-sm); font-weight: var(--mtemps7-fw-bold); }
.mtemps7-srv-main { display: grid; gap: var(--mtemps7-sp-1); min-width: 0; }
.mtemps7-srv-kicker { color: var(--mtemps7-on-deep-muted); font-size: var(--mtemps7-fs-2xs); font-weight: var(--mtemps7-fw-bold); letter-spacing: var(--mtemps7-tracking-label); }
.mtemps7-srv-title { color: var(--mtemps7-on-deep); font-size: var(--mtemps7-fs-xl); line-height: 1.3; }
.mtemps7-srv-link { transition: color var(--mtemps7-dur-2); }
/* الصف كله قابل للضغط */
.mtemps7-srv-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mtemps7-srv-link:focus-visible { outline: none; }
.mtemps7-srv-body:has(.mtemps7-srv-link:focus-visible) { outline: 3px solid var(--mtemps7-accent); outline-offset: -3px; }
.mtemps7-srv-text { color: var(--mtemps7-on-deep-muted); font-size: var(--mtemps7-fs-sm); line-height: 1.75; }
.mtemps7-srv-go { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: var(--mtemps7-hair) solid var(--mtemps7-glass-line); border-radius: 50%; color: var(--mtemps7-on-deep); transition: background-color var(--mtemps7-dur-3), color var(--mtemps7-dur-3), border-color var(--mtemps7-dur-3), transform var(--mtemps7-dur-3) var(--mtemps7-ease-out); }
.mtemps7-srv-item:hover .mtemps7-srv-go, .mtemps7-srv-item.mtemps7-is-active .mtemps7-srv-go { border-color: var(--mtemps7-accent); background: var(--mtemps7-accent); color: var(--mtemps7-on-accent); }
.mtemps7-srv-item:hover .mtemps7-srv-title { color: var(--mtemps7-accent); }

@media (min-width: 1024px) {
  .mtemps7-srv-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: repeat(6, auto); column-gap: clamp(2.5rem, 5vw, 5rem); row-gap: 0; border-block-start: var(--mtemps7-hair) solid var(--mtemps7-deep-line); }
  .mtemps7-srv-item, .mtemps7-srv-card { display: contents; }

  /* الشاشة: كل الصور فوق بعض في العمود الأول، sticky */
  .mtemps7-srv-media { grid-column: 1; grid-row: 1 / -1; align-self: start; position: sticky; inset-block-start: calc(var(--mtemps7-hdr-h-sm) + var(--mtemps7-sp-6)); margin-block-start: var(--mtemps7-sp-6); overflow: hidden; border-radius: var(--mtemps7-r-md); opacity: 0; visibility: hidden; transform: scale(1.04); transition: opacity var(--mtemps7-dur-4) var(--mtemps7-ease-out), transform var(--mtemps7-dur-5) var(--mtemps7-ease-out), visibility 0s linear var(--mtemps7-dur-4); }
  .mtemps7-srv-media .mtemps7-ui-media { --mtemps7-ratio: 4 / 3.4; }
  .mtemps7-srv-item.mtemps7-is-active .mtemps7-srv-media { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .mtemps7-srv-media-num { font-size: var(--mtemps7-fs-giant); opacity: 0.55; }

  .mtemps7-srv-body { grid-column: 2; padding: var(--mtemps7-sp-6) 0; border-block-end: var(--mtemps7-hair) solid var(--mtemps7-deep-line); transition: padding var(--mtemps7-dur-4) var(--mtemps7-ease-film); }
  .mtemps7-srv-body::before { content: ""; position: absolute; inset-block-end: -1px; inset-inline: 0; height: 1px; background: var(--mtemps7-accent); transform: scaleX(0); transform-origin: var(--mtemps7-x-start); transition: transform var(--mtemps7-dur-4) var(--mtemps7-ease-film); }
  .mtemps7-srv-item.mtemps7-is-active .mtemps7-srv-body::before { transform: scaleX(1); }
  .mtemps7-srv-item.mtemps7-is-active .mtemps7-srv-body { padding-inline-start: var(--mtemps7-sp-4); }
  .mtemps7-srv-title { font-size: var(--mtemps7-fs-2xl); }
  .mtemps7-srv-text { max-height: 0; overflow: hidden; opacity: 0; transition: max-height var(--mtemps7-dur-4) var(--mtemps7-ease-film), opacity var(--mtemps7-dur-3); }
  .mtemps7-srv-item.mtemps7-is-active .mtemps7-srv-text { max-height: 6rem; opacity: 1; }
  .mtemps7-srv-item:not(.mtemps7-is-active) .mtemps7-srv-title { color: color-mix(in srgb, var(--mtemps7-on-deep) 78%, var(--mtemps7-deep)); }
  .mtemps7-srv-item:not(.mtemps7-is-active):hover .mtemps7-srv-title { color: var(--mtemps7-accent); }
}
@media (prefers-reduced-motion: reduce) { .mtemps7-srv-media { transform: none !important; } }