/* ============================================================================
   מדף הנכסים — תצוגה אחת לכל הדפים
   ----------------------------------------------------------------------------
   גריד לפי סדר ההעלאה, שורת תגיות שנבנית מהמלאי, בורר מיון וכפתור "עוד
   נכסים". התצוגה הזו נולדה בדף הבית (נכסים פרטיים · נכסים מסחריים), והיא
   היום גם התצוגה של דף המשרד ושל דף הסוכן/ת — ראו assets/prop-shelf.js
   ו-docs/home-property-shelves.md.

   כל המשתנים כאן מגיעים מ-assets/design-system.css, שנטען בכל הדפים
   האלה. ‏--h2 הוא היחיד שקיים רק בדף הבית, ולכן הוא נכתב עם נפילה־לאחור:
   בדף המשרד ובדף הסוכן/ת הכותרת היא ‎h3‎ בתוך מקטע שכבר יש לו ‎h2‎.
   ========================================================================== */

/* ====== התיבה ======
   מסגרת אחת סביב כל המדף — כותרת, תגיות, מיון, גריד וכפתור "עוד". היא
   נדלקת מ-‎cfg.box‎ ויושבת היום רק במדף של דף הבית, זה שאיחד את הנכסים
   הפרטיים והמסחריים: שתי סקציות שיושבות זו אחר זו על רקע העמוד נקראות
   כשתי תצוגות גם כשהמלאי שלהן אחד, ומה שאומר "זו תצוגה אחת" הוא הקו
   שסוגר אותה.

   הרקע ‎--surface-soft‎ ולא ‎--paper-raised‎: האריחים עצמם לבנים, ותיבה
   לבנה מתחתיהם מוחקת את הגבול שלהם. ההפרש מהרקע הזורם של העמוד
   (‏assets/page-bg.js) קטן במכוון — המסגרת היא שמגדירה את התיבה, לא
   הכתם. */
.pp-box{
  background:var(--surface-soft);
  border:1.5px solid var(--line);
  box-shadow:var(--shadow-sm);
  padding:18px 16px;
}
@media(max-width:520px){ .pp-box{padding:12px 10px} }

.pp-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:6px 14px;flex-wrap:wrap;margin-bottom:12px;
}
/* ‏.head-line ממורכז בכל הסקציות שיש להן ‎.section-head‎; כאן הכותרת פותחת
   שורה שבסופה יושב המונה, ולכן היא נצמדת לתחילת השורה. */
.pp-head .head-line{justify-content:flex-start}
.pp-head h2,.pp-head h3{font-size:var(--h2,1.5rem);margin:0}
.pp-count{margin:0;font-size:.8rem;font-weight:700;color:var(--ink-soft)}

/* התגיות ממלאות את הרוחב והמיון נשאר מעוגן בקצה השני — גם כשהתגיות
   נשברות לשתי שורות. ב-flex-wrap הבורר היה יורד לשורה האחרונה איתן. */
.pp-controls{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;
  gap:10px;margin-bottom:16px;
}
/* שורה אחת בלבד, בכל רוחב מסך. שורת תגיות שנשברת לשתיים ושלוש דוחפת את
   הנכס הראשון מתחת לקו הקיפול, וזו תצוגת נכסים ולא תצוגת סינון: מה שלא
   נכנס לשורה נגלל אופקית, ובורר המיון נשאר מעוגן בקצה השני. */
.pp-tags{
  display:flex;flex-wrap:nowrap;gap:7px;align-items:center;
  overflow-x:auto;padding-bottom:3px;
  scroll-behavior:smooth;scroll-padding-inline:34px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.pp-tags::-webkit-scrollbar{display:none}

/* ====== גלילת שורת התגיות ======
   השורה גוללת אופקית מאז שהיא הפכה לשורה אחת, אבל שום דבר לא אמר זאת:
   בדסקטופ נשארה תגית חתוכה בקצה בלי שום דרך להגיע אליה (אין שם גלגלת
   אופקית), ובטלפון אפשר היה להחליק — אבל לא היה סימן שכדאי.

   המעטפת פותרת את שניהם באותו קצה: דהייה שמראה שיש עוד, ומעליה חץ לחיץ
   בדסקטופ. ‏data-can-start/‎data-can-end נקבעים ב-JS לפי מצב הגלילה
   בפועל (ראו bindTagsScroller), ולכן אין דהייה מזויפת כשכל התגיות
   נכנסות במסך.

   הדהייה היא ‎mask-image‎ על השורה עצמה ולא גרדיאנט בצבע הרקע: הרקע של
   העמוד זורם (page-bg.js), וכתם בצבע ‎--paper‎ מעליו נראה כמו טלאי. */
.pp-tags-wrap{position:relative;min-width:0}
/* הכיוון פיזי במכוון — הדפים כולם ‎dir="rtl"‎, כלומר תחילת השורה בימין
   וסופה בשמאל, ו-‎mask-image‎ אינו מקבל ערכים לוגיים. */
.pp-tags-wrap[data-can-end] .pp-tags{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 38px);
  mask-image:linear-gradient(to right,transparent 0,#000 38px);
}
.pp-tags-wrap[data-can-start] .pp-tags{
  -webkit-mask-image:linear-gradient(to left,transparent 0,#000 38px);
  mask-image:linear-gradient(to left,transparent 0,#000 38px);
}
.pp-tags-wrap[data-can-start][data-can-end] .pp-tags{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 38px,#000 calc(100% - 38px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 38px,#000 calc(100% - 38px),transparent 100%);
}

.pp-tags-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:28px;height:28px;display:none;place-items:center;
  border:1.5px solid var(--line);background:var(--paper-raised);color:var(--ink);
  border-radius:0;padding:0;cursor:pointer;
  box-shadow:var(--shadow-sm);transition:border-color .15s ease,color .15s ease;
}
.pp-tags-nav svg{width:15px;height:15px;display:block}
.pp-tags-nav:hover{border-color:var(--teal);color:var(--teal)}
.pp-tags-prev{inset-inline-start:0}
.pp-tags-next{inset-inline-end:0}
/* הנתיב מצייר ‎‹‎ (שמאלה) — הכיוון שאליו השורה ממשיכה ב-RTL. חץ ההתחלה,
   שיושב בימין ומחזיר אחורה, הוא אותו נתיב מסובב. */
.pp-tags-prev svg{transform:rotate(180deg)}
/* רק במכשיר עם עכבר: באצבע ההחלקה עצמה היא הפעולה, וכפתור שיושב מעל
   התגית שבקצה רק גונב ממנה לחיצות. */
@media(hover:hover) and (pointer:fine){
  .pp-tags-wrap[data-can-start] .pp-tags-prev,
  .pp-tags-wrap[data-can-end] .pp-tags-next{display:grid}
}
.pp-tags-nav[hidden]{display:none}

/* ====== רמז הגלילה בטלפון ======
   במסך מגע אין חצים, ולכן הרמז הוא תנועה: חץ קטן בקצה שמנופף פעמיים
   כשהשורה נכנסת לתצוגה, ולצידו ה-JS מזיז את השורה בכמה פיקסלים ומחזיר
   אותה (ראו nudgeTags). שניהם אומרים אותו דבר — יש כאן עוד, וזה זז. */
.pp-tags-hint{
  position:absolute;inset-inline-end:2px;top:50%;z-index:2;
  display:none;place-items:center;width:22px;height:22px;
  color:var(--teal);opacity:0;pointer-events:none;
  transform:translateY(-50%);
}
.pp-tags-hint svg{width:16px;height:16px;display:block}
@keyframes ppTagsHint{
  0%,100%{opacity:0;transform:translate(0,-50%)}
  35%    {opacity:1;transform:translate(-7px,-50%)}
  70%    {opacity:.9;transform:translate(0,-50%)}
}
@media(hover:none),(pointer:coarse){
  .pp-tags-wrap[data-can-end] .pp-tags-hint{display:grid}
  .pp-tags-wrap[data-can-end].is-hinting .pp-tags-hint{animation:ppTagsHint 1.15s ease-in-out 2}
}
@media(prefers-reduced-motion:reduce){
  .pp-tags{scroll-behavior:auto}
  .pp-tags-hint{animation:none !important;opacity:.85}
}
.pp-tag{
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:0;flex:none;
  border:1.5px solid var(--line);background:var(--paper-raised);color:var(--ink);
  font-family:inherit;font-size:.8rem;font-weight:700;white-space:nowrap;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.pp-tag:hover{border-color:var(--teal)}
.pp-tag .pp-tag-n{font-size:.72rem;font-weight:600;color:var(--ink-soft)}
.pp-tag[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.pp-tag[aria-pressed="true"] .pp-tag-n{color:rgba(255,255,255,.72)}
/* ה-✕ הוא מה שאומר "אפשר לסגור אותי". הוא מופיע רק על תגית דלוקה — ✕
   על תגית שאינה מסננת דבר אינו מבטיח כלום — ומקבל עיגול משלו כדי
   שייקרא כפעולה ולא כקישוט. */
.pp-tag .pp-tag-x{
  display:inline-grid;place-items:center;width:16px;height:16px;
  margin-inline-start:-1px;border-radius:50%;
  background:rgba(255,255,255,.22);color:#fff;
  font-size:.62rem;font-weight:800;line-height:1;
}
.pp-tag[aria-pressed="true"]:hover .pp-tag-x{background:rgba(255,255,255,.36)}
/* "ניקוי הכל" הוא פעולה ולא תגית, ולכן הוא לא לובש את המסגרת שלהן */
.pp-clear{
  font-family:inherit;font-size:.8rem;font-weight:700;color:var(--teal);
  background:none;border:0;padding:2px 4px;border-bottom:1.5px solid var(--gold);
  flex:none;white-space:nowrap;cursor:pointer;
}
.pp-sort{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;color:var(--ink-soft)}
.pp-sort select{
  padding:7px 10px;border:1.5px solid var(--line);border-radius:0;
  background:var(--paper-raised);color:var(--ink);
  font-family:inherit;font-size:.8rem;font-weight:700;
}

/* מספר העמודות מפורש ולא ‎auto-fill‎: המדף מציג **שורה אחת** של נכסים,
   ולכן ה-JS צריך לדעת כמה אריחים נכנסים בשורה כדי לחתוך בדיוק שם.
   ‏--pp-cols הוא המקום היחיד שבו המספר הזה נכתב — הוא יושב על אותו כלל
   שקובע את ‎grid-template-columns‎, ו-ppCols() קורא אותו מהאלמנט עצמו
   במקום להחזיק עותק שני של נקודות השבירה ב-JS.
   ‏minmax(0,1fr) ולא ‎1fr‎: ‎auto‎ כרוחב מינימלי היה מרחיב עמודה לפי תוכן
   ארוך (כותרת בלי רווחים) והגריד היה גולש מהמסך. */
.pp-grid{
  --pp-cols:4;
  display:grid;gap:12px;
  grid-template-columns:repeat(var(--pp-cols),minmax(0,1fr));
}
@media(max-width:1100px){.pp-grid{--pp-cols:3}}
@media(max-width:820px){.pp-grid{--pp-cols:2}}
/* ‏.prop-shelf הוא מדף שיושב בטור תוכן ולא ברוחב המסך — דף המשרד ודף
   הסוכן/ת, ששניהם נעצרים ב-964px. ארבע עמודות שם הן אריחים בני 232px,
   צרים מכדי להחזיק מחיר, כותרת, שתי שורות מיקום ושורת מאפיינים; שלוש
   נותנות 313px, בערך רוחב האריח של דף הבית. רק הדרגה העליונה נדרסת —
   מ-1100px ומטה הסולם המשותף ממילא מגיע ל-3 ואין מה לתקן. */
@media(min-width:1101px){.prop-shelf .pp-grid{--pp-cols:3}}
/* ‏.prop-card נושא ‎flex:0 0 250px‎ בדף הבית ו-‎flex:0 0 82%‎ בדפי המשרד
   והסוכן/ת — שתיהן מידות של מסלול גלילה. ‏flex לא חל על פריט בגריד, אבל
   ‎flex-basis‎ שנשאר כן היה מונע ממנו למלא עמודה צרה יותר — ולכן הרוחב
   נכתב כאן במפורש. */
.pp-grid .prop-card{
  flex:1 1 auto;width:100%;cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.pp-grid .prop-card:hover{border-color:var(--teal);box-shadow:var(--shadow-sm)}
.pp-grid .prop-card:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
/* ====== סרט "מקודם" ======
   הצבע (פליז על ספיר, עם היהלום שלפניו) מגיע מ-assets/design-system.css
   יחד עם שאר צורות התצוגה של אותו קידום; כאן רק המיקום, כי רק כאן הוא
   יושב על אריח.
   ‏inset-inline-end ולא ‎right‎: הדפים כולם RTL, ולכן ‎right‎ הוא בדיוק
   הפינה שבה יושבות תגיות ‎.pc-badges‎ (‏inset-inline-start) — הסרט היה
   נוחת עליהן. עכשיו כל אחד בפינה שלו, והתגיות מפנות לו מקום. */
.pp-grid .prop-card .ribbon{
  position:absolute;top:10px;inset-inline-end:10px;z-index:2;border-radius:0;
}
.pp-grid .prop-card .pc-badges{max-width:calc(100% - 90px)}
.pp-empty{
  grid-column:1/-1;margin:0;text-align:center;padding:26px 16px;
  font-size:.9rem;font-weight:600;color:var(--ink-soft);
  background:var(--paper-raised);border:1px dashed var(--line);border-radius:var(--radius-md);
}
.pp-more-wrap{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}
/* "עוד נכסים" — אותו כפתור של "צפייה בכל…" בסקציית האנשים בדף הבית
   (‏.dm-all ב-index.html): גלולה עם מסגרת נייבי, שמתמלאת נייבי בריחוף.
   כפתור אחד לכל מקום שבו נפתחים עוד נכסים, בכל הדפים שמשתמשים במדף. */
.pp-more,.pp-less{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:inherit;font-size:.9rem;font-weight:800;color:var(--teal-dark,#0d1b3d);
  background:#fff;border:1.5px solid var(--teal-dark,#0d1b3d);
  padding:0 24px;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.pp-more:hover,.pp-less:hover{background:var(--teal-dark,#0d1b3d);color:#fff}
.pp-more[hidden],.pp-less[hidden]{display:none}
/* הקיפול הוא הפעולה המשנית מבין השתיים — הוא מבטל, לא מקדם — ולכן הוא
   שקט יותר: מסגרת דקה בגוון רך, ואותו מילוי נייבי בריחוף. */
.pp-less{border-color:rgba(13,27,61,.35);color:var(--ink-soft);font-weight:700}
@media(max-width:520px){
  /* בטלפון בורר המיון יורד לשורה משלו: לצד התגיות הוא לקח כ-40% מהרוחב,
     והשאיר להן חלון של כמאה וחמישים פיקסלים — שתי תגיות וחצי. שורת
     התגיות היא הסינון עצמו, והמיון הוא מה שבא אחריו. */
  .pp-controls{grid-template-columns:minmax(0,1fr);gap:8px}
  .pp-sort{justify-self:start}
  .pp-tag{padding:7px 11px;font-size:.78rem}
  .pp-sort span{font-size:.74rem}
  .pp-sort select{padding:7px 8px;font-size:.78rem}

  /* עמודה אחת: ויטרינה אחת בראש ואחריה שורות דחוסות. הראשון גבוה
     מגובה הקרוסלות (--card-h) — הוא לא עומד לצד אף אריח אחר, ומסך טלפון
     נותן לו את הרוחב המלא. */
  .pp-grid{--pp-cols:1;gap:8px}
  .pp-grid > .prop-card{--pc-cover-h:264px}

  /* השורות הדחוסות: אותה ‎.prop-row‎ של רשימת הנכסים, ולכן כל מה שמוגדר
     כאן הוא ההפרשים בלבד.
     ‏row-reverse מציב את התמונונת בשמאל השורה ואת הטקסט בימין, כמו
     במוקאפ — ובלעדיו התמונונת נופלת ל-inline-start, כלומר לימין, בדיוק
     שם שהמחיר אמור לפתוח את השורה. */
  .pp-grid > .prop-row{flex-direction:row-reverse;gap:10px;padding:8px}
  .pp-grid > .prop-row .pr-thumb{width:96px;height:76px}
  /* החץ הוא הסימן שהשורה היא קישור, וברשימה שכולה שורות הוא עובד. כאן
     הוא היה הפריט השמאלי ביותר בשורה שהתמונונת כבר תופסת את שמאלה. */
  .pp-grid > .prop-row .pr-chev{display:none}
  /* הסרט עולה לראש התמונונת ומתיישר עם זה של הכרטיס הגדול שמעליו: זה
     אותו מסר, והוא לא יכול להיראות כמו הערת שוליים בשורה השנייה. */
  .pp-grid > .prop-row .pr-promo{
    top:0;bottom:auto;inset-inline-start:auto;inset-inline-end:0;
    font-size:.6rem;padding:2px 7px;
  }
  .pp-grid > .prop-row .pr-what{font-size:.88rem}
  .pp-grid > .prop-row .pr-price{font-size:.98rem}
}

/* ====== שורת הנכס: שורה, לא כרטיס ======
   אריח כיסוי הוא כשליש ממסך טלפון — שלושה נכסים למסך. הוויטרינה
   שבראש כל מדף עובדת בדיוק ככה, אבל מתחתיה צריך כלי סריקה, ולכן שם
   הנכסים יורדים לשפה של "הנכסים שלי" ב-CRM: שורה לנכס, שלוש שורות
   טקסט ותמונונת. שמונה שורות נכנסות למסך אחד במקום שלושה כרטיסים. */
.prop-row{
  display:flex;align-items:center;gap:11px;padding:8px 10px;
  background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-md);
  color:inherit;text-align:start;cursor:pointer;text-decoration:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.prop-row:hover{border-color:var(--teal);box-shadow:var(--shadow-sm)}
.prop-row:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
/* התמונונת היא זיהוי ולא ראיה — היא אומרת "זה הנכס שראיתי" ולא מוכרת
   אותו, ולכן היא קטנה וקבועה. ‏flex:none כדי שלא תתכווץ מול טקסט ארוך. */
.prop-row .pr-thumb{
  flex:none;width:74px;height:60px;border-radius:var(--radius-sm);overflow:hidden;position:relative;
  background:var(--teal-tint);background-size:cover;background-position:center;
}
.prop-row .pr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
/* ‏nowrap+ellipsis בכל שלוש השורות: שורה שנשברת לשתיים מבטלת בדיוק את
   הרווח שהרשימה הזו באה לחסוך. */
.prop-row .pr-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prop-row .pr-what{font-weight:700;font-size:.86rem;color:var(--ink)}
.prop-row .pr-facts{font-size:.74rem;color:var(--ink-soft)}
.prop-row .pr-price{font-weight:800;font-size:.92rem;color:var(--teal-dark);margin-top:1px}
.prop-row .pr-price .per{font-weight:600;font-size:.76rem;color:var(--ink-soft)}
/* תגית העסקה יושבת בשורת המחיר ולא על התמונונת: על 74px היא הייתה מכסה
   את מה שהיא יושבת עליו. */
.prop-row .pr-deal{
  font-size:.64rem;font-weight:800;padding:2px 7px;border-radius:0;color:#fff;
  background:var(--teal);margin-inline-start:6px;vertical-align:1px;
}
.prop-row[data-deal="rent"] .pr-deal{background:var(--deal-rent)}
/* לא חותכים את התגית ולא את הסכום. ב-‎.pr-line‎ התגית הייתה הטקסט האחרון
   בשורה, וה-ellipsis חתך דווקא אותה: "₪4,700 לחודש" ועוד "להשכרה" לא נכנסו
   בטלפון עם גופן מוגדל, ויצא "להש...". עכשיו השורה היא flex, הסכום
   (‏.pr-num) והתגית ‎flex:none‎, וכשאין מקום לשניהם התגית יורדת שורה -
   שורה נוספת בשורת נכס אחת עדיפה על מחיר או תגית חתוכים. רק "לחודש"
   (‏.per) עוד יכול להתקצר, אם הסכום לבדו ממלא את השורה. */
.prop-row .pr-price{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;row-gap:3px;min-width:0}
.prop-row .pr-amt{display:flex;align-items:baseline;min-width:0;white-space:nowrap}
.prop-row .pr-num{flex:none}
/* ‏flex מוחק את הרווח שבתחילת ה-span, ובלעדיו יצא "₪4,700לחודש" */
.prop-row .pr-amt .per{min-width:0;overflow:hidden;text-overflow:ellipsis;margin-inline-start:.25em}
.prop-row .pr-price .pr-deal{flex:none;margin-inline-start:0}
/* הצבע (זהב עם יהלום) מגיע מ-assets/design-system.css, יחד עם סרט
   "מקודם" של האריח ושל שורת התוצאה — קידום נקרא באתר כשפה אחת. כאן
   נשארות רק המידות: הסרט הזה יושב על תמונונת ולא על אריח. */
.prop-row .pr-promo{
  position:absolute;inset-inline-start:0;bottom:0;
  font-size:.56rem;padding:1px 5px;
}
.prop-row .pr-chev{width:17px;height:17px;flex:none;color:var(--ink-soft)}
/* התמונונת קטנה מכדי להחזיק את ממלא־המקום המלא של האריח: הלוגו לבדו
   אומר את מה שהוא צריך לומר בגודל הזה. */
.pr-thumb .thumb-fallback{gap:0;padding:4px}
.pr-thumb .tf-logo{width:30px;height:30px;padding:2px;box-shadow:none}
.pr-thumb .tf-agency,.pr-thumb .tf-note{display:none}
@media(max-width:400px){
  .prop-row{gap:9px;padding:7px 8px}
  .prop-row .pr-thumb{width:64px;height:54px}
}