/* =============================================
   Community Post Detail — community-detail.css
   ============================================= */

/* ── Post Layout ───────────────────────────── */
.discussion-post {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 24px;
}
.post-layout {
    display: flex;
    gap: 14px;
}

/* Vote column (detail page — larger) */
.vote-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 44px;
    flex-shrink: 0;
}
.vote-btn-lg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    border: none;
    background: var(--gray-50);
    color: var(--gray-400);
    font-size: 1.3rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}
.vote-btn-lg:active { transform: scale(0.9); }
.vote-btn-lg.up.voted { color: var(--color-primary); background: rgba(58,125,68,0.1); }
.vote-btn-lg.down.voted { color: var(--danger); background: rgba(239,68,68,0.1); }
.vote-score-lg {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-800);
    padding: 4px 0;
}

/* ── Post Content ──────────────────────────── */
.post-content { flex: 1; min-width: 0; }
.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.post-topic-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 600;
}
.post-type-badge.question {
    background: rgba(99,102,241,0.1);
    color: #6366f1;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 600;
}
.post-pinned-badge {
    color: var(--color-accent);
    font-size: 0.72rem;
    font-weight: 600;
}
.post-locked-badge {
    color: var(--gray-400);
    font-size: 0.72rem;
    font-weight: 600;
}

.post-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--gray-900);
    margin: 0 0 12px;
    line-height: 1.35;
}

/* Author */
.post-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.post-author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    flex-shrink: 0;
}
.post-author-info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}
.post-author-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gray-800);
    text-decoration: none;
}
a.post-author-name:hover { color: var(--color-primary); }
.post-author-handle {
    font-size: 0.78rem;
    color: var(--gray-400);
}
.post-author-time {
    font-size: 0.75rem;
    color: var(--gray-400);
}

/* Body */
.post-body {
    font-size: 0.92rem;
    color: var(--gray-700);
    line-height: 1.7;
    margin-bottom: 16px;
    word-wrap: break-word;
}

/* Stats */
.post-stats {
    display: flex;
    gap: 16px;
    font-size: 0.78rem;
    color: var(--gray-400);
    padding: 10px 0;
    border-top: 1px solid var(--gray-100);
    margin-bottom: 10px;
}
.post-stats i { margin-right: 4px; }

/* Actions */
.post-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}
.post-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--gray-200);
    background: none;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    color: var(--gray-500);
    cursor: pointer;
    transition: var(--transition-fast);
}
.post-action-btn.danger:hover { color: var(--danger); border-color: var(--danger); }

/* ── Desktop ────────────────────────────────── */
@media (min-width: 600px) {
    .vote-btn-lg:hover {
        background: var(--gray-100);
    }
    .vote-btn-lg.up:hover { color: var(--color-primary); background: rgba(58,125,68,0.1); }
    .vote-btn-lg.down:hover { color: var(--danger); background: rgba(239,68,68,0.1); }
}