/* ==========================================================================
   Events hub — /events landing page.
   Scoped under .evh- so it never collides with the Webinars/Resources/
   Podcasts stylesheets that may load elsewhere. Tokens re-derived from the
   sitewide palette (files/css/stylesheet.css) rather than invented — this
   is a generic eMudhra corporate hub, not CertiNext-branded, so it uses the
   sitewide blue palette, not the CertiNext orange.
   ========================================================================== */

.evh-page-body {
  --evh-navy: #0b1330;
  --evh-navy-soft: #16224a;
  --evh-blue: #1a56db;
  --evh-blue-deep: #233876;
  --evh-cream: #fff8f1;
  --evh-ink: #111928;
  --evh-ink-soft: #4b5563;
  --evh-border: #eceef1;
}

/* -------------------------------------------------------------------------
   HERO — same modern "vibe" as the Podcasts banner (pod-banner in
   podcasts.css): blurred gradient blobs, floating particles, pulsing
   eyebrow chip, gradient-accent heading, stat row, glassmorphism
   centerpiece card with ripple rings — re-themed blue/violet for a
   generic eMudhra Events page instead of podcasts' purple/orange.
   ------------------------------------------------------------------------- */
.evh-hero {
  position: relative;
  padding: 5rem 0 3rem;
  background:
    radial-gradient(ellipse 1200px 600px at 50% -10%, rgba(26,86,219,0.12), transparent 60%),
    linear-gradient(180deg, #f2f6ff 0%, #fff7ee 55%, #ffffff 100%);
  overflow: hidden;
  isolation: isolate;
}
.evh-hero > .container { position: relative; z-index: 3; }

.evh-hero__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2.5rem;
}

@media (max-width: 991px) {
  .evh-hero__row { grid-template-columns: 1fr; }
}

.evh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}
.evh-blob--1 {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, #1a56db 0%, transparent 70%);
  top: -100px;
  left: -120px;
  animation: evh-blob-a 14s ease-in-out infinite;
}
.evh-blob--2 {
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
  bottom: -150px;
  right: -140px;
  animation: evh-blob-b 16s ease-in-out infinite;
}
@keyframes evh-blob-a { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,30px) scale(1.1)} }
@keyframes evh-blob-b { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-40px,-30px) scale(1.08)} }

.evh-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.evh-particles span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a56db, #7c3aed);
  opacity: 0.45;
  animation: evh-float-dot 6s ease-in-out infinite;
}
.evh-particles span:nth-child(1) { top: 22%; left: 8%;  animation-delay: 0s; }
.evh-particles span:nth-child(2) { top: 40%; left: 3%;  animation-delay: 1s; width:4px;height:4px;}
.evh-particles span:nth-child(3) { top: 70%; left: 10%; animation-delay: 2s; }
.evh-particles span:nth-child(4) { top: 15%; right: 38%; animation-delay: 0.5s; width:4px;height:4px;}
.evh-particles span:nth-child(5) { top: 78%; right: 42%; animation-delay: 1.5s; }
.evh-particles span:nth-child(6) { top: 30%; right: 4%;  animation-delay: 2.5s; width:5px;height:5px;}
.evh-particles span:nth-child(7) { top: 55%; right: 8%;  animation-delay: 3s; }
.evh-particles span:nth-child(8) { top: 85%; right: 12%; animation-delay: 0.8s; width:4px;height:4px;}
@keyframes evh-float-dot {
  0%,100% { transform: translateY(0) scale(1); opacity: 0.4; }
  50% { transform: translateY(-18px) scale(1.2); opacity: 0.8; }
}

.evh-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--DMSans, "DM Sans", sans-serif);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--evh-blue);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(26,86,219,0.22);
  padding: 0.45rem 0.875rem;
  border-radius: 2rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 6px 20px -10px rgba(26,86,219,0.3);
}
.evh-hero__eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f87171;
  box-shadow: 0 0 0 3px rgba(248,113,113,0.25);
  animation: evh-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes evh-pulse-dot {
  0%,100%{ box-shadow: 0 0 0 3px rgba(248,113,113,0.25);}
  50%{ box-shadow: 0 0 0 6px rgba(248,113,113,0.08);}
}

.evh-hero__row h1 {
  font-size: 3.25rem;
  line-height: 1.1;
  color: var(--evh-ink);
  font-weight: 800;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}
.evh-accent {
  background: linear-gradient(135deg, var(--evh-blue) 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
}
.evh-accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.2rem;
  height: 0.45rem;
  background: linear-gradient(90deg, rgba(26,86,219,0.25), rgba(124,58,237,0.25));
  border-radius: 1rem;
  z-index: -1;
}
.evh-hero__row p {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--evh-ink-soft);
  max-width: 36rem;
  margin-bottom: 1.5rem;
}

.evh-hero-stats {
  display: none;
}
.evh-stat { display: flex; flex-direction: column; }
.evh-stat strong {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--evh-ink);
  line-height: 1.2;
  background: linear-gradient(135deg, var(--evh-blue), #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.evh-stat span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6b7280;
  margin-top: 0.125rem;
}

.evh-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------- Hero stage (right side) — ticket-style "event pass" card ---------- */
.evh-hero-stage {
  position: relative;
  width: 100%;
  min-height: 320px;
  max-width: 460px;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.evh-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1.5px solid rgba(26,86,219,0.28);
  transform: translate(-50%,-50%);
  animation: evh-ripple 3.6s ease-out infinite;
}
.evh-ripple--1 { width: 300px; height: 300px; animation-delay: 0s; }
.evh-ripple--2 { width: 300px; height: 300px; animation-delay: 1.2s; }
.evh-ripple--3 { width: 300px; height: 300px; animation-delay: 2.4s; }
@keyframes evh-ripple {
  0%   { width: 300px; height: 300px; opacity: 0.55; border-color: rgba(26,86,219,0.32); }
  60%  { opacity: 0.18; border-color: rgba(124,58,237,0.22); }
  100% { width: 460px; height: 460px; opacity: 0; }
}

/* Ticket shape — matches the physical-ticket reference: a soft pastel
   "mat"/frame around a white inner card, a narrow left stub of stacked
   colored chips (date, status), a VERTICAL dashed divider with punched
   notches on the ticket's TOP and BOTTOM edges, then the main body.
   The notch background matches the FRAME color exactly (not the page
   background behind it) — that's what makes the punched-circle illusion
   read correctly regardless of what's animating behind the card. */
.evh-ticket-frame {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: 100%;
  background: var(--primary-050);
  border-radius: 24px;
  padding: 10px;
  box-shadow:
    0 30px 70px -25px rgba(17,25,40,0.28),
    0 8px 24px -12px rgba(26,86,219,0.18);
}

.evh-pass-card {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  background: #fff;
  border-radius: 16px;
  overflow: visible;
}

.evh-pass-card__stub {
  flex: 0 0 104px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 0.6rem;
}

.evh-ticket-chip {
  border-radius: 10px;
  padding: 0.45rem 0.4rem;
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
}

.evh-ticket-chip--date {
  background: #ecfccb;
  color: #3f6212;
  font-size: 0.8rem;
}

.evh-ticket-chip--status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: #fee2e2;
  color: #dc2626;
}

.evh-pass-card__rec {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #dc2626;
  animation: evh-pulse-dot 1.6s ease-in-out infinite;
}

/* Status color variants — red "live" reads as urgent/right-now, which is
   misleading before the event has actually started; green "registration
   open" signals bookable-now without implying the show floor is live. */
.evh-pass-card--registration-open .evh-ticket-chip--status { background: #dcfce7; color: #15803d; }
.evh-pass-card--registration-open .evh-pass-card__rec {
  background: #16a34a;
  animation: evh-pulse-dot-green 1.6s ease-in-out infinite;
}
@keyframes evh-pulse-dot-green {
  0%,100% { box-shadow: 0 0 0 3px rgba(22,163,74,0.25); }
  50% { box-shadow: 0 0 0 6px rgba(22,163,74,0.08); }
}

.evh-pass-card--upcoming .evh-ticket-chip--status { background: #dbeafe; color: #1d4ed8; }
.evh-pass-card--upcoming .evh-pass-card__rec { background: var(--evh-blue); animation: none; }

/* Defensive — the featured hero ticket only ever picks a live/open event
   when one exists, but if every event were ever past, this keeps the
   ticket's status chip from falling back to unstyled red. */
.evh-pass-card--past .evh-ticket-chip--status { background: rgba(17, 25, 40, 0.08); color: var(--evh-ink-soft); }
.evh-pass-card--past .evh-pass-card__rec { background: var(--evh-ink-soft); animation: none; }

.evh-pass-card__badge {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--evh-blue);
  background: var(--primary-050);
  padding: 3px 9px;
  border-radius: 20px;
  align-self: flex-start;
  margin-bottom: 0.5rem;
}

/* Vertical dashed divider between stub and body, with round notches
   punched into the card's top and bottom edges (0-width box so the
   notches, centered on it, land exactly on the border). */
.evh-pass-card__perforation {
  position: relative;
  flex: 0 0 0;
  width: 0;
  align-self: stretch;
  border-left: 2px dashed rgba(17,25,40,0.2);
}

.evh-pass-card__notch {
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-050);
  transform: translateX(-50%);
}
.evh-pass-card__notch--top { top: -10px; }
.evh-pass-card__notch--bottom { bottom: -10px; }

.evh-pass-card__body {
  flex: 1;
  min-width: 0;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
}

.evh-pass-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--evh-ink);
  margin-bottom: 0.6rem;
  line-height: 1.3;
}

.evh-pass-card__row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--evh-ink-soft);
  margin-bottom: 0.4rem;
}

.evh-pass-card__row svg { flex-shrink: 0; opacity: 0.7; }

.evh-pass-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.7rem;
  margin-top: auto;
  border-top: 1px dashed rgba(17,25,40,0.15);
}

.evh-pass-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #16a34a;
}

.evh-pass-card__stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--evh-ink-soft);
}

@media (max-width: 767px) {
  .evh-hero { padding: 2.5rem 0 2rem; }
  .evh-hero__row h1 { font-size: 2.25rem; }
  .evh-hero-stats { gap: 1.25rem; }
  .evh-hero-stage { max-width: 320px; }
}

/* -------------------------------------------------------------------------
   Narrow content container — the listing/section content is much narrower
   than the full Bootstrap .container so it reads comfortably.
   ------------------------------------------------------------------------- */
.evh-narrow {
  max-width: 1060px;
  margin: 0 auto;
  padding-inline: 1.25rem;
}

.evh-section {
  padding: 68px 0;
}

.evh-section--cream {
  background: var(--evh-cream);
}

.evh-section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
}

/* Left-aligned variant for the events listing headers — reads better
   sitting directly above a left-starting card grid than a centered one. */
.evh-section-head--left {
  text-align: left;
  max-width: none;
  margin: 0 0 28px;
}

.evh-past-head {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--evh-border);
}

.evh-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--evh-blue);
  margin-bottom: 10px;
}

.evh-section-title {
  font-size: clamp(1.65rem, 2.6vw, 2.15rem);
  font-weight: 800;
  color: var(--evh-ink);
}

.evh-section-sub {
  font-size: 1rem;
  color: var(--evh-ink-soft);
  margin-top: 10px;
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
   Event cards
   ------------------------------------------------------------------------- */
.evh-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

@media (max-width: 767px) {
  .evh-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

.evh-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--evh-border);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.35s ease, transform 0.3s ease, border-color 0.3s ease;
}

.evh-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 16px 44px rgba(11, 19, 48, 0.12);
  border-color: #c7d7fb;
}

.evh-card__media {
  position: relative;
  aspect-ratio: 16/6;
  overflow: hidden;
  background: linear-gradient(135deg, var(--evh-blue) 0%, var(--evh-navy) 100%);
}

.evh-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.evh-card:hover .evh-card__media img {
  transform: scale(1.07);
}

.evh-card__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 20px 20px;
}

.evh-card__placeholder-text {
  font-family: var(--DMSans);
  font-size: 1.7rem;
  font-weight: var(--fnt-bold);
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.5px;
  text-align: center;
  padding: 0 1.5rem;
}

.evh-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: var(--fnt-bold);
  padding: 5px 12px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

.evh-badge--live {
  background: #dc2626;
}

.evh-badge--live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: evhLivePulse 1.5s infinite;
}

@keyframes evhLivePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.evh-badge--upcoming {
  background: var(--evh-blue);
}

.evh-badge--registration-open {
  background: #16a34a;
}

.evh-badge--registration-open::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: evhLivePulse 1.5s infinite;
}

/* Muted, no pulse — a concluded event shouldn't compete visually with
   the live/open one, so it's deliberately quieter, not just a different
   color. */
.evh-badge--past {
  background: rgba(17, 25, 40, 0.55);
}

.evh-more-events {
  margin-top: 28px;
}

.evh-card__body {
  padding: 26px 28px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.evh-card__title {
  font-size: 1.45rem;
  font-weight: var(--fnt-semi);
  color: var(--evh-ink);
  margin-bottom: 12px;
}

.evh-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.evh-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--evh-ink-soft);
}

.evh-card__meta svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.evh-card__booth {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: var(--fnt-bold);
  color: var(--evh-blue);
  background: var(--primary-050);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.evh-card__desc {
  font-size: 0.92rem;
  color: var(--evh-ink-soft);
  line-height: 1.6;
  margin-bottom: 20px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.evh-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: var(--fnt-medium);
  color: var(--evh-blue);
}

.evh-card:hover .evh-card__cta svg {
  transform: translateX(3px);
}

.evh-card__cta svg {
  transition: transform 0.25s ease;
}

/* -------------------------------------------------------------------------
   Featured event — wide horizontal presentation for the primary open/live
   event, so a single upcoming event fills the container width instead of
   floating as a narrow card beside a huge blank area.
   ------------------------------------------------------------------------- */
.evh-featured-event {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--evh-border);
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 20px 50px -28px rgba(11, 19, 48, 0.22);
  transition: box-shadow 0.35s ease, transform 0.3s ease, border-color 0.3s ease;
}

.evh-featured-event:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px -24px rgba(11, 19, 48, 0.26);
  border-color: #c7d7fb;
}

.evh-featured-event__media {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--evh-blue) 0%, var(--evh-navy) 100%);
}

.evh-featured-event__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.evh-featured-event:hover .evh-featured-event__media img {
  transform: scale(1.05);
}

.evh-featured-event__body {
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.evh-featured-event__title {
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  font-weight: 800;
  color: var(--evh-ink);
  margin: 4px 0 14px;
  line-height: 1.25;
}

.evh-featured-event__desc {
  font-size: 1rem;
  color: var(--evh-ink-soft);
  line-height: 1.65;
  margin: 16px 0 26px;
}

.evh-featured-event__cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: var(--fnt-medium);
  line-height: 22px;
  color: var(--white);
  background: var(--primary-600);
  border: 1px solid var(--primary-600);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.evh-featured-event:hover .evh-featured-event__cta {
  background: transparent;
  color: var(--primary-600);
}

@media (max-width: 900px) {
  .evh-featured-event {
    grid-template-columns: 1fr;
  }
  .evh-featured-event__media {
    min-height: 240px;
    aspect-ratio: 16/10;
  }
  .evh-featured-event__body {
    padding: 30px 26px 34px;
  }
}

/* -------------------------------------------------------------------------
   Past events — reusable carousel. Built to support many cards, but when
   there is only one (data-driven — the wrapper gets .evh-carousel--single),
   the single slide stretches into its own wide featured-style layout and
   the prev/next controls are omitted server-side rather than shown disabled.
   ------------------------------------------------------------------------- */
.evh-carousel {
  position: relative;
}

.evh-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.evh-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.evh-carousel__viewport:focus-visible {
  outline: 2px solid var(--evh-blue);
  outline-offset: 4px;
  border-radius: 12px;
}

.evh-carousel__track {
  display: flex;
  gap: 26px;
}

.evh-carousel__slide {
  flex: 0 0 min(400px, 86%);
  scroll-snap-align: start;
}

.evh-carousel--single .evh-carousel__slide {
  flex: 1 1 100%;
}

.evh-past-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--evh-border);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.35s ease, transform 0.3s ease, border-color 0.3s ease;
}

.evh-past-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 16px 44px rgba(11, 19, 48, 0.12);
  border-color: #c7d7fb;
}

.evh-past-card__media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--evh-navy-soft) 0%, var(--evh-navy) 100%);
}

.evh-past-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.85);
  opacity: 0.82;
  transition: filter 0.4s ease, opacity 0.4s ease, transform 0.6s ease;
}

.evh-past-card:hover .evh-past-card__media img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.05);
}

.evh-past-card__body {
  padding: 24px 26px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.evh-past-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--evh-ink-soft);
  margin-bottom: 12px;
  transition: color 0.25s ease;
}

.evh-past-card:hover .evh-past-card__title {
  color: var(--evh-ink);
}

.evh-past-card__desc {
  font-size: 0.9rem;
  color: var(--evh-ink-soft);
  line-height: 1.6;
  margin: 14px 0 18px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.evh-past-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--evh-blue);
}

/* Single-item mode: the slide fills the row, so let the card itself go
   horizontal on larger screens — image left, content right — matching the
   "polished featured layout" treatment given to the single upcoming event. */
@media (min-width: 768px) {
  .evh-carousel--single .evh-past-card {
    flex-direction: row;
    min-height: 340px;
  }
  .evh-carousel--single .evh-past-card__media {
    flex: 0 0 44%;
    aspect-ratio: auto;
    height: auto;
  }
  .evh-carousel--single .evh-past-card__body {
    padding: 36px 40px;
    justify-content: center;
  }
  .evh-carousel--single .evh-past-card__title {
    font-size: 1.5rem;
  }
  .evh-carousel--single .evh-past-card__desc {
    -webkit-line-clamp: 4;
  }
}

.evh-carousel__controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.evh-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--evh-border);
  background: #fff;
  color: var(--evh-ink);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.evh-carousel__btn:hover:not(:disabled) {
  background: var(--evh-blue);
  border-color: var(--evh-blue);
  color: #fff;
  transform: translateY(-2px);
}

.evh-carousel__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* -------------------------------------------------------------------------
   Why Attend — icon tiles
   ------------------------------------------------------------------------- */
.evh-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

@media (max-width: 991px) {
  .evh-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
  .evh-tiles { grid-template-columns: 1fr; }
}

.evh-tile {
  background: #fff;
  border: 1px solid var(--evh-border);
  border-radius: 16px;
  padding: 28px 22px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.evh-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(11, 19, 48, 0.08);
}

.evh-tile__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--primary-050);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.evh-tile__title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--evh-ink);
  margin-bottom: 8px;
}

.evh-tile__desc {
  font-size: 0.88rem;
  color: var(--evh-ink-soft);
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
   SOCIAL — compact LinkedIn highlight cards. Deliberately NOT an embedded
   feed: each card is a short, hand-written preview (title + 2-3 line
   description + date) linking out to the real LinkedIn post, so the section
   reads as a designed website component instead of LinkedIn's own UI bleeding
   into the page. Flexbox with a fixed 3-up basis (same centering technique
   used elsewhere on this page) so 1-2 posts still center instead of
   stretching or hugging the left edge.
   ------------------------------------------------------------------------- */
.evh-social-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 8px;
}

.evh-social-card {
  flex: 0 1 calc((100% - 48px) / 3);
  max-width: calc((100% - 48px) / 3);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--evh-border);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(11, 19, 48, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.evh-social-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(10, 102, 194, 0.16);
  border-color: #a9c6f5;
}

@media (max-width: 900px) {
  .evh-social-card {
    flex-basis: calc((100% - 24px) / 2);
    max-width: calc((100% - 24px) / 2);
  }
}

@media (max-width: 599px) {
  .evh-social-card {
    flex-basis: 100%;
    max-width: 100%;
  }
  .evh-social-card__media img {
    min-height: 240px;
    object-fit: cover;
  }
}

.evh-social-card__media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: linear-gradient(135deg, #0a66c2 0%, #004182 100%);
}

.evh-social-card__media img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  transition: transform 0.5s ease;
}

.evh-social-card:hover .evh-social-card__media img {
  transform: scale(1.06);
}

/* No thumbnail on record — a clean LinkedIn-blue gradient panel with the
   glyph badge as the visual anchor, instead of a broken/missing image. */
.evh-social-card__media--fallback {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.evh-social-card__badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #fff;
  background: rgba(10, 102, 194, 0.92);
  padding: 5px 11px 5px 8px;
  border-radius: 20px;
}

.evh-social-card__media--fallback .evh-social-card__badge {
  position: static;
  margin: 18px;
  background: rgba(255, 255, 255, 0.16);
}

.evh-social-card__body {
  padding: 20px 22px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.evh-social-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--evh-ink);
  line-height: 1.35;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.evh-social-card__desc {
  font-size: 0.86rem;
  color: var(--evh-ink-soft);
  line-height: 1.6;
  margin-bottom: 16px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.evh-social-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--evh-border);
}

.evh-social-card__date {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--evh-ink-soft);
}

.evh-social-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0a66c2;
  margin-left: auto;
}

.evh-social-card:hover .evh-social-card__cta svg {
  transform: translate(1px, -1px);
}

.evh-social-card__cta svg {
  transition: transform 0.2s ease;
}

.evh-social-follow {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 8px;
  margin: 32px auto 0;
  padding: 11px 22px;
  border-radius: 100px;
  background: linear-gradient(135deg, #0a66c2 0%, #004182 100%);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 20px -8px rgba(10, 102, 194, 0.5);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.evh-social-follow:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px rgba(10, 102, 194, 0.6);
  color: #fff;
}

/* -------------------------------------------------------------------------
   FAQ accordion — button + CSS grid-rows animation (driven by events-hub.js
   toggling `.is-open`). No height measurement needed, so it's smooth on
   every click instead of the instant snap native <details> gives.
   ------------------------------------------------------------------------- */
.evh-faq {
  max-width: 760px;
  margin: 0 auto;
}

.evh-faq__item {
  border-bottom: 1px solid var(--evh-border);
}

.evh-faq__question {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  font-family: var(--DMSans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--evh-ink);
  text-align: left;
}

.evh-faq__icon {
  flex-shrink: 0;
  transition: transform 0.3s ease;
  color: var(--evh-blue);
}

.evh-faq__item.is-open .evh-faq__icon {
  transform: rotate(45deg);
}

.evh-faq__panel-wrap {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.32s ease;
}

.evh-faq__item.is-open .evh-faq__panel-wrap {
  grid-template-rows: 1fr;
}

.evh-faq__panel {
  min-height: 0;
}

.evh-faq__answer {
  padding: 0 4px 20px;
  font-size: 0.92rem;
  color: var(--evh-ink-soft);
  line-height: 1.65;
}

/* Closing CTA now reuses the shared .faq-cta-section / .faq-cta-inner
   classes from faq.css (same card used on /resources) instead of a custom
   dark band, for brand consistency — no CTA-specific rules needed here. */

/* -------------------------------------------------------------------------
   Reveal-on-scroll (driven by files/js/events-hub.js)
   ------------------------------------------------------------------------- */
.evh-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.evh-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .evh-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}