/* ==========================================================================
   ArtistCard — Tickchak Live
   Source: Figma Tickchak LIVE → ArtistCard (UO0nhgcl5YIqYS16vYOXAE / 19762:90418)

   Component props:
     - state: default | hover
     - verified: boolean (default true)        → .artist-card__verified
     - showRating: boolean (default true)      → .artist-card__rating
     - followButton: boolean (default true)    → .btn brand
     - eventsBoard: boolean (default true)     → .btn neutral
     - showSocialLinks: boolean (default false)→ .artist-card__socials

   Tokens (from Figma boundVariables):
     bg.surface, padding=md/xl, gap=lg, radius=sm
     names: TL/text/default; brand btn; neutral outline btn

   STRUCTURE:
   .artist-card                          → outer card (vertical, gap=lg)
     .artist-card__credit                → rotated label on left edge (absolute)
     .artist-card__head                  → avatar + names (gap=lg)
       .artist-card__avatar              → 125×125 ellipse with image
       .artist-card__names               → padding 0/sm
         .artist-card__name-he           → verified + hebrew name (RTL row)
         .artist-card__name-en
     .artist-card__rating
       .artist-card__stars               → 5 stars
       .artist-card__rating-label        → "דירוג LIVE"
     .btn.category.brand.live            → "עקוב" (FILL width)
     .btn.category.neutral.live          → "לוח הופעות" (FILL width)
     .artist-card__socials               → divider + 3 social icons
   ========================================================================== */

.artist-card{
  position:relative;
  width:100%;                                /* fills its column — proportional */
  min-width:0;                               /* break min-content chain so nowrap names don't blow up grid tracks */
  display:flex;flex-direction:column;
  gap:var(--space-lg);                       /* 16px */
  padding:var(--space-md) var(--space-xl);   /* 12px 24px */
  background:var(--tl-color-bg-surface);     /* rgba(255,255,255,0.2) */
  border-radius:var(--border-radius-sm);     /* 4px */
  color:var(--tl-color-text-default);
  font-family:var(--font-family-live);
  transition:background .2s ease;
  cursor:pointer;
}
.artist-card:hover,
.artist-card.is-hover{background:var(--tl-color-bg-surface-hover);}

/* === Credit label — rotated -90° on the left edge (reads top→bottom) ===== */
.artist-card__credit{
  position:absolute;
  top:var(--space-xs);                       /* 4px from top — reduced */
  left:0;                                    /* flush to left edge — reduced */
  display:inline-flex;align-items:center;gap:var(--space-xs);
  padding:var(--space-xs) var(--space-sm);   /* matches Figma 4/8 */
  font-family:var(--font-family-live);
  font-size:var(--font-size-caption);        /* 12px */
  font-weight:var(--font-weight-regular);
  line-height:var(--line-height-caption);    /* 16px */
  color:var(--tl-color-text-default);
  text-decoration:none;
  white-space:nowrap;
  transform-origin:top left;
  transform:rotate(-90deg) translateX(-100%); /* flipped: arrow at BOTTOM */
}
.artist-card__credit svg{
  width:10px;height:10px;display:block;
  flex-shrink:0;
}

/* === Head: avatar + names ================================================= */
.artist-card__head{
  display:flex;flex-direction:column;
  gap:var(--space-lg);                       /* 16px */
  align-items:center;
  width:100%;
}
.artist-card__avatar{
  width:100%;                                /* fills inner width — keeps proportion */
  aspect-ratio:1 / 1;                        /* always a circle */
  border-radius:50%;
  overflow:hidden;
  background:rgba(255,255,255,0.05);
  flex-shrink:0;
}
.artist-card__avatar img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.artist-card__names{
  width:100%;
  display:flex;flex-direction:column;
  align-items:center;
  padding:0;
}
.artist-card__name-he{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-xs);                       /* 4px between text and badge */
  width:100%;
  font-family:var(--font-family-live);
  font-size:var(--font-size-body);           /* 16px */
  font-weight:var(--font-weight-bold);
  line-height:var(--dim-5);                  /* 20px */
  color:var(--tl-color-text-default);
}
.artist-card__name-text{
  flex:0 1 auto;
  min-width:0;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.artist-card__name-en{
  width:100%;
  font-family:var(--font-family-live);
  font-size:var(--font-size-caption);        /* 12px */
  font-weight:var(--font-weight-bold);
  line-height:var(--line-height-caption);    /* 16px */
  color:var(--tl-color-text-default);
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Verified badge — flex sibling next to text, aligned to last line via flex-end */
.artist-card__verified{
  width:16px;height:16px;
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.artist-card__verified svg{width:100%;height:100%;display:block;}

/* === Rating ============================================================== */
.artist-card__rating{
  display:flex;flex-direction:column;
  align-items:center;
  width:100%;
}
.artist-card__stars{
  display:flex;align-items:center;
  gap:0;
}
.artist-card__stars svg{
  width:20px;height:20px;display:block;
}
.artist-card__rating-label{
  font-family:var(--font-family-live);
  font-size:var(--font-size-caption);        /* 12px */
  font-weight:var(--font-weight-regular);
  line-height:var(--line-height-caption);    /* 16px */
  color:var(--tl-color-text-default);
  text-align:center;
}

/* === Buttons (Button System) ============================================= */
.artist-card .btn{
  width:100%;                                /* FILL inside the card */
}

/* === Social links (hidden by default; toggled by adding markup) ========== */
.artist-card__socials{
  width:100%;
  display:flex;flex-direction:column;
  gap:var(--space-lg);                       /* 16px */
  align-items:center;
}
.artist-card__divider{
  width:100%;height:1px;border:0;
  background:var(--tl-color-border-subtle);  /* rgba(255,255,255,0.2) */
}
.artist-card__social-icons{
  display:flex;align-items:center;
  gap:var(--space-lg);                       /* 16px */
}
.artist-card__social-icons a{
  width:24px;height:24px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--tl-color-text-default);
  text-decoration:none;
}
.artist-card__social-icons svg{width:100%;height:100%;display:block;}
.artist-card__social-icons a:hover{opacity:0.7;}