@charset "utf-8";

.cs-latest{width:100%}
.cs-latest .cs-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin:0;padding:0;list-style:none
}
.cs-latest .cs-card{
  display:flex;min-width:0;flex-direction:column;overflow:hidden;border-radius:22px;
  background:var(--white,#fff);box-shadow:0 2px 10px rgba(15,23,42,.05);
  transition:transform .2s,box-shadow .2s
}
.cs-latest .cs-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(15,23,42,.1)}
.cs-latest .cs-photo{
  display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;
  background:rgba(148,163,184,.14);color:#c4b38a;overflow:hidden
}
.cs-latest .cs-photo img{width:100%;height:100%;object-fit:cover;display:block}
.cs-latest .cs-photo i{font-size:52px}
.cs-latest .cs-body{display:flex;flex:1 1 auto;min-width:0;flex-direction:column;padding:18px 20px 20px}
.cs-latest .cs-cat{
  align-self:flex-start;padding:6px 10px;border-radius:999px;
  background:rgba(184,135,46,.12);color:#9a6b1e;font-size:11px;font-weight:800
}
.cs-latest .cs-tit{
  display:-webkit-box;margin:12px 0 10px;color:var(--ink,#111827);font-size:17px;font-weight:700;line-height:1.45;
  overflow:hidden;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical
}
.cs-latest .cs-tit:hover{color:#9a6b1e}
.cs-latest .cs-meta{margin:0;color:var(--muted,#6b7280);font-size:13px}
.cs-latest .cs-meta i{color:#b8872e}
.cs-latest .cs-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.cs-latest .cs-tags em{
  padding:4px 9px;border-radius:6px;background:rgba(184,135,46,.12);color:#9a6b1e;
  font-size:11px;font-weight:700;font-style:normal
}
.cs-latest .cs-empty{
  grid-column:1/-1;padding:54px 20px;border-radius:24px;
  background:rgba(148,163,184,.1);text-align:center;color:var(--muted,#6b7280)
}

html[data-theme="dark"] .cs-latest .cs-card{box-shadow:0 2px 10px rgba(0,0,0,.4)}
html[data-theme="dark"] .cs-latest .cs-card:hover{box-shadow:0 18px 40px rgba(0,0,0,.5)}
html[data-theme="dark"] .cs-latest .cs-photo{background:#1a2634;color:#8b7355}
html[data-theme="dark"] .cs-latest .cs-cat,
html[data-theme="dark"] .cs-latest .cs-tags em{background:rgba(212,175,55,.18);color:#e8ce91}

@media (max-width:1024px){.cs-latest .cs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){
  .cs-latest .cs-grid{gap:12px}
  .cs-latest .cs-body{padding:14px 14px 16px}
  .cs-latest .cs-tit{font-size:15px}
}