.csc-card{
  --csc-accent:#2563eb;
  --csc-accent2:#22c55e;
  --csc-bg:#fff;
  --csc-text:#0f172a;
  --csc-muted:#475569;
  --csc-border:#e2e8f0;

  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:14px;
  background:var(--csc-bg);
  color:var(--csc-text);
  border:1px solid var(--csc-border);
  border-radius:18px;
  padding:14px;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  overflow:hidden;
  width:100%;
  box-sizing:border-box;
  max-width: 860px;
}

.csc-card,
.csc-card *{
  box-sizing:border-box;
}

.csc-card a{ color:inherit; text-decoration:none; }
.csc-card a:hover{ text-decoration:none; }

.csc-media{
  flex:0 1 clamp(140px, 40%, 260px);
  width:clamp(140px, 40%, 260px);
  min-width:120px;
  aspect-ratio: 16 / 10;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--csc-border);
  background: #f8fafc;
}
.csc-card .csc-img{
  width:100%;
  max-width:none;
  height:100% !important;
  display:block;
  object-fit:cover !important;
}

.csc-body{
  flex:1 1 260px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:180px;
}

.csc-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.csc-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--csc-border);
  background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(34,197,94,.10));
  white-space:nowrap;
}

.csc-sub{
  font-size:12px;
  color:var(--csc-muted);
  min-width:0;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.csc-title{
  font-size:18px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-0.01em;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.csc-desc{
  font-size:14px;
  color:var(--csc-muted);
  line-height:1.55;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.csc-cta{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

.csc-btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  min-height:44px;
  border-radius:14px;
  background: linear-gradient(135deg, var(--csc-accent), var(--csc-accent2));
  color:#fff !important;
  font-weight:800;
  white-space:nowrap;
  max-width:100%;
  box-shadow: 0 12px 26px rgba(37,99,235,.25);
  border:1px solid rgba(255,255,255,.18);
  transition: transform .12s ease, box-shadow .12s ease;
}

.csc-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(37,99,235,.32);
}

.csc-btn-label{
  display:inline-block;
}

.csc-arrow{ font-weight:900; }

.csc-note{
  font-size:11px;
  color:var(--csc-muted);
  flex:1 1 140px;
  min-width:120px;
}

/* Pattern: compact */
.csc-compact{
  gap:12px;
  padding:12px;
  border-radius:16px;
}

.csc-compact .csc-media{
  flex-basis:clamp(120px, 34%, 180px);
  width:clamp(120px, 34%, 180px);
}

.csc-compact .csc-title{
  font-size:17px;
}

.csc-compact .csc-desc{
  -webkit-line-clamp:1;
}

.csc-compact .csc-btn{
  min-height:40px;
  padding:10px 12px;
}

/* Pattern: modern */
.csc-modern{
  border-color:rgba(37, 99, 235, .22);
  background:linear-gradient(145deg, #ffffff 0%, #f7fbff 56%, #eef7ff 100%);
  box-shadow:0 16px 34px rgba(15, 23, 42, .10);
}

.csc-modern .csc-media{
  flex-basis:clamp(170px, 42%, 300px);
  width:clamp(170px, 42%, 300px);
  border-radius:16px;
}

.csc-modern .csc-badge{
  border-color:rgba(37, 99, 235, .22);
  background:linear-gradient(135deg, rgba(37, 99, 235, .16), rgba(14, 165, 233, .14));
}

.csc-modern .csc-btn{
  border-radius:999px;
  padding:11px 18px;
}

/* Pattern: premium */
.csc-premium{
  position:relative;
  border-color:rgba(71, 85, 105, .30);
  background:linear-gradient(130deg, #ffffff 0%, #f8fafc 45%, #edf6ff 100%);
  box-shadow:0 18px 40px rgba(15, 23, 42, .14);
}

.csc-premium::before{
  content:"";
  position:absolute;
  left:-80px;
  top:-60px;
  width:240px;
  height:240px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(37, 99, 235, .20), rgba(37, 99, 235, 0) 72%);
  pointer-events:none;
}

.csc-premium > *{
  position:relative;
}

.csc-premium .csc-media{
  flex-basis:clamp(180px, 44%, 320px);
  width:clamp(180px, 44%, 320px);
  border-radius:18px;
  border-color:rgba(148, 163, 184, .40);
}

.csc-premium .csc-badge{
  border:none;
  color:#fff;
  background:linear-gradient(135deg, #0f172a, #334155);
}

.csc-premium .csc-btn{
  background:linear-gradient(135deg, #0f172a 0%, #1d4ed8 55%, #06b6d4 100%);
  box-shadow:0 16px 30px rgba(15, 23, 42, .28);
}

/* Pattern: popular */
.csc-popular{
  border-color:#fcd34d;
  background:linear-gradient(145deg, #fffdf5 0%, #ffffff 52%, #fff7ed 100%);
  box-shadow:0 16px 34px rgba(245, 158, 11, .18);
}

.csc-popular .csc-media{
  flex-basis:clamp(170px, 40%, 280px);
  width:clamp(170px, 40%, 280px);
}

.csc-popular .csc-badge{
  border:none;
  color:#fff;
  background:linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}

.csc-popular .csc-btn{
  background:linear-gradient(135deg, #2563eb 0%, #0ea5e9 58%, #22c55e 100%);
}

/* SWELL sidebar/widget */
.widget .csc-card,
.c-widget .csc-card,
.l-sidebar .csc-card,
.p-sidebar .csc-card,
#secondary .csc-card{
  display:grid;
  grid-template-columns:minmax(128px, 48%) minmax(0, 1fr);
  gap:10px;
  align-items:stretch;
  padding:10px;
  max-width:100%;
}

.widget .csc-card .csc-media,
.c-widget .csc-card .csc-media,
.l-sidebar .csc-card .csc-media,
.p-sidebar .csc-card .csc-media,
#secondary .csc-card .csc-media{
  width:100%;
  min-width:0;
  max-width:none;
  flex:none;
  align-self:stretch;
}

.widget .csc-card .csc-top,
.c-widget .csc-card .csc-top,
.l-sidebar .csc-card .csc-top,
.p-sidebar .csc-card .csc-top,
#secondary .csc-card .csc-top{
  gap:6px;
}

.widget .csc-card .csc-body,
.c-widget .csc-card .csc-body,
.l-sidebar .csc-card .csc-body,
.p-sidebar .csc-card .csc-body,
#secondary .csc-card .csc-body{
  min-width:0;
  gap:8px;
}

.widget .csc-card .csc-sub,
.c-widget .csc-card .csc-sub,
.l-sidebar .csc-card .csc-sub,
.p-sidebar .csc-card .csc-sub,
#secondary .csc-card .csc-sub{
  display:none;
}

.widget .csc-card .csc-title,
.c-widget .csc-card .csc-title,
.l-sidebar .csc-card .csc-title,
.p-sidebar .csc-card .csc-title,
#secondary .csc-card .csc-title{
  font-size:16px;
  -webkit-line-clamp:2;
}

.widget .csc-card .csc-desc,
.c-widget .csc-card .csc-desc,
.l-sidebar .csc-card .csc-desc,
.p-sidebar .csc-card .csc-desc,
#secondary .csc-card .csc-desc{
  display:none;
}

.widget .csc-card .csc-cta,
.c-widget .csc-card .csc-cta,
.l-sidebar .csc-card .csc-cta,
.p-sidebar .csc-card .csc-cta,
#secondary .csc-card .csc-cta{
  margin-top:4px;
  gap:8px;
}

.widget .csc-card .csc-btn,
.c-widget .csc-card .csc-btn,
.l-sidebar .csc-card .csc-btn,
.p-sidebar .csc-card .csc-btn,
#secondary .csc-card .csc-btn{
  width:100%;
  min-height:38px;
  padding:9px 12px;
  font-size:14px;
}

.widget .csc-card .csc-note,
.c-widget .csc-card .csc-note,
.l-sidebar .csc-card .csc-note,
.p-sidebar .csc-card .csc-note,
#secondary .csc-card .csc-note{
  display:none;
}

@media (max-width: 720px){
  .csc-card{
    flex-direction:column;
    padding:12px;
  }
  .csc-media{
    flex-basis:auto;
    width:100%;
    aspect-ratio: 16 / 9;
  }
  .csc-body{ min-width:0; }
  .csc-title{ font-size:16px; }
}