/* NeuroLogic — Open access resources.
   Card grammar deliberately matches the NeuroBLOG cards: 12px radius,
   16:10 media, uppercase blue label, hover lift + image scale. */

.nl-res { --nl-r-navy: #101227; --nl-r-blue: #2E478A; --nl-r-gold: #D3BF90;
  --nl-r-line: #E6E7EC; --nl-r-mute: #6B6F80; --nl-r-cream: #F5EFE4; }

.nl-res-filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px; }
.nl-res-chip {
  font: 600 12px/1 Montserrat, sans-serif; letter-spacing:1.4px; text-transform:uppercase;
  padding:10px 16px; border-radius:50px; cursor:pointer;
  border:1px solid var(--nl-r-line); background:#fff; color:var(--nl-r-mute);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.nl-res-chip:hover { border-color: var(--nl-r-blue); color: var(--nl-r-blue); }
.nl-res-chip.is-on { background: var(--nl-r-navy); border-color: var(--nl-r-navy); color:#fff; }
.nl-res-chip:focus-visible { outline:2px solid var(--nl-r-blue); outline-offset:2px; }

.nl-res-grid {
  list-style:none; margin:0; padding:0;
  display:grid; gap:24px;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
}
.nl-res-card { margin:0; }
.nl-res-card[hidden] { display:none; }

.nl-res-link {
  display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--nl-r-line); border-radius:12px; overflow:hidden;
  text-decoration:none; color:inherit;
  box-shadow: 0 1px 2px rgba(16,18,39,.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.nl-res-link:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16,18,39,.10); border-color:#D9DBE3; }
.nl-res-link:focus-visible { outline:2px solid var(--nl-r-blue); outline-offset:3px; }

.nl-res-thumb {
  position:relative; display:block; aspect-ratio:16/10; overflow:hidden;
  background: var(--nl-r-cream);
}
.nl-res-thumb img { width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .35s ease; }
.nl-res-link:hover .nl-res-thumb img { transform: scale(1.04); }

/* Format glyph — drawn in CSS so a resource with no cover still reads. */
.nl-res-glyph { position:absolute; left:50%; top:50%; width:44px; height:44px;
  transform:translate(-50%,-50%); border-radius:50%;
  background: rgba(255,255,255,.92); box-shadow:0 2px 10px rgba(16,18,39,.16); }
.nl-res-glyph::before { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.nl-res-thumb--video  .nl-res-glyph::before { width:0;height:0;margin-left:2px;
  border-left:13px solid var(--nl-r-navy); border-top:8px solid transparent; border-bottom:8px solid transparent; }
.nl-res-thumb--audio  .nl-res-glyph::before { width:3px;height:14px;border-radius:2px;
  background:var(--nl-r-navy); box-shadow:-6px 0 0 var(--nl-r-navy),6px 0 0 var(--nl-r-navy); }
.nl-res-thumb--live   .nl-res-glyph::before { width:12px;height:12px;border-radius:50%;background:#C0392B; }
.nl-res-thumb--tool   .nl-res-glyph::before { width:14px;height:14px;border-radius:3px;
  border:3px solid var(--nl-r-navy); }
.nl-res-thumb--article .nl-res-glyph::before { width:14px;height:3px;background:var(--nl-r-navy);
  box-shadow:0 5px 0 var(--nl-r-navy),0 -5px 0 var(--nl-r-navy); }
.nl-res-card:not([data-f]) .nl-res-glyph,
.nl-res-thumb--:not(.x) .nl-res-glyph { display:none; }

.nl-res-body { display:flex; flex-direction:column; gap:8px; padding:22px 22px 24px; flex:1; }
.nl-res-fmt { font:600 12px/1 Montserrat, sans-serif; letter-spacing:2px; text-transform:uppercase;
  color: var(--nl-r-blue); }
.nl-res-title { font:700 19px/1.35 Montserrat, sans-serif; color: var(--nl-r-navy); }
.nl-res-exc { font:400 15px/1.6 Montserrat, sans-serif; color: var(--nl-r-mute); }
.nl-res-meta { margin-top:auto; padding-top:10px;
  font:600 13px/1 Montserrat, sans-serif; color: var(--nl-r-navy); }
.nl-res-empty { color: var(--nl-r-mute); font:400 16px/1.6 Montserrat, sans-serif; }

@media (max-width: 767px) {
  .nl-res-grid { grid-template-columns:1fr; gap:18px; }
  .nl-res-title { font-size:18px; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-res-link, .nl-res-thumb img { transition:none; }
  .nl-res-link:hover { transform:none; }
  .nl-res-link:hover .nl-res-thumb img { transform:none; }
}