/* ===========================================================
   vision.css — Section 3 "הסיפור האישי שהפך לסיפור לאומי"
   Figma frame 2010:5 — canvas y 2289..3301 → 1920×1012
   local_y = canvas_y - 2289
   =========================================================== */
.vision {
  position: relative; z-index: 1;
  width: 100vw;
  max-width: 100%;
  height: calc(100vw * 980 / 1920);
  overflow: hidden;
  background: transparent;          /* shared seascape sea shows through */
}
.vision::before {                   /* sea darkens into solid navy (heading+cards on one dark area) */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to bottom, rgba(16,67,124,0) 0%, var(--navy) 30%, var(--navy) 100%);
}
.vision__stage {
  position: absolute; top: 0; left: 0; z-index: 2;
  width: 1920px; height: 980px;
  transform: scale(calc(100vw / 1920px));
  transform-origin: top left;
}
.vision__stage > * { position: absolute; }

/* backgrounds now come from the seascape wrapper + .vision::before */
.vision__bg, .vision__fade-top, .vision__fade-bottom { display: none; }

/* eyebrow + title */
.vision__eyebrow {
  left: 0; top: 34px; width: 1920px;
  text-align: center;
}
.vision__eyebrow span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; height: 38px; padding: 0 14px;
  background: var(--lime);
  color: var(--navy); font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: 28px; letter-spacing: 1.12px; line-height: 32px;
}
.vision__title {
  left: 378px; top: 104px; width: 1163px;
  text-align: center;
  font-family: var(--font-display); font-weight: var(--w-regular);
  color: var(--white); font-size: 100px; line-height: 100px;     /* white on navy (2026 redesign) */
}
/* cards — self-contained flow boxes: expanded text stays INSIDE the card
   (box auto-grows downward; nothing floats over neighbours) */
.vision-card {
  top: 247px; width: 565px; height: 690px;   /* 660→690 to absorb the larger eyebrow (2026-07-02) */
  background: var(--white); border-radius: 4px;
  box-shadow: 4px 4px 20px rgba(16,67,124,0.1);
  padding: 36px 34px 28px;
  text-align: right;
  z-index: 3;
}
.vision-card__full { display: inline; }   /* toggle removed — full text always shown */
.vision-card--1 { left: 976px; }   /* right card — להיות אור לגויים */
.vision-card--2 { left: 379px; }   /* left card  — מעבר למחלוקת */

.vision-card__eyebrow {
  font-family: var(--font-display); font-weight: var(--w-bold);
  color: var(--navy); font-size: 46px; line-height: 50px; letter-spacing: 1.12px;   /* 28→46 to match value-row__title ("טייס קרב לשעבר") */
}
.vision-card__title {
  margin: 10px 0 12px; text-align: center;
  font-family: var(--font-display); font-weight: var(--w-regular);
  color: var(--navy); font-size: 70px; line-height: 90px; white-space: nowrap;   /* Figma 70/90 */
}
/* 2026 redesign: longer titles wrap to 2 lines (Figma hazon cards 2202:279/284 — BarLev AAA 70/70, right) */
.vision-card__title--wrap {
  font-size: 70px; line-height: 70px; white-space: normal;
  text-align: right;            /* Figma: right-aligned, not centered */
}
.vision-card__body {
  font-family: var(--font-body); color: var(--navy);
  font-size: 27px; line-height: 36px;
}
.vision-card__body strong { font-weight: var(--w-bold); }
.vision-card__body p { margin: 0; display: inline; }   /* WYSIWYG wrapper — keep inline flow */

/* Figma comment: expand/collapse full text (cards open on click) */
.vision-card__full { display: none; margin-top: 10px; font-weight: var(--w-regular); }
.vision-card.is-open { z-index: 5; box-shadow: 4px 12px 36px rgba(16,67,124,0.22); }
.vision-card.is-open .vision-card__full { display: block; }

/* CTA row: "להמשך קריאה" + chevron, then a rule filling the rest to the left */
.vision-card__cta {
  position: static;
  display: flex; align-items: center; gap: 8px; margin-top: 16px;
  font-family: var(--font-body); font-weight: var(--w-bold);
  font-size: 22px; line-height: 30px; color: var(--navy); cursor: pointer;
}
.vision-card__more { flex: 0 0 auto; text-decoration: underline; text-underline-offset: 3px; }
.vision-card__chevron { width: 24px; height: 24px; flex: 0 0 auto; transition: transform .3s ease; }
.vision-card__chevron img { width: 100%; height: 100%; }
.vision-card.is-open .vision-card__chevron { transform: rotate(180deg); }

/* bottom heading on navy */
.vision__heading {
  left: 378px; top: 920px; width: 1163px;
  text-align: center;
  font-family: var(--font-display); font-weight: var(--w-regular);
  color: var(--white); font-size: 64px; line-height: 1.0;
}
.vision__eyebrow2 {
  left: 0; top: 850px; width: 1920px; text-align: center;
}
.vision__eyebrow2 span {
  display: inline-flex; align-items: center; justify-content: center; height: 38px;
  background: var(--blue-100);
  color: var(--navy); font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: 28px; line-height: 32px; letter-spacing: 1.12px; padding: 0 14px; border-radius: 3px;
}

/* ===== VISION 2 — styled copy: white section, navy bold title, navy cards / white text ===== */
.vision2 { background: var(--white); }
.vision2::before { display: none; }
.vision2 .vision__title { color: var(--navy); font-weight: var(--w-bold); }
.vision2 .vision-card { background: var(--navy); box-shadow: 0 10px 40px rgba(12, 29, 55, 0.25); }
.vision2 .vision-card__eyebrow,
.vision2 .vision-card__title,
.vision2 .vision-card__body,
.vision2 .vision-card__body strong,
.vision2 .vision-card__body p { color: var(--white); }