.cl-card{
--radius:16px;
--border:#e6e7ea;
--text:#2b2f38;
--muted:#6b7280; --chip-bg:#eaf7ef;
--chip-text:#236a3d;
--cta:#188b4f;
--cta-hover:#137543;
background:#fff;
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:0 4px 18px rgba(21,24,31,.06);
display:grid;
grid-template-columns: 360px 1fr; gap:0;
overflow:hidden; align-items:stretch;
} .cl-variant-green{
--chip-bg:#eaf7ef;
--chip-text:#236a3d;
--cta:#188b4f;
--cta-hover:#137543;
} .cl-variant-blue{
--chip-bg:#e9f3ff;
--chip-text:#145ea8;
--cta:#1b6bd6;
--cta-hover:#165bb6;
} .cl-variant-orange{
--chip-bg:#fff3e6;
--chip-text:#a24a00;
--cta:#f08a24;
--cta-hover:#d97706;
} .cl-variant-purple{
--chip-bg:#f2e9ff;
--chip-text:#5b2fad;
--cta:#6d3fdc;
--cta-hover:#5931c1;
} .cl-media{
position:relative;
height:100%;
overflow:hidden;
}
.cl-media img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover; object-position:center;
display:block;
}
.cl-body{ padding:22px 26px; }
.cl-eyebrow{
font:600 11px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--muted);
margin-bottom:6px;
}
.cl-title{
font:700 26px/1.25 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
color:var(--text);
margin:0 0 6px;
}
.cl-subtitle{
color:#3b3f46;
font-weight:500;
margin-bottom:10px;
}
.cl-chips{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 12px; }
.cl-chip{
background:var(--chip-bg);
color:var(--chip-text);
border:1px solid rgba(0,0,0,.05);
border-radius:9999px;
padding:6px 10px;
font-size:12px;
font-weight:600;
display:inline-flex; align-items:center; gap:6px;
}
.cl-desc{ color:#4a515b; line-height:1.6; margin:10px 0 16px; }
.cl-cta{
display:inline-block;
background:var(--cta);
color:#fff !important;
padding:12px 18px;
border-radius:8px;
font-weight:700;
text-decoration:none;
box-shadow:0 2px 0 rgba(0,0,0,.08) inset;
transition:background .2s ease, transform .06s ease;
}
.cl-cta:hover{ background:var(--cta-hover); }
.cl-cta:active{ transform:translateY(1px); }
.cl-cta:focus-visible{
outline:2px solid var(--cta-hover);
outline-offset:2px;
}
.cl-footnote{
margin-top:8px;
color:var(--muted);
font-size:12px;
} .cl-link-overlay{ text-decoration:none; } @media (max-width: 860px){ .cl-card{
grid-template-columns:1fr;
grid-auto-rows:auto;
}
.cl-media{
grid-column:1 / -1;
grid-row:1;
height:auto; position:relative; }
.cl-media img{
position:static; width:100%;
height:auto; object-fit:contain; display:block;
}
.cl-body{
grid-column:1 / -1;
grid-row:2;
padding:20px 22px;
}
}