/* ============ 14ב · הן מספרות במילים שלהן ============

   העדויות בווידאו הן ההוכחה הכי קשה לזיוף בדף כולו, ולכן הן מקבלות
   סקשן משלהן מיד אחרי ה״שנה אחרי״ - קודם רואים את התוצאה, ואז שומעים
   אותה מהן. רקע כהה כדי שהתמונות הממוזערות יבלטו ולא יימסו בקרם.

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

/* מרווחי הסקשן מגיעים מ-.section, בדיוק כמו בכל שאר הדף */
.s14b{background:var(--sky-deep);}
.s14b__wrap{
  width:100%;max-width:var(--content);margin-inline:auto;
  /* ממורכז: הכותרת והשורה שמתחתיה פונות לכל מי שגוללת, והרשת שמתחתן
     ממילא ממורכזת - יישור לימין היה משאיר אותן תלויות מעל ציר אחר */
  text-align:center;
}
.s14b__title{
  font-family:var(--f-head);font-weight:800;
  font-size:var(--h2);line-height:var(--h2-lh);
  color:var(--cream);
  letter-spacing:-.015em;
}
.s14b__lede{
  margin-top:22px;
  font-family:var(--f-body);font-weight:400;
  font-size:26px;line-height:40px;
  color:rgba(255,255,255,.85);
}

/* ---------- הרשת ---------- */
/* שבע עדויות בגלילה אופקית משאירות ארבע מהן מחוץ למסך, ומי שלא גורר
   הצידה לא יודע שהן קיימות. כאן הכמות היא הטיעון, ולכן כולן גלויות:
   ארבע בשורה העליונה ושלוש בתחתונה, והשורה החלקית ממורכזת */
.s14b__rail{
  margin-top:48px;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:32px 20px;
  list-style:none;
}
.s14b__card{
  flex:0 0 255px;   /* 4×255 + 3×20 = 1080 */
}
.s14b__play{
  position:relative;display:block;
  width:100%;aspect-ratio:9 / 16;
  border:0;padding:0;margin:0;
  border-radius:var(--r-media);
  overflow:hidden;
  background:#1a1f2e;
  cursor:pointer;
}
.s14b__play img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease-out);
}
.s14b__play:hover img{transform:scale(1.04);}
.s14b__play:focus-visible{outline:2px solid var(--sky-deep);outline-offset:4px;}

/* עיגול ההפעלה: אותו עיגול קרם של כפתורי ה-CTA, כדי שהשפה של ״לחיצה״
   בדף תהיה אחת - עיגול קרם על כהה, תמיד */
.s14b__icon{
  position:absolute;inset:0;margin:auto;
  width:64px;height:64px;border-radius:999px;
  background:var(--cream);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s var(--ease-out);
}
.s14b__icon svg{width:34px;height:34px;margin-inline-start:4px;}
.s14b__play:hover .s14b__icon{transform:scale(1.08);}

/* אחרי הלחיצה ה-iframe יורש בדיוק את אותה מסגרת */
.s14b__frame{
  width:100%;aspect-ratio:9 / 16;
  border:0;border-radius:var(--r-media);
  display:block;background:#000;
}

/* הציטוט מחליף את שורת המשנה הגנרית שהייתה כאן.
   הוא בתכלת ולא בקרם כדי שייקרא כדיבור של המתאמנת ולא כתיאור שלנו,
   ו-min-height נועל שתי שורות: בלעדיו כרטיסים עם ציטוט קצר וארוך
   באותה שורת flex-wrap מסתיימים בגבהים שונים והשורה נראית שבורה */
.s14b__q{
  margin-top:16px;
  font-family:var(--f-body);font-weight:400;
  font-size:22px;line-height:30px;
  color:var(--sky-tint);
  min-height:60px;
}

/* ============ mobile ============ */
@media (max-width:1199px){
  .s14b__title{font-size:26px;line-height:44px;}
  .s14b__lede{margin-top:18px;font-size:24px;line-height:38px;}
  /* במובייל שתיים בשורה: הכרטיס נשאר גדול מספיק כדי לזהות פנים,
     והשבע נגמרות בארבע שורות במקום להיעלם מעבר לקצה המסך */
  .s14b__rail{margin-top:32px;gap:18px 14px;}
  .s14b__card{flex-basis:calc(50% - 7px);}
  .s14b__icon{width:56px;height:56px;}
  .s14b__icon svg{width:30px;height:30px;}
  /* ברוחב כרטיס של כ-164px הציטוט הארוך ביותר יורד לשלוש שורות.
     הנעילה כאן היא על שלוש ולא על שתיים כמו בדסקטופ */
  .s14b__q{min-height:90px;}
}

@media (prefers-reduced-motion:reduce){
  .s14b__play img,.s14b__icon{transition:none;}
}

/* ============ פופ-אפ נגן העדויות ============
   הכרטיס בגריד קטן מדי לצפייה נוחה, בעיקר בנייד - אז לחיצה על הפליי
   פותחת נגן שממלא כמעט את כל המסך, בפורמט אנכי 9:16 כמו הסרטונים עצמם. */
.vid-pop{
  border:0;padding:0;background:none;
  position:fixed;inset:0;margin:auto;
  z-index:130;
  width:min(92vw, 520px);
  aspect-ratio:9/16;
  max-height:calc(100dvh - 32px);
  display:none;flex-direction:column;align-items:stretch;
  opacity:0;transform:scale(.96);
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.7,.3,1),
             overlay .22s allow-discrete, display .22s allow-discrete;
}
.vid-pop[open]{display:flex;opacity:1;transform:none;}
@starting-style{
  .vid-pop[open]{opacity:0;transform:scale(.96);}
}
.vid-pop::backdrop{
  background:rgba(11,16,32,.72);
  transition:background .22s ease, overlay .22s allow-discrete, display .22s allow-discrete;
}
@starting-style{
  .vid-pop[open]::backdrop{background:rgba(11,16,32,0);}
}

.vid-pop__x{
  align-self:flex-end;margin:0 0 10px;
  min-width:44px;height:44px;padding-inline:10px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--f-body);font-weight:600;font-size:20px;line-height:1;
  border:0;border-radius:var(--r-pill);background:rgba(255,255,255,.92);
  color:var(--navy);cursor:pointer;
  transition:background .18s ease;
}
.vid-pop__x:hover{background:#fff;}
.vid-pop__x:focus-visible{outline:2px solid var(--sky);outline-offset:2px;}
.vid-pop__x svg{width:20px;height:20px;flex:none;}

/* min-height 280: רשת פנימית של וואטסאפ/אינסטגרם (WebView ישן) לפעמים לא
   תומכת ב-aspect-ratio, והפופ-אפ קורס לגובה 0 - נשאר רק כפתור הסגירה
   מרחף מעל הגריד המוצל. min-height מבטיח שהנגן תמיד יתפוס גובה אמיתי */
.vid-pop__frame{flex:1;min-height:280px;border-radius:16px;overflow:hidden;background:#000;}
.vid-pop__frame iframe{width:100%;height:100%;border:0;display:block;}

@media (prefers-reduced-motion:reduce){
  .vid-pop{transition:none;transform:none;}
}