/* Lab News. Served by the pinned jsDelivr <link> in code/lab-news.html,
   alongside css/news-card.css, which owns the card look (title, meta, and
   summary type, the square covers) shared with Home's strip. This file keeps
   the page frame: the post counter, the Load More cut, and the fixed row
   grid that survives an empty field. docs/super.md, "Lab News Page".

   Notion:  Linked gallery view of `Lab News Posts`
              showing Title, Date, Location, Summary

   property-4856717d  Date
   property-6e756d61  Location */

.page__lab-news {
  --padding-left: clamp(16px, 3vw, 48px);
  --padding-right: clamp(16px, 3vw, 48px);

  --collection-card-cover-size-large: 380px;
  --collection-card-gap: 36px 24px;
}

.page__lab-news .notion-collection-gallery {
  counter-reset: post;
}

.page__lab-news .notion-collection-card {
  counter-increment: post;
}

.page__lab-news .notion-collection-gallery::after {
  order: -1;
  grid-column: 1 / -1;
  content: counter(post) " posts";
  margin-bottom: 8px;
  font-size: 14px;
  color: #8a8a8e;
}

/* Load More, driven by js/lab-news-load-more.js. The first rule makes the cut on
   its own, so the page paints capped and the script can wait for React to finish
   hydrating before touching anything; setting data-total hands the cut over. The
   script also writes the real total there, because a display:none card stops
   incrementing `post` and the count above would otherwise read 18. */

.page__lab-news .notion-collection-gallery:not([data-total])
  > .notion-collection-card:nth-child(n + 19) {
  display: none;
}

.page__lab-news .notion-collection-card.is-beyond {
  display: none;
}

.page__lab-news .notion-collection-gallery[data-total]::after {
  content: attr(data-total) " posts";
}

.page__lab-news .lab-news-more {
  display: block;
  margin: 34px auto 0;
  padding: 11px 26px;
  border: 1px solid #c6cfd7;
  border-radius: 2px;
  background: transparent;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #212121;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.page__lab-news .lab-news-more:hover {
  border-color: #8a8a8e;
  background: #f4f6f7;
}

.page__lab-news .notion-collection-card__property-list {
  display: flex;
  flex-direction: column;
}

.page__lab-news .notion-collection-card__property {
  flex: none;
}

.page__lab-news
  .notion-collection-card__property-list:not(:has(.property-6e756d61))
  .notion-collection-card__property.property-4856717d {
  margin-bottom: var(--meta-line);
}