/* --- Card Geral --- */
.tb-visual-card { /* Wrapper externo para o filtro */
    display: flex; /* Para centralizar o card-inner se ele tiver largura definida */
    justify-content: center; /* Exemplo de centralização */
}

.tb-visual-card-inner {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden; /* Para conter a imagem e bordas arredondadas */
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease-in-out;
    /* Defina uma largura padrão se não for controlada pelo Elementor */
    /* width: 300px; */ 
    /* min-height: 350px;  Pode ser útil para consistência */
}

.tb-visual-card-inner:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* --- Imagem --- */
.tb-visual-card__image {
    width: 100%;
    /* height: 200px; Altura padrão, pode ser sobrescrita pelo Elementor */
    overflow: hidden; /* Garante que o object-fit funcione bem com border-radius */
}

.tb-visual-card__image img {
    width: 100%;
    height: 100%; /* Para preencher o container da imagem */
    object-fit: cover; /* Padrão, pode ser sobrescrito pelo Elementor */
    display: block;
}

/* --- Conteúdo (Título, Descrição, Tags) --- */
.tb-visual-card__content {
    padding: 20px;
    flex-grow: 1; /* Faz o conteúdo ocupar o espaço disponível */
    display: flex;
    flex-direction: column;
}

.tb-visual-card__title { /* tb-card-repository-title */
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    color: #333333;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.3;
}

.tb-visual-card__description { /* tb-card-description */
    font-size: 0.9rem; /* 14.4px */
    color: #666666;
    line-height: 1.6;
    margin-bottom: 15px;
    flex-grow: 1; /* Empurra as tags e o botão para baixo se o card tiver altura fixa/min */
}

/* --- Tags --- */
.tb-visual-card__tags {
    margin-bottom: 15px; /* Espaço antes do botão */
    display: flex;
    flex-wrap: wrap; /* Permite que as tags quebrem linha */
}

.tb-visual-card__tag { /* tb-card-repository-tag */
    font-size: 0.75rem; /* 12px */
    color: #555555;
    background-color: #f0f0f0;
    padding: 4px 8px;
    border-radius: 4px;
    margin-right: 6px;
    margin-bottom: 6px; /* Para tags que quebram linha */
    line-height: 1;
}

/* --- Ações (Botão Copiar) --- */
.tb-visual-card__actions {
    padding: 0 20px 20px 20px; /* Padding apenas na parte inferior do botão */
    margin-top: auto; /* Empurra o botão para o final se houver espaço */
}

.tb-visual-card__copy-button {
    display: inline-flex; /* Para alinhar ícone e texto */
    align-items: center;
    justify-content: center;
    width: 100%; /* Botão de largura total */
    padding: 10px 15px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #ffffff;
    background-color: #0073aa; /* Cor primária do WordPress */
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.tb-visual-card__copy-button:hover {
    background-color: #005a87;
}

.tb-visual-card__copy-button.copied {
    background-color: #4CAF50; /* Verde para feedback de sucesso */
    color: white;
}

.tb-visual-card__copy-button .tb-button-icon {
    margin-right: 8px;
    display: inline-flex; /* Para centralizar o ícone verticalmente */
    align-items: center;
}
.tb-visual-card__copy-button .tb-button-icon i,
.tb-visual-card__copy-button .tb-button-icon svg {
    font-size: 1em; /* Para o ícone ter o mesmo tamanho da fonte do botão */
    /* A cor do ícone geralmente herda do texto do botão ou é definida via controles Elementor */
}