/* ==========================================================================
   JIJ Israel Justice Clinic page — page-specific styles (loads after style.css)
   Figma: "JIJ - Israel Justice Clinic" (node 324-405)
   ========================================================================== */

/* ---------- Hero: reuses .jij-hero from style.css, with a page eyebrow ---------- */
.jij-hero__eyebrow {
  font-family: var(--jij-font-ui); font-weight: 700; font-size: 16px!important; line-height: 20px;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--jij-gold); margin-bottom: 20px;
}
.jij-hero--clinic .jij-hero__bg { object-position: center 60%; }
.jij-hero--clinic .jij-hero__text + .jij-hero__text { margin-top: 18px; }
.jij-hero__text--strong { font-family: var(--jij-font-ui); font-weight: 700; color: var(--jij-white); }

/* ---------- Case file (dark: copy left, proof stat right) ---------- */
.jij-case { scroll-margin-top: 96px; position: relative; isolation: isolate; overflow: hidden; background: var(--jij-ink); padding-block: 120px; }
.jij-case::before {
  /* blue glow behind the proof card (Figma "Overlay+Blur") */
  content: ""; position: absolute; z-index: -1; right: 4%; top: 18%; width: 360px; height: 360px;
  background: rgba(37,99,235,.2); filter: blur(60px); border-radius: 50%; pointer-events: none;
}
.jij-case__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 80px; align-items: center; }
.jij-case__eyebrow { font-size: 22px!important; line-height: 20px; letter-spacing: 1.4px; color: var(--jij-gold); }
.jij-case__title { margin-top: 28px; letter-spacing: -1.2px; }
.jij-case__title .line-1 {
  display: block; font-family: var(--jij-font-ui); font-weight: 500; font-size: clamp(30px, 2.3vw, 40px)!important; line-height: 1.2; color: var(--jij-white);
}
.jij-case__title .line-2 {
  display: block; margin-top: 6px; font-family: var(--jij-font-ui); font-weight: 900; font-style: italic;
  font-size: clamp(26px, 2vw, 36px)!important; line-height: 1.25; color: var(--jij-gold);
}
.jij-case__body { margin-top: 36px; max-width: 700px; font-size: 20px!important; line-height: 31px; color: var(--jij-muted); }
.jij-case__body p + p { margin-top: 20px; }
.jij-case__cta { margin-top: 40px; }

/* Proof stat card (same glass card language as the Impact Snapshot) */
.jij-proof {
  position: relative; background: rgba(15,23,42,.8); border: 1px solid rgba(255,255,255,.05); border-radius: 24px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 32px 44px 44px;
}
.jij-proof__head { display: flex; align-items: center; justify-content: space-between; }
.jij-proof__label { font-family: var(--jij-font-ui); font-weight: 700; font-size: 22px!important; line-height: 28px; letter-spacing: -.5px; color: var(--jij-white); }
.jij-proof__icon { width: 55px; height: 55px; }
.jij-proof__num { margin-top: 36px; font-family: var(--jij-font-ui); font-weight: 700; font-size: clamp(44px, 3.4vw, 64px)!important; line-height: 1; color: var(--jij-gold); }
.jij-proof__text {
  margin-top: 22px; max-width: 520px; font-family: var(--jij-font-ui); font-size: clamp(16px, 1.25vw, 22px)!important; line-height: 1.5;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--jij-muted);
}

/* ---------- Client story (photo + quote + narrative) ---------- */
.jij-client { position: relative; isolation: isolate; overflow: hidden; padding-block: 112px; }
.jij-client__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; align-items: center; }
.jij-client__photo {
  border-radius: 24px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); aspect-ratio: 772 / 514; background: #cbd5e1;
}
.jij-client__photo img { width: 100%; height: 100%; object-fit: cover; }
.jij-client__photo--portrait { aspect-ratio: 448 / 577.59; max-width: 460px; justify-self: center; width: 100%; }
.jij-client__photo--portrait img { object-position: center 20%; }

.jij-client__quote { margin: 0; }
.jij-client__quote p {
  font-family: var(--jij-font-ui); font-weight: 500; font-style: italic; font-size: clamp(22px, 1.8vw, 32px)!important; line-height: 1.35; letter-spacing: -.16px;
}
.jij-client__quote cite {
  display: block; margin-top: 14px; font-family: var(--jij-font-ui); font-style: normal; font-weight: 700; font-size: clamp(16px, 1.2vw, 20px)!important; line-height: 1.4;
}
.jij-client__story { margin-top: 32px; font-size: 18px!important; line-height: 29px; }
.jij-client__story p + p { margin-top: 18px; }
.jij-client__note { margin-top: 16px; font-family: var(--jij-font-ui); font-size: 13px!important; font-style: italic; }
.jij-client__cta { margin-top: 36px; }

/* light variant (Roy, Fadi) */
.jij-client--light { background: var(--jij-light); color: #000; }
.jij-client--light::before {
  content: ""; position: absolute; z-index: -1; left: -2%; top: 0; width: 48%; height: 62%;
  background: rgba(37,99,235,.2); filter: blur(60px); pointer-events: none;
}
.jij-client--light .jij-client__story { color: var(--jij-slate); }
.jij-client--light .jij-client__note { color: var(--jij-muted-2); }

/* navy variant (Yana) */
.jij-client--navy { background: var(--jij-navy); color: var(--jij-white); }
.jij-client--navy .jij-client__shape {
  position: absolute; z-index: -1; top: -10%; bottom: -10%; left: 66%; width: 60%; background: var(--jij-blue-link); opacity: .1; transform: skewX(14deg);
}
.jij-client--navy .jij-client__photo { border: 1px solid #e5e7eb; }
.jij-client--navy .jij-client__quote cite { color: var(--jij-gold); }
.jij-client--navy .jij-client__story { color: var(--jij-muted); }
.jij-client--navy .jij-client__note { color: var(--jij-muted); }

/* Photo placeholder (until the client supplies an image) */
.jij-client__placeholder {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: linear-gradient(160deg, #1e293b 0%, #0f172a 60%, #020617 100%);
}
.jij-client__placeholder img { width: 110px; height: auto; opacity: .85; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .jij-case__grid, .jij-client__grid { grid-template-columns: 1fr; gap: 48px; }
  .jij-proof { max-width: 640px; }
  .jij-client__photo--portrait { justify-self: start; max-width: 380px; }
}
@media (max-width: 760px) {
  .jij-case, .jij-client { padding-block: 64px; }
  .jij-case__eyebrow { font-size: 16px!important; }
  .jij-case__body { margin-top: 24px; font-size: 17px!important; line-height: 27px; }
  .jij-case__cta, .jij-client__cta { width: 100%; }
  .jij-proof { padding: 24px 22px 28px; }
  .jij-proof__num { margin-top: 20px; font-size: 44px!important; }
  .jij-proof__text { font-size: 14px!important; letter-spacing: 1px; }
  .jij-client__story { font-size: 17px!important; line-height: 27px; }
  .jij-client__photo--portrait { max-width: none; aspect-ratio: 4 / 5; }
  .jij-client--light::before { width: 90%; height: 40%; }
}