/*-----------------------------------*\
  #event.css
\*-----------------------------------*/

/**
 * copyright 2022 codewithsadee
 */

/*-----------------------------------*\
  #EVENT
\*-----------------------------------*/

.event .section-title {
  margin-block-end: 40px;
}

.event .section-text {
  margin-block-end: 60px;
}

.event-card {
  background-color: var(--white);
  padding: 40px 30px;
  border-radius: var(--radius-24);
  box-shadow: var(--shadow-1);
  transition: var(--transition-2);
}

.event-card:is(:hover, :focus-within) {
  transform: translateY(-10px);
}

.event-card .card-banner {
  position: relative;
  border-radius: var(--radius-24);
  overflow: hidden;
  margin-block-end: 25px;
}

.event-card .card-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--black-alpha-80);
  opacity: 0;
  transition: var(--transition-1);
}

.event-card:is(:hover, :focus-within) .card-banner::before {
  opacity: 1;
}

.event-card .card-banner .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  transition: var(--transition-2);
}

.event-card:is(:hover, :focus-within) .card-banner .btn {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.event-card .card-banner .btn::before {
  background-color: var(--white);
}

.event-card .card-banner .btn .text-2 {
  color: var(--black);
}

.event-card .card-banner .btn:is(:hover, :focus-visible) {
  background-color: var(--white);
  color: var(--black);
}

.event-card .card-banner .btn:is(:hover, :focus-visible) .text-1 {
  transform: translateY(-40px);
}

.event-card .card-banner .btn:is(:hover, :focus-visible) .text-2 {
  top: 50%;
  transform: translate(-50%, -50%);
}

.event-card .card-title {
  margin-block-end: 15px;
}

.event-card .card-text {
  color: var(--quick-silver);
  line-height: var(--lineHeight-6);
  margin-block-end: 20px;
}

.event-card .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

.event-card .price {
  color: var(--gold-crayola);
  font-weight: var(--weight-bold);
}

.event-card .badge {
  background-color: var(--gold-crayola);
  color: var(--black);
  font-size: var(--fontSize-label-1);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letterSpacing-2);
  padding: 4px 12px;
  border-radius: var(--radius-circle);
  margin-block-start: 20px;
}