/* =========================================================
   לשונית סדנאות AI — סצנה, לא רשימה
   נוצר על ידי tools/make_ai.py · אין לערוך ידנית

   ⚠️ **העיקרון שנלקח מ-Adler:** מה שמחיה דף הוא **ריבוי חלקים בעומקים
   שונים**, לא אובייקט מרשים אחד. לכן כל אחד מ-12 התחומים הוא אובייקט
   בפני עצמו — גודל, זווית ועומק משלו, ואופי משלו מתחת לעכבר.
   ========================================================= */

/* ---------- השדה: הבמה שעליה יושבת כל הסצנה ---------- */
.scene{position:relative; overflow:hidden}
.scene::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset-block-start:-20%; inset-inline-start:-10%;
  width:min(80vw,60rem); aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,
             color-mix(in srgb,var(--violet) 26%,transparent), transparent 62%);
}
.scene::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset-block-end:-25%; inset-inline-end:-14%;
  width:min(70vw,52rem); aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,
             color-mix(in srgb,var(--clay) 18%,transparent), transparent 64%);
}
.scene > .wrap{position:relative; z-index:2}

/* ---------- סימנים משורטטים ---------- */
.mk{
  position:absolute; z-index:1; pointer-events:none;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
  opacity:.85;
}
.mk path{stroke:var(--violet); stroke-width:1.8; vector-effect:non-scaling-stroke}
.mk-a{width:min(30vw,15rem); inset-block-start:9%; inset-inline-end:30%}
.mk-a path{stroke:var(--clay); stroke-width:2}
.mk-b{width:min(22vw,10rem); inset-block-start:58%; inset-inline-end:6%; opacity:.7}
.mk-c{width:min(14vw,6rem); inset-block-end:16%; inset-inline-end:44%}
.mk-c path{stroke:var(--blush)}
.mk-d{width:min(26vw,12rem); inset-block-start:4%; inset-inline-start:6%; opacity:.45}
@media (max-width:47.99em){ .mk-b,.mk-d{display:none} }

/* ---------- השער ---------- */
.ai-hero{padding-block:clamp(3.5rem,8vw,6.5rem) clamp(3rem,6vw,5rem)!important}
/* ⚠️⚠️ **פעם שלישית שהסלקטור הזה ממוקד מדי, ועכשיו הוא משתחרר.**
   הוא התחיל כ-`.ai-hero .kick i`, נשבר בארבעת דפי הסדנה, והורחב
   ל-`.scene .kick i`. עכשיו נוסף פס למגזר החינוך שאינו `.scene`
   בכלל — וקו ההפרדה קרס לרוחב אפס, כך ששתי התגיות נדבקו זו לזו.
   **הכלל: רכיב משותף מקבל סלקטור לפי עצמו, לא לפי המקום שבו הוא
   נולד.** מהיום `.kick` הוא כלל גלובלי בקובץ הזה, בדיוק כמו
   בלשוניות הדאטה, הפרזנטציה והפרויקטים. */
.kick{
  display:flex; align-items:center; gap:.8rem; margin:0 0 1.5rem;
  font-size:.75rem; font-weight:700; letter-spacing:.22em; color:var(--orchid);
  flex-wrap:wrap;
}
.kick i{flex:0 0 auto; width:4rem; height:1px; background:var(--line)}
@media (max-width:40em){
  .kick i{width:.3rem; height:.3rem; border-radius:50%; background:currentColor}
}
.ai-hero h1{max-width:24ch}
/* הסיפא יורדת שורה בשלמותה במקום להשאיר "AI" לבד */
.ai-hero h1 em{display:inline-block; white-space:nowrap}
@media (max-width:34em){ .ai-hero h1 em{white-space:normal} }
.ai-hero .lead{margin-top:1.5rem; max-width:36rem}
.ai-hero .btn-row{margin-top:2.25rem}

/* אובייקטים מרחפים בשער — אותה משפחת גליפים, גדולים ומטושטשים.
   הם יוצרים את העומק לפני שהקורא הגיע לשדה עצמו. */
.floaters{position:absolute; inset:0; z-index:1; pointer-events:none}
.floaters .fl{
  position:absolute;
  width:var(--w); opacity:var(--o);
  filter:blur(var(--b));
  transform:rotate(var(--r)) translateY(var(--py,0));
}
.floaters .gl{width:100%; height:auto}
/* ⚠️ **`inset-inline-end` ולא `start`.** ב-RTL ה-start הוא הצד הימני —
   כלומר בדיוק המקום שבו יושבת הכותרת. בגרסה הראשונה כל האובייקטים
   נחתו על הטקסט. הכתב מימין, הסצנה משמאל. */
.fl1{--w:12rem; --o:.68; --b:0px;   --r:-8deg;  inset-block-start:12%; inset-inline-end:8%}
.fl2{--w:7.5rem;--o:.85; --b:0px;   --r:12deg;  inset-block-start:52%; inset-inline-end:23%}
.fl3{--w:18rem; --o:.28; --b:3.2px; --r:6deg;   inset-block-end:-12%;  inset-inline-end:2%}
.fl4{--w:8.5rem;--o:.55; --b:.8px;  --r:-14deg; inset-block-start:30%; inset-inline-end:34%}
.fl5{--w:5.5rem;--o:.75; --b:0px;   --r:20deg;  inset-block-start:6%;  inset-inline-end:37%}
.fl6{--w:10rem; --o:.36; --b:2px;   --r:-4deg;  inset-block-end:4%;    inset-inline-end:26%}
/* הצבע נכנס לאובייקטים המרחפים — בלעדיו הם קווים אפורים ולא סצנה */
.floaters .fl1 .gl{stroke:var(--clay)}
.floaters .fl2 .gl{stroke:var(--orchid)}
.floaters .fl4 .gl{stroke:var(--violet)}
.floaters .fl5 .gl{stroke:var(--blush)}
.floaters .gl .hi{stroke:currentColor; opacity:.55}
/* ⚠️ בטלפון אין חצי ריק — הכתב תופס את כל הרוחב, וכל אובייקט
   שמרחף עליו הופך מסצנה להפרעה. נשארת רק שכבת האטמוספירה הרחוקה
   והמטושטשת, ואחד קטן נמוך מתחת לכפתורים. */
@media (max-width:61.99em){
  .fl1,.fl2,.fl4,.fl5{display:none}
  .fl3{--w:22rem; --o:.14; --b:4px; inset-block-end:-14%; inset-inline-end:-8%}
  .fl6{--w:7rem; --o:.30; --b:1.2px; inset-block-end:2%; inset-inline-end:4%}
  .mk-a{inset-block-start:5%; inset-inline-end:52%}
  .mk-c{inset-block-end:6%; inset-inline-end:8%}
  /* ⚠️ **בדפי הסדנה החץ הזה נוחת על הכפתור.** נמדד ב-393px:
     הסימן תופס x31–86 / y450–505, ו"לשאר הסדנאות" תופס
     x23–190 / y439–491 — חפיפה מלאה על סוף הכתב.
     השער של דף סדנה נמוך יותר מזה של `/ai/` (ריפוד קטן יותר),
     ולכן אין לו פינה פנויה — שורת הכפתורים מגיעה עד 40px
     מתחתית השער. אותה החלטה שכבר נלקחה כאן ל-`.fl1`/`.fl2`
     ול-`.mk-b`/`.mk-d`: בטלפון אין חצי ריק, ורכיב שמרחף על
     הכתב הופך מסצנה להפרעה. `mk-a` נשאר — השער לא מתרוקן.
     ב-`/ai/` עצמו הסימן נשאר כפי שהוא. */
  .ws-hero .mk-c{display:none}
}

/* ---------- הסצנה: 12 האובייקטים ---------- */
.field{
  list-style:none; margin:clamp(2.5rem,5vw,4rem) 0 0; padding:0;
  display:grid; gap:clamp(1.25rem,2.4vw,2rem);
}
/* ⚠️ הרשת נשארת אחידה — אין סיבה שתחום אחד יהיה גדול מהאחרים.
   11 פריטים משאירים שורה אחרונה חלקית, ולכן הרשת היא **פי שניים
   עמודות** וכל כרטיס נפרס על שתיים: אז אפשר להתחיל את השורה החלקית
   בהיסט של עמודה אחת, והיא יוצאת ממורכזת. */
@media (min-width:46em){
  .field{grid-template-columns:repeat(4,1fr)}
  .field li{grid-column:span 2}
  .field li:last-child{grid-column:2 / span 2}   /* השורה האחרונה: אחד, ממורכז */
}
@media (min-width:70em){
  .field{grid-template-columns:repeat(6,1fr)}
  .field li{grid-column:span 2}
  .field li:nth-last-child(2){grid-column:2 / span 2}  /* שניים, ממורכזים */
  .field li:last-child{grid-column:auto / span 2}
}

.field li{
  /* ⚠️ ההיסט והזווית הם מה שהופך רשת לסצנה. בלי זה זה חוזר להיות
     טבלה של אייקונים — בדיוק מה שנפסל. */
  transform:translateY(var(--dy)) rotate(var(--r));
  transition:transform .45s var(--ease);
}
@media (max-width:45.99em){ .field li{transform:none} }

.node{
  position:relative; display:block; height:100%;
  padding:1.6rem 1.4rem 1.5rem;
  border:1px solid var(--line); border-radius:18px;
  background:linear-gradient(155deg,
             color-mix(in srgb,var(--tint) 55%,var(--sand)),
             color-mix(in srgb,var(--plum) 78%,var(--sand)));
  /* עומק: מה שקרוב חד ובהיר, מה שרחוק עמום. זה מה שעושה רב-מימדיות. */
  opacity:calc(.70 + var(--d) * .30);
  box-shadow:0 calc(6px + var(--d) * 22px) calc(18px + var(--d) * 40px)
             -14px rgba(0,0,0,calc(.35 + var(--d) * .45));
  transition:opacity .35s var(--ease), border-color .35s var(--ease),
             box-shadow .45s var(--ease);
}
.field li:hover .node{opacity:1; border-color:var(--violet)}

.node .num{
  position:absolute; inset-block-start:1.15rem; inset-inline-end:1.3rem;
  font-family:var(--font-display); font-weight:900; font-size:.8125rem;
  color:var(--violet); opacity:.75;
}
.gl{
  display:block; width:56px; height:56px; margin-bottom:1.15rem;
  fill:none; stroke:var(--ink); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .35s var(--ease), transform .45s var(--ease);
}
.gl .hi{stroke:var(--clay)}
.field li:nth-child(3n+2) .gl .hi{stroke:var(--orchid)}
.field li:nth-child(3n+3) .gl .hi{stroke:var(--blush)}
.field li:hover .gl{stroke:var(--ink)}
.node h3{margin:0 0 .4rem; font-size:1.0625rem; font-weight:700}
.node p{margin:0; font-size:.9375rem; line-height:1.7; color:var(--ink-2)}

/* מ9 — אופי פרטני. **בכל כרטיס זזים גם הכרטיס וגם הגליף** — מה שמשתנה
   בין שישייה לשישייה הוא *אופי* התנועה, לא עצם קיומה. בגרסה הקודמת רק
   שניים מכל שישה הזיזו את הגליף, וזה נקרא כחוסר עקביות ולא כאופי. */
@media (min-width:46em){
  .field li:hover .gl{transform:translateY(-4px) scale(1.08)}

  .field li:nth-child(6n+1):hover{transform:translateY(calc(var(--dy) - 8px)) rotate(0deg)}
  .field li:nth-child(6n+1):hover .gl{transform:translateY(-6px) scale(1.10)}

  .field li:nth-child(6n+2):hover{transform:translateY(var(--dy)) rotate(calc(var(--r) * -1.6))}
  .field li:nth-child(6n+2):hover .gl{transform:rotate(8deg) scale(1.10)}

  .field li:nth-child(6n+3):hover{transform:translateY(calc(var(--dy) - 5px)) rotate(var(--r)) scale(1.035)}
  .field li:nth-child(6n+3):hover .gl{transform:translateY(-5px) scale(1.12)}

  .field li:nth-child(6n+4):hover{transform:translateY(calc(var(--dy) + 5px)) rotate(0deg)}
  .field li:nth-child(6n+4):hover .gl{transform:translateY(4px) scale(1.08)}

  .field li:nth-child(6n+5):hover{transform:translateY(var(--dy)) rotate(calc(var(--r) * .3))}
  .field li:nth-child(6n+5):hover .gl{transform:rotate(-10deg) scale(1.12)}

  .field li:nth-child(6n+6):hover{transform:translateY(calc(var(--dy) - 6px)) rotate(var(--r)) scale(1.02)}
  .field li:nth-child(6n+6):hover .gl{transform:translateY(-5px) scale(1.08)}
}

/* ריחוף עדין — הסצנה נושמת. עוצר לגמרי בהעדפת תנועה מופחתת. */
@keyframes breathe{
  0%,100%{translate:0 0}
  50%{translate:0 -7px}
}
.anim-ready .field li{animation:breathe var(--dur) ease-in-out var(--del) infinite}
.anim-ready .floaters .fl{animation:breathe var(--dur) ease-in-out var(--del) infinite}
@media (prefers-reduced-motion:reduce){
  .field li,.floaters .fl{animation:none!important}
}

/* ---------- ארבע נקודות הכניסה ---------- */
.entry{list-style:none; margin:clamp(2rem,4vw,3rem) 0 0; padding:0}
.entry > li{border-top:1px solid var(--line)}
.entry > li:last-child{border-bottom:1px solid var(--line)}
.entry a{
  display:grid; gap:.5rem 2.5rem; padding-block:1.9rem;
  text-decoration:none; color:inherit;
  transition:background-color .3s var(--ease);
}
.entry a:hover{background:color-mix(in srgb,var(--sand) 60%,transparent)}
@media (min-width:62em){
  .entry a{grid-template-columns:3.5rem minmax(0,18rem) minmax(0,1fr) auto; align-items:baseline}
}
.entry .n{font-family:var(--font-display); font-weight:900; font-size:1.6rem; color:var(--violet)}
.entry .meta{display:block; margin-bottom:.25rem; font-size:.75rem; letter-spacing:.14em; color:var(--orchid)}
.entry h3{margin:0; font-size:1.2rem}
.entry p{margin:0; font-size:.9375rem; line-height:1.75; color:var(--ink-2)}
.entry .go{font-size:.875rem; font-weight:700; color:var(--clay); white-space:nowrap}
.entry .go::after{content:" ←"}
.entry a:hover .go{color:var(--clay-2)}
/* ⚠️ **בטלפון שני קווים נקראו כקו כפול.** הקו התחתון של הפריט
   האחרון ברשימה, ו-48px מתחתיו פס ההפרדה של הסקשן הבא. במחשב
   הריווח גדול מספיק כדי ששניהם ייקראו כשני דברים שונים; בטלפון
   הם נראים כטעות דפוס. מוותרים על הקו של הרשימה — פס ההפרדה
   סוגר אותה ממילא, והוא זה שנושא משמעות מבנית. */
@media (max-width:39.99em){ .entry > li:last-child{border-bottom:0} }

/* ---------- אתגרים ---------- */
.risks{list-style:none; margin:2.5rem 0 0; padding:0; display:grid; gap:1.75rem}
@media (min-width:52em){ .risks{grid-template-columns:repeat(3,1fr); gap:2.5rem} }
.risks li{padding-top:1.25rem; border-top:2px solid var(--violet)}
.risks h3{margin:0 0 .45rem; font-size:1.0625rem}
.risks p{margin:0; font-size:.9375rem; line-height:1.75; color:var(--ink-2)}

/* ---------- האקוסיסטם ---------- */
.eco{display:grid; gap:1.25rem 3.5rem}
@media (min-width:56em){ .eco{grid-template-columns:1fr 1fr; align-items:start} }
.eco h2{margin:0}
.eco p{margin:0; font-size:1.0625rem; line-height:1.8; color:var(--ink-2)}
.eco .pair{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.25rem; font-size:.8125rem}
.eco .pair span{padding:.4rem .85rem; border:1px solid var(--line); border-radius:999px; color:var(--ink)}
/* ---------- הפס של מגזר החינוך ---------- */
/* אותה משפחה של פס AI Present בלשונית הפרזנטציה: תיבה תחומה שיוצאת
   מקצב העמוד, עם קו הדגשה עליון. ההבדל היחיד — כאן **יש** כפתור,
   כי מאחוריו יש דף פירוט אמיתי. */
.edu-sec{padding-block:clamp(3rem,6vw,4.5rem)!important}
.edu{
  position:relative; display:grid; gap:2.5rem;
  padding:clamp(1.75rem,4vw,3rem);
  background:linear-gradient(155deg,
    color-mix(in srgb,var(--plum) 82%,transparent),
    color-mix(in srgb,var(--sand) 54%,transparent));
  border:1px solid var(--line); border-top:2px solid var(--blush);
  border-radius:2px;
}
@media (min-width:62em){
  .edu{grid-template-columns:minmax(0,1fr) 13rem; gap:3.5rem; align-items:center}
}
.edu .kick{color:var(--blush)}
.edu h2{margin:.9rem 0 0; font-size:clamp(1.6rem,3.4vw,2.4rem)}
.edu .lead{margin-top:1.1rem; max-width:40rem}
.edu .btn-row{margin-top:1.75rem}
.edu-art{display:flex; justify-content:center}
.edu-art svg{
  width:100%; max-width:13rem; height:auto;
  fill:none; stroke:var(--ink-2); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.edu-art .hi{stroke:var(--blush)}
@media (max-width:61.99em){
  .edu-art{justify-content:flex-start; padding-top:1.5rem;
    border-top:1px solid var(--line)}
  .edu-art svg{max-width:9.5rem}
}

/* ---------- דפי הסדנה ---------- */
/* הסצנה כאן מרוסנת: שלושה אובייקטים במקום שישה. דף ילד שמעתיק את מלוא
   העוצמה של דף האב מבטל את ההיררכיה בין השניים. */
.ws-hero{padding-block:clamp(2.5rem,5.5vw,4.25rem) clamp(2.5rem,5vw,4rem)!important}
.ws-hero h1{max-width:18ch}
.ws-hero h1 em{display:inline-block; white-space:nowrap}
@media (max-width:34em){ .ws-hero h1 em{white-space:normal} }
.ws-hero .lead{margin-top:1.4rem; max-width:38rem}
.ws-hero .btn-row{margin-top:2rem}
.ws-hero .fl1{--w:8.5rem; --o:.55; --b:0px;  --r:-9deg; inset-block-start:16%; inset-inline-end:9%}
.ws-hero .fl2{--w:6rem;   --o:.72; --b:0px;  --r:13deg; inset-block-end:14%;   inset-inline-end:26%}
.ws-hero .fl3{--w:13rem;  --o:.20; --b:2.8px;--r:5deg;  inset-block-end:-14%;  inset-inline-end:2%}
@media (max-width:61.99em){
  .ws-hero .fl1,.ws-hero .fl2{display:none}
  .ws-hero .fl3{--w:18rem; --o:.12; inset-block-end:-12%; inset-inline-end:-6%}
}

/* חזרה לרכזת — קטן, לפני הכותרת */
.ws-back{
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.1rem;
  font-size:.8125rem; color:var(--ink-2); text-decoration:none;
  transition:color .2s var(--ease);
}
.ws-back::before{content:"→"; color:var(--violet)}
.ws-back:hover{color:var(--ink)}

/* מה נכנס פנימה — רשימה ממוספרת, לא כרטיסים. דף הילד לא חוזר על
   שפת האריחים של הרכזת. */
.learn{list-style:none; margin:2.25rem 0 0; padding:0}
.learn li{
  display:grid; gap:.2rem 1.4rem; align-items:baseline;
  padding:1.15rem 0; border-top:1px solid var(--line);
}
.learn li:last-child{border-bottom:1px solid var(--line)}
@media (min-width:40em){ .learn li{grid-template-columns:2.5rem minmax(0,1fr)} }
.learn .n{font-family:var(--font-display); font-weight:900; font-size:1rem; color:var(--violet)}
.learn p{margin:0; font-size:1rem; line-height:1.8; color:var(--ink-2)}
.learn strong{color:var(--ink); font-weight:700}

.who{
  border-inline-start:2px solid var(--violet);
  padding-inline-start:1.4rem; margin-top:.5rem;
}
.who h3{margin:0 0 .5rem; font-size:1.0625rem}
.who p{margin:0; font-size:.9375rem; line-height:1.8; color:var(--ink-2)}
.who .link{
  display:inline-flex; align-items:center; min-height:44px; margin-top:.75rem;
  font-size:.875rem; font-weight:700; color:var(--clay); text-decoration:none;
}
.who .link::after{content:" ←"}

@media (min-width:62em){
  .ws-grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:3.5rem}
}

/* שאר הסדנאות בתחום */
.sibs{list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:.15rem}
@media (min-width:52em){ .sibs{grid-template-columns:repeat(3,1fr); gap:1.25rem} }
.sibs a{
  display:block; padding:1.25rem 1.15rem;
  border:1px solid var(--line); border-radius:14px; text-decoration:none;
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.sibs a:hover{border-color:var(--violet); background:color-mix(in srgb,var(--sand) 60%,transparent)}
.sibs .meta{display:block; font-size:.7rem; letter-spacing:.14em; color:var(--orchid); margin-bottom:.3rem}
.sibs h3{margin:0; font-size:1rem; color:var(--ink)}