/* ===========================================================
   cards.css — "עשרות אלפי מתפקדים" stats section (2026 redesign)
   Figma netsah node 2143:6889 ("3 ideas")
   Scaled-stage pattern (1920 canvas, exact Figma px) — scales uniformly
   with hero/about/vision so all text sizes stay 1:1 with the design.
   Replaces the old dark "שלושה דברים" navy cards.
   =========================================================== */
/* seascape: one continuous sea/landscape behind numbers + vision (Figma) */
.seascape { position: relative; background: var(--navy); }
.seascape::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url('../images/sea-bg.png') center top / cover no-repeat;
}

.numbers {
  position: relative; z-index: 1;
  width: 100vw; max-width: 100%;
  height: calc(100vw * 1100 / 1920);
  overflow: hidden;
  /* white at top fading to transparent so the seascape sea shows through the lower part */
  background: linear-gradient(180deg,
    #ffffff 0%, #ffffff 15%, rgba(255,255,255,0.88) 30%,
    rgba(255,255,255,0.35) 52%, rgba(255,255,255,0) 74%);
}
.numbers__inner {
  position: absolute; top: 0; left: 0;
  width: 1920px; height: 1100px;
  transform: scale(calc(100vw / 1920px));
  transform-origin: top left;
  text-align: center;
  padding-top: 80px;
}

.numbers__chip {
  display: inline-block;
  background: var(--blue-100); color: var(--navy);
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: 28px; line-height: 38px; letter-spacing: 1.12px;
  height: 38px; padding: 0 16px;
}
.numbers__title {
  margin: 24px auto 0; max-width: 1400px;
  font-family: var(--font-display); font-weight: var(--w-regular);
  color: var(--navy); font-size: 100px; line-height: 100px;
}
.numbers__sub {
  margin: 22px auto 0; max-width: 1000px;
  font-family: var(--font-body); color: var(--navy);
  font-size: 27px; line-height: 36px;
}

/* ---- big stats ---- */
.numbers__stats {
  display: flex; justify-content: center; gap: 170px;
  margin: 54px 0 58px;
}
.stat { display: flex; flex-direction: column; align-items: center; }
.stat__num {
  font-family: var(--font-display); font-weight: var(--w-regular);
  color: var(--navy); font-size: 130px; line-height: 90px;
}
.stat__label {
  margin-top: 18px;
  background: var(--lime); color: var(--navy);
  font-family: var(--font-display); font-weight: var(--w-regular);
  font-size: 32px; line-height: 38px; letter-spacing: .64px;
  height: 38px; padding: 0 14px; display: flex; align-items: center;
}

/* ---- 3 cards ---- */
.numbers__cards {
  display: flex; justify-content: center; align-items: stretch; gap: 33px;
}
.ncard {
  width: 365px; min-height: 389px;
  background: var(--white); border-radius: 4px;
  box-shadow: 4px 4px 20px rgba(16,67,124,0.1);
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding-bottom: 30px;
}
.ncard__head {
  width: 100%; min-height: 38px; padding: 8px 6px;   /* height→min-height + padding so the larger text fits (2026-07-02) */
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-100); color: var(--navy);
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: 46px; line-height: 48px; letter-spacing: 1.12px;   /* 28→46 to match value-row__title ("טייס קרב לשעבר") */
}
.ncard__title {
  margin: 26px 0 0;
  font-family: var(--font-display); font-weight: var(--w-regular);
  color: var(--navy); font-size: 100px; line-height: 80px;
}
.ncard--field .ncard__title { margin-top: 22px; }
.ncard__logo { margin: 30px 0 0; height: 120px; display: flex; align-items: center; justify-content: center; }
.ncard__logo img { max-height: 120px; width: auto; }
.ncard__logo--likud img { max-height: 86px; transform: scaleY(-1); }  /* Figma exports the likud mark flipped */
.ncard__body {
  margin: 24px auto 0; width: 313px;
  font-family: var(--font-body); color: var(--navy);
  font-size: 21px; line-height: 30px; text-align: center;
}
.ncard__body strong { font-weight: var(--w-bold); }

/* numbers header (chip/title/sub/stat) removed 2026-07-01 → tighten the desktop
   section so the 3 cards don't leave a large empty gap above the seascape. */
.numbers:not(.numbers--m)               { height: calc(100vw * 640 / 1920); }
.numbers:not(.numbers--m) .numbers__inner { height: 640px; padding-top: 60px; }