/* ==========================================================================
   Series Card — Tickchak Live
   Default tone uses surface bg; --inverse tone uses baseAlt + border
   Usage:
     <div class="series-card [series-card--inverse]">
       <div class="series-card__sticker">...</div>
       <div class="series-card__content">
         <div class="series-card__info">
           <div class="series-card__title">...</div>
           <span class="series-card__badge">...</span>
         </div>
         <div class="series-card__bottom">
           <div class="series-card__meta">...</div>
           <button class="series-card__btn">+</button>
         </div>
       </div>
     </div>
   ========================================================================== */

.series-card{
  display:flex;flex-direction:column;gap:var(--space-lg);
  align-items:stretch;
  background:var(--tl-color-bg-surface);
  border-radius:var(--border-radius-xl);
  padding:var(--space-md);
  overflow:hidden;width:100%;
  color:var(--tl-color-text-default);
  font-family:var(--font-family-live);
  transition:background .2s;cursor:pointer;
}
.series-card:hover{background:var(--tl-color-bg-surface-hover);}
/* שורת-התוכן: טקסט + מדבקה (הפיגמה: 12 ריפוד, 16 רווח, מדבקה 120) */
.series-card__main{display:flex;gap:var(--space-lg);align-items:stretch;width:100%;}
/* ה-CTA «רכישת מנוי» — מלוא-הרוחב, 32, בכל ההקשרים (פיגמה 11118:20686) */
.series-card__cta{width:100%;justify-content:center;}

/* Inverse tone — white bg with border, black text */
.series-card--inverse{
  background:var(--tl-color-bg-baseAlt);
  border:1px solid var(--tl-color-border-inverse-subtle);
  color:var(--tl-color-text-inverse-default);
}
.series-card--inverse:hover{background:#f8f8f8;}
.series-card--inverse .series-card__more{color:var(--tl-color-text-inverse-subtle);}
.series-card--inverse .series-card__credits .series-card__sep{background:var(--tl-color-text-inverse-default);}
.series-card--inverse .series-card__badge{background:var(--color-pink-200);color:var(--tl-color-text-inverse-default);}

/* Sticker — 104×104, shrink:0 */
.series-card__sticker{
  overflow:hidden;   /* תמונת-קאבר מקבלת את עיגול-הפינות (אסף 20/08) */
  width:120px;height:120px;min-width:120px;
  border-radius:var(--border-radius-md);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.series-card__sticker img{width:100%;height:100%;object-fit:contain;}

.series-card__content{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:var(--space-xs);
  align-items:flex-start;
}
.series-card__info{
  flex:1;width:100%;
  display:flex;flex-direction:column;gap:4px;
  align-items:flex-start;
}
/* Title — Rubik Bold 16/20, 2-line clamp */
.series-card__title{
  font-size:var(--font-size-body);font-weight:var(--font-weight-bold);
  line-height:20px;text-align:right;width:100%;
  /* בלי קיצוץ-«...» — כותרת ארוכה יורדת שורה (אסף 20/08: «לא נקודות אלא תעלה שורה») */
}
/* Badge — h:24, r:5, caption */
.series-card__badge{
  height:24px;padding:0 var(--space-sm);
  background:var(--color-pink-600);color:#fff;
  border-radius:5px;
  font-size:var(--font-size-caption);font-weight:var(--font-weight-regular);
  line-height:1;display:inline-flex;align-items:center;justify-content:center;
  white-space:nowrap;flex-shrink:0;align-self:flex-start;
}
.series-card__more{
  font-family:var(--font-family-live);
  font-size:var(--font-size-caption);font-weight:var(--font-weight-bold);
  line-height:16px;color:var(--tl-color-text-default);
  background:none;border:none;
  display:inline-flex;align-items:center;gap:var(--space-xs);
  cursor:pointer;padding:0;
}
.series-card--inverse .series-card__more{color:var(--tl-color-text-inverse-default);}
.series-card__more svg{width:16px;height:16px;flex-shrink:0;}

.series-card__bottom{
  display:flex;align-items:center;justify-content:space-between;width:100%;
}
.series-card__meta{display:flex;flex-direction:column;align-items:flex-start;gap:1px;}
.series-card__price{
  display:flex;gap:4px;align-items:center;
  font-size:var(--font-size-caption);line-height:16px;white-space:nowrap;
}
.series-card__price-label{font-weight:var(--font-weight-regular);}
.series-card__price-value{font-weight:var(--font-weight-bold);}
.series-card__credits{
  display:flex;gap:var(--space-xs);align-items:center;
  font-size:var(--font-size-caption);font-weight:var(--font-weight-regular);
  line-height:16px;white-space:nowrap;
}
.series-card__sep{width:4px;height:4px;border-radius:50%;background:var(--tl-color-text-default);opacity:0.6;}
/* וריאנט-קבוצה: «N סדרות» בתחתית (פיגמה seriesHierarchy=group) */
.series-card__series-count{
  font-size:var(--font-size-caption);font-weight:var(--font-weight-bold);
  line-height:16px;white-space:nowrap;
}

/* Action button — ירד בפיגמה 11118:20686 (הוחלף ב-CTA מלא-רוחב); נשאר לתאימות-מבנה */
.series-card__btn{
  width:32px;height:32px;min-width:32px;border-radius:100px;
  background:var(--tl-color-brand-main);border:none;
  align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s;flex-shrink:0;
  display:none;
}
.series-card__btn:hover{background:var(--tl-color-brand-hover);}
.series-card__btn svg{
  width:16px;height:16px;
  color:var(--tl-color-bg-base);fill:var(--tl-color-bg-base);stroke:none;
}

/* Small screens */
@media(max-width:374px){
  .series-card{gap:var(--space-md);padding:var(--space-sm);}
  .series-card__title{font-size:14px;line-height:18px;}
  .series-card__credits{gap:2px;}
}