/*--------------------------------------------------------------
3.0 - Estilo Universal para Itens de Lista/Cards
(Aplica-se a Listicles, Archives e Home)
--------------------------------------------------------------*/

/* Contêiner que inicializa o contador (SÓ em listicles e archives) */
.listicle-container .entry-content,
.archive-listicle-container {
    counter-reset: listicle-counter;
}

/* A lista em si (em todas as páginas) */
.listicle-buttons,
.home-phrase-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* O item/card individual (ESTILO BASE PARA TODOS) */
/* Combinamos .listicle-item e .home-phrase-item */
.listicle-item,
.home-phrase-item {
    display: flex;
    align-items: flex-start; /* Alinhamento ao topo para consistência */
    justify-content: space-between;
    padding: 20px 25px;
    background-color: var(--cor-fundo-item);
    border-radius: var(--raio-borda);
    border: 1px solid var(--cor-borda);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

/* A numeração (APENAS para .listicle-item) */
.listicle-item {
    counter-increment: listicle-counter;
}
.listicle-item::before {
    content: counter(listicle-counter);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cor-primaria);
    background-color: #e7f1ff;
    border-radius: 50%;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 20px;
}

/* Efeito Hover (para ambos) */
.listicle-item:hover,
.home-phrase-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-suave);
}

/* Efeito Active (para ambos) */
.listicle-item:active,
.home-phrase-item:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    transition: transform 0.1s ease;
}

/* Conteúdo de texto e autor (universal) */
.listicle-item-content,
.phrase-content-wrapper {
    flex-grow: 1;
}

.frase-texto,
.phrase-text {
    display: block; margin: 0; padding: 0;
    font-style: italic; font-size: 1.05rem;
    color: var(--cor-texto); margin-bottom: 4px;
}
.frase-texto a, .phrase-text a {
    color: inherit; text-decoration: none;
}
.frase-texto a:hover, .phrase-text a:hover {
    color: var(--cor-primaria);
}

.phrase-author {
    display: block; font-style: normal; font-size: 0.9rem;
    color: var(--cor-texto-suave);
}
.phrase-author a {
    color: var(--cor-texto-suave); text-decoration: none;
    border-bottom: 1px dotted var(--cor-borda);
}
.phrase-author a:hover { color: var(--cor-primaria); }


/* Botões de Ação (universal) */
.item-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.item-actions button, .item-actions a {
    width: 38px; height: 38px; background: var(--cor-fundo); border: 1px solid var(--cor-borda);
    border-radius: 50%; color: var(--cor-texto-suave); display: flex; align-items: center;
    justify-content: center; position: relative; cursor: pointer;
    transition: all 0.2s ease; text-decoration: none;
}
.item-actions button:hover, .item-actions a:hover { background-color: #e9ecef; transform: scale(1.1); }
.item-actions svg { width: 18px; height: 18px; }
.copy-button .feedback { display: none; position: absolute; background-color: #28a745; color: white; padding: 3px 10px; border-radius: 6px; font-size: 0.8rem; bottom: -35px; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 10; }
.copy-button.copied .feedback { display: block; }
.item-actions .go-button { background-color: var(--cor-primaria); color: #fff; }
.item-actions .go-button:hover { background-color: #0056b3; }

/* Feedback de cópia no item inteiro */
.listicle-item.item-copied-active,
.home-phrase-item.item-copied-active {
    outline: 2px solid #28a745;
    outline-offset: 2px;
}

/* Responsividade dos cards (universal) */
@media (max-width: 768px) {
    .listicle-item, .home-phrase-item {
        flex-direction: column; align-items: flex-start; gap: 15px; padding: 15px;
    }
    .listicle-item-header { display: flex; align-items: flex-start; width: 100%; }
    .listicle-item::before { margin-right: 15px; }
    .listicle-item-content, .phrase-content-wrapper { padding-right: 0; }
    .item-actions {
        width: 100%; justify-content: flex-end; padding-top: 15px;
        border-top: 1px solid var(--cor-borda);
    }
}