/* Project cards inspired by the dark inset-card reference, scoped to the library. */
#projects .library-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 20px; }
#projects .library-card {
  width: 100%; min-height: 370px; padding: 19px; overflow: visible;
  border: 1px solid #303235; border-radius: 20px; background: #212224;
  box-shadow: 5px 5px 8px #101214, -5px -5px 8px #2a2c30;
  transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
#projects .library-card:hover, #projects .library-card:focus-within {
  transform: translateY(-10px); border-color: #3e4947;
  box-shadow: 8px 12px 20px #0b0d0f, -5px -5px 9px #2c2e31;
}
#projects .library-card .card-accent { display: none!important; }
#projects .library-card-image {
  position: relative; display: grid; place-items: center; flex: none; min-height: 170px;
  overflow: hidden; border-radius: 15px; background: #303234;
  box-shadow: inset 5px 5px 4px #292b2d, inset -5px -5px 4px #37393b;
}
#projects .library-card-placeholder { width: 40px; height: 40px; color: #8cae9d; opacity: .75; }
#projects .library-card-image:has(.library-cover:not(.is-loading):not(.is-unavailable)) .library-card-placeholder { display: none; }
#projects .library-card-image:has(.library-cover.is-loading)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 25%, #ffffff0b 48%, transparent 70%);
  background-size: 220% 100%; animation: cover-retry-sheen 1.45s ease-in-out infinite;
}
#projects .library-card-image .library-cover {
  position: absolute; inset: 0; width: 100%; height: 100%; max-height: none;
  margin: 0; border: 0; border-radius: 15px; aspect-ratio: auto; object-fit: cover;
  box-shadow: none;
}
#projects .library-card-image .library-cover.is-unavailable { display: none; }
#projects .library-card-head { min-height: 29px; margin-top: 13px; }
#projects .library-card .library-type { padding: 2px 0; border: 0; background: transparent; color: #b4c3b9; font-size: 10px; }
#projects .library-card .library-type.text { color: #b4c3b9; }
#projects .library-card .library-branding-tag { border: 0; color: #bda7d9; }
#projects .library-card time { color: #a1a4a7; font-size: 10px; }
#projects .library-card .library-card-body { padding: 7px 1px 18px; }
#projects .library-card h3 { margin: 0 0 9px; color: #b2eccf; font-size: 18px; font-weight: 700; line-height: 1.55; }
#projects .library-card .card-description { color: #b8b8b8; font-size: 12px; line-height: 1.7; }
#projects .library-card .library-detail { border-color: #383b3e; background: #292b2d; box-shadow: inset 2px 2px 4px #222426, inset -2px -2px 4px #303234; }
#projects .library-card .library-detail small { color: #aaaeb0; }
#projects .library-card .library-detail strong { color: #dedfe0; }
#projects .library-card .card-progress { border-color: #393b3e; background: #292b2d; }
#projects .library-card .card-footer { border-top-color: #393b3e; }
@media (max-width: 760px) {
  #projects .library-grid { grid-template-columns: 1fr; gap: 16px; }
  #projects .library-card { min-height: 370px; padding: 16px; }
  #projects .library-card:hover, #projects .library-card:focus-within { transform: none; }
  #projects .library-card-image { min-height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  #projects .library-card { transition: none; }
  #projects .library-card-image:has(.library-cover.is-loading)::after { animation: none; }
}