.ngf-eventsnews {
  background: var(--ngf-bg-surface);
  border-bottom: 1px solid var(--ngf-border);
}

.ngf-eventsnews__grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  padding: 0;
}

.ngf-eventsnews__col { padding: 88px 48px 96px; }
.ngf-eventsnews__col--events { border-right: 1px solid var(--ngf-border); }

/* Event list */
.ngf-eventlist {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Neutralize block/Views wrappers so each event row lands directly in the list */
.ngf-eventlist .block,
.ngf-eventlist .views-element-container,
.ngf-eventlist .view,
.ngf-eventlist .view-content,
.ngf-eventlist .views-row { display: contents; }
/* The 'upcoming' display's header ("All events") is redundant with the section label. */
.ngf-eventlist .view-header,
.ngf-eventlist .view-empty { display: none; }
/* Row separators survive the Views .views-row wrappers. */
.ngf-eventlist .views-row + .views-row .ngf-eventlist__row { border-top: 1px solid var(--ngf-border); }

.ngf-eventlist__link {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 12px;
  margin: 0 -12px;
  border-radius: var(--ngf-r-sm);
  text-decoration: none;
  transition: background-color var(--ngf-dur-base) var(--ngf-ease-out);
}
.ngf-eventlist__link:hover { background: var(--ngf-bone); }

.ngf-eventlist__date {
  width: 72px;
  flex-shrink: 0;
  text-align: center;
  padding: 8px 4px;
  border: 1px solid var(--ngf-border-strong);
  border-radius: var(--ngf-r-sm);
}
.ngf-eventlist__mon {
  display: block;
  font-family: var(--ngf-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ngf-seismic-500);
  font-weight: var(--ngf-w-bold);
}
.ngf-eventlist__day {
  display: block;
  font-family: var(--ngf-font-display);
  font-size: 1.375rem;
  font-weight: var(--ngf-w-bold);
  color: var(--ngf-ink-900);
  line-height: 1;
  margin-top: 2px;
}

.ngf-eventlist__until {
  display: block;
  font-family: var(--ngf-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ngf-fg-3);
  margin-top: 3px;
  white-space: nowrap;
}

.ngf-eventlist__text { flex: 1; padding-top: 4px; }
.ngf-evtbadge {
  display: inline-block;
  font-family: var(--ngf-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--ngf-r-sm);
  margin-bottom: 4px;
}
.ngf-evtbadge--conferences      { color: var(--ngf-seismic-600); background: var(--ngf-seismic-50); }
.ngf-evtbadge--courses_workshops { color: var(--ngf-geodetic-600); background: var(--ngf-geodetic-50); }
.ngf-evtbadge--webinars         { color: var(--ngf-warning); background: rgba(138, 92, 16, 0.1); }
.ngf-eventlist__title {
  display: block;
  font-size: var(--ngf-fs-base);
  font-weight: var(--ngf-w-bold);
  line-height: 1.3;
  color: var(--ngf-ink-900);
}
.ngf-eventlist__loc {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8125rem;
  color: var(--ngf-fg-2);
  margin-top: 4px;
}
.ngf-eventlist__pin { flex-shrink: 0; color: var(--ngf-fg-3); }
.ngf-eventlist__dot { color: var(--ngf-fg-3); }

.ngf-eventlist__chev {
  flex-shrink: 0;
  margin-top: 6px;
  color: var(--ngf-fg-3);
  transition: transform var(--ngf-dur-fast) var(--ngf-ease-out), color var(--ngf-dur-fast) var(--ngf-ease-out);
}
.ngf-eventlist__link:hover .ngf-eventlist__chev {
  transform: translateX(3px);
  color: var(--ngf-fg-1);
}

/* Past events (/events/past): dates are no longer actionable, so mute them. */
.ngf-eventlist--past .ngf-eventlist__date { border-color: var(--ngf-border); }
.ngf-eventlist--past .ngf-eventlist__mon { color: var(--ngf-fg-3); }
.ngf-eventlist--past .ngf-eventlist__day { color: var(--ngf-fg-2); }

/* News grid (slot fills with view rows) */
.ngf-news__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
/* Neutralize block/Views wrappers so each card lands directly in the grid.
   Views' default templates don't add a "view"/"view-content" class here —
   the actual chain is the block's own wrapper div > .views-element-container
   > .js-view-dom-id-* > .views-row — so each of those needs flattening. */
.ngf-news__grid > div,
.ngf-news__grid .views-element-container,
.ngf-news__grid [class*="js-view-dom-id-"],
.ngf-news__grid .views-row {
  display: contents;
}
/* The 'latest' display's header ("All news") is redundant with the section
   label — Views renders it as a bare <header>, not a ".view-header" div. */
.ngf-news__grid header,
.ngf-news__grid .views-row__empty,
.ngf-news__grid .view-empty { display: none; }

/* News card (rendered by the News view rows) */
.ngf-news-card {
  background: var(--ngf-bg-surface);
  border: 1px solid var(--ngf-border);
  border-radius: var(--ngf-r-md);
  overflow: hidden;
  text-decoration: none;
  display: block;
}
.ngf-news-card__media { aspect-ratio: 16 / 9; }
.ngf-news-card__media .ngf-img,
.ngf-news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ngf-news-card__body { padding: 16px 18px 20px; }
.ngf-news-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.ngf-news-card__title {
  font-family: var(--ngf-font-display);
  font-size: var(--ngf-fs-base);
  font-weight: var(--ngf-w-bold);
  margin: 0;
  line-height: 1.3;
  color: var(--ngf-ink-900);
}

/* Standalone /news listing: three across (homepage §08 keeps the 2-col grid).
   minmax(0, 1fr) so a card with a large intrinsic-width image can't stretch
   its column. */
.ngf-listing .ngf-news__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 1024px) {
  .ngf-eventsnews__grid { grid-template-columns: 1fr; }
  .ngf-eventsnews__col { padding: 56px 24px 64px; }
  .ngf-eventsnews__col--events { border-right: 0; border-bottom: 1px solid var(--ngf-border); }
  .ngf-listing .ngf-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ngf-news__grid,
  .ngf-listing .ngf-news__grid { grid-template-columns: 1fr; }
}