/* =============================================================================
   News — the blog index, category archives and single posts.

   The live site lays its News index out as a packed masonry grid of cards, so
   this uses CSS multi-column flow to get the same uneven, tightly-packed rows
   without any layout JS. Enqueued only on those views (rule 9).
   ============================================================================= */

/* ------------------------------------------------------------- Masonry grid */
.newsGrid {
  columns: 3;
  column-gap: 1.5rem;
}
.newsGrid .newsCard {
  break-inside: avoid;
  margin: 0 0 1.5rem;
  display: block;                 /* column flow, not flex */
  background: var(--colorSurface);
  border: 1px solid var(--colorBorder);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur) var(--easeOut), border-color var(--dur) var(--easeOut);
}
.newsGrid .newsCard:hover { transform: translateY(-4px); border-color: var(--colorBlood); }
.newsGrid .newsCardMedia { display: block; overflow: hidden; background: #050505; aspect-ratio: auto; }
.newsGrid .newsCardMedia img { width: 100%; height: auto; display: block; transition: transform .6s var(--easeOut); }
.newsGrid .newsCard:hover .newsCardMedia img { transform: scale(1.05); }
.newsGrid .newsCardPlaceholder { display: block; width: 100%; aspect-ratio: 16 / 10; background: repeating-linear-gradient(45deg, #0c0d0e, #0c0d0e 12px, #120404 12px, #120404 24px); }
.newsGrid .newsCardBody { padding: 1rem 1.15rem 1.25rem; display: grid; gap: .35rem; }
.newsGrid .newsCardTitle { margin: 0; font-size: 1.12rem; line-height: 1.25; }
.newsGrid .newsCardTitle a { color: #fff; }
.newsGrid .newsCardTitle a:hover { color: var(--colorBloodBright); }
.newsGrid .newsCardExcerpt { margin: 0; color: var(--colorTextMuted); font-size: .9rem; }

/* Date, with the live site's small red marker. */
.newsGrid .entryMeta {
  margin: 0; display: flex; align-items: center; gap: .5em;
  font-family: var(--fontDisplay); font-size: .85rem; letter-spacing: 0;
  text-transform: none; color: var(--colorTextMuted);
}
.newsGrid .entryMeta::before {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px; background: var(--colorBloodDark);
}

@media (max-width: 1000px) { .newsGrid { columns: 2; } }
@media (max-width: 620px)  { .newsGrid { columns: 1; } }

/* -------------------------------------------------------------- Pagination */
.pagination { margin-top: 2.5rem; }
.pagination ul { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; list-style: none; margin: 0; padding: 0; }
.pagination .page-numbers {
  display: grid; place-items: center; min-width: 2.2rem; height: 2.2rem; padding: 0 .55rem;
  background: var(--colorSurface); border: 1px solid var(--colorBorder); border-radius: var(--radius);
  color: #fff; font-family: var(--fontTechno); font-size: .82rem;
  transition: background var(--dur) var(--easeOut), border-color var(--dur) var(--easeOut);
}
.pagination .page-numbers:hover { border-color: var(--colorBlood); }
.pagination .page-numbers.current { background: var(--colorBloodDark); border-color: var(--colorBlood); }

/* ------------------------------------------------------- Video embeds */
.bbfcVideoEmbed {
  position: relative; aspect-ratio: 16 / 9; margin: 0 0 1.5rem;
  border: 1px solid var(--colorBorder); border-radius: var(--radius); overflow: hidden; background: #050505;
}
.bbfcVideoEmbed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }