/* עיצוב עמוד בית ספר - כיוון B מגזיני, מתוך קובצי ההדמיה המאושרים.
   נבנה אוטומטית על ידי build_school_b.py. אין לערוך ידנית. */
/* התבנית מגדירה *{margin:0;padding:0}. בתוך עמוד בית ספר מחזירים את ברירת המחדל
   של הדפדפן, כי ההדמיה המאושרת מסתמכת עליה. הכללים שבהמשך הקובץ דורסים היכן שצריך. */
.school-b p,.school-b ul,.school-b ol,.school-b li,.school-b h1,.school-b h2,.school-b h3,
.school-b h4,.school-b h5,.school-b h6,.school-b figure,.school-b blockquote,.school-b table{margin:revert;padding:revert}
.school-b ul,.school-b ol{padding-inline-start:22px}
/* התבנית מגדירה a{color:inherit;text-decoration:none}. בהדמיה קישור רגיל בתוך טקסט
   נראה כקישור, ולכן מחזירים גם כאן. כפתורים וקישורים מעוצבים דורסים את זה בהמשך. */
.school-b a{color:revert;text-decoration:revert}
.school-b{--green:#228269;   --green-dark:#014127;   --green-light:#d9e9df;   --ink:#1f2a26;   --muted:#5c6b65;   --line:#e3ece7;   --gold:#ffc530;   --gold-ink:#4a3600;}
.school-b *{box-sizing:border-box}
.school-b{scroll-behavior:smooth}
.school-b{margin:0;font-family:'Rubik',sans-serif;color:var(--ink);background:#fff;line-height:1.7;font-size:17px}
.school-b .sb-wrap{max-width:1040px;margin:0 auto;padding:0 24px}
.school-b .topbar{background:var(--green-light);height:8px}
.school-b .demo-flag{background:#fff8e6;border:1px dashed #c8a15a;color:#7a5c1e;font-size:13px;border-radius:10px;padding:10px 16px;margin:0 0 22px}
.school-b header.site{padding:16px 0;position:absolute;top:8px;left:0;right:0;z-index:50}
.school-b header.site .sb-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.school-b .brandline img{height:95px;width:auto;display:block}
.school-b .btn-back{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;border-radius:999px;   border:1.6px solid #fff;color:#fff;text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap;backdrop-filter:blur(2px)}
.school-b .btn-back:hover{background:#fff;color:var(--green-dark)}
/* ---- magazine hero ---- */
.school-b .sb-hero{position:relative;min-height:clamp(560px, 40vw, 660px);display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.school-b .hero-bg{position:absolute;inset:0}
.school-b .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.school-b .hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,34,22,.12) 0%,rgba(1,34,22,.18) 35%,rgba(1,34,22,.62) 68%,rgba(1,34,22,.95) 100%)}
.school-b .hero-bg::before{content:'';position:absolute;top:0;left:0;right:0;height:150px;z-index:1;   background:linear-gradient(180deg,rgba(1,34,22,.65) 0%,rgba(1,34,22,0) 100%)}
.school-b .hero-inner{position:relative;padding:120px 24px 44px;width:100%}
/* הכיתוב "היחידה ללימודי חוץ בית ברל" היה גלולה עם רקע ומסגרת ונקרא ככפתור,
   ורוני ביקשה 3.9.2026 שלא ייראה ככזה. הרקע והמסגרת ירדו והוא נשאר תווית טקסט
   בצבע ובצל של תת-הכותרת בהירו. הקישור לכל בתי הספר קיים בתפריט העליון. */
.school-b .eyebrow{display:inline-flex;align-items:center;gap:8px;background:none;border:0;   padding:0;border-radius:0;font-size:13px;font-weight:500;letter-spacing:.04em;color:#dcefe7;   text-shadow:0 1px 10px rgba(0,0,0,.35);margin:0 0 16px}
.school-b .sb-hero h1{margin:0 0 8px;font-size:44px;line-height:1.14;font-weight:700;max-width:640px;text-shadow:0 2px 18px rgba(0,0,0,.3)}
.school-b .sb-hero h2{margin:0 0 22px;font-size:19px;font-weight:400;color:#dcefe7;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.school-b .hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:820px){
  .school-b .sb-hero{min-height:78vh}
  .school-b .hero-bg img{object-position:center 16%}
  .school-b .hero-inner{padding-top:96px}
  .school-b .sb-hero h1{font-size:30px}
}
@media(max-width:520px){
  .school-b .sb-hero{min-height:72vh}
}
.school-b .sb-btn{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:999px;text-decoration:none;   font-weight:600;font-size:15.5px;border:1.6px solid transparent;white-space:nowrap}
.school-b .sb-btn svg{width:19px;height:19px;flex:none}
.school-b .btn-primary{background:#fff;color:var(--green-dark)}
.school-b .btn-primary:hover{background:#eaf5f0}
.school-b .btn-wa{background:var(--gold);color:var(--gold-ink)}
.school-b .btn-wa:hover{background:#ffd35c}
.school-b .btn-outline{background:transparent;color:var(--green);border-color:var(--green)}
.school-b .btn-outline:hover{background:var(--green);color:#fff}
/* ---- stat strip ---- */
.school-b .stat-strip{background:var(--green-dark);color:#fff;padding:0}
.school-b .stat-strip .sb-wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.school-b .stat{padding:22px 16px;text-align:center;border-inline-start:1px solid rgba(255,255,255,.14)}
.school-b .stat:first-child{border-inline-start:none}
.school-b .stat .ic{width:26px;height:26px;stroke:#eaf5ee;stroke-width:1.6;fill:none;margin:0 auto 8px;display:block}
.school-b .stat b{display:block;font-size:15px;margin:0 0 2px}
.school-b .stat span{font-size:12.5px;color:#bcdccd}
@media(max-width:760px){
  /* שתי עמודות. הקו האנכי רק בין שתי העמודות, הקו האופקי רק בין השורות.
     בלי הכללים האלה נשאר קו אנכי תלוש בקצה הימני וקו אופקי בתחתית הרצועה. */
  .school-b .stat-strip .sb-wrap{grid-template-columns:1fr 1fr}
  .school-b .stat{border-inline-start:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
  .school-b .stat:nth-child(odd){border-inline-start:none}
  .school-b .stat:last-child,
  .school-b .stat:nth-last-child(2):nth-child(odd){border-bottom:none}
}
.school-b section{padding:56px 0}
.school-b section.alt{background:#f7faf8}
.school-b .sb-sec-head{margin:0 0 30px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.school-b .sec-eyebrow{display:block;color:var(--green);font-size:13px;font-weight:600;letter-spacing:.04em;margin:0 0 8px}
.school-b h3.sec{font-size:28px;color:var(--green-dark);margin:0;font-weight:600}
.school-b p{margin:0 0 16px}
/* ---- profile spotlight ---- */
.school-b .spotlight{display:grid;grid-template-columns:.72fr 1fr;gap:40px;align-items:center}
.school-b .spotlight figure{margin:0;position:relative}
.school-b .spotlight img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:20px;display:block}
.school-b .hero-slogo{margin:0 0 14px}
.school-b .hero-slogo img{height:52px;width:auto;display:block}
/* הגדלת הלוגו בהירו, בקשת רוני 3.9.2026: "הלוגו אמור להיות ברוחב של
   'היחידה ללימודי חוץ'", שרוחבו 201px בדסקטופ. לפני כן הלוגו יצא 55x52 באלהיוגה.
   52px נשאר רק לשני לוגואים רחבים מאוד, היוצרים (1545x379) ואימושיין (424x47),
   שכבר יוצאים 212 ו-469 פיקסלים רוחב. רוני ביקשה במפורש לא לגעת בשניהם.
   תיבה ולא גובה קבוע: כך לוגו גבוה וצר (טריני 160x273) לא מתנשא לגובה מוגזם,
   ולוגו רחב (פראנהוודה 398x272) לא נמתח מעבר לרוחב הכיתוב. */
.school-b:not(.school-b--skazi):not(.school-b--emotion-satia) .hero-slogo img{
  height:auto;width:auto;max-height:160px;max-width:200px}
@media(max-width:820px){
  .school-b .hero-slogo{text-align:center}
}
.school-b .pull-quote{background:#fff;border-inline-start:4px solid var(--green);border-radius:0 14px 14px 0;padding:20px 22px;   margin:0 0 18px;box-shadow:0 8px 20px rgba(0,0,0,.05)}
.school-b .pull-quote p{margin:0;font-size:17px;color:var(--green-dark);font-style:italic;line-height:1.6}
.school-b .spotlight .name{font-weight:600;color:var(--green-dark);font-size:20px;margin:0 0 4px}
.school-b .spotlight .role{color:var(--muted);font-size:14px;margin:0 0 16px}
.school-b .cred-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.school-b .cred-pill{display:inline-flex;align-items:center;gap:7px;background:var(--green-light);color:var(--green-dark);   border-radius:999px;padding:8px 14px;font-size:13px;font-weight:500}
.school-b .cred-pill svg{width:15px;height:15px;stroke:var(--green-dark);flex:none}
@media(max-width:760px){
  .school-b .spotlight{grid-template-columns:1fr}
  .school-b .spotlight figure{max-width:280px;margin:0 auto}
}
/* ---- academic banner ---- */
.school-b .academic-banner{display:flex;align-items:center;gap:20px;background:#fff;border:1.5px solid var(--green-light);   border-radius:16px;padding:26px 30px;margin-top:34px}
.school-b .academic-banner img{height:52px;width:auto;flex:none}
.school-b .academic-banner p{margin:0;font-size:15px;color:var(--muted);line-height:1.6}
.school-b .academic-banner strong{color:var(--green-dark)}
@media(max-width:640px){
  .school-b .academic-banner{flex-direction:column;text-align:center}
}
/* ---- testimonial rail ---- */
.school-b .testi-rail{display:flex;gap:18px;overflow-x:auto;padding:4px 4px 14px;scroll-snap-type:x proximity;margin:0 -4px}
.school-b .testi-card{flex:0 0 280px;scroll-snap-align:start;background:#fff;border:1.5px dashed #cddcd5;border-radius:14px;padding:22px}
.school-b .testi-card .stars{color:var(--green);font-size:14px;margin:0 0 10px;letter-spacing:2px}
.school-b .testi-card p{font-size:14.5px;color:var(--muted);margin:0 0 14px;font-style:italic}
.school-b .testi-card .who{display:flex;align-items:center;gap:10px}
.school-b .testi-avatar{width:34px;height:34px;border-radius:50%;background:var(--green-light);flex:none}
.school-b .testi-card .who b{display:block;font-size:13.5px;color:var(--ink)}
.school-b .testi-card .who span{font-size:12px;color:var(--muted)}
/* ---- course cards with tabs ---- */
.school-b .course{border:1.25px solid var(--gold);border-radius:18px;margin:0 0 28px;background:#fff;overflow:hidden;box-shadow:0 6px 20px rgba(1,65,39,.04)}
.school-b .course-head{padding:30px 32px 20px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start}
.school-b .course-tag{display:inline-block;background:var(--green-light);color:var(--green-dark);font-size:12.5px;   font-weight:600;padding:5px 12px;border-radius:999px;margin:0 0 12px}
.school-b .course-head h4{font-size:22px;color:var(--green-dark);margin:0;font-weight:600;line-height:1.35;max-width:520px}
.school-b .fact-pills{display:flex;flex-wrap:wrap;gap:8px}
.school-b .fact-pill{display:inline-flex;align-items:center;gap:6px;background:#f7faf8;border:1px solid var(--line);   border-radius:10px;padding:8px 12px;font-size:13px;color:var(--green-dark);font-weight:500;white-space:nowrap}
.school-b .fact-pill svg{width:15px;height:15px;stroke:var(--green);flex:none}
.school-b .tab-panels{padding:24px 32px 8px}
.school-b .tab-panel{display:none}
.school-b .tab-panel.active{display:block}
.school-b .tab-panel ul{margin:0;padding-inline-start:22px}
.school-b .tab-panel li{margin:0 0 7px}
.school-b .tab-panel p{margin:0 0 10px}
.school-b .tab-panel p:last-child{margin-bottom:0}
.school-b .course-foot{padding:22px 32px 28px;display:flex;flex-direction:column;align-items:stretch;gap:14px}
.school-b .course-foot .contact{font-size:14px;color:var(--muted)}
.school-b .course-foot .contact strong{color:var(--ink)}
/* מפריד הנקודה בשורת יצירת הקשר. במובייל השורה נשברת והנקודה נשארת תלויה בקצה,
   ולכן שם היא הופכת לשבירת שורה בלי סימן נראה. */
.school-b .contact .cdot{margin:0 4px}
@media(max-width:760px){.school-b .contact .cdot{display:block;width:0;height:0;overflow:hidden;font-size:0;line-height:0;margin:0}}
.school-b .course-foot .btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.school-b .course-foot .sb-btn{padding:11px 22px;font-size:14.5px}
.school-b .course-foot .btn-primary{background:var(--green);color:#fff}
.school-b .course-foot .btn-primary:hover{background:var(--green-dark)}
.school-b .course-foot .btn-wa2{background:var(--gold);border:1.6px solid var(--gold);color:var(--gold-ink)}
.school-b .course-foot .btn-wa2:hover{background:#ffd35c;border-color:#ffd35c}
.school-b .digital-note{display:inline-flex;align-items:center;gap:8px;color:var(--green);font-weight:600;font-size:15px;margin:0 0 4px}
/* ---- interactivity: reveal, hover, pulse ---- */
.school-b .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.school-b .reveal.in{opacity:1;transform:none}
.school-b .reveal-stagger.in .r-item{opacity:1;transform:none}
.school-b .r-item{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.school-b .r-item:nth-child(1){transition-delay:.02s}
.school-b .r-item:nth-child(2){transition-delay:.1s}
.school-b .r-item:nth-child(3){transition-delay:.18s}
.school-b .r-item:nth-child(4){transition-delay:.26s}
@media(prefers-reduced-motion: reduce){
  .school-b .reveal, .school-b .r-item{opacity:1!important;transform:none!important;transition:none!important}
}
.school-b .testi-card{transition:transform .25s ease,box-shadow .25s ease}
.school-b .testi-card:hover{transform:translateY(-6px);box-shadow:0 14px 28px rgba(1,65,39,.1)}
.school-b .course{transition:box-shadow .25s ease}
.school-b .course:hover{box-shadow:0 14px 34px rgba(1,65,39,.1)}
.school-b .stat{transition:background .25s ease}
.school-b .stat:hover{background:rgba(255,255,255,.05)}
.school-b .fact-pill{transition:transform .2s ease,background .2s ease}
.school-b .fact-pill:hover{transform:translateY(-2px);background:var(--green-light)}
@keyframes pulseGlow{   0%,100%{box-shadow:0 0 0 0 rgba(255,197,48,.55)}   50%{box-shadow:0 0 0 10px rgba(255,197,48,0)} }
.school-b .pulse{animation:pulseGlow 2.4s ease-in-out infinite}
.school-b .pulse:hover{animation:none}
@media(prefers-reduced-motion: reduce){
  .school-b .pulse{animation:none}
}
.school-b footer{background:var(--green-dark);color:#cfe3d9;padding:34px 0 100px;font-size:14.5px}
.school-b footer .fwrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between}
.school-b footer a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.school-b footer img{height:42px;width:auto;display:block}
.school-b .legal{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px}
/* ---- floating CTA cluster ---- */
.school-b .fab-wrap{position:fixed;bottom:22px;left:22px;z-index:70;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.school-b .fab-options{display:flex;flex-direction:column;gap:10px;opacity:0;pointer-events:none;transform:translateY(8px);transition:all .2s ease}
.school-b .fab-wrap.open .fab-options{opacity:1;pointer-events:auto;transform:translateY(0)}
.school-b .fab-option{display:flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:10px 18px 10px 10px;   box-shadow:0 8px 22px rgba(0,0,0,.16);text-decoration:none;color:var(--green-dark);font-size:14px;font-weight:600}
.school-b .fab-option .circ{width:32px;height:32px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;flex:none}
.school-b .fab-option .circ svg{width:16px;height:16px;stroke:#fff}
.school-b .fab-main{width:60px;height:60px;border-radius:50%;background:var(--green);border:none;box-shadow:0 10px 26px rgba(1,65,39,.35);   display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}
.school-b .fab-main svg{display:none}
/* כפתור יצירת הקשר הצף: תמונת הטלפון הצהוב של המותג. שתי התמונות חתוכות
   מאותה תיבה בדיוק, ולכן גוף הטלפון לא זז כלל בין המצבים; מה שמשתנה הוא
   רק השפורפרת והכבל. מעבר עכבר, מיקוד מקלדת ומצב פתוח מרימים את השפורפרת. */
.school-b .fab-main{position:relative;overflow:visible;width:76px;height:76px}
.school-b .fab-main::before,.school-b .fab-main::after{content:"";position:absolute;left:50%;bottom:4%;transform:translateX(-50%);width:100%;aspect-ratio:352/333;background:50% 100%/contain no-repeat;transition:opacity .22s ease;pointer-events:none}
.school-b .fab-main::before{background-image:url(../img/phone-down-v2.png);opacity:1}
.school-b .fab-main::after{background-image:url(../img/phone-up-v2.png);opacity:0}
.school-b .fab-wrap:hover .fab-main::after,.school-b .fab-wrap:focus-within .fab-main::after,.school-b .fab-wrap.open .fab-main::after{opacity:1}
.school-b .fab-wrap:hover .fab-main::before,.school-b .fab-wrap:focus-within .fab-main::before,.school-b .fab-wrap.open .fab-main::before{opacity:0}
/* השפורפרת המורמת ושתי אפשרויות יצירת הקשר מופיעות יחד. במכשירי מגע אין hover,
   ושם הקליק על הטלפון הוא שפותח, דרך המחלקה .open. */
@media (hover:hover){
  .school-b .fab-wrap:hover .fab-options,.school-b .fab-wrap:focus-within .fab-options{opacity:1;pointer-events:auto;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){.school-b .fab-main::before,.school-b .fab-main::after{transition:none}}
.school-b .facts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 26px;padding:18px;background:#f7faf8;border-radius:10px}
.school-b .facts-grid .fact .k{font-size:13px;color:var(--muted);display:block}
.school-b .facts-grid .fact .v{font-weight:600;color:var(--green-dark)}
.school-b .caps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 6px;padding:20px;background:#f7faf8;border-radius:10px}
.school-b .caps-grid .cap .h{font-weight:600;color:var(--green-dark);font-size:20px;display:block;line-height:1.3}
.school-b .caps-grid .cap .n{color:var(--green);font-size:15px;display:block;margin:2px 0 4px;font-weight:500}
.school-b .caps-grid .cap .d{color:var(--muted);font-size:14px;display:block;line-height:1.5}
.school-b .syl-topic{border-inline-start:2px solid var(--green-light);padding-inline-start:18px;margin:0 0 22px}
.school-b .syl-topic h6{margin:0 0 4px;font-size:16px;color:var(--green-dark);font-weight:600}
.school-b .syl-topic .mt{color:var(--green);font-weight:500;margin:0 0 6px}
.school-b .syl-topic .meta{color:var(--muted);font-size:15px;margin:0 0 10px}
.school-b .syl-topic .body{margin:0 0 8px}
.school-b .syl-topic .ln{margin:8px 0 0;font-size:16px}
.school-b .syl-topic .ln span{color:var(--green-dark);font-weight:600}
.school-b .syl-topic:last-child{margin-bottom:0}
.school-b .tbl{width:100%;border-collapse:collapse;margin:12px 0 6px;font-size:16px}
.school-b .tbl th{text-align:start;font-weight:600;color:var(--green-dark);border-bottom:1.5px solid var(--green-light);padding:9px 0}
.school-b .tbl td{padding:9px 0;border-bottom:1px solid var(--line)}
.school-b .tbl th:last-child, .school-b .tbl td:last-child{text-align:end;white-space:nowrap}
.school-b .nb{white-space:nowrap}
.school-b .tab-panel h5{font-size:15px;color:var(--green);margin:22px 0 10px;font-weight:600;letter-spacing:.02em}
.school-b .tab-panel h5:first-child{margin-top:0}
.school-b .stat-strip-3 .sb-wrap{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){
  .school-b .stat-strip-3 .sb-wrap{grid-template-columns:1fr 1fr}
}
/* ---- כרטיסיות קורס בסגנון לשוניות תיקייה ---- */
.school-b .tabs{display:flex;gap:6px;padding:16px 32px 0;border-bottom:1px solid var(--line);overflow-x:auto;background:#f7faf8}
.school-b .tab-btn{position:relative;background:rgba(34,130,105,.08);border:1px solid var(--line);border-bottom:none;
  border-radius:16px 16px 0 0;font-family:inherit;padding:12px 20px 13px;font-size:14.5px;font-weight:600;
  color:var(--green-dark);cursor:pointer;white-space:nowrap;margin-bottom:-1px;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.school-b .tab-btn:hover{background:rgba(34,130,105,.16);transform:translateY(-2px);box-shadow:0 -5px 14px rgba(1,65,39,.07)}
.school-b .tab-btn:focus-visible{outline:3px solid var(--green-dark);outline-offset:2px}
.school-b .tab-btn.active{background:#fff;color:var(--green-dark);box-shadow:0 -6px 16px rgba(1,65,39,.07);z-index:1}
.school-b .tab-btn.active::before{content:'';position:absolute;inset-inline:12px;top:0;height:3px;border-radius:3px;background:var(--green)}
.school-b .tab-btn.active::after{content:'';position:absolute;inset-inline:0;bottom:-1px;height:2px;background:#fff}
@media(prefers-reduced-motion:reduce){
  .school-b .tab-btn, .school-b .tab-btn:hover{transition:none;transform:none}
}

/* חיתוך תמונת ההירו, לכל בית ספר לפי קובץ ההדמיה שלו.
   עמוד שיש בו style ישיר על התמונה גובר על הכללים האלה, וכך זה גם בהדמיה. */
.school-b--dolly-school .hero-bg img{object-position:center 22%}
@media(max-width:820px){.school-b--dolly-school .hero-bg img{object-position:center 16%}}
.school-b--dov-klein .hero-bg img{object-position:center 22%}
@media(max-width:820px){.school-b--dov-klein .hero-bg img{object-position:center 16%}}
/* התמונה החדשה (3.9.2026) לרוחב ובה דמות בכל גובה הפריים. 22% היה חותך את הידיים המורמות. */
.school-b--ellayoga .hero-bg img{object-position:center 4%}
@media(max-width:820px){.school-b--ellayoga .hero-bg img{object-position:center 16%}}
.school-b--emotion-satia .hero-bg img{object-position:center 14%}
@media(max-width:820px){.school-b--emotion-satia .hero-bg img{object-position:center 16%}}
.school-b--nader-butto .hero-bg img{object-position:center 22%}
@media(max-width:820px){.school-b--nader-butto .hero-bg img{object-position:center 16%}}
.school-b--ncbt-coral-shachar .hero-bg img{object-position:center 22%}
@media(max-width:820px){.school-b--ncbt-coral-shachar .hero-bg img{object-position:center 16%}}
.school-b--pranaveda .hero-bg img{object-position:center 22%}
@media(max-width:820px){.school-b--pranaveda .hero-bg img{object-position:center 16%}}
.school-b--skazi .hero-bg img{object-position:center 18%}
@media(max-width:820px){.school-b--skazi .hero-bg img{object-position:center 16%}}
.school-b--taotherapy .hero-bg img{object-position:center 22%}
@media(max-width:820px){.school-b--taotherapy .hero-bg img{object-position:center 16%}}
.school-b--trini .hero-bg img{object-position:center 22%}
@media(max-width:820px){.school-b--trini .hero-bg img{object-position:center 16%}}

/* ---- כפתור הטלפון בעמודי בתי הספר, מיושר לדף הבית ----
   קודם הטלפון הונח מעל הכפתור הירוק והרקע נשאר מציץ מאחוריו.
   כאן מבטלים את העיגול ואת צל הכפתור, ומשאירים את הטלפון עומד בפני עצמו
   עם צל רך בלבד. ההילה הירוקה הפועמת הוסרה ב-2.9.2026 לבקשת רוני. */
.school-b .fab-main{
  background:none;
  box-shadow:none;
}
/* הצל שייך לתמונת הטלפון, לא לתיבת הכפתור, אחרת גם ההילה מקבלת צל */
.school-b .fab-main::before,
.school-b .fab-main::after{
  filter:drop-shadow(0 8px 14px rgba(1,65,39,.30));
}
.school-b .fab-main:focus-visible{outline:3px solid var(--green-dark);outline-offset:6px}

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

   נמדד על האתר החי ב-375px: רצועת הלשוניות דרשה 588px בתוך תיבה של 325, כלומר
   263px מוסתרים. נמדדו כל 22 קבוצות הלשוניות באתר: הרוחב הנדרש 409-827px, ולכן
   אף אחת מהן לא נכנסת לשורה אחת מתחת ל-861px, שהוא גבול המובייל של האתר.
   מטאפורת לשונית התיקייה עובדת רק בשורה אחת, ולכן במובייל היא מוחלפת בשתי עמודות.

   מה מסמן שאפשר ללחוץ, אחרי שרוני פסלה חץ ומשפט הסבר ("לא מקצועי מספיק,
   לא עיצובי מספיק"): הכפתור נראה כמקש מורם ממש - משטח לבן, מסגרת, שפה קשה
   של 2px מתחתיו וצל רך; לחיצה מורידה אותו במקום השפה; והנבחר הוא מקש ירוק מלא
   עם צל עמוק יותר. בלי אייקונים ובלי טקסט עזר.
   כפתור אחרון שנשאר לבדו בשורה נמתח לרוחב מלא, כדי שלא יישאר תא ריק ברשת. */
@media(max-width:860px){
  .school-b .tabs{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    overflow:visible;background:#f7faf8;
    padding:16px 18px 18px;border-bottom:1px solid var(--line)}
  .school-b .tab-btn{
    display:flex;align-items:center;justify-content:center;text-align:center;
    white-space:normal;overflow-wrap:anywhere;
    background:#fff;color:var(--green-dark);
    border:1px solid #d3e5db;border-radius:12px;margin-bottom:0;
    padding:12px;font-size:13.5px;line-height:1.3;min-height:50px;
    box-shadow:0 2px 0 0 #cfe2d8, 0 4px 10px rgba(1,65,39,.07);
    transition:transform .12s ease, box-shadow .12s ease, background .18s ease}
  /* כפתור בודד בשורה האחרונה תופס את כל הרוחב, אחרת נשאר תא ריק לצידו */
  .school-b .tab-btn:last-child:nth-child(odd){grid-column:1 / -1}
  /* שני הפסאודו-אלמנטים מציירים את לשונית התיקייה בדסקטופ. כאן אין תיקייה. */
  .school-b .tab-btn.active::before,
  .school-b .tab-btn.active::after{display:none}
  /* במכשיר מגע מצב :hover נדבק אחרי נגיעה, ולכן הוא מושווה למצב הרגיל */
  .school-b .tab-btn:hover{
    transform:none;background:#fff;
    box-shadow:0 2px 0 0 #cfe2d8, 0 4px 10px rgba(1,65,39,.07)}
  .school-b .tab-btn:active{
    transform:translateY(2px);
    box-shadow:0 0 0 0 #cfe2d8, 0 2px 5px rgba(1,65,39,.08)}
  .school-b .tab-btn.active{
    background:var(--green);border-color:#1b6b56;color:#fff;
    box-shadow:0 2px 0 0 #145846, 0 6px 16px rgba(34,130,105,.32)}
  /* צידי הכרטיס מתקצרים יחד עם רשת הכפתורים, אחרת הרשת לא מיושרת
     לכותרת ולתוכן שמעליה ומתחתיה. */
  .school-b .course-head{padding:24px 18px 16px}
  .school-b .tab-panels{padding:22px 18px 8px}
  .school-b .course-foot{padding:20px 18px 24px}
}

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

   הגלולות היו flex-wrap, ולכן ברוחב טלפון שלוש גלולות נשברו ל-2+1 בבית ספר אחד
   ונשארו בשורה בבית ספר אחר - כלומר לא אחיד. נמדדו כל 22 קבוצות הגלולות באתר:
   שתיים או שלוש בכל קבוצה, והארוכה ביותר "היברידי, זום או פיזי במודיעין".
   רצועה בעלת תאים שווים פותרת את שתיהן: grid-auto-flow:column נותן שורה אחת
   תמיד, לא משנה כמה גלולות יש ומה אורך הטקסט, והמראה זהה בכל בתי הספר.
   הטקסט מתחת לאייקון ולא לצידו, כי בתא של כ-90px אין מקום לשניהם זה לצד זה.
   זו אותה שפה של .facts-grid ושל רצועת הסטטיסטיקות שכבר בעמוד. */
@media(max-width:860px){
  .school-b .course-head{align-items:flex-start}
  .school-b .fact-pills{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;
    width:100%;flex:1 0 100%;margin-top:2px;
    background:#f7faf8;border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .school-b .fact-pill{
    flex-direction:column;justify-content:center;gap:5px;
    background:none;border:0;border-radius:0;
    border-inline-start:1px solid var(--line);
    padding:12px 8px;font-size:12px;line-height:1.35;
    text-align:center;white-space:normal}
  .school-b .fact-pill:first-child{border-inline-start:0}
  .school-b .fact-pill svg{width:16px;height:16px}
  .school-b .fact-pill:hover{transform:none;background:none}
}

/* ---- טבלת עובדות שכפולה, מוסתרת בטלפון בלבד ----
   רוני, 3.9.2026: "באותו קורס מופיע לי פעמיים ימי חמישי, היברידי, 5 חודשים...
   במחשב זה בסדר שזה מופיע פעמיים, אנחנו מתקנים רק איך שזה נראה בטלפון."
   המחלקה is-dup מוצמדת ב-functions.php רק לטבלה שכל ערכיה כבר ברצועת הגלולות
   שמעליה, ולכן שום מידע לא נעלם. מעל 861px שתיהן מוצגות כמו קודם. */
@media(max-width:860px){
  .school-b .facts-grid.is-dup{display:none}
}

/* ---- "היחידה ללימודי חוץ" בשורת יצירת הקשר ----
   רוני, 3.9.2026: "בקורל שחר אין רווח בין המייל של tali והיחידה ללימודי חוץ,
   ואת היחידה ללימודי חוץ תוריד לשורה חדשה, בטלפון בלבד."
   ואחריה: "כל דבר באלהיוגה אין רווח... דאג בבקשה בכל בתי הספר שיש רווחים
   במקומות שצריך."

   בשורת יצירת הקשר יש <span class="line2"> שעוטף את פרטי היחידה, כלומר התוכן
   כבר נכתב מלכתחילה כשתי שורות - אבל **מעולם לא היה לו כלל CSS**, ולכן הוא
   נשאר inline ונדבק לתו שלפניו בלי אפילו רווח.

   נסרקו כל עשרת העמודים החיים ב-1200px: חיפוש אוטומטי של שני צמתי טקסט
   שנוגעים זה בזה באותה שורה בלי רווח ביניהם. **נמצאו בדיוק עשרה מקומות
   בכל האתר, וכולם ה-line2 הזה**: קורל שחר שישה, אלהיוגה שלושה, אימושיין אחד.
   (אצל Dolly יש ירידת שורה בקוד לפני ה-span ולכן שם נראה רווח.)
   שאר ההיצמדויות בסריקה הן תאי טבלה נפרדים וקידומת "ו" עברית, ואינן פגם.

   בדסקטופ נוסף מפריד "·" זהה ל-.cdot שכבר בשורה, ובטלפון ה-span יורד לשורה
   משלו והמפריד נעלם. הכלל חל על כל 12 המופעים בארבעת בתי הספר, כדי ששורת
   יצירת הקשר תיראה אותו דבר בכולם. */
.school-b .course-foot .contact .line2::before{content:'\00B7';margin:0 4px}
@media(max-width:860px){
  .school-b .course-foot .contact .line2{display:block}
  .school-b .course-foot .contact .line2::before{content:none}
}

/* ---- ההירו של Dolly'school: להזיז את דולי שמאלה, בטלפון בלבד ----
   רוני, 3.9.2026: "צריך להזיז את התמונה של דולי שמתאמנת לצד שמאל מעט, כדי שהלוגו
   לא יישב עליה לגמרי. רק בטלפון." ואחריה: "הלוגו צריך להיות על פני הווילון,
   והאישה שמתאמנת צריכה לזוז לצד שמאל, כך שהלוגו לא נראה עליה."

   **למה object-position לא מספיק כאן**: התמונה 1600x2401 והמסגרת בטלפון 375x585.
   ביחס cover התמונה מצוירת ברוחב 390 מול מסגרת 375, כלומר **14px עודף בלבד**,
   ואנכית אפס. `object-position` יכול להזיז 7px לכל כיוון וזה לא נראה.
   בנוסף על תגית התמונה שבתוכן הפוסט יושב `style="object-position:center 40%"`,
   וסגנון מוטבע גובר על הגיליון ממילא.

   לכן ההזזה נעשית ב-`transform`, שאינו מתנגש עם הסגנון המוטבע: הגדלה קלה יוצרת
   את המרווח, וההזזה מנצלת אותו. **ההזזה באחוזים ולא בפיקסלים**, כדי שהיחס בין
   ההזזה למרווח יישמר בכל רוחב מסך: המרווח הוא (S-1)/2 = 12% מרוחב המסגרת,
   וההזזה 10%, ולכן תמיד נשאר עודף.

   נמדד בעשרה רוחבים, 320 עד 900: המסגרת מכוסה לגמרי בכל אחד מהם (המרווח הקטן
   ביותר 6px ב-320), ומעל 860px ה-transform הוא none - הדסקטופ לא נגע. */
@media(max-width:860px){
  .school-b--dolly-school .hero-bg img{
    transform:translateX(-10%) scale(1.24);transform-origin:50% 50%}
}