/* why: תצוגת ה־React של elementor.json. רוב הכללים כאן הם בדיוק מה שהפקדים הנייטיביים
   של אלמנטור מייצרים (רוחב, ריפוד, רקע, טיפוגרפיה, פילטרים) — הם כאן רק כדי שהתצוגה
   המקומית תיראה כמו האתר. מה שבאמת חייב CSS מסומן למטה ב־/* why: *\/ משלו. */

/* ⚙️ הגדרות — משנים רק את הערך ליד ההסבר */
.stm-root{
  --stm-stage:#0e323b;      /* צבע הבמה (רקע הסקשן). גוון פטרול כהה · #0e323b רגיל · #0a262d כהה יותר */
  --stm-title:#f1f4f3;      /* צבע הכותרת על הבמה */
  --stm-intro:#a5bfc4;      /* צבע משפט הפתיחה */
  --stm-card-bg:#123b45;    /* מה שרואים מאחורי תמונה שעוד לא נטענה */
  --stm-glass-a:rgba(242,244,243,.86); /* הצד הבהיר של פאנל הזכוכית */
  --stm-glass-b:rgba(212,222,222,.74); /* הצד השני של הפאנל (גרדיאנט עדין) */
  --stm-ink:#123038;        /* צבע השם בפאנל */
  --stm-ink-soft:#4c666e;   /* צבע התפקיד בפאנל */
  --stm-ring:#8fc3cc;       /* צבע טבעת המיקוד במקלדת (Tab) */
  --stm-edge:70%;           /* רכות קצה הפנס: 60% רך מאוד · 70% רגיל · 95% חד */
  --stm-blur:10px;          /* טשטוש הרקע מאחורי פאנל הזכוכית. 0 בלי · 10px רגיל · 20px חזק */
  --stm-radius:10px;        /* פינות הכרטיס והפאנל */
  --stm-gray:0;             /* רוויה של שכבת הבסיס: 0 שחור־לבן · 1 צבע מלא */
  --stm-dim:.84;            /* כמה שכבת הבסיס מעומעמת: 1 ללא · .84 רגיל · .7 כהה */
}
/* ---- מכאן אין צורך לשנות ---- */

/* ===== מה שהפקדים הנייטיביים מייצרים ===== */
.stm-root{
  position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:100%;
  padding:7vw 0;background:var(--stm-stage);overflow:hidden;
  font-family:Talent,Arial,sans-serif;
}
.stm-head{display:flex;flex-direction:column;align-items:flex-start;gap:1.1vw;padding:0 6vw 4vw;box-sizing:border-box;width:100%}
.stm-title .elementor-heading-title{margin:0;font-size:3.2vw;font-weight:700;line-height:1.14;letter-spacing:-.01em;color:var(--stm-title);text-align:start}
.stm-intro{max-width:44vw}
.stm-intro p{margin:0;font-size:1.15vw;line-height:1.65;color:var(--stm-intro);text-align:start}

.stm-viewport{position:relative;width:100%;overflow:hidden}
.stm-track{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;gap:0 1.05vw}
.stm-card{
  position:relative;flex:0 0 auto;box-sizing:border-box;width:20vw;
  border-radius:var(--stm-radius);overflow:hidden;background:var(--stm-card-bg);outline:none;
}
.stm-photo{position:relative;width:100%;line-height:0}
.stm-photo img{display:block;width:100%;height:30vw;object-fit:cover;object-position:center center}
/* Image widget ← סגנון ← CSS Filters (Saturation 0, Brightness 84, Contrast 104) */
.stm-is-base img{filter:saturate(var(--stm-gray)) contrast(1.04) brightness(var(--stm-dim))}

.stm-glass{
  position:absolute;left:0;right:0;bottom:0;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:flex-start;gap:.25vw;
  padding:1vw 1.2vw 1.1vw;border-radius:var(--stm-radius);
  background:linear-gradient(135deg,var(--stm-glass-a),var(--stm-glass-b));
  box-shadow:0 1.2vw 3vw rgba(4,22,28,.18);
}
.stm-name .elementor-heading-title{margin:0;font-size:1.45vw;font-weight:700;line-height:1.25;color:var(--stm-ink);text-align:start;white-space:nowrap}
.stm-role p{margin:0;font-size:1.2vw;line-height:1.35;color:var(--stm-ink-soft);text-align:start;white-space:nowrap}

/* ===== מה שחייב CSS ===== */

/* why: אין פקד באלמנטור שמצייר מסכה עגולה שרודפת אחרי הסמן. המיקום והרדיוס מגיעים מהסקריפט. */
.stm-is-reveal{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle var(--stm-r,0px) at var(--stm-x,50%) var(--stm-y,50%),#000 0,#000 var(--stm-edge),transparent 100%);
  mask-image:radial-gradient(circle var(--stm-r,0px) at var(--stm-x,50%) var(--stm-y,50%),#000 0,#000 var(--stm-edge),transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.stm-is-reveal img{width:100%;height:100%;object-fit:cover}

/* why: לפאנל הזכוכית אין פקד של backdrop-filter, והחלקתו מלמטה היא מעבר בין מצבים שהפקדים לא מייצרים. */
.stm-glass{
  -webkit-backdrop-filter:blur(var(--stm-blur));backdrop-filter:blur(var(--stm-blur));
  transform:translateY(115%);opacity:0;
  transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .3s ease;
}
.stm-card.is-lit .stm-glass{transform:translateY(0);opacity:1}

/* why: קונטיינר של אלמנטור מנפיש transform ב־0.4s — בלי זה כל גלישה של הלולאה הייתה נסחבת על פני הבמה. */
.stm-track{width:max-content;transition:none!important;will-change:transform}
.stm-card{transition:none!important}

/* why: אף פעם לא מילה בודדת בשורה — אין פקד כזה באלמנטור. */
.stm-intro p{text-wrap:balance}

/* why: החלון תופס גרירה אופקית בלבד, כדי שגלילת העמוד האנכית לעולם לא תיחטף. */
.stm-viewport{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.stm-root.is-dragging .stm-viewport{cursor:grabbing}
.stm-card:focus-visible{outline:2px solid var(--stm-ring);outline-offset:-2px}

/* why: במסך מגע אין ריחוף — הפנס מכובה והשמות גלויים תמיד, אחרת אי אפשר לקרוא אותם. */
@media (hover:none){
  .stm-is-reveal{display:none}
  .stm-glass{transform:none;opacity:1;transition:none}
  .stm-viewport{cursor:default}
}

/* why: בהעדפת תנועה מופחתת השורה לא נסחפת — היא הופכת לגלילה אופקית רגילה עם עצירה על כרטיס. */
@media (prefers-reduced-motion:reduce){
  .stm-viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:default}
  .stm-viewport::-webkit-scrollbar{display:none}
  .stm-card{scroll-snap-align:center}
  .stm-glass{transition:none}
}

/* ===== טאבלט (עד 1025px) ===== */
@media (max-width:1025px){
  .stm-root{padding:11vw 0}
  .stm-head{padding:0 6vw 6vw;gap:1.6vw}
  .stm-title .elementor-heading-title{font-size:4.4vw}
  .stm-intro{max-width:66vw}
  .stm-intro p{font-size:1.9vw}
  .stm-track{gap:0 1.6vw}
  .stm-card{width:24vw}
  .stm-photo img{height:36vw}
  .stm-glass{padding:1.5vw 1.7vw 1.6vw;gap:.4vw}
  .stm-name .elementor-heading-title{font-size:1.8vw}
  .stm-role p{font-size:1.6vw}
}

/* ===== מובייל (עד 767px) ===== */
@media (max-width:767px){
  .stm-root{padding:16vw 0}
  .stm-head{padding:0 7vw 9vw;gap:3vw}
  .stm-title .elementor-heading-title{font-size:7.4vw}
  .stm-intro{max-width:86vw}
  .stm-intro p{font-size:3.6vw;line-height:1.7}
  .stm-track{gap:0 2.6vw}
  .stm-card{width:44vw}
  .stm-photo img{height:66vw}
  .stm-glass{padding:2.6vw 3vw 2.8vw;gap:.7vw;box-shadow:0 2.4vw 5vw rgba(4,22,28,.2)}
  .stm-name .elementor-heading-title{font-size:4vw}
  .stm-role p{font-size:3.4vw}
}

/* RTL/LTR: בקונטיינר עמודה ציר הרוחב הוא ציר הכתיבה, ולכן flex-start הוא ימין בעברית
   ושמאל באנגלית — אותה שורה נכונה לשני הכיוונים ואין צורך בחריג. */


/* Naama: warm room photography, readable service copy, and explicit pause. */
.stm-root{--stm-stage:#493e37;--stm-card-bg:#635347;--stm-ink:#493e35;--stm-ink-soft:#65584c;--stm-ring:#e1cdb0;--stm-glass-a:rgba(247,244,238,.95);--stm-glass-b:rgba(231,224,213,.92);padding:90px 0;color:#faf6ed}
.stm-head{padding:0 8% 40px;gap:14px;position:relative}.stm-head .eyebrow{margin:0}.stm-head h2{font-size:clamp(38px,4vw,60px)}.stm-description{font-size:19px;max-width:650px}.stm-pause{background:none;border:1px solid #faf6ed70;color:inherit;font:inherit;font-size:15px;padding:9px 18px;cursor:pointer;margin-top:10px}
.stm-track{gap:22px}.stm-card{width:340px}.stm-photo img{height:480px}.stm-glass{min-height:205px;padding:24px;gap:9px;transform:none;opacity:1}.stm-glass h3{font-size:29px;line-height:1.2;font-weight:400;color:var(--stm-ink)}.stm-glass p{font-size:17px;line-height:1.6;color:var(--stm-ink-soft);margin:0}.stm-glass .stm-duration{font-size:13px;color:#75634e}.stm-note{font-size:14px;padding:30px 8% 0;max-width:900px}
.stm-card.is-lit .stm-glass{transform:translateY(-6px)}
.stm-root.is-keyboard .stm-viewport{overflow-x:auto;scroll-behavior:auto}.stm-root.is-keyboard .stm-track{transform:none!important}
@media(max-width:767px){.stm-root{padding:60px 0}.stm-head{padding:0 7% 30px}.stm-description{font-size:17px}.stm-card{width:72vw;max-width:300px}.stm-track{gap:14px}.stm-photo img{height:400px}.stm-glass{min-height:190px;padding:18px;gap:8px}.stm-glass h3{font-size:25px}.stm-glass p{font-size:16px}.stm-note{padding-inline:7%}}
@media(hover:none),(prefers-reduced-motion:reduce){.stm-is-base img{filter:none}.stm-card.is-lit .stm-glass{transform:none}}
@media(prefers-reduced-motion:reduce){.stm-pause{display:none}.stm-is-reveal{display:none}}