/* Card Lista de Itens */

.cli-wrap {
    --cli-badge-bg:     #173863;
    --cli-icon-color:   #ffffff;
    --cli-leadin-color: #173863;

    margin: 24px 0;
    background: #fff;
    padding: 20px 0;
    box-sizing: border-box;
}
.cli-wrap * {
    box-sizing: border-box;
}

/* No editor (Gutenberg) o wrapper ainda não tem a largura real do tema,
   então mantém padding nos 4 lados; no front o padding lateral vem do
   próprio layout do tema. */
.editor-styles-wrapper .cli-wrap {
    padding: 20px;
}

/* Título da seção */
.cli-wrap .cli-title {
    font-size: 20px !important;
    font-weight: 700;
    color: #14142b;
    margin: 0 0 16px;
    line-height: 1.3;
}

/* Lista de itens */
.cli-wrap .cli-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0;
}

/* margin: 0 evita somar com o margin-bottom que muitos temas dão em `li`, o que duplicaria o gap do flex. */
.cli-wrap .cli-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 0 0 14px;
    border-bottom: 1px solid #eef0f3;
}
.cli-wrap .cli-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cli-wrap .cli-item::before,
.cli-wrap .cli-item::marker {
    content: none; /* alguns temas desenham o próprio bullet via ::before */
}

/* Ícone — três variações de estilo, controladas pela variante do bloco */
.cli-wrap .cli-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

/* "detalhes" — ícone dentro de círculo colorido */
.cli-wrap .cli-icon--badge {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--cli-badge-bg, #173863);
    color: var(--cli-icon-color, #ffffff);
}

/* "pontos-fortes" / "limitacoes" — ícone solto por padrão; fundo é opcional (por item, ver Inspector) */
.cli-wrap .cli-icon--glyph {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: var(--cli-icon-color, #333333);
}

/* "livre" — badge do 1º caractere/emoji digitado no texto; fundo/cor vêm inline por item, aqui só o formato. */
.cli-wrap .cli-icon--free {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
}
.cli-wrap .cli-icon--free img.emoji {
    border: none !important;
}

.cli-wrap .cli-item-body {
    flex: 1 1 auto;
    font-size: 15px;
    line-height: 1.55;
    color: #4b5563;
}

.cli-wrap .cli-lead-in {
    font-weight: 700;
    color: var(--cli-leadin-color, #14142b);
}

.cli-wrap .cli-description {
    color: #4b5563;
}

/* Trechos em negrito (aplicados manualmente pelo admin) ganham a cor de destaque —
   só no layout inline (sem campo de destaque próprio); no empilhado fica preto/padrão. */
.cli-wrap .cli-item-body:not(.cli-item-body--stacked) .cli-description strong,
.cli-wrap .cli-item-body:not(.cli-item-body--stacked) .cli-description b {
    color: var(--cli-leadin-color, #14142b);
}

/* Layout "empilhado" — título em bloco próprio e descrição abaixo; sem isso fica "inline" (mesmo parágrafo, padrão de pontos-fortes/limitacoes). */
.cli-wrap .cli-item-body--stacked .cli-lead-in {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
}
.cli-wrap .cli-item-body--stacked .cli-description {
    display: block;
}

/* Editor (Gutenberg) */
.cli-editor-inspector-help {
    font-size: 12px;
    color: #666;
    margin: 4px 0 0;
}

/* Label identificador do bloco, visível só no editor (antes do cli-title) */
.cli-editor-block-title {
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-size: 22px !important;
    margin-bottom: 20px !important;
}
.cli-editor-block-title .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

@media screen and (max-width: 567px) {
    .cli-wrap .cli-title {
        font-size: 18px !important;
    }
    .cli-wrap .cli-item {
        gap: 10px;
    }
    .cli-wrap .cli-item-body {
        font-size: 14px;
    }
}