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

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

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

/* מרווחי הסקשן מגיעים מ-.section, בדיוק כמו בכל שאר הדף */
.s14b{background:var(--navy);}
.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:52px;line-height:62px;
  color:#fff;
  letter-spacing:-.015em;
}
.s14b__lede{
  margin-top:22px;
  font-family:var(--f-body);font-weight:400;
  font-size:26px;line-height:40px;
  color:var(--cream-80);
}

/* ---------- הרשת ---------- */
/* שבע עדויות בגלילה אופקית משאירות ארבע מהן מחוץ למסך, ומי שלא גורר
   הצידה לא יודע שהן קיימות. כאן הכמות היא הטיעון, ולכן כולן גלויות:
   ארבע בשורה העליונה ושלוש בתחתונה, והשורה החלקית ממורכזת */
.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);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);
  min-height:60px;
}

/* ============ mobile ============ */
@media (max-width:1199px){
  .s14b__title{font-size:36px;line-height:44px;}
  .s14b__lede{margin-top:18px;font-size:24px;line-height:38px;}
  /* במובייל שתיים בשורה: הכרטיס נשאר גדול מספיק כדי לזהות פנים,
     והשבע נגמרות בארבע שורות במקום להיעלם מעבר לקצה המסך */
  .s14b__rail{margin-top:32px;gap:24px 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;}
}