/* ===== UPX (Upcoming eXperience) — self-contained styles ===== */

/* Layout container */
.upx-grid {
  box-sizing: border-box !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  gap: 24px !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  justify-content: center !important; /* centers when fewer than max columns on small screens */
}

/* Desktop: force 4 across; center if < 4 */
@media (min-width: 1100px) {
  .upx-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 24px !important;
  }
  .upx-card {
    flex: 0 1 calc((100% - (24px * 3)) / 4) !important; /* 4 columns with 3 gaps */
    max-width: calc((100% - (24px * 3)) / 4) !important;
  }
}

/* Card — neutralize any legacy rules */
.upx-card {
  /* wipe stray inherited rules from messy CSS */
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  overflow: hidden;
}

/* Thumb */
.upx-thumb {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
}

/* Body */
.upx-body {
  padding: 12px 14px 16px !important;
}

/* Date + title */
.upx-date {
  font-size: .86rem !important;
  color: #222 !important;
  opacity: .85 !important;
  margin-bottom: 8px !important;
}

.upx-title {
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--brand-green, #0f5132) !important;
  text-decoration: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* clamp long titles */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.upx-title:hover { text-decoration: underline !important; }

/* ===== LNX (Latest News eXperience) — responsive row + top-crop ===== */

/* Row: wraps on small screens, centers when fewer than 4 items */
.lnx-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  justify-content: center !important; /* center 1–3 cards */
  align-items: stretch !important;
  margin-inline: auto !important;
}

/* Card sizing */
.lnx-grid .news-card {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  /* mobile-first: grow/wrap nicely */
  flex: 1 1 280px !important;
  max-width: 360px !important;
}

/* Desktop: exactly 4 across */
@media (min-width: 1100px) {
  .lnx-grid .news-card {
    flex: 0 1 calc((100% - (24px * 3)) / 4) !important; /* 4 cols with 3 gaps */
    max-width: calc((100% - (24px * 3)) / 4) !important;
  }
}

/* TOP-CROP for Latest News thumbnails (wins over legacy rules) */
#home-latest-news .news-thumb {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: top center !important; /* ★ anchor to top edge */
  display: block !important;
}
/* ===== Bold dates in Latest News + Upcoming Events ===== */

/* Latest News cards */
#home-latest-news .news-meta {
  font-weight: 700 !important;
  color: inherit !important;
  opacity: 1 !important;        /* was dimmed in some themes */
}

/* Upcoming Events (UPX) cards */
#home-events .upx-date,
#home-events .event-date {       /* fallback if legacy class shows up */
  font-weight: 700 !important;
  color: inherit !important;
  opacity: 1 !important;
}
/* === UPX contrast fix (Dark Reader friendly) ==================== */
/* Put this at the very END of /assets/css/upx.css */

/* Card container */
#home-events .upx-card{
  background: var(--upx-card-bg, #ffffff) !important;
  color: var(--upx-card-fg, inherit) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.15) !important;
  overflow: hidden !important;
  opacity: 1 !important; /* kill any inherited dimming */
}

/* Thumbnail */
#home-events .upx-thumb{
  width: 100% !important;
  display: block !important;
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Text area */
#home-events .upx-body{
  padding: 12px 16px !important;
  background: inherit !important;   /* keep same bg as card (Dark Reader will adapt) */
  color: inherit !important;
  opacity: 1 !important;            /* ensure full contrast */
}

/* Date (already bold from earlier request, keep it explicit) */
#home-events .upx-date{
  font-weight: 700 !important;
  color: inherit !important;
  opacity: 1 !important;
}

/* Title */
#home-events .upx-title,
#home-events .upx-title a{
  color: inherit !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
#home-events .upx-title a:hover{ text-decoration: underline !important; }

/* Dark mode explicit palette (Dark Reader respects but won’t nuke contrast) */
@media (prefers-color-scheme: dark){
  :root{
    --upx-card-bg: #131a16;   /* deep green-black */
    --upx-card-fg: #e9f5ef;   /* light mint */
  }
}
/* === UPX: dark-green card background (instead of black) ============ */
/* Light mode stays as-is; only dark contexts get the new palette. */
@media (prefers-color-scheme: dark) {
  /* Card + text */
  #home-events .upx-card,
  #home-events .upx-body {
    background-color: #055702 !important;   /* dark green */
    color: #eaf7f1 !important;               /* light mint text for contrast */
  }

  /* Keep date/title readable and consistent */
  #home-events .upx-date,
  #home-events .upx-title,
  #home-events .upx-title a {
    color: #eaf7f1 !important;
    opacity: 1 !important;
  }

  /* Optional: subtle edge so the image/body seam looks crisp */
  #home-events .upx-body {
    border-top: 1px solid rgba(255,255,255,.06) !important;
  }
}
/* ===== Color-code News vs Events in shared news cards ===== */

/* Events: dark-green body like Upcoming Events */
.news-card.is-event .news-body {
  background-color: #055702 !important;
  color: #eaf7f1 !important;            /* readable text */
}

/* Make all text inside the body inherit the light color */
.news-card.is-event .news-title,
.news-card.is-event .news-title a,
.news-card.is-event .news-meta,
.news-card.is-event .news-summary {
  color: #eaf7f1 !important;
}

.news-card.is-event .news-title a:hover { text-decoration: underline; }

/* Nice edge if your card uses rounded corners */
.news-card.is-event .news-body {
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
}

/* Keep dates bold (works for both News and Events) */
.news-card .news-meta { font-weight: 700 !important; }