/* ---- Card base (padrão: verde) ---- */
.cl-card{
  --radius:16px;
  --border:#e6e7ea;
  --text:#2b2f38;        /* cor principal do texto */
  --muted:#6b7280;       /* textos discretos (eyebrow/rodapé) */

  /* 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;
  align-items:stretch;
}

/* ================= Temas claros ================= */

.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;
}

/* ================= Temas escuros ================= */

/* Wine (borgonha) */
.cl-variant-wine{
  background:#2a0b0b;
  border-color:transparent;
  box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12);
  --text:#ffffff;
  --muted:rgba(255,255,255,.78);
  --chip-bg:rgba(255,255,255,.12);
  --chip-text:#ffffff;
  --cta:#e11d48;
  --cta-hover:#be123c;
}

/* Navy (azul escuro) */
.cl-variant-navy{
  background:#0b1b3a;
  border-color:transparent;
  box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12);
  --text:#ffffff;
  --muted:rgba(255,255,255,.78);
  --chip-bg:rgba(255,255,255,.12);
  --chip-text:#ffffff;
  --cta:#2563eb;
  --cta-hover:#1e40af;
}

/* Ocean (petróleo/teal escuro) */
.cl-variant-ocean{
  background:#062c2c;
  border-color:transparent;
  box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12);
  --text:#ffffff;
  --muted:rgba(255,255,255,.80);
  --chip-bg:rgba(255,255,255,.12);
  --chip-text:#e6fffb;
  --cta:#14b8a6;
  --cta-hover:#0d9488;
}

/* Slate (grafite escuro) */
.cl-variant-slate{
  background:#111827;
  border-color:transparent;
  box-shadow:0 8px 28px rgba(0,0,0,.28) inset, 0 10px 28px rgba(0,0,0,.14);
  --text:#ffffff;
  --muted:rgba(255,255,255,.72);
  --chip-bg:rgba(255,255,255,.10);
  --chip-text:#ffffff;
  --cta:#f59e0b;
  --cta-hover:#d97706;
}

/* Emerald (verde escuro) */
.cl-variant-emerald{
  background:#052e1b;
  border-color:transparent;
  box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12);
  --text:#ffffff;
  --muted:rgba(255,255,255,.78);
  --chip-bg:rgba(255,255,255,.12);
  --chip-text:#ffffff;
  --cta:#10b981;
  --cta-hover:#059669;
}

/* Indigo (roxo-azulado escuro) */
.cl-variant-indigo{
  background:#1e1b4b;
  border-color:transparent;
  box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12);
  --text:#ffffff;
  --muted:rgba(255,255,255,.78);
  --chip-bg:rgba(255,255,255,.12);
  --chip-text:#ffffff;
  --cta:#7c3aed;
  --cta-hover:#6d28d9;
}

/* Brand (escuro) – usa variáveis do site/tema, com fallbacks */
.cl-variant-brand{
  background: var(--cl-brand-bg, #0b1b3a);
  border-color:transparent;
  box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12);
  --text:#ffffff;
  --muted:rgba(255,255,255,.80);
  --chip-bg:rgba(255,255,255,.12);
  --chip-text:#ffffff;
  --cta: var(--cl-brand, var(--wp--preset--color--primary, #2563eb));
  --cta-hover: var(--cl-brand-hover, #1e40af);
}

/* Dark Neutral (carvão/cinza azulado) */
.cl-variant-dark{
  background:#0f172a; /* slate-900 */
  border-color:transparent;
  box-shadow:0 8px 28px rgba(0,0,0,.28) inset, 0 10px 28px rgba(0,0,0,.14);
  --text:#ffffff;
  --muted:rgba(255,255,255,.74);
  --chip-bg:rgba(255,255,255,.10);
  --chip-text:#ffffff;
  --cta:#64748b;       /* slate-500 */
  --cta-hover:#475569; /* slate-600 */
}

/* ======= Estrutura ======= */

/* 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:var(--text);
  opacity:.86;
  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:var(--text);
  opacity:.92;
  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;
  }
}

/* --- BOOSTERS: garantem que os temas escuros prevaleçam (ordem + !important no fundo) --- */
.cl-card.cl-variant-wine{  background:#2a0b0b !important; --text:#fff; --muted:rgba(255,255,255,.78); --chip-bg:rgba(255,255,255,.12); --chip-text:#fff; --cta:#e11d48; --cta-hover:#be123c; border-color:transparent; box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12); }
.cl-card.cl-variant-navy{  background:#0b1b3a !important; --text:#fff; --muted:rgba(255,255,255,.78); --chip-bg:rgba(255,255,255,.12); --chip-text:#fff; --cta:#2563eb; --cta-hover:#1e40af; border-color:transparent; box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12); }
.cl-card.cl-variant-ocean{ background:#062c2c !important; --text:#fff; --muted:rgba(255,255,255,.80); --chip-bg:rgba(255,255,255,.12); --chip-text:#e6fffb; --cta:#14b8a6; --cta-hover:#0d9488; border-color:transparent; box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12); }
.cl-card.cl-variant-slate{ background:#111827 !important; --text:#fff; --muted:rgba(255,255,255,.72); --chip-bg:rgba(255,255,255,.10); --chip-text:#fff; --cta:#f59e0b; --cta-hover:#d97706; border-color:transparent; box-shadow:0 8px 28px rgba(0,0,0,.28) inset, 0 10px 28px rgba(0,0,0,.14); }
.cl-card.cl-variant-emerald{ background:#052e1b !important; --text:#fff; --muted:rgba(255,255,255,.78); --chip-bg:rgba(255,255,255,.12); --chip-text:#fff; --cta:#10b981; --cta-hover:#059669; border-color:transparent; box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12); }
.cl-card.cl-variant-indigo{ background:#1e1b4b !important; --text:#fff; --muted:rgba(255,255,255,.78); --chip-bg:rgba(255,255,255,.12); --chip-text:#fff; --cta:#7c3aed; --cta-hover:#6d28d9; border-color:transparent; box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12); }
.cl-card.cl-variant-brand{
  background: var(--cl-brand-bg, color-mix(in oklab, var(--cl-brand, var(--wp--preset--color--primary, #2563eb)) 12%, black)) !important;
  --text:#fff; --muted:rgba(255,255,255,.80);
  --chip-bg: color-mix(in oklab, var(--cl-brand, var(--wp--preset--color--primary, #2563eb)) 18%, white);
  --chip-text:#fff; --cta: var(--cl-brand, var(--wp--preset--color--primary, #2563eb));
  --cta-hover: color-mix(in oklab, var(--cl-brand, var(--wp--preset--color--primary, #2563eb)) 78%, black);
  border-color:transparent; box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12);
}
.cl-card.cl-variant-dark{  background:#0f172a !important; --text:#fff; --muted:rgba(255,255,255,.74); --chip-bg:rgba(255,255,255,.10); --chip-text:#fff; --cta:#64748b; --cta-hover:#475569; border-color:transparent; box-shadow:0 8px 28px rgba(0,0,0,.28) inset, 0 10px 28px rgba(0,0,0,.14); }

/* ---- Correções de especificidade (título/descrição/rodapé) ---- */

/* Garante que o título/subtítulo/descrição usem a cor do tema do card
   mesmo que o tema do site estilize h3, h3 a, p etc. */
.cl-card .cl-title{
  color: var(--text) !important;
}
.cl-card .cl-subtitle,
.cl-card .cl-desc{
  color: var(--text) !important;
  opacity: .92;
}
.cl-card .cl-eyebrow{
  color: var(--muted) !important;
}

/* Limpa qualquer fundo/borda que o tema possa aplicar ao rodapé */
.cl-card .cl-footnote{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 10px;
  color: var(--muted) !important;
}

/* ===== Float (mini-card fixo) ===== */
.cl-float{
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9999;
  width: min(420px, calc(100% - 24px));
  background: inherit;            /* cor vem da classe .cl-variant-* aplicada */
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
  border: 1px solid rgba(0,0,0,.18);
  padding: 14px 14px 14px 14px;
  display: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .18s ease, transform .18s ease;
}
.cl-float.is-visible{ display:block; opacity:1; transform: translateY(0); }
.cl-float--bl{ left:16px; right:auto; }

.cl-float__inner{ display:flex; gap:12px; align-items:center; }
.cl-float__media img{
  width:56px; height:56px; object-fit:cover; border-radius:12px; display:block;
}
.cl-float__right{ flex:1; min-width:0; }
.cl-float__title{
  color: var(--text);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
  margin: 2px 0 6px;
}
.cl-float__cta{ margin-top: 4px; }

.cl-float__close{
  position:absolute; top:8px; right:10px;
  width:auto; height:auto;
  line-height:1; font-size:20px;
  background:transparent; border:0; color:var(--muted); cursor:pointer;
}

/* garante legibilidade no float mesmo se o tema do site estilizar botões/títulos */
.cl-float .cl-cta{ background: var(--cta); color:#fff !important; }
.cl-float .cl-cta:hover{ background: var(--cta-hover); }

/* Responsivo: afasta um pouco mais da borda em telas muito estreitas */
@media (max-width: 380px){
  .cl-float{ left:12px; right:12px; width:auto; }
}

/* Cores de fundo do float por variante */
.cl-float.cl-variant-wine{    background:#2a0b0b; border-color:transparent; }
.cl-float.cl-variant-navy{    background:#0b1b3a; border-color:transparent; }
.cl-float.cl-variant-ocean{   background:#062c2c; border-color:transparent; }
.cl-float.cl-variant-slate{   background:#111827; border-color:transparent; }
.cl-float.cl-variant-emerald{ background:#052e1b; border-color:transparent; }
.cl-float.cl-variant-indigo{  background:#1e1b4b; border-color:transparent; }
.cl-float.cl-variant-dark{    background:#0f172a; border-color:transparent; }

/* Brand escuro (usa as variáveis do tema) */
.cl-float.cl-variant-brand{
  background: var(--cl-brand-bg, color-mix(in oklab, var(--cl-brand, var(--wp--preset--color--primary, #2563eb)) 12%, black));
  border-color: transparent;
}