/* ==========================================================================
   EventCard — Tickchak Live
   Figma: "רכיב אירועים" (UO0nhgcl5YIqYS16vYOXAE) node 37:434
          └ dark:  regular 18709:81602 · large 22:175 · large/mobile 37:435
                   hover 27852:128672 · loading 27852:131870
            light: regular 41281:118145 · large 41281:118106
            StatusRibbon 39429:45230
   Required: tokens.css

   ── שמות: פיגמה ↔ דמו (שם אחד לשניהם) ───────────────────────────────────
     EventCard      → .event-card
       Media        → .event-card__media          (תמונה + שורת-תאריך)
       Poster       → .event-card__poster
       DateBar      → .event-card__date-bar
       Divider      → .event-card__divider
       StatusRibbon → .event-card__ribbon         (prop: ribbon)
       Info         → .event-card__info
       Title        → .event-card__title
       Venue        → .event-card__venue
       PhotoCredit  → .event-card__credit         ← חובה תמיד (אסף, 16/07)

   ── ארבעה צירים (פיגמה, 05/08/2026) ────────────────────────────────────
     size:   regular (173) · large (300×420 בנייח, 252×352 בנייד)
     device: desktop · mobile          ← נייח / נייד
     state:  default · hover · loading
     theme:  dark · light              ← בהיר = הכרטיס על רקע לבן

     🔴 עד 05/08 היה `size` יחיד שדחס גודל **ומכשיר** יחד (largeDesktop /
        largeMobile / regular). זה מה שיצר שני ווריאנטים באותו שם בפיגמה,
        והרכיב לא ידע איזה להגיש. פוצל לשני מאפיינים נפרדים, ואז נוסף
        `theme` כשאסף הוסיף את הערכה הבהירה. אין ווריאנט שנמחק — רק שמות.

     • בנייד אין hover — הכפתורים **קבועים** על הפוסטר. לכן
       device=mobile × state=hover לא קיים, במכוון.
     • בדמו `hover` אינו ווריאנט אלא **מחלקת-מצב** על אותו אלמנט
       (`.event-card:hover .event-card__cta`). זה בכוונה — ראה למטה.

   ── ערכה בהירה: `.event-card--light` ───────────────────────────────────
     מה מתהפך: **רק מה שיושב על הדף** — שם האירוע, האולם, ושורת-התאריך.
     מה שיושב **על הפוסטר** לא מתהפך (קרדיט-צילום, סרט-הסטטוס, הכפתורים) —
     הפוסטר כהה בכל ערכה, אז טקסט לבן עליו נכון בשתיהן.
     המנגנון: משפחת הטוקנים `inverse` — בדיוק כמו בפיגמה.

   ── גמיש ────────────────────────────────────────────────────────────────
     הרוחב נקבע ע"י המכל בין 165 ל-173 (min/max מהפיגמה) — לא מקובע.

   Usage:
     <article class="event-card">
       <div class="event-card__media">
         <div class="event-card__poster"><img src="…" alt=""></div>
         <div class="event-card__date-bar">
           <span>17:30</span>
           <i class="event-card__divider"></i>
           <span>ראשון</span>
           <i class="event-card__divider"></i>
           <span>10.1.26</span>
         </div>
         <div class="event-card__ribbon"><span>אירוע שהחל</span></div>   <!-- prop: ribbon -->
       </div>
       <div class="event-card__info">
         <h3 class="event-card__title">שם האירוע</h3>
         <p class="event-card__venue">שם האולם</p>
       </div>
       <div class="event-card__credit"><span>קרדיט צילום</span></div>     <!-- חובה -->
     </article>
   ========================================================================== */

.event-card{
  position:relative;
  display:flex;flex-direction:column;
  gap:var(--space-md);                 /* 12 — פיגמה */
  align-items:flex-end;                /* items-end = ימין ב-RTL */
  width:100%;min-width:165px;max-width:173px;
  font-family:var(--font-family-live);
  color:var(--tl-color-text-default);
}

/* Media — תמונה + שורת-תאריך, רווח 8 ביניהם (פיגמה 18709:81601) */
.event-card__media{
  position:relative;                   /* עוגן ל-StatusRibbon */
  display:flex;flex-direction:column;
  gap:var(--space-sm);
  width:100%;
}

/* Poster — יחס נעול (170:240.44 בפיגמה); התמונה לא מתעוותת בשום רוחב */
.event-card__poster{
  position:relative;                   /* עוגן ל-CTA של מצב-ההובר */
  width:100%;
  aspect-ratio:170 / 240.44;
  border-radius:var(--border-radius-sm);
  overflow:hidden;
}
.event-card__poster > img{
  display:block;width:100%;height:100%;
  object-fit:cover;
}

/* Hover CTA — כפתור "לאתר כרטיסים" על הפוסטר (פיגמה EventCard hover 27852:128672).
   העוטף מטפל רק ב**מיקום** (מרכז-מרכז התמונה) וב**הופעה בהובר/פוקוס**; המראה עצמו
   מגיע כולו ממערכת-הכפתורים — הכפתור בפנים הוא `.btn category brand live` (צהוב-מותג,
   32, גלולה). כך גם ה-scale(0.96) של `.btn:active` פועל בלי לשבור את המרכוז של העוטף. */
.event-card__cta{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  opacity:0;pointer-events:none;
  transition:opacity .2s;
  z-index:1;                                    /* מעל שכבת-ההכהיה */
}
/* הכהיית-הפוסטר בריחוף — בפיגמה (27852:128672) לפוסטר **שני מילויים**:
   התמונה, ומעליה שחור ב-50%. במצב הרגיל יש רק את התמונה. */
.event-card__poster::after{
  content:"";
  position:absolute;inset:0;
  background:rgba(0,0,0,.5);
  opacity:0;pointer-events:none;
  transition:opacity .2s;
}
.event-card:hover .event-card__cta,
.event-card:focus-within .event-card__cta,
.event-card:hover .event-card__poster::after,
.event-card:focus-within .event-card__poster::after{
  opacity:1;
}
.event-card:hover .event-card__cta,
.event-card:focus-within .event-card__cta{pointer-events:auto;}

/* DateBar — שעה · יום · תאריך */
.event-card__date-bar{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  padding:var(--space-xs) var(--space-md);      /* 4 / 12 — פיגמה */
  border-radius:var(--border-radius-sm);
  background:var(--tl-color-bg-surface);        /* rgba(255,255,255,.2) */
  font-size:var(--font-size-caption);
  line-height:var(--line-height-caption);
  font-weight:var(--font-weight-regular,400);
  white-space:nowrap;
}
.event-card__divider{
  flex:none;
  width:1px;height:var(--dim-4);                /* 16 */
  background:currentColor;
}

/* Info — שם האירוע + אולם */
.event-card__info{
  display:flex;flex-direction:column;
  gap:var(--space-xs);                          /* 4 — פיגמה */
  align-items:flex-end;
  width:100%;
  text-align:right;
  word-break:break-word;
}
.event-card__title{
  width:100%;
  font-size:var(--font-size-body);              /* 16 */
  line-height:var(--line-height-body,20px);
  font-weight:var(--font-weight-bold,700);
}
/* Venue — שורה אחת, נחתך בשלוש-נקודות (פיגמה: text-ellipsis) */
.event-card__venue{
  width:100%;
  font-size:var(--font-size-caption);
  line-height:var(--line-height-caption);
  font-weight:var(--font-weight-regular,400);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ══ size=large — פוסטר בלבד, ועליו קרדיט ══════════════════════════════════
   פיגמה 22:175 (נייח 300×420) · 37:435 (נייד 252×352).
   בפיגמה כל הילדים מוסתרים והתמונה היא מילוי של המסגרת עצמה — אין טקסט,
   אין שורת-תאריך ואין קרדיט.
   🔴 **הכרעת אסף 05/08: הגדול נשאר פוסטר בלבד — אבל הקרדיט חייב להופיע.**
      הקרדיט חובה בכל כרטיס (אסף, 16/07), והסתרתו בגדול הייתה השמטה.
      הדמו מציג אותו; בפיגמה זה עדיין פער פתוח. */
.event-card--large{
  max-width:300px;min-width:0;
  gap:0;
}
.event-card--large .event-card__poster{
  aspect-ratio:300 / 420;
  border-radius:var(--border-radius-md,8px);
}
.event-card--large-mobile{max-width:252px;}
.event-card--large-mobile .event-card__poster{aspect-ratio:252 / 352;}

/* ══ state=hover — EventCardActions ════════════════════════════════════════
   פיגמה 27852:128672 → EventCardActions: מסגרת 138×32 ממורכזת על הפוסטר.
     · כפתור-סל 32×32, רדיוס 100, מילוי TL/color/Brand/main, אייקון 16 לבן
     · רווח 8
     · «פרטי אירוע» — **שתי שכבות**: מסגרת לבנה 98×32 (TL/color/bg/baseAlt,
       רדיוס גלולה) שעוטפת כפתור **שקוף** מהמערכת. אסף עטף ולא צבע את הכפתור,
       כי אין וריאנט לבן במערכת-הכפתורים. הדמו מחזיק את אותן שתי השכבות. */
.event-card__actions{
  display:flex;align-items:center;
  /* row-reverse: כפתור-הסל **משמאל** ו«פרטי אירוע» מימינו — כמו בפיגמה,
     שבה הסל יושב ב-x=0. בלי זה ה-RTL של הדף הופך אותם. */
  flex-direction:row-reverse;
  gap:var(--space-sm);                          /* 8 — פיגמה (138-32-98) */
}
/* המידות והעיגול מגיעים ממערכת-הכפתורים: `btn category brand live icon-only`
   נותן 32×32, והאייקון בתוך `.btn-ico` נקבע ל-16. אין כאן מידה ידנית אחת.
   הצבע: בפיגמה האייקון מצויר ב**קווים שחורים** (7 ווקטורים, `TL/color/icon/inverse`)
   ולא במילוי — ולכן שחור על הצהוב. זה גם מה שהכפתור המותגי נותן ממילא. */
.event-card__cart.btn.category.brand.live{
  flex:none;
  color:var(--tl-color-icon-inverse,#000);
}
/* עובי-הקו כבר לא נדרס כאן: `vector-effect:non-scaling-stroke` שנוסף למערכת-
   הכפתורים (button.css, 05/08) נותן 1px לכל אייקון-קו בלי קשר לגודל תיבת-הציור.
   העקיפה הנקודתית שהייתה כאן (1.5 לתיבת 24) הוסרה — היא כבר מיותרת. */
/* השכבה החיצונה — הלבן. השכבה הפנימית היא הכפתור עצמו, שקוף. */
.event-card__details{
  width:98px;height:32px;
  flex:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--border-radius-full,999px);
  background:var(--tl-color-bg-baseAlt,#fff);
}
/* שרשרת ה-:not חוזרת כאן **בכוונה** — בלעדיה הכלל של מערכת-הכפתורים
   (.btn.category.live:not(.brand):not(.neutral)) גובר ומחזיר טקסט לבן,
   והכיתוב נעלם על המסגרת הלבנה. זה היה הבאג שאסף ראה. */
.event-card__details > .btn.category.live:not(.brand):not(.neutral){
  width:100%;height:100%;padding:0;
  background:transparent;
  color:var(--tl-color-text-inverse-default,#000);
  border-radius:inherit;
}
.event-card__details > .btn.category.live:not(.brand):not(.neutral):hover:not(.disabled){
  background:rgba(0,0,0,.06);
}

/* ══ device=mobile — הכפתור הנייח ══════════════════════════════════════════
   פיגמה: Button 32×32 ב-(12,10) בפינה העליונה. במגע אין ריחוף, ולכן
   הכפתור **קבוע** ולא נדלק. זו הסיבה ש-mobile×hover לא קיים. */
.event-card__static-action{
  position:absolute;top:10px;left:12px;       /* פיגמה: x=12 — הפינה השמאלית (תוקן 05/08, אסף) */
  z-index:2;
}

/* ══ state=loading — שלד ═══════════════════════════════════════════════════
   פיגמה 27852:131870: אותה גיאומטריה בדיוק, בלי תוכן. שלושה בלוקים
   ברדיוס 4 עם גרדיאנט. עצירות-הצבע מדויקות מהפיגמה; הכיוון מקורב. */
.event-card__skeleton{
  width:100%;
  border-radius:4px;
  background:linear-gradient(200deg,rgba(255,255,255,0) 0%,#d4d4d4 100%);
}
.event-card__skeleton--poster{aspect-ratio:170 / 240.44;}
.event-card--large .event-card__skeleton--poster{aspect-ratio:300 / 420;}
.event-card--large-mobile .event-card__skeleton--poster{aspect-ratio:252 / 352;}
.event-card__skeleton--bar{height:24px;}       /* שורת-התאריך */
.event-card__skeleton--info{height:60px;}      /* שם + אולם */

/* ══ ערכה בהירה (theme=light) — הכרטיס על רקע לבן ══════════════════════════
   פיגמה: regular 41281:118145 · large 41281:118106.
   רק שלושה טוקנים מתחלפים, וכולם למשפחת `inverse` — אין צבע ידני אחד.
   מה שעל הפוסטר (קרדיט · סרט-סטטוס · כפתורים) נשאר כמו שהוא, במכוון. */
.event-card--light{
  color:var(--tl-color-text-inverse-default,#000);
}
.event-card--light .event-card__date-bar{
  background:var(--tl-color-bg-surface-inv,rgba(0,0,0,0.05));
}
/* קרדיט-הצילום יושב **על הפוסטר**, לא על הדף — נשאר לבן גם בערכה הבהירה.
   בלי השורה הזו הוא היה יורש את השחור ונעלם על תמונה כהה. */
.event-card--light .event-card__credit > span{
  color:var(--tl-color-text-default);
}

/* ── StatusRibbon (prop: ribbon) — פיגמה 39429:45230 ───────────────────────
   ריבוע-חיתוך 100×100 בפינה; הסרט מסתובב -45° סביב מרכז שנמדד בפיגמה
   (הקופסה הפנימית 116.74² ממוקמת ב--20/-20.48 → מרכז 38.37/37.89). */
.event-card__ribbon{
  position:absolute;top:0;left:0;
  width:100px;height:100px;
  overflow:hidden;
  pointer-events:none;
}
.event-card__ribbon > span{
  position:absolute;
  top:37.89px;left:38.37px;
  width:137.1px;
  transform:translate(-50%,-50%) rotate(-45deg);
  display:flex;align-items:center;justify-content:center;
  padding:var(--space-xs) 10px;                 /* 4 — אסף תיקן בפיגמה 16/07 (היה 6) */
  background:var(--tl-color-state-success-bg);  /* #b9ca20 */
  color:var(--tl-color-bg-base);                /* #000 — טקסט שחור על הירוק */
  font-size:var(--font-size-caption);
  line-height:var(--line-height-caption);
  font-weight:var(--font-weight-bold,700);
  white-space:nowrap;
}

/* ── אייקוני-ניהול (prop: adminIcon) — פיגמה 37:434 · ADR-017 ──────────────
   קבב משמאל-למעלה, כוכב מימין-למעלה. מדוד בפיגמה: הקבב ב-x=12, והכוכב ב-121
   (regular) / 200 (largeMobile) / 248 (largeDesktop) — כלומר **12 מהקצה** בכל
   הגדלים. לכן inset ולא מספר פר-גודל.
   הכוכב = מקודם. אפור = לא מקודם, טורקיז = מקודם. **לחיץ בשני המצבים.** */
.event-card__admin{
  position:absolute;top:12px;
  z-index:2;
}
.event-card__admin--menu{left:12px;}    /* קבב — פעולות: הסרה · נעיצה · פאצ׳ קידום */
.event-card__admin--promote{right:12px;} /* כוכב — מקודם */

/* ── PhotoCredit — חובה בכל כרטיס. מסובב, צמוד לימין התמונה ──────────────── */
.event-card__credit{
  position:absolute;top:29px;right:0;
  padding:var(--space-sm);
  pointer-events:none;
}
/* writing-mode + 180° = טקסט מלמטה-למעלה, ותופס עמודה צרה אמיתית
   (rotate לבדו משאיר קופסה אופקית ומשבש את הפריסה). */
.event-card__credit > span{
  display:block;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  white-space:nowrap;
  font-size:var(--font-size-caption);
  line-height:var(--line-height-caption);
  font-weight:var(--font-weight-regular,400);
  text-shadow:0 0 3px #000;                     /* מדוד בפיגמה */
}