/* ===== WCT SPEAKERS SHOWCASE BLOCK ===== */

.wct-speakers-showcase {
  background: #f8f8f8;
  padding: 10vh 0;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.wct-speakers-showcase--no-bg {
  background: transparent !important;
}

.wct-speakers-showcase__wrapper {
  position: relative;
  width: 98%;
  max-width: 2600px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  height: 350px;
}

/* ===== Speaker Avatars ===== */
.wct-speaker {
  position: absolute;
  border-radius: 20%;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.85);
  transition: all 0.8s ease;
}

.wct-speaker.is-visible {
  opacity: 1;
  transform: scale(1);
}

.wct-speaker img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20%;
  display: block;
}

/* Avatar Sizes */
.wct-speaker--xs { width: 7%; max-width: 80px; }
.wct-speaker--sm { width: 10%; max-width: 110px; }
.wct-speaker--md { width: 100%; max-width: 204px; }
.wct-speaker--lg { width: 22%; max-width: 240px; }

/* Avatar Positions (Desktop) */
.wct-speaker--p1 { max-width: 71px; inset: 10% auto auto 2%; }
.wct-speaker--p2 { max-width: 150px; inset: auto auto 4% 9%; }
.wct-speaker--p3 { top: 45%; left: 22%; }
.wct-speaker--p4 { top: 0%; right: 48%; width: 100%; max-width: 204px; }
.wct-speaker--p5 { bottom: 0%; right: 36%; }
.wct-speaker--p6 { inset: 5% 23% auto auto; width: 100%; max-width: 133px; }
.wct-speaker--p7 { max-width: 71px; inset: 33% 5% auto auto; }
.wct-speaker--p8 { width: 100%; max-width: 150px; inset: auto 10% 0 auto; }

/* ===== Stat Cards ===== */
.wct-stat-card {
  position: absolute;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 100px;
  padding: 8px 20px 8px 8px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: scale(0.85);
  transition: all 0.8s ease;
}

.wct-stat-card.is-visible {
  opacity: 1;
  transform: scale(1);
}

.wct-stat-card--webinars { top: 5%; left: 22%; }
.wct-stat-card--participants { bottom: 0%; left: 30%; }
.wct-stat-card--speakers { top: 50%; left: 67%; }

.wct-stat-card__icon {
  background: #f0f0f0;
  border-radius: 50%;
  width: var(--icon-size-desktop, 42px);
  height: var(--icon-size-desktop, 42px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.wct-stat-card__icon svg {
  width: 50%;
  height: 50%;
  stroke: #333;
}

.wct-stat-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wct-stat-card__text {
  margin-left: 10px;
  line-height: 1.2;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
}

.wct-stat-card__number {
  font-weight: 700;
  color: #1a1a1a;
}

.wct-stat-card__label {
  color: #666;
}

/* ===== Emoji Badge ===== */
.wct-emoji-badge {
  position: absolute;
  top: 5%;
  right: 38%;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  padding: 10px;
  width: var(--icon-size-desktop, 52px);
  height: var(--icon-size-desktop, 52px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.85);
  transition: all 0.8s ease;
}

.wct-emoji-badge.is-visible {
  opacity: 1;
  transform: scale(1);
}

.wct-emoji-badge svg {
  width: 100%;
  height: 100%;
  stroke: #333;
}

.wct-emoji-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===== TABLET (max-width: 1024px) ===== */
@media (max-width: 1024px) {
  .wct-speaker--xs { width: 9%; }
  .wct-speaker--sm { width: 14%; }
  .wct-speaker--md { width: 15%; max-width: 160px; }
  .wct-speaker--lg { width: 38%; top: 35%; left: 28%; }

  .wct-speaker--p1,
  .wct-speaker--p5,
  .wct-speaker--p6,
  .wct-speaker--p7 {
    display: none;
  }

  .wct-speaker--p2 { bottom: -5%; left: 30%; width: 35%; max-width: 208px; inset: auto auto -5% 30%; }
  .wct-speaker--p3 { inset: auto auto 37% 5%; max-width: 120px; top: auto; left: auto; right: auto; }
  .wct-speaker--p4 { top: -5%; left: 45%; right: auto; max-width: 208px; }
  .wct-speaker--p8 { bottom: 5%; right: 5%; max-width: 120px; inset: auto 5% 5% auto; }

  .wct-stat-card { transform: scale(0.9); }
  .wct-stat-card.is-visible { transform: scale(1); }
  .wct-stat-card--webinars { top: 0%; left: 19%; }
  .wct-stat-card--participants { bottom: 5%; left: 9%; }
  .wct-stat-card--speakers {
    bottom: 41%;
    right: 3%;
    width: 100%;
    max-width: 140px;
    top: auto;
    left: auto;
  }

  .wct-stat-card__icon { 
    width: var(--icon-size-tablet, 38px); 
    height: var(--icon-size-tablet, 38px); 
  }
  .wct-emoji-badge { 
    width: var(--icon-size-tablet, 45px); 
    height: var(--icon-size-tablet, 45px); 
    right: 10%; 
    top: 9%; 
  }
}

/* ===== MOBILE (max-width: 480px) ===== */
@media (max-width: 480px) {
  .wct-speakers-showcase__wrapper {
    height: 290px;
  }

  .wct-speaker--p2 { top: auto; left: 28%; width: 40%; bottom: 0%; inset: auto auto 0% 28%; }
  .wct-speaker--p3 { inset: auto; top: 25%; left: 3%; width: 20%; }
  .wct-speaker--p4 { top: auto; left: 45%; width: 40%; bottom: 55%; right: auto; inset: auto auto 55% 45%; }
  .wct-speaker--p8 { top: auto; left: auto; width: 20%; right: 3%; bottom: 5%; inset: auto 3% 5% auto; }

  .wct-emoji-badge { display: none; }

  .wct-stat-card { transform: scale(0.75); }
  .wct-stat-card.is-visible { transform: scale(1); }
  .wct-stat-card__icon { 
    width: var(--icon-size-mobile, 24px); 
    height: var(--icon-size-mobile, 24px); 
  }
  .wct-emoji-badge {
    width: var(--icon-size-mobile, 0px);
    height: var(--icon-size-mobile, 0px);
  }
  .wct-stat-card__text { font-size: 0.75rem; }
  .wct-stat-card--webinars { top: 3%; left: 8%; }
}