/* ============ 02 · הוכחה חברתית ============
   Figma: desktop 277:156 (1280×859) / mobile 277:293 (390×880).

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

.s02{
  background:#fff;                 /* Figma: הסקשן לבן, לא בקרם של ה-body */
  padding-block:var(--sec-y);
  position:relative;
  overflow:hidden;                 /* המסילה חורגת מהמסך משני הצדדים */
}

/* ---------- קופי ---------- */
.s02__copy{
  /* לא .section עם padding-inline, כי המסילה חייבת להיות full-bleed.
     הרוחב נגזר מה---content ונופל בחזרה על --margin במסכים צרים */
  width:min(var(--content), 100% - var(--margin) * 2);
  margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;
  gap:20px;
  text-align:center;
}
.s02__lede{
  font-family:var(--f-body);font-weight:600;
  font-size:30px;line-height:45px;
  /* פיגמה: #141414 ב-82%. מחושב מראש מול הלבן במקום alpha, כדי שהטקסט
     לא ישתנה אם משהו ייכנס מאחוריו בהמשך */
  color:#3e3e3e;
  margin:0;
}
.s02 h2{
  font-family:var(--f-head);font-weight:800;
  font-size:46px;line-height:60px;
  color:var(--ink);
  letter-spacing:-.01em;
  margin:0;
}
.s02__note{
  font-family:var(--f-body);font-weight:400;
  font-size:22px;line-height:34px;
  color:#353535;                   /* פיגמה: #141414 ב-86% */
  margin:0;
  max-width:1080px;
}

/* ---------- קיר ההוכחות ----------
   גריד סטטי ולא רייל נע. שלוש סיבות: גלילה אופקית לא מתבצעת בפועל אז
   רוב ההוכחות לא נראות; אנימציה אינסופית על אלמנט ברוחב 21,000px היא
   הדבר היקר ביותר בעמוד מבחינת רינדור; והכמות הנראית בבת אחת היא עצמה
   חלק מהטיעון. */
.proof{ margin-top:var(--sec-cta); }

.proof__grid{
  list-style:none;margin:0;padding:0;
  width:min(var(--content), 100% - var(--margin) * 2);
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:34px 24px;
}
.proof__card{ position:relative;margin:0; }
.proof__photo{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  display:block;
  border-radius:var(--r-media);
  background:var(--placeholder);   /* מונע קפיצה לפני טעינת התמונה */
}
/* הכיתוב מתחת לתמונה ולא עליה. בגודל הגריד טקסט לבן על תצלום יורד
   מתחת ליחס הניגודיות הנדרש, ואי אפשר להבטיח רקע כהה מתחת לכיתוב
   כשכל תמונה שונה. מתחת הוא נקרא תמיד, בכל תמונה */
.proof__cap{
  margin:14px 0 0;
  font-family:var(--f-body);font-weight:600;
  font-size:22px;line-height:30px;
  color:var(--ink);
  text-align:center;
}

/* מעבר לשש הראשונות מוסתר. הסתרה ב-CSS ולא ב-JS כדי שהמצב הסגור יהיה
   נכון כבר ברינדור הראשון ולא תהיה הבזקה של כל העשר */
.proof__grid > li:nth-child(n+7){ display:none; }
.proof__grid.is-open > li{ display:block; }

.proof__more{
  display:block;
  margin:36px auto 0;
  padding:14px 40px;
  font-family:var(--f-body);font-weight:600;
  font-size:22px;line-height:30px;
  color:var(--ink);
  background:transparent;
  border:2px solid var(--line);
  border-radius:var(--r-pill);
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease;
}
.proof__more:hover{ background:var(--sky-tint);border-color:var(--sky); }
.proof__more:focus-visible{ outline:2px solid var(--sky-deep);outline-offset:3px; }
.proof.is-open .proof__more{ display:none; }

/* ---------- CTA ---------- */
.s02__cta{margin-top:var(--sec-cta);}
.s02 .cta{min-width:330px;max-width:100%;}

/* ============ mobile ============ */
@media (max-width:1199px){
  .s02__copy{gap:16px;}
  .s02__lede{font-size:24px;line-height:36px;}
  .s02 h2{font-size:30px;line-height:39px;}
  .s02__note{font-size:22px;line-height:35px;}

  /* טור אחד. בשני טורים כל תמונה יורדת ל-164px, וזוג לפני/אחרי בתוך
     ריבוע בגודל כזה גם נחתך וגם קטן מכדי שיהיה אפשר לראות בו שינוי -
     כלומר ההוכחה עצמה הולכת לאיבוד. ברוחב מלא היא נקראת. */
  .proof__grid{grid-template-columns:1fr;gap:20px;}
  /* בלי ריבוע כפוי: object-fit חותך את הראש או את הרגליים בדיוק בתצלומים
     שבהם הגוף הוא כל הסיפור. ברוחב מלא התמונה יכולה להישאר בפרופורציה שלה */
  .proof__photo{aspect-ratio:auto;height:auto;}
  .proof__grid > li:nth-child(n+5){display:none;}
  .proof__grid.is-open > li{display:block;}
  .proof__cap{margin-top:10px;font-size:22px;line-height:29px;}
  .proof__more{margin-top:28px;padding:13px 32px;}
}