/* ==========================================================================
   mtemps7 — OTHER-SERVICES (osv): "شوف كمان"
   صف كروت بصور بيتسحب بالعرض (scroll-snap) — الكارت: صورة برقم مفرّغ + اسم + سطر + سهم.
   ========================================================================== */
.mtemps7-osv-list {
  display: flex;
  gap: var(--mtemps7-sp-4);
  margin: 0;
  padding: 0 max(var(--mtemps7-gutter), calc((100vw - var(--mtemps7-container)) / 2)) var(--mtemps7-sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--mtemps7-gutter), calc((100vw - var(--mtemps7-container)) / 2));
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--mtemps7-deep-3) transparent;
}
.mtemps7-osv-list:focus-visible { outline-offset: -3px; }
.mtemps7-osv-item { flex: 0 0 clamp(15rem, 70vw, 19rem); scroll-snap-align: start; }
.mtemps7-osv-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--mtemps7-sp-3); height: 100%; padding-block-end: var(--mtemps7-sp-3); color: var(--mtemps7-on-deep); }
.mtemps7-osv-media { grid-column: 1 / -1; --mtemps7-ratio: 16 / 10; }
.mtemps7-osv-card:hover .mtemps7-osv-media > img { transform: scale(1.06); }
.mtemps7-osv-num { position: absolute; inset-block-end: var(--mtemps7-sp-2); inset-inline-end: var(--mtemps7-sp-3); color: transparent; font-size: 3rem; font-weight: var(--mtemps7-fw-bold); line-height: 1; -webkit-text-stroke: 1px var(--mtemps7-on-deep); opacity: 0.7; }
.mtemps7-osv-txt { display: grid; line-height: 1.45; }
.mtemps7-osv-txt strong { font-size: var(--mtemps7-fs-md); transition: color var(--mtemps7-dur-2); }
.mtemps7-osv-txt small { color: var(--mtemps7-on-deep-muted); font-size: var(--mtemps7-fs-sm); }
.mtemps7-osv-go { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: var(--mtemps7-hair) solid var(--mtemps7-glass-line); border-radius: 50%; transition: background-color var(--mtemps7-dur-2), color var(--mtemps7-dur-2), border-color var(--mtemps7-dur-2); }
.mtemps7-osv-card:hover .mtemps7-osv-txt strong { color: var(--mtemps7-accent); }
.mtemps7-osv-card:hover .mtemps7-osv-go { border-color: var(--mtemps7-accent); background: var(--mtemps7-accent); color: var(--mtemps7-on-accent); }