/* ==========================================================
   Home — Our Events (scoped under .evx)
   "Ticket" cards in the existing .event-swiper carousel:
   photo with a calendar tile, body, perforated tear line with
   side notches, and a footer action.
   The calendar tile is filled from data-date (YYYY-MM-DD) by a
   small inline script; if it can't parse, the raw date shows.
   Logo palette: royal blue + orange.
   ========================================================== */
.evx {
  --evx-blue: #0d4f9c;
  --evx-blue-deep: #083a75;
  --evx-orange: #f08a1c;
  --evx-orange-deep: #d9740a;
  --evx-ink: #142033;
  --evx-muted: #4d5a6c;
  --evx-line: #e5ebf3;
  --evx-bg: #f4f7fb;
  position: relative;
  padding: 60px 0;
  background:
    linear-gradient(180deg, #fff 0, var(--evx-bg) 220px);
}
.evx-wrap {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- heading ---------- */
.evx-head { text-align: center; margin-bottom: 34px; }
.evx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff3e6;
  color: var(--evx-orange-deep);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.evx-title {
  margin: 14px 0 0;
  font-size: 42px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--evx-blue-deep);
}
.evx-title span { color: var(--evx-orange); }

/* ---------- carousel shell ---------- */
.evx-swiper { overflow: hidden; padding: 8px 6px 56px !important; }
.evx-swiper .swiper-slide { height: auto; }
.evx-swiper .swiper-pagination { bottom: 8px !important; }
.evx-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 6px;
  background: var(--evx-blue);
  opacity: .25;
  transition: width .3s ease, opacity .3s ease;
}
.evx-swiper .swiper-pagination-bullet-active { width: 30px; opacity: 1; background: var(--evx-orange); }

/* ---------- ticket card ---------- */
.evx-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--evx-line);
  transition: transform .3s ease, box-shadow .3s ease;
}
.evx-card:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -28px rgba(8, 58, 117, .45); }

.evx-img {
  position: relative;
  height: 230px;
  margin: 10px 10px 0;
  border-radius: 16px;
  overflow: hidden;
  background: #e8eef6;
}
.evx-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.evx-card:hover .evx-img img { transform: scale(1.06); }
.evx-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 58, 117, 0) 55%, rgba(8, 58, 117, .45) 100%);
  pointer-events: none;
}

/* calendar tile */
.evx-cal {
  position: absolute;
  z-index: 1;
  left: 14px;
  top: 14px;
  min-width: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  text-align: center;
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .45);
}
.evx-cal-month, .evx-cal-day, .evx-cal-year { display: none; }
.evx-cal.is-parsed .evx-cal-month,
.evx-cal.is-parsed .evx-cal-day,
.evx-cal.is-parsed .evx-cal-year { display: block; }
.evx-cal.is-parsed .evx-cal-raw { display: none; }
.evx-cal-month {
  padding: 4px 8px;
  background: var(--evx-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.evx-cal-day { padding: 4px 8px 0; font-size: 26px; line-height: 1; font-weight: 800; color: var(--evx-blue-deep); }
.evx-cal-year { padding: 2px 8px 7px; font-size: 11px; font-weight: 700; color: var(--evx-muted); }
.evx-cal-raw {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--evx-blue-deep);
}
.evx-cal-raw .fa { color: var(--evx-orange); }

.evx-body { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.evx-card-title { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 800; color: var(--evx-blue-deep); }
.evx-text { font-size: 14.5px; line-height: 1.65; color: var(--evx-muted); }
.evx-text p { margin: 0; }

/* perforated tear line with side notches */
.evx-foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px 18px;
  border-top: 2px dashed var(--evx-line);
}
.evx-foot::before,
.evx-foot::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--evx-bg);
  border: 1px solid var(--evx-line);
}
.evx-foot::before { left: -12px; clip-path: inset(0 0 0 50%); }
.evx-foot::after { right: -12px; clip-path: inset(0 50% 0 0); }

.evx-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--evx-muted);
}
.evx-tag .fa { color: var(--evx-orange); }
.evx-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--evx-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, gap .2s ease;
}
.evx-link:hover { background: var(--evx-orange); color: #fff; gap: 12px; }

/* ---------- responsive ---------- */
@media (max-width: 991px) { .evx { padding: 48px 0; } }
@media (max-width: 640px) {
  .evx { padding: 40px 0; }
  .evx-wrap { padding: 0 16px; }
  .evx-title { font-size: 32px; }
  .evx-img { height: 210px; }
}