/* ============================================================================
   כותרת עליונה אחידה לעמודים הפנימיים (.ph).
   העיצוב מועתק 1:1 מהחלק העליון של עמוד "אודות" (.ab ב-ABOUT_SECTION):
   אותה עקומה ירוקה, אותה כותרת Manhattan לבנה, אותה מילת־רפאים אנגלית,
   אותה דיסקית חץ ואותם כתמי אור — באותן קואורדינטות פיגמה בדיוק.
   קנבס 1920, מיקום אבסולוטי, 1u = 1px בעיצוב.
   מוזרק ע"י wire_hero() ב-app.py. אין לקשר בלי static_v().

   גובה הקנבס: 860u. הבניין נגמר ב-815u, כלומר הוא יורד 251u מתחת לעקומה
   (564u) אל הרקע הבהיר — בדיוק כמו באודות. הגרסה הקודמת השתמשה ב-620u,
   שזה 56u בלבד אחרי העקומה, ולכן הכותרת נראתה "חתוכה" מיד אחרי הפס הירוק.
   ========================================================================== */
@font-face{font-family:ManhattanDS;src:url('/assets/Manhattan-650.ab674a.woff2') format('woff2'),
  url('/assets/Manhattan-650.74fe32.woff') format('woff');font-weight:650;font-display:swap}
@font-face{font-family:PloniDS;src:url('/assets/ploni-regular-aaa.2a0b3a.woff2') format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:PloniDS;src:url('/assets/ploni-bold-aaa.e09e2f.woff2') format('woff2');
  font-weight:700;font-display:swap}

/* בסיס: יחידת הסקאלה נגזרת מרוחב החלון. זו גם רשת הביטחון — אם הדפדפן לא
   תומך ביחידות container query, min() עם cqw נפסל והמשתנה היה נשאר ריק,
   וכל הקנבס היה קורס. ראו ה-@supports מיד אחרי. */
.ph{
  --g:#173822; --g-deep:#152d1d; --g-mid:#2c4434;
  --u:min(1px, 100vw / 1920);
  direction:rtl;font-family:PloniDS,Assistant,'Segoe UI',sans-serif;
  background:#f4f4f4;position:relative;overflow:hidden;
  margin:0;
}
@supports (container-type: inline-size){
  /* אותה נוסחה בדיוק כמו .ab — cqw מדויק יותר מ-vw כי הוא לא סופר את פס
     הגלילה, ולכן הקנבס והיחידה נשארים מסונכרנים. */
  .ph{container-type:inline-size; --u:min(1px, 100cqw / 1920)}
}
.ph *{box-sizing:border-box}
.ph-canvas{position:relative;max-width:1920px;margin:0 auto;
  height:calc(860 * var(--u));overflow:hidden}

/* ------------------------------------------------------- רקע: כתמי אור */
/* ארבעת הכתמים, באותם מיקומים כמו .ab-glow g1..g4 */
.ph-glow{position:absolute;pointer-events:none}
.ph-glow img{width:100%;height:100%;display:block;transform:scaleX(-1)}
.ph-glow.g1{left:calc(835 * var(--u));top:calc(-710 * var(--u));
  width:calc(1527 * var(--u));height:calc(1470 * var(--u))}
.ph-glow.g2{left:calc(450 * var(--u));top:calc(-136 * var(--u));
  width:calc(1527 * var(--u));height:calc(1470 * var(--u))}
.ph-glow.g3{left:calc(395 * var(--u));top:calc(-100 * var(--u));
  width:calc(1370 * var(--u));height:calc(1277 * var(--u))}
.ph-glow.g4{left:calc(406 * var(--u));top:calc(-497 * var(--u));
  width:calc(1370 * var(--u));height:calc(1277 * var(--u))}

/* ------------------------------------------------------------------ Hero */
/* כל הערכים מתחת זהים ל-.ab-curve / .ab-title / .ab-bld / .ab-out / .ab-arrow */
.ph-curve{position:absolute;left:calc(-144 * var(--u));top:0;
  width:calc(2136 * var(--u));height:calc(564 * var(--u));
  transform:rotate(180deg);pointer-events:none}
.ph-curve img{width:100%;height:100%;display:block}

.ph-bld{position:absolute;left:calc(-43 * var(--u));top:calc(98 * var(--u));
  height:calc(717 * var(--u));pointer-events:none}
.ph-bld img{display:block;height:100%;width:auto}

.ph-title{position:absolute;top:calc(148 * var(--u));right:calc(123 * var(--u));margin:0;
  font-family:ManhattanDS,'Manhattan',sans-serif;font-weight:650;
  font-size:calc(160 * var(--u));line-height:.72;color:#fff;white-space:nowrap;z-index:4}

/* --out-fs נקבע לכל עמוד ב-wire_hero() לפי אורך המילה, כדי שמילה ארוכה
   ("Accessibility") לא תגלוש מהקנבס. ברירת המחדל היא 250u כמו באודות. */
.ph-out{position:absolute;top:calc(236 * var(--u));left:calc(229 * var(--u));
  font-weight:900;font-size:calc(var(--out-fs, 250) * var(--u));line-height:.81;
  color:var(--g);opacity:.37;mix-blend-mode:plus-lighter;white-space:nowrap;
  pointer-events:none;user-select:none;z-index:2}

.ph-arrow{position:absolute;left:calc(1666 * var(--u));top:calc(380 * var(--u));
  width:calc(179 * var(--u));height:calc(174 * var(--u));border-radius:50%;
  background:var(--g-mid);z-index:3}
.ph-arrow img{position:absolute;left:calc(50 * var(--u));top:calc(23 * var(--u));
  width:calc(81 * var(--u));height:calc(81 * var(--u));display:block;transform:rotate(-135deg)}

/* ------------------------------------------- הסתרת הכותרות הכפולות שמתחת */
body.cms-hero .page-header{display:none !important}
body.cms-hero .lgl-main > h1{display:none}
body.cms-hero .cms-hero-dup{display:none !important}

/* ------------------------------------------------------------------ נייד */
@media (max-width:860px){
  /* התקרה 1.15 (ולא 1.9 כמו ב-.ab) מונעת כותרת ענקית ברוחבי טאבלט 700–860 */
  .ph{--u:min(1.15px, 100vw / 460)}
  .ph-canvas{height:auto;padding-bottom:calc(46 * var(--u))}
  .ph-glow,.ph-bld,.ph-arrow{display:none}
  .ph-curve{left:50%;transform:translateX(-50%) rotate(180deg)}
  .ph-title{position:static;padding:calc(138 * var(--u)) calc(28 * var(--u)) 0;
    text-align:center;font-size:calc(92 * var(--u));line-height:.92;
    white-space:normal;overflow-wrap:break-word}
  .ph-out{position:static;margin-top:calc(26 * var(--u));
    padding:0 calc(24 * var(--u));
    text-align:center;font-size:calc(72 * var(--u));white-space:normal;
    overflow-wrap:break-word}
}
@supports (container-type: inline-size){
  @media (max-width:860px){
    .ph{--u:min(1.15px, 100cqw / 460)}
  }
}