/* =====================================================
   Moonlight Express – Events Card Overrides
   Version: 1.6.2
   Updated: 2026-01-20
   Notes: Drivers Hub-style event cards + 3-up centered grid.
   ===================================================== */

:root {
  --blue: #5266ff;
  --card-bg: #2a2a2a;
  --text-muted: #aaaaaa;
}

/* ---------------------------
   Card styling (Drivers Hub)
   --------------------------- */
.event-card-custom {
  background: var(--card-bg) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

.event-banner {
  height: 150px;
  border-bottom: 2px solid var(--blue);
}

.game-badge {
  font-size: 0.55rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-ets2 { background: #5266ff; color: white; }
.badge-ats  { background: #f1c40f; color: black; }

.text-primary-custom { color: var(--blue) !important; }

.label-tiny {
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 800;
  font-size: 0.55rem;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.stats-row {
  display: flex;
  justify-content: space-around;
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid rgba(255,255,255,0.05);
}

.label-stat {
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.color-success { color: #2ecc71; }
.color-warning { color: #f1c40f; }
.color-info    { color: #3498db; }

.btn-tmp-view {
  display: block;
  width: 100%;
  background: var(--blue);
  color: white !important;
  text-align: center;
  text-decoration: none !important;
  border-bottom: 0 !important;
  padding: 10px;
  border-radius: 6px;
  font-weight: 900;
  font-size: 0.75rem;
  transition: 0.2s;
}

.btn-tmp-view:hover {
  filter: brightness(1.15);
  color: white !important;
}

/* ---------------------------------------
   Layout: 3-up centered grid with spacing
   --------------------------------------- */
.events-container {
  width: 100%;
  display: flex;
  justify-content: center;   /* centers the grid inside the grey section */
  padding-left: 1.75rem;     /* keep away from edges */
  padding-right: 1.75rem;
  box-sizing: border-box;
}

#events-grid,
#attending-events-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 520px));
  justify-content: center;
  gap: 2.75rem;
  margin-left: auto;
  margin-right: auto;
  max-width: calc((520px * 3) + (2.75rem * 2));
  box-sizing: border-box;
}

/* Bootstrap col wrappers add padding; remove it so our grid gap controls spacing */
#events-grid > *,
#attending-events-grid > * {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* Tablet: 2 columns */
@media (max-width: 1199.98px) {
  #events-grid,
  #attending-events-grid {
    grid-template-columns: repeat(2, minmax(0, 520px));
    max-width: calc((520px * 2) + (2.75rem * 1));
  }
}

/* Mobile: 1 column */
@media (max-width: 767.98px) {
  #events-grid,
  #attending-events-grid {
    grid-template-columns: 1fr;
    max-width: min(720px, calc(100% - 2rem));
    gap: 1.25rem;
  }
  .event-card-custom {
    width: 100%;
  }
}


/* =====================================================
   Fix squished cards inside CSS Grid (v1.4.5)
   Bootstrap col-*/width rules on the wrapper div were
   shrinking grid items (e.g. width: 33%). Force wrappers
   to fill the grid cell.
   ===================================================== */
#events-grid > *,
#attending-events-grid > * {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}


/* =====================================================
   Fix squished cards (v1.4.6)
   Remove Bootstrap column sizing inside CSS Grid.
   ===================================================== */
#events-grid > .col-xl-4,
#events-grid > .col-lg-6,
#events-grid > .col-md-12,
#attending-events-grid > .col-xl-4,
#attending-events-grid > .col-lg-6,
#attending-events-grid > .col-md-12,
#events-grid > div,
#attending-events-grid > div {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
}

.event-card-custom {
  width: 520px !important; /* match grid column */
  max-width: 520px !important;
}


/* =====================================================
   Keep DEPART / MEETUP on one line (v1.5.1)
   ===================================================== */
.event-times,
.event-times * {
  white-space: nowrap;
}


/* =====================================================
   Time rows: force single-line layout (v1.5.2)
   ===================================================== */
.event-times .event-time-line {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.5rem !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.event-times .event-time-line span {
  white-space: nowrap !important;
}

/* Make the "(YOUR LOCAL TIME)" hint smaller so it fits */
.event-times .event-time-line span[style*="font-size"] {
  font-size: 0.55rem !important;
  opacity: 0.75 !important;
}

/* =====================================================
   DEPART / MEETUP one-line fix (v1.5.3)
   The time rows are <p> elements with inline spans; make them
   single-line flex rows and shrink the local-time hint.
   ===================================================== */
.event-card-custom .event-time-line {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.4rem !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.event-card-custom .event-time-line span {
  white-space: nowrap !important;
}

.event-card-custom .event-time-line .local-hint {
  font-size: 0.55rem !important;
  opacity: 0.75 !important;
}


/* =====================================================
   Events page title (restore main.css look without loading main.css)
   ===================================================== */
#main .post header.major h1 {
  color: #5468ff !important;
  opacity: 1 !important;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 2rem 0;
}

/* If any global theme is darkening the title, override it */
#main .post header.major {
  opacity: 1 !important;
}



/* Ensure any generated wrapper divs don't shrink/stack oddly */
#events-grid > *,
#attending-events-grid > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: none !important;
}

/* Make the card fill the grid cell width */
.event-card-custom {
  width: 100% !important;
  max-width: 100% !important;
}

/* Desktop: fixed 3-up card width */
@media (min-width: 992px) {
  #events-grid,
  #attending-events-grid {
    grid-template-columns: repeat(3, 440px) !important;
    max-width: calc((440px * 3) + (2.75rem * 2)) !important;
  }
}

/* Medium screens: 2-up */
@media (min-width: 768px) and (max-width: 991.98px) {
  #events-grid,
  #attending-events-grid {
    grid-template-columns: repeat(2, 440px) !important;
    max-width: calc((440px * 2) + (2.75rem * 1)) !important;
  }
}

/* Mobile: 1-up, reduce vertical gap */
@media (max-width: 767.98px) {
  #events-grid,
  #attending-events-grid {
    grid-template-columns: minmax(0, 520px) !important;
    max-width: min(520px, calc(100% - 2rem)) !important;
    row-gap: 1.25rem !important;
    column-gap: 1.25rem !important;
    gap: 1.25rem !important;
  }

  .event-card-custom .stats-row {
    margin-bottom: 0.9rem !important;
  }
}


/* =====================================================
   Responsive layout fixes (v1.5.6)
   Goal: Keep cards inside the grey #main area at ALL window sizes.
   - 3-up only when there's actually room (wide windows)
   - Otherwise fall back to 2-up / 1-up while keeping card widths consistent
   ===================================================== */

#events-grid,
#attending-events-grid {
  display: grid !important;
  align-content: start !important;
  justify-content: center !important;
  gap: 2.75rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.events-container {
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden; /* prevent any tiny overflow from showing outside grey area */
}

/* Ensure wrappers don't interfere */
#events-grid > *,
#attending-events-grid > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: none !important;
}

/* Cards fill their grid cell */
.event-card-custom {
  width: 100% !important;
  max-width: 100% !important;
}

/* 3-up only when there's room for: 3*440px + 2*gap + container padding (~1500px) */
@media (min-width: 1500px) {
  #events-grid,
  #attending-events-grid {
    grid-template-columns: repeat(3, 440px) !important;
    max-width: calc((440px * 3) + (2.75rem * 2)) !important;
  }
}

/* 2-up for typical windowed sizes */
@media (min-width: 992px) and (max-width: 1499.98px) {
  #events-grid,
  #attending-events-grid {
    grid-template-columns: repeat(2, 440px) !important;
    max-width: calc((440px * 2) + (2.75rem * 1)) !important;
  }
}

/* 1-up for tablets/mobile */
@media (max-width: 991.98px) {
  #events-grid,
  #attending-events-grid {
    grid-template-columns: minmax(0, 520px) !important;
    max-width: min(520px, calc(100% - 2rem)) !important;
    gap: 1.25rem !important;
  }

  .event-card-custom .stats-row {
    margin-bottom: 0.9rem !important;
  }
}


/* =====================================================
   Equal-height cards + consistent layout (v1.5.7)
   - All cards in a row share the same height
   - Button aligns to bottom
   - Titles/times get consistent space so cards don't "jump"
   ===================================================== */

#events-grid,
#attending-events-grid {
  align-items: stretch !important; /* make grid items stretch to row height */
}

/* Each grid item should stretch */
#events-grid > *,
#attending-events-grid > * {
  align-self: stretch !important;
}

/* Card becomes a flex column so we can push CTA to bottom */
.event-card-custom {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Banner fixed height already, keep it consistent */
.event-banner { flex: 0 0 auto; }

/* Main content area grows */
.event-card-custom .card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

/* Ensure the header/title area has consistent height (prevents uneven rows) */
.event-card-custom .card-body h5 {
  min-height: 3.2em; /* ~2 lines */
}

/* Ensure the time block reserves consistent space */
.event-times {
  min-height: 3.0em; /* depart + meetup */
}

/* Stats + button stay near bottom */
.event-card-custom .stats-row {
  margin-top: auto !important;
}
.event-card-custom .btn-tmp-view {
  margin-top: 0.9rem !important;
}


/* =====================================================
   FINAL OVERRIDES (v1.5.8)
   One source of truth for layout:
   - Cards NEVER overflow the grey #main area
   - 3 / 2 / 1 columns automatically based on available space
   - Consistent gaps at all sizes
   - Equal-height cards per row (buttons aligned)
   ===================================================== */

/* Use a flexible grid that adapts, but cap card width for consistent look */
.events-container {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 1.75rem !important;
  padding-right: 1.75rem !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Responsive grid: auto-fit will choose 3/2/1 based on space */
#events-grid,
#attending-events-grid {
  display: grid !important;
  width: 100% !important;
  max-width: calc((440px * 3) + (2.75rem * 2)) !important; /* centred "ideal" width */
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 2.75rem !important;

  /* auto-fit: as many columns as fit; each column 360–440 */
  grid-template-columns: repeat(auto-fit, minmax(360px, 440px)) !important;
  box-sizing: border-box !important;
}

/* If the grey area is narrower, allow the grid to shrink instead of overflowing */
@media (max-width: 1450px) {
  #events-grid,
  #attending-events-grid {
    max-width: 100% !important;
  }
}

/* Mobile: reduce gap + allow full width */
@media (max-width: 767.98px) {
  #events-grid,
  #attending-events-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.25rem !important;
  }
}

/* Remove any Bootstrap/theme wrapper sizing inside the grid */
#events-grid > *,
#attending-events-grid > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: none !important;
}

/* Cards fill their grid cell but cap at 440px for consistency */
.event-card-custom {
  width: 100% !important;
  max-width: 440px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* The inner content in your HTML is .p-3 (not .card-body) */
.event-card-custom > .p-3 {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

/* Reserve consistent space so cards don't jump around */
.event-card-custom h6 {
  min-height: 3.2em !important; /* ~2 lines */
}

/* Time block reserves consistent space */
.event-times {
  min-height: 3.0em !important;
}

/* Push stats + button to bottom */
.event-card-custom .stats-row {
  margin-top: auto !important;
}
.event-card-custom .btn-tmp-view {
  margin-top: 0.9rem !important;
}

/* Ensure the banner doesn't cause width overflow */
.event-banner {
  width: 100% !important;
}


/* =====================================================
   Force 3-up layout on desktop (v1.5.9)
   Requirement: Always 3 cards per row on desktop (maximized or windowed).
   ===================================================== */

/* Desktop+ : always 3 columns, cards flex to available width */
@media (min-width: 1000px) {
  #events-grid,
  #attending-events-grid {
    max-width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-content: center !important;
  }

  /* allow cards to grow/shrink with their column */
  .event-card-custom {
    max-width: none !important;
    width: 100% !important;
  }
}

/* Keep a sensible 2-up between tablet and desktop */
@media (min-width: 700px) and (max-width: 999.98px) {
  #events-grid,
  #attending-events-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
  .event-card-custom { max-width: none !important; width: 100% !important; }
}

/* Mobile: 1-up */
@media (max-width: 699.98px) {
  #events-grid,
  #attending-events-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* =====================================================
   Banner image fit fix (v1.6.0)
   Ensure event banners don't crop/stretch oddly.
   - Use object-fit: contain so the full banner is visible
   - Center the image and keep the card width aligned
   ===================================================== */

.event-banner {
  overflow: hidden !important;
}

.event-banner img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;   /* show whole image (no cropping) */
  object-position: center center !important;
  display: block !important;
  background: rgba(0,0,0,0.25) !important; /* subtle letterbox if aspect differs */
}


/* =====================================================
   Banner sizing override (v1.6.1)
   Your banner container had a fixed height / positioning, causing cropping.
   Force the banner to size naturally and keep the whole image visible.
   ===================================================== */

/* Let the banner area keep a consistent aspect ratio and avoid fixed-height cropping */
.event-banner {
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Override any absolute positioning from other CSS */
.event-banner img {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;   /* no cropping */
  object-position: center center !important;
  display: block !important;
}


/* =====================================================
   Banner BACKGROUND fit fix (v1.6.2)
   IMPORTANT: your banner is a DIV with an inline background shorthand:
     style="background: #111 url('...') center/cover no-repeat;"
   The 'cover' is what crops the text.
   These rules override the inline 'cover' and force the full image to show.
   ===================================================== */

.event-banner {
  /* consistent banner shape */
  aspect-ratio: 21 / 9 !important;
  height: auto !important;

  /* override inline background shorthand pieces */
  background-size: contain !important;     /* show whole image (no cropping) */
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #111 !important;       /* letterbox color if needed */
}
/* ============================= */
/* Event card banner fix */
/* ============================= */

.event-card .event-banner {
    width: 100%;
    height: 170px;                 /* consistent banner height */
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    position: relative;
}

.event-card .event-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;             /* fill vertically + horizontally */
    object-position: center;       /* keep subject centered */
    display: block;
}

/* =====================================================
   Banner as <img> (v1.6.4)
   Goal: show FULL banner image with NO black letterbox.
   This requires using an <img> tag instead of background-image.
   ===================================================== */

.event-card-custom .event-banner {
  height: auto !important;
  aspect-ratio: auto !important;
  background: none !important;
  background-image: none !important;
  border-bottom: 2px solid var(--blue) !important;
  overflow: visible !important;
}

.event-card-custom .event-banner img {
  width: 100% !important;
  height: auto !important;          /* banner height follows image */
  display: block !important;
  object-fit: contain !important;   /* full image visible (no crop) */
  object-position: center center !important;
}

/* ==== FORCE NAV ICON FIX (Partners override) ==== */

/* remove blue glow everywhere */
#nav .icons a,
#navPanel .icons a {
  box-shadow: none !important;
  filter: none !important;
}

/* center TruckersMP image */
#nav ul.icons li a.icon.alt.truckersmp img,
#navPanel ul.icons li a.icon.alt.truckersmp img {
  transform: translateY(1px) !important;
}

/* Active nav tab text color fix (Partners page) */
#nav ul.links li.active a {
  background: #e6e6e6 !important;
  color: #000000 !important;
}

/* =====================================================
   Moonlight Express – Events Card Overrides
   Version: 1.6.2
   Updated: 2026-01-20
   Notes: Drivers Hub-style event cards + 3-up centered grid.
   ===================================================== */

:root {
  --blue: #5266ff;
  --card-bg: #2a2a2a;
  --text-muted: #aaaaaa;
}

/* ---------------------------
   Card styling (Drivers Hub)
   --------------------------- */
.event-card-custom {
  background: var(--card-bg) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

.event-banner {
  height: 150px;
  border-bottom: 2px solid var(--blue);
}

.game-badge {
  font-size: 0.55rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-ets2 { background: #5266ff; color: white; }
.badge-ats  { background: #f1c40f; color: black; }

.text-primary-custom { color: var(--blue) !important; }

.label-tiny {
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 800;
  font-size: 0.55rem;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.stats-row {
  display: flex;
  justify-content: space-around;
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid rgba(255,255,255,0.05);
}

.label-stat {
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.color-success { color: #2ecc71; }
.color-warning { color: #f1c40f; }
.color-info    { color: #3498db; }

.btn-tmp-view {
  display: block;
  width: 100%;
  background: var(--blue);
  color: white !important;
  text-align: center;
  text-decoration: none !important;
  border-bottom: 0 !important;
  padding: 10px;
  border-radius: 6px;
  font-weight: 900;
  font-size: 0.75rem;
  transition: 0.2s;
}

.btn-tmp-view:hover {
  filter: brightness(1.15);
  color: white !important;
}

/* ---------------------------------------
   Layout: 3-up centered grid with spacing
   --------------------------------------- */
.events-container {
  width: 100%;
  display: flex;
  justify-content: center;   /* centers the grid inside the grey section */
  padding-left: 1.75rem;     /* keep away from edges */
  padding-right: 1.75rem;
  box-sizing: border-box;
}

#events-grid,
#attending-events-grid {
  display: grid !important;
  width: 100% !important;
  max-width: calc((440px * 3) + (2.75rem * 2)) !important; /* centred "ideal" width */
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 2.75rem !important;

  /* auto-fit: as many columns as fit; each column 360–440 */
  grid-template-columns: repeat(auto-fit, minmax(360px, 440px)) !important;
  box-sizing: border-box !important;
}

/* If the grey area is narrower, allow the grid to shrink instead of overflowing */
@media (max-width: 1450px) {
  #events-grid,
  #attending-events-grid {
    max-width: 100% !important;
  }
}

/* Mobile: reduce gap + allow full width */
@media (max-width: 767.98px) {
  #events-grid,
  #attending-events-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.25rem !important;
  }
}

/* Remove any Bootstrap/theme wrapper sizing inside the grid */
#events-grid > *,
#attending-events-grid > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: none !important;
}

/* Cards fill their grid cell but cap at 440px for consistency */
.event-card-custom {
  width: 100% !important;
  max-width: 440px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* The inner content in your HTML is .p-3 (not .card-body) */
.event-card-custom > .p-3 {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

/* Reserve consistent space so cards don't jump around */
.event-card-custom h6 {
  min-height: 3.2em !important; /* ~2 lines */
}

/* Time block reserves consistent space */
.event-times {
  min-height: 3.0em !important;
}

/* Push stats + button to bottom */
.event-card-custom .stats-row {
  margin-top: auto !important;
}
.event-card-custom .btn-tmp-view {
  margin-top: 0.9rem !important;
}

/* Ensure the banner doesn't cause width overflow */
.event-banner {
  width: 100% !important;
}

/* ============================= */
/* Event card banner fix */
/* ============================= */

.event-card .event-banner {
    width: 100%;
    height: 170px;                 /* consistent banner height */
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    position: relative;
}

.event-card .event-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;             /* fill vertically + horizontally */
    object-position: center;       /* keep subject centered */
    display: block;
}

/* =====================================================
   Banner as <img> (v1.6.4)
   Goal: show FULL banner image with NO black letterbox.
   This requires using an <img> tag instead of background-image.
   ===================================================== */

.event-card-custom .event-banner {
  height: auto !important;
  aspect-ratio: auto !important;
  background: none !important;
  background-image: none !important;
  border-bottom: 2px solid var(--blue) !important;
  overflow: visible !important;
}

.event-card-custom .event-banner img {
  width: 100% !important;
  height: auto !important;          /* banner height follows image */
  display: block !important;
  object-fit: contain !important;   /* full image visible (no crop) */
  object-position: center center !important;
}

/* ==== FORCE NAV ICON FIX (Partners override) ==== */

/* remove blue glow everywhere */
#nav .icons a,
#navPanel .icons a {
  box-shadow: none !important;
  filter: none !important;
}

/* center TruckersMP image */
#nav ul.icons li a.icon.alt.truckersmp img,
#navPanel ul.icons li a.icon.alt.truckersmp img {
  transform: translateY(1px) !important;
}

/* Active nav tab text color fix (Partners page) */
#nav ul.links li.active a {
  background: #e6e6e6 !important;
  color: #000000 !important;
}

/* =====================================================
   TRUCKY STATISTICS CARD CENTERING & WIDTH FIX (v1.6.9)
   - Cards centered properly (no left shift)
   - Numbers stay on one line (no wrapping)
   - Consistent card sizing at all breakpoints
   ==================================================== */

.member-counts {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 2.5rem !important;
  padding: 2rem 1rem !important;
  box-sizing: border-box !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 1.5rem auto 2.5rem auto !important;
  
  /* Remove conflicting transforms */
  transform: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
}

/* All 3 cards: equal flex basis, consistent sizing */
.member-counts .count-box {
  flex: 0 1 320px !important;
  min-width: 320px !important;
  max-width: 380px !important;
  width: 320px !important;
  padding: 2rem 1.8rem !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* CRITICAL: Prevent number wrapping */
.count-number {
  font-weight: 700 !important;
  font-size: 1.9rem !important;
  display: block !important;
  color: #5468ff !important;
  margin: 0.3rem 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  line-height: 1.2 !important;
  text-align: center !important;
  min-width: 0 !important;
}

.count-box:hover .count-number {
  color: #7c3aed !important;
}

/* Icon styling */
.count-box i {
  font-size: 2.5rem !important;
  margin: 0.5rem 0 0.3rem 0 !important;
  color: #5468ff !important;
}

.count-box:hover i {
  color: #7c3aed !important;
}

/* Label styling */
.count-label {
  font-size: 0.95rem !important;
  color: #5468ff !important;
  margin-top: 0.5rem !important;
  font-weight: bold !important;
  letter-spacing: 0.04em !important;
}

.count-box:hover .count-label {
  color: #7c3aed !important;
}

/* Hover effect */
.count-box {
  transition: all 0.3s ease !important;
  background: rgba(42, 42, 42, 0.4) !important;
  backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(84, 104, 255, 0.25) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.count-box:hover {
  box-shadow: 0 16px 48px rgba(84, 104, 255, 0.2) !important;
  border: 1.5px solid rgba(84, 104, 255, 0.45) !important;
  transform: translateY(-8px) scale(1.02) !important;
}

/* Desktop: maintain 3 equal cards */
@media (min-width: 1200px) {
  .member-counts {
    gap: 2.5rem !important;
    padding: 2rem 2rem !important;
  }

  .member-counts .count-box {
    flex: 0 1 320px !important;
    min-width: 320px !important;
  }
}

/* Tablets: 3-up with tighter spacing */
@media (max-width: 1199.98px) {
  .member-counts {
    gap: 1.5rem !important;
    padding: 2rem 1rem !important;
  }

  .member-counts .count-box {
    flex: 0 1 280px !important;
    min-width: 280px !important;
    max-width: 320px !important;
    width: 280px !important;
    padding: 1.8rem 1.5rem !important;
  }

  .count-number {
    font-size: 1.7rem !important;
  }

  .count-box i {
    font-size: 2.2rem !important;
  }
}

/* Medium screens: 2-up layout */
@media (max-width: 900px) {
  .member-counts {
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
  }

  .member-counts .count-box {
    flex: 0 1 calc(50% - 0.75rem) !important;
    min-width: 280px !important;
    max-width: none !important;
  }
}

/* Mobile: stack vertically */
@media (max-width: 767.98px) {
  .member-counts {
    flex-direction: column !important;
    gap: 1rem !important;
    padding: 1.5rem 1rem !important;
    margin: 1.5rem 0 2.5rem 0 !important;
  }

  .member-counts .count-box {
    width: 100% !important;
    min-width: unset !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }

  .count-number {
    font-size: 1.6rem !important;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .member-counts {
    gap: 1rem !important;
    padding: 1rem !important;
    margin: 1rem 0 1.5rem 0 !important;
  }

  .count-number {
    font-size: 1.4rem !important;
  }

  .member-counts .count-box {
    padding: 1.2rem 1rem !important;
  }

  .count-box i {
    font-size: 1.8rem !important;
  }
}

/* =====================================================
   FORCE 3-COLUMN LAYOUT AT ALL BREAKPOINTS
   Ensures event cards always display 3 per row
   ===================================================== */

#events-grid,
#attending-events-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2.75rem !important;
  justify-content: center !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Ensure cards fill each column evenly */
#events-grid > *,
#attending-events-grid > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: none !important;
}

/* Cards adapt to column width */
.event-card-custom {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Keep inner content flexible */
.event-card-custom > .p-3 {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

/* Mobile: Reduce gap slightly on small screens */
@media (max-width: 768px) {
  #events-grid,
  #attending-events-grid {
    gap: 1.5rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Extra small screens: Allow some breathing room */
@media (max-width: 480px) {
  #events-grid,
  #attending-events-grid {
    gap: 1rem !important;
  }
}

/* ===== ADD THIS TO THE END OF YOUR EXISTING CSS FILE ===== */

/* =====================================================
   EVENT CARD HOVER ANIMATIONS (from Statistics page)
   Glassmorphism + Gradient Accents + Smooth Animations
   ===================================================== */

/* Keyframe animations - gradient border shift */
@keyframes borderGradientShift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Enhanced event card with hover animations */
.event-card-custom {
	background: rgba(42, 42, 42, 0.4) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
	border: 1.5px solid rgba(84, 104, 255, 0.25) !important;
	border-radius: 12px !important;
	box-shadow: 
		0 8px 32px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
	overflow: hidden;
	transition: 
		all 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
	position: relative;
	transform: translateY(0) scale(1);
}

/* Gradient accent line at top - hidden by default */
.event-card-custom::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #5468ff, #7c3aed, #5468ff);
	background-size: 200% 100%;
	animation: borderGradientShift 3s ease-in-out infinite;
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 10;
}

/* Hover state - lift card + enhance glow + show gradient line */
.event-card-custom:hover {
	background: rgba(42, 42, 42, 0.55) !important;
	backdrop-filter: blur(30px) saturate(120%) !important;
	-webkit-backdrop-filter: blur(30px) saturate(120%) !important;
	border: 1.5px solid rgba(84, 104, 255, 0.45) !important;
	box-shadow: 
		0 16px 48px rgba(84, 104, 255, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		0 0 20px rgba(84, 104, 255, 0.15) !important;
	transform: translateY(-8px) scale(1.02);
}

/* Show gradient line on hover */
.event-card-custom:hover::before {
	opacity: 1;
}

/* Enhanced button hover effect on cards */
.event-card-custom .btn-tmp-view {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.event-card-custom:hover .btn-tmp-view {
	background: #7c3aed !important;
	box-shadow: 0 0 15px rgba(124, 58, 237, 0.4) !important;
	transform: scale(1.05);
}

/* Enhanced game badge hover */
.event-card-custom:hover .game-badge {
	box-shadow: 0 0 15px rgba(82, 102, 255, 0.5);
	transform: scale(1.08);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Subtle text glow on hover */
.event-card-custom:hover h6 {
	color: #ffffff !important;
	text-shadow: 0 0 15px rgba(84, 104, 255, 0.3);
	transition: all 0.3s ease;
}

/* Stats row highlight on hover */
.event-card-custom:hover .stats-row {
	background: rgba(84, 104, 255, 0.1) !important;
	border: 1px solid rgba(84, 104, 255, 0.2) !important;
	transition: all 0.3s ease;
}

/* Responsive adjustments for animations */
@media (max-width: 767.98px) {
	.event-card-custom:hover {
		transform: translateY(-4px) scale(1.01);
	}

	.event-card-custom:hover .btn-tmp-view {
		transform: scale(1.02);
	}
}

/* Reduce animations on very small screens */
@media (max-width: 480px) {
	.event-card-custom {
		transition: all 0.2s ease !important;
	}

	.event-card-custom:hover {
		transform: translateY(-2px) scale(1);
	}
}

/* =====================================================
   FIX: PREVENT TOP ROW CARD CLIPPING ON HOVER
   Allow overflow space for hover lift animation
   ===================================================== */

.events-container {
	overflow: visible !important;
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
}

#events-grid,
#attending-events-grid {
	overflow: visible !important;
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}

/* Reduce hover lift on top row to prevent clipping */
.event-card-custom:hover {
	transform: translateY(-4px) scale(1.01) !important;
}

/* Mobile: even smaller lift */
@media (max-width: 767.98px) {
	.event-card-custom:hover {
		transform: translateY(-2px) scale(1) !important;
	}
}

/* =====================================================
   Mobile Card Popout Modal (v1.7.0)
   - Overlay that appears on mobile when card is clicked
   - Smooth enter/exit animations
   - Responsive design
   ===================================================== */

.event-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.event-modal:not(.hidden) {
  pointer-events: auto;
  opacity: 1;
}

.event-modal.hidden {
  display: none;
}

/* Semi-transparent dark overlay behind modal */
.event-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1;
}

/* Modal content container */
.event-modal-content {
  position: relative;
  z-index: 2;
  background: var(--card-bg);
  border: 1.5px solid rgba(84, 104, 255, 0.25);
  border-radius: 12px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(84, 104, 255, 0.15);
  padding: 0;
  width: 90%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: modalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.event-modal:not(.hidden) .event-modal-content {
  transform: scale(1);
}

/* Pop-in animation for modal */
@keyframes modalPop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Close button - Animated gradient X */
.event-modal-close {
  position: fixed;
  top: 20px;
  left: 10px;
  right: auto;
  z-index: 10001;
  cursor: pointer;
  font-size: 48px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: font-size 0.3s ease !important;
  box-shadow: none !important;
}

/* Gradient text for X */
.event-modal-close {
  background: linear-gradient(135deg, #5468ff, #7c3aed, #5468ff) !important;
  background-size: 200% 100%;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: xGradientShift 3s ease-in-out infinite !important;
  color: transparent !important;
}

@keyframes xGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.event-modal-close:hover {
  font-size: 56px !important;
  box-shadow: none !important;
  outline: none !important;
}

.event-modal-close:focus {
  outline: none !important;
  box-shadow: none !important;
}

.event-modal-close:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.event-modal-close:active {
  font-size: 52px !important;
  outline: none !important;
  box-shadow: none !important;
}

@media (max-width: 480px) {
  .event-modal-close {
    font-size: 40px !important;
    top: 15px;
    left: 8px;
  }
  .event-modal-close:hover {
    font-size: 48px !important;
  }
}

/* Modal body - holds the expanded card */
#event-modal-body {
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Style the card inside the modal to be slightly different */
#event-modal-body .event-card-custom {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

#event-modal-body .event-card-custom .event-banner {
  height: auto !important;
  aspect-ratio: 21/9 !important;
  border-bottom: 3px solid var(--blue) !important;
}

#event-modal-body .event-card-custom > .p-3 {
  padding: 1.5rem !important;
}

/* Make stats row more prominent in modal */
#event-modal-body .stats-row {
  background: rgba(84, 104, 255, 0.1) !important;
  border: 1px solid rgba(84, 104, 255, 0.2) !important;
  padding: 15px !important;
}

/* Desktop: hide modal completely, prevent interaction */
@media (min-width: 992px) {
  .event-modal {
    display: none !important;
    pointer-events: none !important;
  }
  
  /* Cards should not be clickable on desktop */
  .event-card-custom {
    cursor: default !important;
  }
}

/* Mobile: make cards clickable */
@media (max-width: 991.98px) {
  .event-card-custom {
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }
  
  .event-card-custom:active {
    transform: scale(0.98) !important;
  }
}

/* Tablet adjustments */
@media (max-width: 767.98px) {
  .event-modal-content {
    width: 95%;
    max-height: 90vh;
  }
  
  #event-modal-body .event-card-custom > .p-3 {
    padding: 1.2rem !important;
  }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
  .event-modal-content {
    width: 98%;
    max-height: 92vh;
  }
  
  .event-modal-close {
    width: 36px;
    height: 36px;
    font-size: 24px;
    margin: 8px 8px 0 0;
  }
  
  #event-modal-body .event-card-custom > .p-3 {
    padding: 1rem !important;
  }
}