/* Komentarze: skrót komentarza (strona główna) i wspólne elementy autora. */

.card-comment {
	display: flex;
	flex-direction: column;
	gap: var(--space-14);
	padding: var(--space-24);
	border-radius: var(--radius-4xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: var(--space-12);
}

.comment-author-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.comment-author-name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-8);
	font-weight: var(--weight-extrabold);
}

.comment-time {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.card-comment-text {
	font-size: var(--text-base-sm);
	color: var(--color-ink-soft);
}

.card-comment-link {
	display: flex;
	align-items: center;
	min-height: var(--size-touch);
	margin-top: auto;
	font-size: var(--text-md);
	font-weight: var(--weight-bold);
}

/* ---------- Komentarze pod wpisem ---------- */
.comments-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
}

.comment-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding: var(--space-22);
	border-radius: var(--radius-4xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}

.comment-form .input:not(.textarea) {
	min-height: var(--size-input);
}

.comment-form-submit {
	margin: 0;
}

.comment-form .button-brand {
	padding: 0 var(--space-22);
}

.comment-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
}

.comment-item {
	display: flex;
	gap: var(--space-14);
}

.comment-item > .avatar {
	width: var(--size-avatar-md);
	height: var(--size-avatar-md);
}

.comment-item-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-14);
}

.comment-item-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-6);
	margin: 0;
	font-size: var(--text-md);
}

.comment-item-text {
	margin: var(--space-xs) 0 var(--space-6);
	color: var(--color-ink-soft);
}

.comment-item-text p {
	margin: 0;
}

.comment-item-reply-link {
	margin: 0;
}

.comment-item-reply-link a {
	display: inline-flex;
	align-items: center;
	min-height: var(--size-touch);
	font-size: var(--text-md);
	font-weight: var(--weight-extrabold);
	color: var(--color-brand);
	text-decoration: none;
}

.comment-item-pending {
	margin: var(--space-xs) 0 0;
	font-size: var(--text-sm);
	color: var(--color-accent-text);
}

/* Odpowiedź: tło w kolorze marki */
.comment-item-reply {
	padding: var(--space-14) var(--space-16);
	border-radius: var(--radius-2xl);
	background: var(--color-tint);
}

.comment-item-reply > .avatar {
	width: var(--size-step);
	height: var(--size-step);
}

.comment-item-reply .comment-item-text {
	margin-bottom: 0;
}

.comment-list .children {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}