/* ==========================================================================
   mtemps6 — SERVICES (srv)  كل خدمة = صورة طالعة من كرتونة مفتوحة:
   الغطايين مفتوحين لبرّه ورا الصورة، والوش الأمامي (كرافت + شريط + ملصق رقم)
   قدّامها. مع الـ hover/focus الصورة بتطلع لفوق وتتعدل والغطايين بيترفرفوا.
   الـ reveal على الـ li (الغلاف) والحركة كلها على الكارت جوّه.
   ========================================================================== */
.mtemps6-srv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: clamp(2rem, 4vw, 2.75rem) var(--mtemps6-gap); margin: 0; padding: 0; list-style: none; }
.mtemps6-srv-item { display: flex; }
.mtemps6-srv-card { position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr; width: 100%; }

/* ---------- الكرتونة + الصورة ---------- */
.mtemps6-srv-visual { position: relative; aspect-ratio: 5 / 4; margin-inline: 0.4rem; }
.mtemps6-srv-photo {
  --mtemps6-ratio: 4 / 3;
  position: absolute;
  inset-inline: 10%;
  inset-block-start: 4%;
  z-index: 1;
  border: 6px solid var(--mtemps6-surface);
  border-radius: var(--mtemps6-r-sm);
  box-shadow: var(--mtemps6-shadow-lift);
  transform: rotate(var(--mtemps6-srv-r, -3deg));
  transition: transform var(--mtemps6-dur-4) var(--mtemps6-ease-spring);
}
.mtemps6-srv-item:nth-child(even) .mtemps6-srv-photo { --mtemps6-srv-r: 3deg; }
.mtemps6-srv-front { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; height: 46%; padding: var(--mtemps6-sp-3); border-radius: 4px 4px var(--mtemps6-r-sm) var(--mtemps6-r-sm); background-color: var(--mtemps6-cardboard); background-image: var(--mtemps6-grain), linear-gradient(180deg, var(--mtemps6-cardboard-2) 0 7px, transparent 7px); box-shadow: inset 0 -10px 0 color-mix(in srgb, var(--mtemps6-cardboard-2) 40%, transparent), var(--mtemps6-shadow-box); }
.mtemps6-srv-tape { position: absolute; inset-block: 0; inset-inline-start: 50%; width: 2.2rem; margin-inline-start: -1.1rem; background: var(--mtemps6-tape); }
.mtemps6-srv-sticker { position: relative; z-index: 1; display: grid; gap: 2px; padding: 0.3rem 0.55rem; border-radius: 3px; background: var(--mtemps6-paper); color: var(--mtemps6-text); font-size: var(--mtemps6-fs-2xs); line-height: 1.3; transform: rotate(-3deg); }
.mtemps6-srv-sticker .mtemps6-ui-tag-code { width: 2.6rem; height: 0.75rem; }
.mtemps6-srv-up { position: relative; z-index: 1; color: var(--mtemps6-deep); font-size: 0.85rem; opacity: 0.55; }
/* الغطايين مفتوحين لبرّه (فوق الوش الأمامي، ورا الصورة) */
.mtemps6-srv-flap { position: absolute; inset-block-end: 46%; z-index: 0; width: 46%; height: 1.4rem; margin-block-end: -2px; background: var(--mtemps6-cardboard-2); border-radius: 4px 4px 0 0; transition: transform var(--mtemps6-dur-4) var(--mtemps6-ease-spring); }
.mtemps6-srv-flap--a { inset-inline-start: 0; transform-origin: var(--mtemps6-x-start) 100%; transform: rotate(calc(var(--mtemps6-dir) * -28deg)); }
.mtemps6-srv-flap--b { inset-inline-end: 0; transform-origin: var(--mtemps6-x-end) 100%; transform: rotate(calc(var(--mtemps6-dir) * 28deg)); }
/* hover / focus: الصورة بتطلع والغطايين بيفتحوا أكتر */
.mtemps6-srv-card:hover .mtemps6-srv-photo, .mtemps6-srv-card:focus-within .mtemps6-srv-photo { transform: translateY(-12%) rotate(0deg) scale(1.03); }
.mtemps6-srv-card:hover .mtemps6-srv-photo > img { transform: scale(1.06); }
.mtemps6-srv-card:hover .mtemps6-srv-flap--a, .mtemps6-srv-card:focus-within .mtemps6-srv-flap--a { transform: rotate(calc(var(--mtemps6-dir) * -42deg)); }
.mtemps6-srv-card:hover .mtemps6-srv-flap--b, .mtemps6-srv-card:focus-within .mtemps6-srv-flap--b { transform: rotate(calc(var(--mtemps6-dir) * 42deg)); }

/* ---------- الجسم ---------- */
.mtemps6-srv-body { position: relative; display: grid; align-content: start; gap: var(--mtemps6-sp-2); margin-inline: 1rem; padding: var(--mtemps6-pad-card); border: var(--mtemps6-hair) solid var(--mtemps6-line-2); border-block-start: 0; border-radius: 0 0 var(--mtemps6-r-md) var(--mtemps6-r-md); background: var(--mtemps6-surface); overflow: hidden; }
.mtemps6-srv-kicker { justify-self: start; padding: 0.1rem 0.6rem; border-radius: var(--mtemps6-r-xs); background: var(--mtemps6-bg-2); color: var(--mtemps6-primary); font-size: var(--mtemps6-fs-xs); font-weight: var(--mtemps6-fw-bold); }
.mtemps6-srv-title { font-size: var(--mtemps6-fs-xl); }
.mtemps6-srv-text { color: var(--mtemps6-muted); }
.mtemps6-srv-link { justify-self: start; margin-block-start: var(--mtemps6-sp-2); }
.mtemps6-srv-link::before { content: ""; position: absolute; inset: -100vmax; z-index: 0; }
.mtemps6-srv-card:has(.mtemps6-srv-link:focus-visible) { outline: 3px solid var(--mtemps6-primary); outline-offset: 6px; border-radius: var(--mtemps6-r-md); }
.mtemps6-srv-link:focus-visible { outline: none; }