/* Nasaq Portfolio — صفحة سابقة الأعمال. يرث ألوان القالب ويعمل بدونه. */
.nqp {
  --a: var(--accent, #F2B53A);
  --on-a: var(--on-accent, #0B1D2A);
  --nb: var(--bg, #0B1D2A);
  --ni: var(--ink, #F5F1E8);
  --dim: var(--ink-dim, #C9D6DD);
  --f: 1; --gut: clamp(20px, 5vw, 64px);
  position: relative; isolation: isolate; overflow: hidden; color: var(--ni); line-height: 1.6;
  padding: clamp(56px, 9vw, 110px) var(--gut) clamp(64px, 9vw, 120px);
  background:
    radial-gradient(55% 45% at 85% 0%, color-mix(in srgb, var(--a) 14%, transparent), transparent 70%),
    radial-gradient(45% 40% at 5% 100%, color-mix(in srgb, #5EE6C0 9%, transparent), transparent 70%),
    linear-gradient(180deg, #0F2535, var(--nb));
}
.nqp[dir="ltr"] { --f: -1; }
.nqp *, .nqp *::before, .nqp *::after { box-sizing: border-box; }
.nqp > * { max-width: 1200px; margin-inline: auto; }
.nqp button { font: inherit; color: inherit; cursor: pointer; }

.nqp-head { margin-block-end: clamp(32px, 5vw, 56px); }
.nqp-eyebrow { margin: 0 0 14px; display: flex; align-items: center; gap: 12px; color: var(--a); font-weight: 800; font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; }
.nqp-eyebrow::before { content: ""; width: 38px; height: 2px; background: var(--a); }
.nqp-title { margin: 0; font-family: Cairo, inherit; font-weight: 800; font-size: clamp(2.3rem, 6.4vw, 4.8rem); line-height: 1.12; text-wrap: balance; }
.nqp-lead { margin: 18px 0 0; max-width: 54ch; color: var(--dim); font-size: clamp(1.02rem, 1.7vw, 1.25rem); }

/* التصفية */
.nqp-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: clamp(26px, 4vw, 40px); }
.nqp-f { padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.26); background: transparent; font-weight: 700; font-size: .95rem; transition: background .2s, color .2s, border-color .2s; }
.nqp-f small { opacity: .7; margin-inline-start: 4px; }
.nqp-f:hover { border-color: var(--a); }
.nqp-f.is-on { background: var(--a); color: var(--on-a); border-color: var(--a); }
.nqp-f:focus-visible, .nqp-open:focus-visible, .nqp-cta a:focus-visible { outline: 3px solid var(--ni); outline-offset: 3px; }

/* الشبكة */
.nqp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: clamp(26px, 3.4vw, 42px); }
.nqp-card { position: relative; display: grid; gap: 20px; align-content: start; animation: nqp-in .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(min(var(--i), 8) * .08s + .1s); }
.nqp-card[hidden] { display: none; }
@keyframes nqp-in { from { opacity: 0; transform: translateY(34px); } }

.nqp-shot { position: relative; border-radius: 16px; background: #0B1D2A; box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.1); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.nqp-shot::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 2px solid var(--a); border-radius: 16px; transform: translate(calc(var(--f) * -10px), 10px); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.nqp-card:hover .nqp-shot { transform: translateY(-4px); }
.nqp-card:hover .nqp-shot::before { transform: translate(calc(var(--f) * -16px), 16px); }
.nqp-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #14303F; border-radius: 16px 16px 0 0; }
.nqp-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.25); }
.nqp-bar span { margin-inline-start: 10px; flex: 1; max-width: 70%; padding: 3px 12px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--dim); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nqp-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-radius: 0 0 16px 16px; }

.nqp-info { display: grid; gap: 10px; padding-inline-start: 4px; }
.nqp-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.nqp-chip { padding: 5px 14px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--a); border: 1px solid color-mix(in srgb, var(--a) 55%, transparent); background: color-mix(in srgb, var(--a) 10%, transparent); }
.nqp-demo { padding: 4px 12px; border-radius: 8px; border: 1px dashed var(--dim); color: var(--dim); font-size: .78rem; }
.nqp-name { margin: 0; font-family: Cairo, inherit; font-weight: 800; font-size: 1.5rem; line-height: 1.3; }
.nqp-result { margin: 0; color: var(--dim); padding-inline-start: 14px; border-inline-start: 3px solid var(--a); max-width: 46ch; }
.nqp-result b { color: var(--ni); }
.nqp-metric { margin: 0; display: flex; align-items: baseline; gap: 12px; }
.nqp-metric b { font-family: Cairo, inherit; font-size: 2rem; font-weight: 800; color: var(--a); line-height: 1; }
.nqp-metric span { color: var(--dim); font-size: .95rem; }
.nqp-open { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 10px 0; background: none; border: 0; color: var(--ni); font-weight: 800; text-decoration: none; border-block-end: 2px solid var(--a); transition: gap .25s, color .25s; }
.nqp-open:hover { gap: 16px; color: var(--a); }
.nqp-open::after { content: ""; position: absolute; inset: 0; }   /* كامل البطاقة قابلة للنقر */

/* أول عمل: بطاقة كبيرة بعرض الصف */
.nqp-card.is-lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 6vw, 80px); align-items: center; padding-block-end: 12px; }
.nqp-card.is-lead .nqp-name { font-size: clamp(1.9rem, 4vw, 3rem); }
.nqp-card.is-lead .nqp-result { font-size: 1.12rem; }

.nqp-empty { margin: 0; padding: 36px; text-align: center; border: 1px dashed rgba(255,255,255,.25); border-radius: 20px; color: var(--dim); font-size: 1.15rem; }
.nqp-admin { margin: 14px 0 0; text-align: center; color: var(--a); font-size: .9rem; }

.nqp-cta { margin-block-start: clamp(56px, 8vw, 96px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: clamp(24px, 4vw, 40px); border-radius: 26px; border: 1px solid color-mix(in srgb, var(--a) 45%, transparent); background: color-mix(in srgb, var(--a) 8%, transparent); }
.nqp-cta p { margin: 0; font-family: Cairo, inherit; font-weight: 800; font-size: clamp(1.3rem, 3vw, 2rem); }
.nqp-cta a { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; background: var(--a); color: var(--on-a); font-weight: 800; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.nqp-cta a:hover { transform: translateY(-2px); box-shadow: 0 12px 30px color-mix(in srgb, var(--a) 40%, transparent); }
/* السهم الأصلي يشير لليسار = «للأمام» في العربية */
.nqp[dir="ltr"] .nqw-arrow.is-fwd { transform: rotate(180deg); }

@media (max-width: 860px) {
  .nqp-card.is-lead { grid-template-columns: 1fr; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .nqp-card { animation: none; }
  .nqp-shot, .nqp-shot::before { transition: none; }
}