/* =========================================================
   event-promo.css — Event aktif + Join Us
   Pertamina Foundation inspired dark section with cards
   ========================================================= */

.promo{ background: var(--gray-900); position: relative; overflow: hidden; }
.promo::before{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(237,28,36,.08), transparent 60%),
    radial-gradient(500px 260px at 100% 100%, rgba(0,59,149,.15), transparent 60%);
}

.ticket{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: visible;
  box-shadow: 0 40px 70px -25px rgba(0,0,0,.4);
}
@media (min-width: 760px){
  .ticket{ grid-template-columns: 1.4fr 1fr; }
}

.ticket__main{ padding: 44px 36px; position: relative; }
.ticket__side{
  background: var(--pf-blue);
  color: var(--white);
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  position: relative;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.ticket__side::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -1px;
  width: 2px;
  background-image: linear-gradient(var(--gray-100) 60%, transparent 0%);
  background-position: left;
  background-size: 2px 14px;
  background-repeat: repeat-y;
  display: none;
}
@media (min-width: 760px){ .ticket__side::before{ display: block; } }

.ticket::before,
.ticket::after{
  content: "";
  position: absolute;
  width: 34px; height: 34px;
  background: var(--gray-900);
  border-radius: 50%;
  z-index: 2;
  display: none;
}
@media (min-width: 760px){
  .ticket::before{ top: -17px; right: calc(35% - 17px); }
  .ticket::after{ bottom: -17px; right: calc(35% - 17px); }
  .ticket::before, .ticket::after{ display: block; }
}

.ticket__code{
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--pf-blue);
  text-transform: uppercase;
  font-weight: 700;
}

.ticket__year{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 8vw, 84px);
  color: var(--gray-900);
  line-height: 1;
  margin-top: 10px;
}
.ticket__year span{ color: var(--pf-red); }

.ticket__theme{
  margin-top: 14px;
  font-size: 17px;
  color: var(--gray-600);
  max-width: 460px;
}

.ticket__meta{
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.ticket__meta-item{ display: flex; align-items: center; gap: 10px; }
.ticket__meta-item svg{ width: 20px; height: 20px; color: var(--pf-red); flex-shrink: 0; }
.ticket__meta-item strong{ display: block; font-size: 14px; color: var(--gray-900); }
.ticket__meta-item span{ display: block; font-size: 12px; color: var(--gray-500); }

.ticket__side h3{ color: var(--white); font-size: 20px; }
.ticket__side p{ font-size: 14px; color: rgba(255,255,255,.75); }

.countdown{ display: flex; gap: 12px; }
.countdown__unit{
  flex: 1;
  text-align: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-sm);
  padding: 12px 4px;
}
.countdown__unit strong{
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--white);
  font-weight: 800;
}
.countdown__unit span{
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  font-weight: 600;
}

.ticket__side .btn{ align-self: flex-start; margin-top: 4px; }

/* ---------- Join Us ---------- */
.join{ padding-top: 76px; }
.join__grid{
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
  margin-top: 44px;
}
@media (min-width: 760px){ .join__grid{ grid-template-columns: repeat(3, 1fr); } }

.join__card{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  transition: all .3s var(--ease);
}
.join__card:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(237,28,36,.3);
  transform: translateY(-4px);
}
.join__card .join__index{
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--pf-red);
  letter-spacing: .1em;
  font-weight: 700;
}
.join__card h3{
  color: var(--white);
  font-size: 19px;
  margin-top: 14px;
}
.join__card p{
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--gray-400);
  line-height: 1.7;
}

.join__cta{
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.join__cta p{ font-size: 14px; color: var(--gray-400); }