/* =========================================================================
   Listing card — shared by /news and /events (node--{news,event}--listing).
   Geophysical events keep their own image+magnitude-badge card (geo-event.css);
   this file only covers the two bundles that had no card-with-description
   treatment before.
   ========================================================================= */

/* Fixed three-up grid. align-items:start keeps each card's own height —
   without it, grid stretches every card in a row to match the tallest one,
   which reads as dead whitespace under a short card's image. */
.ngf-listinggrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 24px;
}
/* Neutralize the Views row wrapper so each card lands directly in the grid. */
.ngf-listinggrid > div,
.ngf-listinggrid .views-row {
  display: contents;
}
@media (max-width: 900px) {
  .ngf-listinggrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ngf-listinggrid { grid-template-columns: 1fr; }
}

/* News only: taller media so the image reads as the card's lead element
   rather than a thin strip above the text. */
.ngf-listinggrid .ngf-listingcard__media { aspect-ratio: 3 / 2; }

/* Shell modelled on the Get Support triage cards (support-card.css):
   larger radius, a resting shadow (not just on hover), and a border that
   picks up the category accent on hover. */
.ngf-listingcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ngf-bg-surface);
  border: 1px solid var(--ngf-border);
  border-radius: var(--ngf-r-lg);
  box-shadow: var(--ngf-shadow-1);
  overflow: hidden;
  text-decoration: none;
  position: relative;
}
.ngf-listingcard:hover { border-color: var(--accent-line, var(--ngf-border)); }

/* Left accent bar — same idea as the Support-card left rail, driven by the
   category tone class below instead of a full-width banner. */
.ngf-listingcard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  z-index: 1;
  background: var(--accent, var(--ngf-border));
}
/* News only: a featured image already gives the card a strong visual lead,
   so the accent bar on top of it just reads as clutter. */
.ngf-listingcard--has-image::before {
  display: none;
}

.ngf-listingcard--conferences,
.ngf-listingcard--earthscope_news       { --accent: var(--ngf-seismic-600);  --accent-tint: var(--ngf-seismic-50);  --accent-line: var(--ngf-seismic-200); }
.ngf-listingcard--courses_workshops,
.ngf-listingcard--science_society       { --accent: var(--ngf-geodetic-600); --accent-tint: var(--ngf-geodetic-50); --accent-line: var(--ngf-geodetic-200); }
.ngf-listingcard--webinars,
.ngf-listingcard--workforce             { --accent: var(--ngf-warning); --accent-tint: rgba(138, 92, 16, 0.1); --accent-line: rgba(138, 92, 16, 0.35); }
.ngf-listingcard--organizational_news   { --accent: var(--ngf-ink-700); --accent-tint: var(--ngf-ink-50); --accent-line: var(--ngf-ink-200); }

.ngf-listingcard__media { aspect-ratio: 16 / 9; }
/* The image field formatter wraps <img> in several unclassed <div>s with no
   defined height, so img's height:100% below has nothing definite to resolve
   against and the image falls back to its own native aspect ratio. Collapse
   those wrappers out of the box tree so img sizes against this element
   instead. Exclude .visually-hidden — it needs its own box to stay hidden. */
.ngf-listingcard__media div:not(.visually-hidden) { display: contents; }
.ngf-listingcard__media img,
.ngf-listingcard__media .ngf-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Category tag — small tinted chip in the meta row, colored by the same
   accent custom properties as the left bar above. */
.ngf-listingcard__tag {
  display: inline-block;
  font-family: var(--ngf-font-mono);
  font-size: 0.6875rem;
  font-weight: var(--ngf-w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--ngf-r-sm);
  color: var(--accent, var(--ngf-fg-2));
  background: var(--accent-tint, var(--ngf-bone));
}

.ngf-listingcard__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 22px;
  flex: 1;
}

.ngf-listingcard__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--ngf-fg-2);
}
.ngf-listingcard__meta-icon { flex-shrink: 0; color: var(--ngf-fg-3); }
.ngf-listingcard__dot { color: var(--ngf-fg-3); }

/* No forced line-balancing here — that algorithm picks the narrowest column
   that still keeps the same line count, which made short titles look like
   they were floating in a much narrower box than the card actually is. */
.ngf-listingcard__title {
  font-family: var(--ngf-font-display);
  font-size: var(--ngf-fs-md);
  font-weight: var(--ngf-w-bold);
  line-height: 1.3;
  color: var(--ngf-ink-900);
  margin: 0;
}

.ngf-listingcard__desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ngf-fg-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ngf-listingcard__cta {
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.8125rem;
  font-weight: var(--ngf-w-semi);
  color: var(--ngf-primary);
}
.ngf-listingcard__cta::before { content: ">> "; }

/* Past events: the whole card mutes slightly since the dates are no longer actionable. */
.ngf-listinggrid--past .ngf-listingcard__tag { opacity: 0.7; }
.ngf-listinggrid--past .ngf-listingcard__meta { color: var(--ngf-fg-3); }

/* Empty-state escape hatch: names the filter to drop and how many that finds.
   See _ngf_listing_empty_hint() in ngf.theme. */
.ngf-listing__empty-hint {
  margin: 10px 0 0;
  font-size: var(--ngf-fs-sm);
}
.ngf-listing__empty-hint a {
  color: var(--ngf-geodetic-600);
  border-bottom: 1px solid var(--ngf-geodetic-200);
  font-weight: var(--ngf-w-semi);
}
.ngf-listing__empty-hint a:hover {
  color: var(--ngf-seismic-600);
  border-bottom-color: var(--ngf-seismic-400);
}