/* ================================
   Programação Comexhoje — XP Styles
   (revisado: 1–6 avatares + mobile)
================================== */

.xp-card{
  border: 1px solid #fff;
  border-radius: 24px;
  padding: 24px;
  display: grid;
  grid-template-columns: 260px 1px 1fr;
  align-items: center;
  gap: 24px;
  max-width: 80%;
  margin: 0 auto 24px auto;
}

.xp-when{
  text-align: center;
  display: grid;
  gap: 10px;
}

.xp-time{
  font-size: 32px;
  font-weight: 700;
}

.xp-date-line{
  font-size: 20px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  gap: 8px;
  text-transform: uppercase;
}

.xp-divider{
  width: 1px;
  height: 100%;
  background: #fff;
}

.xp-content{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
}

/* Quando não tem avatars, evita “buraco” na grid */
.xp-content--no-avatars{
  grid-template-columns: 1fr;
}

/* =========================
   Avatares (1–6) — Desktop
========================= */

.xp-avatars{
  position: relative;
  height: 80px;
  width: 0;               /* base: a largura real vem das classes --N */
  justify-self: center;   /* não “pende” pro divider */
}

/* desktop: bolinha 80px / offset 65px */
.xp-avatars--1{ width: 80px; }
.xp-avatars--2{ width: 145px; }  /* 80 + 1*65 */
.xp-avatars--3{ width: 210px; }
.xp-avatars--4{ width: 275px; }
.xp-avatars--5{ width: 340px; }
.xp-avatars--6{ width: 405px; }

.xp-avatar{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: none !important;
}

/* padrão: sobreposição (2–6) */
.xp-avatars--2 .xp-avatar,
.xp-avatars--3 .xp-avatar,
.xp-avatars--4 .xp-avatar,
.xp-avatars--5 .xp-avatar,
.xp-avatars--6 .xp-avatar{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* offsets (65px) + z-index */
.xp-avatars--2 .xp-avatar:nth-child(1){ left:   0px; z-index: 6; }
.xp-avatars--2 .xp-avatar:nth-child(2){ left:  65px; z-index: 5; }

.xp-avatars--3 .xp-avatar:nth-child(1){ left:   0px; z-index: 6; }
.xp-avatars--3 .xp-avatar:nth-child(2){ left:  65px; z-index: 5; }
.xp-avatars--3 .xp-avatar:nth-child(3){ left: 130px; z-index: 4; }

.xp-avatars--4 .xp-avatar:nth-child(1){ left:   0px; z-index: 6; }
.xp-avatars--4 .xp-avatar:nth-child(2){ left:  65px; z-index: 5; }
.xp-avatars--4 .xp-avatar:nth-child(3){ left: 130px; z-index: 4; }
.xp-avatars--4 .xp-avatar:nth-child(4){ left: 195px; z-index: 3; }

.xp-avatars--5 .xp-avatar:nth-child(1){ left:   0px; z-index: 6; }
.xp-avatars--5 .xp-avatar:nth-child(2){ left:  65px; z-index: 5; }
.xp-avatars--5 .xp-avatar:nth-child(3){ left: 130px; z-index: 4; }
.xp-avatars--5 .xp-avatar:nth-child(4){ left: 195px; z-index: 3; }
.xp-avatars--5 .xp-avatar:nth-child(5){ left: 260px; z-index: 2; }

.xp-avatars--6 .xp-avatar:nth-child(1){ left:   0px; z-index: 6; }
.xp-avatars--6 .xp-avatar:nth-child(2){ left:  65px; z-index: 5; }
.xp-avatars--6 .xp-avatar:nth-child(3){ left: 130px; z-index: 4; }
.xp-avatars--6 .xp-avatar:nth-child(4){ left: 195px; z-index: 3; }
.xp-avatars--6 .xp-avatar:nth-child(5){ left: 260px; z-index: 2; }
.xp-avatars--6 .xp-avatar:nth-child(6){ left: 325px; z-index: 1; }

/* 1 avatar: centralizado (sem absolute) */
.xp-avatars--1{
  display: flex;
  align-items: center;
  justify-content: center;
}
.xp-avatars--1 .xp-avatar{
  position: relative;
  top: auto;
  left: auto;
  transform: none;
}

/* =========================
   Texto
========================= */

.xp-title{
  margin: 0 0 6px;
  font-size: 21px;
  font-weight: 700;
}

.xp-speakers-line{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: #f99f16;
}

.xp-subtitle{
  margin: 0;
  font-size: 16px;
  color: #fff;
}

/* =========================
   Responsivo
========================= */

@media (max-width: 768px){

  .xp-card{
    grid-template-columns: 1fr;
    gap: 18px;
    border-radius: 20px;
    max-width: 100%;
  }

  .xp-when{
    text-align: left;
    justify-items: start;
  }

  .xp-divider{
    width: 100%;
    height: 1px;
  }

  .xp-content{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* mobile: bolinha 70px / offset 42px */
  .xp-avatars{
    height: 70px;
    width: 0;
    justify-self: start;
  }

  .xp-avatars--1{ width: 70px; }
  .xp-avatars--2{ width: 112px; }  /* 70 + 1*42 */
  .xp-avatars--3{ width: 154px; }
  .xp-avatars--4{ width: 196px; }
  .xp-avatars--5{ width: 238px; }
  .xp-avatars--6{ width: 280px; }

  .xp-avatar{
    width: 70px;
    height: 70px;
  }

  .xp-avatars--2 .xp-avatar,
  .xp-avatars--3 .xp-avatar,
  .xp-avatars--4 .xp-avatar,
  .xp-avatars--5 .xp-avatar,
  .xp-avatars--6 .xp-avatar{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .xp-avatars--2 .xp-avatar:nth-child(1){ left:   0px; z-index: 6; }
  .xp-avatars--2 .xp-avatar:nth-child(2){ left:  42px; z-index: 5; }

  .xp-avatars--3 .xp-avatar:nth-child(1){ left:   0px; z-index: 6; }
  .xp-avatars--3 .xp-avatar:nth-child(2){ left:  42px; z-index: 5; }
  .xp-avatars--3 .xp-avatar:nth-child(3){ left:  84px; z-index: 4; }

  .xp-avatars--4 .xp-avatar:nth-child(1){ left:   0px; z-index: 6; }
  .xp-avatars--4 .xp-avatar:nth-child(2){ left:  42px; z-index: 5; }
  .xp-avatars--4 .xp-avatar:nth-child(3){ left:  84px; z-index: 4; }
  .xp-avatars--4 .xp-avatar:nth-child(4){ left: 126px; z-index: 3; }

  .xp-avatars--5 .xp-avatar:nth-child(1){ left:   0px; z-index: 6; }
  .xp-avatars--5 .xp-avatar:nth-child(2){ left:  42px; z-index: 5; }
  .xp-avatars--5 .xp-avatar:nth-child(3){ left:  84px; z-index: 4; }
  .xp-avatars--5 .xp-avatar:nth-child(4){ left: 126px; z-index: 3; }
  .xp-avatars--5 .xp-avatar:nth-child(5){ left: 168px; z-index: 2; }

  .xp-avatars--6 .xp-avatar:nth-child(1){ left:   0px; z-index: 6; }
  .xp-avatars--6 .xp-avatar:nth-child(2){ left:  42px; z-index: 5; }
  .xp-avatars--6 .xp-avatar:nth-child(3){ left:  84px; z-index: 4; }
  .xp-avatars--6 .xp-avatar:nth-child(4){ left: 126px; z-index: 3; }
  .xp-avatars--6 .xp-avatar:nth-child(5){ left: 168px; z-index: 2; }
  .xp-avatars--6 .xp-avatar:nth-child(6){ left: 210px; z-index: 1; }

  /* 1 avatar: centralizado também no mobile */
  .xp-avatars--1{
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .xp-avatars--1 .xp-avatar{
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }

  .xp-title{
    font-size: 22px;
  }
}

/* =========================
   HOTFIX (vence CSS antigo)
   cole isso aqui mesmo se tiver cache/duplicata
========================= */
.xp-avatars--1{
  width: 80px;
  height: 80px;
}
.xp-avatars--1 .xp-avatar{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}
@media (max-width: 768px){
  .xp-avatars--1{
    width: 70px;
    height: 70px;
  }
  .xp-avatars--1 .xp-avatar{
    width: 70px;
    height: 70px;
  }
}