:root{
  --sap-orange:#ff9900;
  --sap-orange-700:#cc7a00;
  --sap-navy:#0f2437;
  --sap-text:#1e293b;
  --sap-muted:#64748b;
  --sap-card-bg:#fff;
  --sap-card-border:#e5e7eb;
}

/* Grid */
.sapwcg-grid{
  display:grid;
  gap:16px;
  margin:24px auto;
  grid-template-columns: repeat(var(--sapwcg-cols,4), 1fr);
}
@media (max-width:1199px){ .sapwcg-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:899px){  .sapwcg-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:479px){  .sapwcg-grid{ grid-template-columns:1fr; } }

/* Card */
.sapwcg-card{
  display:flex;
  flex-direction:column;
  background:var(--sap-card-bg);
  border:1px solid var(--sap-card-border);
  border-radius:14px;
  padding:18px;
  text-decoration:none;
  color:var(--sap-text);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sapwcg-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 22px rgba(15,36,55,.08);
  border-color:rgba(255,153,0,.35);
}

/* Body */
.sapwcg-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sapwcg-pill{
  display:inline-block;
  font-size:12px;
  line-height:1;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,153,0,.10);
  color:var(--sap-orange);
  border:1px solid rgba(255,153,0,.25);
  width:max-content;
}

.sapwcg-title{
  font-size:18px;
  font-weight:700;
  color:var(--sap-navy);
  margin:0;
}

.sapwcg-meta{
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.sapwcg-link{
  font-weight:600;
  color:var(--sap-orange);
  border-bottom:2px solid rgba(255,153,0,.35);
  padding-bottom:1px;
  transition:color .15s ease, border-color .15s ease;
}
.sapwcg-card:hover .sapwcg-link{
  color:var(--sap-orange-700);
  border-color:rgba(204,122,0,.6);
}
.sapwcg-count{
  font-size:12px;
  color:var(--sap-muted);
  background:#f8fafc;
  border:1px solid #eef2f7;
  padding:6px 8px;
  border-radius:8px;
}