/* =========================================================
   T-146 · المرحلة 2 · د: معرض «تصوّرات» بنظام الشبكة
   يُحمَّل بعد grid/grid.css ولا يعدّله. صفحات التصوّرات نفسها (safh/ghada/mirfaq/ratq) بهويات عملائها ولا تُمسّ
   اللقطات حقيقية من الصفحات الأربع (tools/d_covers.py): المكتب من قسم الواجهة الحية، والجوال من أولها
   ========================================================= */

.bar__nav a[aria-current="page"] { color: var(--t1); background: rgba(255, 255, 255, .06) }

/* ---------- الهيرو ---------- */
.cx-hero { padding-block: clamp(24px, 4vh, 48px) 0 }
.cx-hero__body { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr auto; min-block-size: calc(100svh - var(--bar) - 150px) }
.cx-hero__txt { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(24px, 3.4vw, 56px); gap: 0 }
.cx-hero__txt h1 { font-family: var(--ard); font-weight: 600; font-size: clamp(34px, 4.6vw, 72px); line-height: 1.45; color: var(--t1); margin-block: 18px 22px }
.cx-hero__txt h1 .hl { white-space: nowrap }
.cx-hero__lede { font-size: 16px; color: var(--t2); max-inline-size: 48ch }
.cx-hero__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 30px }
.cx-btn-ghost { border-color: var(--line) }
.cx-hero__obj { grid-column: 2; grid-row: 1 / 3; position: relative; align-items: stretch; min-block-size: 420px }
.cx-hero__obj .tick { z-index: 1 }
.cx-idx { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(4, 1fr) }
.cx-idx a { flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px 20px; min-block-size: 96px; color: var(--t1) }
.cx-idx b { font-size: 11px; color: var(--t4); font-weight: 600; letter-spacing: .04em }
.cx-idx span { font-family: var(--ard); font-weight: 600; font-size: 20px; line-height: 1.5 }
.cx-idx small { font-size: 13px; color: var(--t3) }
.cx-note { gap: 12px; padding-inline: 22px; font-size: 13px; color: var(--t3); min-block-size: 52px }
.cx-note i { inline-size: 7px; block-size: 7px; background: var(--w); flex: none }
@media (hover: hover) and (pointer: fine) {
  .cx-idx a:hover { background: rgba(255, 255, 255, .05) }
  .cx-btn-ghost:hover { background: var(--w); color: var(--ink) }
}

/* ---------- المعرض ---------- */
.cx-item { margin-block-end: clamp(56px, 9vh, 104px) }
.cx-item:last-child { margin-block-end: 0 }
.cx-item__body { display: grid; grid-template-columns: 2.1fr .78fr 1.25fr; min-block-size: clamp(380px, 46vh, 480px) }
.cx-item--alt .cx-info { order: -1 }
.cx-shot { position: relative; overflow: hidden; align-items: center; justify-content: center; padding: clamp(14px, 1.6vw, 24px); background: rgba(255, 255, 255, .02) }
.cx-shot img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top center; transition: transform .4s var(--ease) }
.cx-shot--d img { aspect-ratio: 864 / 540; block-size: auto }
.cx-shot--m img { inline-size: auto; block-size: 100%; max-block-size: 440px; max-inline-size: 100%; aspect-ratio: 468 / 1013; object-fit: cover; box-shadow: 0 0 0 1px var(--line-2) }
.cx-info { flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: clamp(22px, 2.4vw, 36px) }
.cx-info h3 { font-family: var(--ard); font-weight: 600; font-size: clamp(40px, 4.4vw, 68px); line-height: 1.35; color: var(--t1); margin-block-start: 14px }
.cx-info__sub { font-size: 14px; color: var(--t3) }
.cx-info__line { font-size: 16px; color: var(--t2); margin-block-start: 18px; max-inline-size: 36ch }
.cx-info .facts { margin-block-start: auto; padding-block-start: 24px }
.cx-item .fbar__name { justify-content: flex-start; padding-inline: 20px; font-size: 13px; color: var(--t3) }
@media (hover: hover) and (pointer: fine) {
  .cx-item:hover .cx-shot img { transform: scale(1.015) }
}

/* ---------- المراحل ---------- */
.cx-ph__body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(170px, auto) }
.cx-ph__obj { grid-row: span 2; position: relative; align-items: stretch; min-block-size: 380px }

/* ---------- التالي والذيل ---------- */
.cx-bye { margin-block-start: clamp(72px, 11vh, 128px); padding-block-end: 40px }
.cx-bye__body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(110px, auto) }
.cx-bye__obj { grid-row: span 2; position: relative; align-items: stretch; min-block-size: 360px }
.cx-bye__fine { grid-column: 2 / 4; padding: 18px 24px; font-size: 13px; line-height: 1.8; color: var(--t3) }
.cx-bye .legal .cell:nth-child(odd) { grid-column: 1 / 2 }
.cx-bye .legal .cell:nth-child(even) { grid-column: 2 / 4 }

/* ---------- تابلت ---------- */
@media (max-width: 1100px) {
  .bar__nav .cell { padding-inline: 14px }
  .cx-hero__body { grid-template-columns: 1fr 1fr; min-block-size: 0 }
  .cx-hero__txt { grid-column: 1 / -1 }
  .cx-hero__obj { grid-column: 1 / -1; grid-row: 2; min-block-size: 360px }
  .cx-idx { grid-column: 1 / -1; grid-row: 3 }
  .cx-item__body { grid-template-columns: 1.7fr 1fr }
  .cx-info, .cx-item--alt .cx-info { grid-column: 1 / -1; order: 0 }
  .cx-ph__body, .cx-bye__body { grid-template-columns: 1fr 1fr }
  .cx-ph__obj, .cx-bye__obj { grid-column: 1 / -1; grid-row: auto; min-block-size: 320px }
  .cx-bye__fine { grid-column: 1 / -1 }
  .cx-bye .legal .cell:nth-child(n) { grid-column: auto }
}

/* ---------- جوال ---------- */
@media (max-width: 768px) {
  .cx-hero__txt { padding: 22px 20px }
  .cx-hero__txt h1 { font-size: clamp(32px, 9vw, 40px) }
  .cx-hero__acts .btn { flex: 1 1 100%; justify-content: space-between }
  .cx-hero__obj { min-block-size: 0; aspect-ratio: 1 / .9 }
  .cx-idx { grid-template-columns: 1fr 1fr }
  .cx-idx a { min-block-size: 80px; padding: 14px 18px }
  .cx-note { align-items: flex-start; padding-block: 14px; line-height: 1.7 }
  .cx-note i { margin-block-start: 8px }
  .cx-item__body { grid-template-columns: 1fr .62fr }
  .cx-shot { padding: 10px }
  .cx-shot--m img { max-block-size: 280px }
  .cx-info { padding: 20px }
  .cx-info .facts { padding-block-start: 18px }
  .cx-item .fbar__name { display: none }
  .cx-item .fbar__open { flex: 1; justify-content: space-between }
  .cx-ph__body, .cx-bye__body { grid-template-columns: 1fr }
  .cx-ph__obj, .cx-bye__obj { min-block-size: 0; aspect-ratio: 1 / .8 }
  .cx-bye__fine { padding: 16px 20px }
}

@media (prefers-reduced-motion: reduce) {
  .cx-shot img { transition: none }
  .cx-item:hover .cx-shot img { transform: none }
}
/* البديل: المعلومات أولاً (يمين)، ثم لقطة المكتب، ثم الجوال على الطرف الآخر */
@media (min-width: 1101px) {
  .cx-item--alt .cx-item__body { grid-template-columns: 1.25fr 2.1fr .78fr }
}
/* السكك القصيرة بين التصوّرات */
.cx-item { margin-block-end: 0 }
.cx-rail { block-size: clamp(160px, 22vh, 220px) }
@media (max-width: 768px) { .cx-rail { block-size: 150px } }