/* Project cards block (front end). Colours and type match the blog's card style. */

.cs-pc {margin: 8px 0 28px}

.cs-pc__card {display:flex; flex-direction:column; gap:6px; height:100%; box-sizing:border-box; padding:16px 18px; background:#ffffff10; border-radius:12px; border-top:2px solid #cfc798}

.cs-pc__replaces {font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; color:#a8a9ae}
.cs-pc__head {display:flex; align-items:center; gap:12px}
.cs-pc__icon {width:40px; height:40px; flex:none; object-fit:contain; border-radius:8px}
.cs-pc__name {font-size:1.2rem; font-weight:600; color:#fffbe9; line-height:1.2}
.cs-pc__desc {font-size:.92rem; line-height:1.45; color:#d8d4bf}
.cs-pc__status {font-size:.84rem; line-height:1.4; color:#a8a9ae; font-style:italic}
.cs-pc__link {margin-top:auto; padding-top:6px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:#cfc798; text-decoration:none}
.cs-pc__link:hover {color:#fffbe9}
.cs-pc__link:focus-visible {outline:2px solid #3beffb; outline-offset:2px}

/* One per row: a horizontal card from tablet width up, so it is not a thin strip. */
@media (min-width:768px) {
  .cs-pc--wide .cs-pc__card {display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:24px; align-items:start}
  .cs-pc--wide .cs-pc__replaces,
  .cs-pc--wide .cs-pc__head,
  .cs-pc--wide .cs-pc__desc,
  .cs-pc--wide .cs-pc__status {grid-column:1}
  .cs-pc--wide .cs-pc__link {grid-column:2; grid-row:1 / span 4; align-self:end; padding-top:0; white-space:nowrap}
}