/* Komponen kartu artikel — dipakai di landing page & halaman /artikel */
.art-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.art-card{
  background:#fff; border:1px solid var(--line); border-radius:4px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease;
}
.art-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.art-cover{
  display:block; aspect-ratio:16/9; background:var(--paper-dark); overflow:hidden;
  border-bottom:1px solid var(--line);
}
.art-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.art-cover.ph{ display:flex; align-items:center; justify-content:center; }
.art-cover .ph-mark{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.1rem; letter-spacing:-0.02em;
  color:var(--carbon);
}
.art-cover .ph-mark::after{ content:"."; color:var(--stamp); }
.art-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.art-cat{
  align-self:flex-start; font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--stamp-dark); text-decoration:none;
  background:#FFF6D8; padding:3px 9px; border-radius:20px;
}
.art-cat:hover{ background:#FBE28A; }
.art-title{ font-size:1.08rem; line-height:1.3; }
.art-title a{ text-decoration:none; color:var(--ink); }
.art-title a:hover{ text-decoration:underline; text-underline-offset:3px; }
.art-excerpt{
  margin:0; font-size:.9rem; line-height:1.55; color:var(--ink-soft);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.art-meta{ margin-top:auto; padding-top:6px; font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--carbon); }

@media (max-width: 920px){ .art-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 600px){ .art-grid{ grid-template-columns:1fr; } }