/* review-pen.css · העט של מירב: מקיף ממצא ומעיר לידו, בדיו של המכחול (review-pen.js).
   שלושה מופעים לפי data-review-pen: "card" (כרטיס בהירו), "finding" (צילום או עמוד בדו"ח)
   ו-"text" (טקסט חי בעמוד). בלי JS אין סימנים: הכרטיס והצילומים עומדים לבד. */

.review-ink{position:absolute;z-index:2;display:block;pointer-events:none}

/* ── הכרטיס בהירו: רוחב קבוע, בלי הזזת פריסה לפני שהתמונה או הדיו מגיעים ── */
[data-review-pen="card"]{position:relative;margin:0;width:min(100%,380px);justify-self:start;align-self:center}
[data-review-pen="card"] img{display:block;width:100%;height:auto;border-radius:14px;
  border:1px solid var(--line,#e9e6ee);box-shadow:0 20px 50px -30px rgba(96,36,104,.28)}
/* הקנבס חורג מהכרטיס כדי שיהיה מקום להערה בשוליים ולהערה מתחת, בלי לגלוש מהעמוד.
   92 פיקסלים בתחתית: כשאין מקום בשוליים ההערה יורדת מתחת לכרטיס */
[data-review-pen="card"] .review-ink{top:-28px;inset-inline-start:-28px;
  width:calc(100% + 190px);height:calc(100% + 120px)}
@media(max-width:939px){
  [data-review-pen="card"]{width:min(100%,460px)}
  [data-review-pen="card"] .review-ink{inset-inline-start:-12px;width:calc(100% + 24px)}
}

/* ── הממצא: הסימן חורג קצת מהתמונה, כמו עט על נייר ──
   position:relative על .shot עצמו, לא רק על השורש: כך קנבס הדיו נשאר תחום
   לתמונה שלו גם כשהעמוד לא מצהיר על כך בנפרד */
[data-review-pen="finding"] .shot{position:relative}
[data-review-pen="finding"] .review-ink{top:-8px;inset-inline-start:-8px;
  width:calc(100% + 16px);height:calc(100% + 16px)}
/* ה-.mark הוא רק התיבה של מה שמסומן. ברגע שהעט רץ, review-pen.js מוסיף has-ink ומסתיר אותו */
[data-review-pen="finding"].has-ink .mark{display:none}

/* ── ממצא עם הערה (data-note): מקום להערה מתחת לצילום ── */
[data-review-pen="finding"][data-note] .shot{margin-bottom:52px}
[data-review-pen="finding"][data-note] .review-ink{height:calc(100% + 100px)}
@media(max-width:939px){[data-review-pen="finding"][data-note] .shot{margin-bottom:62px}}

/* ── קנבס שבורח לבמה (data-ink-host): ההערה יושבת בשטח הפנוי של הבמה, ולכן לא שומרים מקום מתחת
   ל-.shot. אחרת העמוד הממוקם בהחלט היה גבוה יותר ממה שהוא נראה, ומוזז ממקומו ב-translate(-50%) ── */
[data-review-pen="finding"][data-ink-host] .shot{margin-bottom:0}

/* ── הערה מעל הצילום במקום מתחת: רק כשהקנבס לא בורח (אחרת יש לו את כל הבמה) ── */
[data-review-pen="finding"][data-note-pos="above"] .shot{margin-bottom:0}
@media(min-width:940px){
  [data-review-pen="finding"][data-note-pos="above"]:not([data-ink-host]) .shot{margin-top:52px}
  [data-review-pen="finding"][data-note-pos="above"]:not([data-ink-host]) .review-ink{top:-60px;height:calc(100% + 76px)}
}

/* ── טקסט חי: הקנבס מכסה את כל האלמנט, וההערה יכולה לשבת בשוליים שלו ── */
[data-review-pen="text"]{position:relative}
[data-review-pen="text"] > .review-ink{inset:0;width:100%;height:100%}