/* ---- Card base (padrão: verde) ---- */
.cl-card{
  --radius:16px;
  --border:#e6e7ea;
  --text:#2b2f38;
  --muted:#6b7280;

  /* tema (verde default) */
  --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; /* sobrescrito pelo inline do PHP (mediaWidth) */
  gap:0;
  overflow:hidden;

  /* estica os itens na altura da linha */
  align-items:stretch;
}

/* tornar explícito o tema verde */
.cl-variant-green{
  --chip-bg:#eaf7ef;
  --chip-text:#236a3d;
  --cta:#188b4f;
  --cta-hover:#137543;
}

/* tema azul */
.cl-variant-blue{
  --chip-bg:#e9f3ff;
  --chip-text:#145ea8;
  --cta:#1b6bd6;
  --cta-hover:#165bb6;
}

/* tema laranja */
.cl-variant-orange{
  --chip-bg:#fff3e6;
  --chip-text:#a24a00;
  --cta:#f08a24;
  --cta-hover:#d97706;
}

/* tema roxo */
.cl-variant-purple{
  --chip-bg:#f2e9ff;
  --chip-text:#5b2fad;
  --cta:#6d3fdc;
  --cta-hover:#5931c1;
}

/* imagem: container relativo + img absoluta para cobrir a coluna (desktop) */
.cl-media{
  position:relative;
  height:100%;
  overflow:hidden;
}
.cl-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;      /* cobre a lateral no desktop */
  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;
}

/* overlay do card clicável */
.cl-link-overlay{ text-decoration:none; }

/* ---- Responsivo ---- */
@media (max-width: 860px){
  /* 1 coluna; imagem em cima, conteúdo embaixo */
  .cl-card{
    grid-template-columns:1fr;
    grid-auto-rows:auto;
  }
  .cl-media{
    grid-column:1 / -1;
    grid-row:1;
    height:auto;          /* deixa a imagem definir a altura */
    position:relative;    /* mantém contexto */
  }
  .cl-media img{
    position:static;      /* volta ao fluxo normal */
    width:100%;
    height:auto;          /* mantém proporção sem cortar */
    object-fit:contain;   /* adapta, sem crop no mobile */
    display:block;
  }
  .cl-body{
    grid-column:1 / -1;
    grid-row:2;
    padding:20px 22px;
  }
}