/* ==========================================================================
   mtemps7 — ABOUT (abo): "ورا الكواليس"
   كادر صورة كبير بزوايا كهرماني + ترجمة تحت زي الأفلام، وعمود جنبه:
   سنة البداية بخط ضخم مفرّغ ← قيم مرقّمة بخطوط شعرة ← أرقام.
   ========================================================================== */
.mtemps7-abo-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 960px) { .mtemps7-abo-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }

/* الكادر */
.mtemps7-abo-shot { position: relative; margin: 0; }
.mtemps7-abo-shot .mtemps7-ui-media { --mtemps7-ratio: 3 / 2; border-radius: var(--mtemps7-r-md); }
.mtemps7-abo-shot .mtemps7-ui-corners { --mtemps7-corners-in: var(--mtemps7-sp-4); }
.mtemps7-abo-shot:hover .mtemps7-ui-corners { --mtemps7-corners-in: var(--mtemps7-sp-3); }
/* الترجمة: شريط أسود نص شفاف في نص الكادر تحت */
.mtemps7-abo-sub { position: absolute; inset-block-end: clamp(1.25rem, 4vw, 2.25rem); inset-inline: 0; z-index: 3; display: flex; justify-content: center; padding-inline: var(--mtemps7-sp-6); pointer-events: none; }
.mtemps7-abo-sub span { padding: 0.25rem 0.85rem; border-radius: var(--mtemps7-r-xs); background: color-mix(in srgb, var(--mtemps7-ink) 78%, transparent); color: var(--mtemps7-on-deep); font-size: var(--mtemps7-fs-sm); font-weight: var(--mtemps7-fw-semibold); text-align: center; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* العمود الجانبي */
.mtemps7-abo-side { display: grid; gap: var(--mtemps7-sp-6); }
.mtemps7-abo-since { display: flex; align-items: flex-end; gap: var(--mtemps7-sp-4); line-height: 0.85; }
.mtemps7-abo-since strong { color: transparent; font-size: clamp(4.5rem, 3rem + 6vw, 8rem); font-weight: var(--mtemps7-fw-bold); letter-spacing: -0.02em; -webkit-text-stroke: 1.5px var(--mtemps7-deep); }
.mtemps7-abo-since-label { padding-block-end: 0.6rem; color: var(--mtemps7-muted); font-size: var(--mtemps7-fs-sm); font-weight: var(--mtemps7-fw-bold); letter-spacing: var(--mtemps7-tracking-label); }

.mtemps7-abo-values { counter-reset: mtemps7-abo; display: grid; margin: 0; padding: 0; list-style: none; border-block-start: var(--mtemps7-hair) solid var(--mtemps7-line-2); }
.mtemps7-abo-values li { counter-increment: mtemps7-abo; position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--mtemps7-sp-4); padding-block: var(--mtemps7-sp-4); border-block-end: var(--mtemps7-hair) solid var(--mtemps7-line-2); }
.mtemps7-abo-values li::after { content: counter(mtemps7-abo, decimal-leading-zero); color: var(--mtemps7-muted); font-size: var(--mtemps7-fs-xs); font-weight: var(--mtemps7-fw-bold); font-variant-numeric: tabular-nums; }
.mtemps7-abo-values li::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-abo-values li:hover::before { transform: scaleX(1); }
.mtemps7-abo-ico { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--mtemps7-deep); color: var(--mtemps7-accent); font-size: 1rem; }
.mtemps7-abo-values strong { display: block; font-size: var(--mtemps7-fs-md); line-height: 1.4; }
.mtemps7-abo-values small { color: var(--mtemps7-muted); font-size: var(--mtemps7-fs-sm); }

.mtemps7-abo-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-radius: var(--mtemps7-r-md); background: var(--mtemps7-deep); color: var(--mtemps7-on-deep); }
.mtemps7-abo-stats > div { display: grid; padding: var(--mtemps7-sp-4) var(--mtemps7-sp-3); text-align: center; }
.mtemps7-abo-stats > div + div { border-inline-start: var(--mtemps7-hair) solid var(--mtemps7-deep-line); }
.mtemps7-abo-stats dt { color: var(--mtemps7-on-deep-muted); font-size: var(--mtemps7-fs-xs); }
.mtemps7-abo-stats dd { order: -1; margin: 0; color: var(--mtemps7-accent); font-size: var(--mtemps7-fs-2xl); font-weight: var(--mtemps7-fw-bold); line-height: 1.2; font-variant-numeric: tabular-nums; }
.mtemps7-abo-stats sup { font-size: 0.55em; }