/* ══════════════════════════════════════════════════════════
   cases.css — قسم «شغلي / الحالات»
   بيبني فوق توكنز style.css المقفولة. مفيش لون خام هنا.
   ══════════════════════════════════════════════════════════ */

/* ── شيل الصفحة ───────────────────────────────────────── */
.cs-shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

.cs-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line);
}
.cs-head__brand {
  font-family: var(--f-display); font-size: 1.15rem;
  color: var(--coffee); text-decoration: none;
}
.cs-head__nav { display: flex; gap: 1.1rem; font-size: .85rem; }
.cs-head__nav a { color: var(--ink-soft); text-decoration: none; transition: color .2s; }
.cs-head__nav a:hover { color: var(--brass-ink); }
.cs-head__nav a[aria-current] { color: var(--brass-ink); font-weight: 600; }
.cs-head__cta {
  background: var(--coffee); color: var(--cream); text-decoration: none;
  font-size: .8rem; padding: .45rem 1rem; border-radius: var(--r-pill);
  white-space: nowrap; transition: background .2s;
}
.cs-head__cta:hover { background: var(--espresso); }
@media (max-width: 700px) { .cs-head__nav { display: none; } }

/* ── فتافيت الخبز ──────────────────────────────────────── */
.cs-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  font-size: .8rem; color: var(--ink-soft); margin: 1.4rem 0 1rem;
}
.cs-crumbs a { color: var(--brass-ink); text-decoration: none; }
.cs-crumbs a:hover { text-decoration: underline; }
.cs-crumbs i { opacity: .45; font-style: normal; }

/* ── ترويسة ────────────────────────────────────────────── */
.cs-eyebrow {
  font-size: .74rem; letter-spacing: .14em; font-weight: 600;
  color: var(--brass-ink); margin-bottom: .5rem;
}
.cs-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.9rem, 6vw, 3.2rem); line-height: 1.45;
  color: var(--coffee); text-wrap: balance; margin: 0;
}
.cs-lede {
  font-size: 1.02rem; color: var(--ink-soft); line-height: 1.9;
  max-width: 58ch; margin: .9rem 0 0;
}
.cs-rule { height: 1px; background: var(--line); border: 0; margin: clamp(1.8rem, 5vw, 3rem) 0; }

/* ── شارات ─────────────────────────────────────────────── */
.cs-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.cs-chip {
  font-size: .72rem; padding: .24rem .68rem; border-radius: var(--r-pill);
  font-weight: 500; white-space: nowrap; border: 1px solid transparent;
}
.cs-chip--done { background: rgba(23,73,74,.1);   color: var(--sea);       border-color: rgba(23,73,74,.24); }
.cs-chip--soon { background: rgba(74,46,28,.055); color: var(--ink-soft);  border-color: var(--line); }
.cs-chip--year { background: rgba(196,149,46,.14);color: var(--brass-ink); border-color: rgba(196,149,46,.32); }

/* ── جريد الحالات ──────────────────────────────────────── */
.cs-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.2rem;
}
.cs-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
  text-decoration: none; color: inherit;
  transition: transform .22s ease, box-shadow .22s ease;
}
.cs-card:hover, .cs-card:focus-visible { transform: translateY(-3px); box-shadow: var(--sh-3); }
.cs-card:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
/* 3/4 مش 16/10 — الأصول بورتريه، والقص العريض كان بياكل الرؤوس */
.cs-card__art { aspect-ratio: 3/4; overflow: hidden; background: var(--cream-deep); }
.cs-card__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
.cs-card__b { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.cs-card__t { font-family: var(--f-display); font-size: 1.15rem; line-height: 1.5; color: var(--coffee); margin: 0; }
.cs-card__m { font-size: .82rem; color: var(--ink-soft); line-height: 1.7; margin: 0; flex: 1; }

/* ── الأدوار (شغل عدّى على إيدي) ───────────────────────── */
.cs-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.cs-role {
  background: var(--cream-deep); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1.1rem 1.2rem;
}
.cs-role__where { font-size: .74rem; color: var(--brass-ink); font-weight: 600; margin-bottom: .35rem; }
.cs-role__t { font-family: var(--f-display); font-size: 1.05rem; color: var(--coffee); margin: 0 0 .2rem; }
.cs-role__org { font-size: .78rem; color: var(--ink-soft); opacity: .85; margin: 0 0 .5rem; }
.cs-role__d { font-size: .84rem; color: var(--ink-soft); line-height: 1.8; margin: 0; }

/* ── تابات الخطوات ─────────────────────────────────────── */
.cs-tabs {
  display: flex; gap: .2rem; border-bottom: 1px solid var(--line);
  margin: 1.6rem 0 0; overflow-x: auto; scrollbar-width: thin;
}
.cs-tab {
  display: flex; align-items: center; gap: .5rem; white-space: nowrap;
  font-family: var(--f-body); font-size: .88rem; color: var(--ink-soft);
  padding: .7rem 1.1rem; text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .2s, border-color .2s;
}
.cs-tab:hover { color: var(--coffee); }
.cs-tab[aria-current] { color: var(--brass-ink); font-weight: 600; border-bottom-color: var(--brass); }
.cs-tab--soon { opacity: .5; pointer-events: none; }
.cs-tab:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; border-radius: var(--r-sm); }
.cs-tab .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sea); flex: none; }
.cs-tab--soon .dot { background: var(--bone-dim); }

/* ── بلوك المخرَج ──────────────────────────────────────── */
.cs-deliv {
  margin-top: 1.8rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--coffee-deep), var(--coffee) 58%, var(--sea));
  color: var(--bone); padding: clamp(1.6rem, 5vw, 2.8rem);
  text-align: center; box-shadow: var(--sh-3);
}
.cs-deliv__t { font-family: var(--f-display); font-size: 1.3rem; color: var(--brass-glow); margin: 0 0 .5rem; }
.cs-deliv__d { font-size: .88rem; color: var(--bone-dim); line-height: 1.85; margin: 0 auto; max-width: 46ch; }
.cs-deliv__btn {
  margin-top: 1.2rem; display: inline-flex; align-items: center; gap: .55rem;
  background: var(--brass); color: var(--coffee-deep); border: 0;
  font-family: var(--f-body); font-weight: 600; font-size: .95rem;
  padding: .75rem 1.6rem; border-radius: var(--r-pill); cursor: pointer;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.55); transition: background .2s, transform .15s;
}
.cs-deliv__btn:hover { background: var(--brass-glow); }
.cs-deliv__btn:active { transform: translateY(1px); }
.cs-deliv__btn:focus-visible { outline: 2px solid var(--brass-glow); outline-offset: 3px; }
/* ⛔ من غير direction:ltr هنا — السطر فيه عربي، واللفّ بيقلب الكلمات.
   الجزء اللاتيني بس هو اللي بياخد dir="ltr" في الماركب. */
.cs-deliv__meta { margin-top: .9rem; font-size: .76rem; color: var(--bone-dim); }
.cs-deliv__meta [dir="ltr"] { font-family: ui-monospace, Menlo, monospace; }
.cs-deliv__meta a { color: var(--brass-glow); }
.cs-deliv--live { padding: 0; background: var(--coffee-deep); }
.cs-deliv--live iframe { width: 100%; height: min(82vh, 900px); border: 0; display: block; border-radius: var(--r-md); }

/* ── الحكاية ───────────────────────────────────────────── */
/* النص محبوس على عرض قراءة مريح، لكن المعارض بتاخد العرض الكامل —
   بدل ما نحبس .cs-story كلها فتتخنق الصور في ٦١٤px. */
.cs-story { margin-top: 2rem; }
.cs-story > h2,
.cs-story > p,
.cs-story > ul,
.cs-story > .cs-brief { max-width: 64ch; }
.cs-story h2 {
  font-family: var(--f-display); font-size: 1.35rem; color: var(--coffee);
  margin: 2rem 0 .7rem; line-height: 1.5;
}
.cs-story h2:first-child { margin-top: 0; }
.cs-story p { font-size: .97rem; color: var(--ink-soft); line-height: 2; margin: 0 0 1rem; }
.cs-story strong { color: var(--coffee); font-weight: 600; }
.cs-brief {
  font-family: var(--f-quote); font-size: 1.14rem; line-height: 2; color: var(--coffee);
  border-inline-start: 3px solid var(--brass); padding-inline-start: 1.1rem; margin: 0 0 1.4rem;
}

/* قائمة القطع الصوتية */
.cs-tracks { list-style: none; padding: 0; margin: .4rem 0 1.2rem; display: grid; gap: .45rem; }
.cs-tracks li {
  display: flex; align-items: center; gap: .8rem; font-size: .88rem; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: .55rem .9rem;
}
.cs-tracks b { color: var(--coffee); font-weight: 600; font-family: ui-monospace, Menlo, monospace; font-size: .84rem; direction: ltr; }
.cs-tracks .n {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: rgba(196,149,46,.16); color: var(--brass-ink);
  display: grid; place-items: center; font-size: .72rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* معرض الصور — بيتمدّد لعرض أوسع من عمود النص */
.cs-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .7rem; margin: .6rem 0 1.4rem;
  max-width: var(--maxw); width: 100%;
}
.cs-gallery figure { margin: 0; }
/* ⚠️ height:auto إجباري — خاصية height في الماركب (اللي بنحطها لمنع
   قفزة التخطيط) بتغلب aspect-ratio لو ماألغيناهاش هنا. */
.cs-gallery img {
  width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 30%; display: block;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--cream-deep);
}
.cs-gallery figcaption { font-size: .74rem; color: var(--ink-soft); margin-top: .35rem; text-align: center; }

/* ── كروت الخطوات في صفحة الحالة ───────────────────────── */
.cs-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 1rem; }
.cs-step {
  display: flex; flex-direction: column; gap: .55rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1.1rem; box-shadow: var(--sh-1);
  text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s;
}
a.cs-step:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
a.cs-step:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.cs-step--soon { border-style: dashed; background: transparent; box-shadow: none; }
.cs-step__n { font-family: var(--f-display); font-size: 1rem; color: var(--brass-ink); font-variant-numeric: tabular-nums; }
.cs-step__t { font-family: var(--f-display); font-size: 1.1rem; color: var(--coffee); margin: 0; }
.cs-step__d { font-size: .82rem; color: var(--ink-soft); line-height: 1.8; margin: 0; flex: 1; }
.cs-step__go { font-size: .8rem; color: var(--brass-ink); font-weight: 600; }

/* ── فوتر مبسّط ────────────────────────────────────────── */
.cs-foot {
  border-top: 1px solid var(--line); margin-top: clamp(3rem, 8vw, 5rem);
  padding: 1.6rem 0 2.4rem; text-align: center;
}
.cs-foot__links { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; justify-content: center; font-size: .84rem; }
.cs-foot__links a { color: var(--brass-ink); text-decoration: none; }
.cs-foot__links a:hover { text-decoration: underline; }
.cs-foot__made { font-size: .8rem; color: var(--ink-soft); margin: .9rem 0 0; }

@media (prefers-reduced-motion: reduce) {
  .cs-card, .cs-step, .cs-deliv__btn { transition: none; }
}