/**
 * SpacePanel UI — Comments Styles
 *
 * Kommentare, Kommentarformular, Kommentar-Navigation
 */

/* ===========================
   Comments Container
   =========================== */
.sp-comments {
	margin-top: var(--sp-space-lg);
	padding-top: var(--sp-space-lg);
	border-top: 1px solid var(--sp-color-panel-border);
}

/* ===========================
   Comments Title
   =========================== */
.sp-comments__title {
	font-size: var(--sp-font-size-lg);
	font-weight: 600;
	color: var(--sp-color-accent);
	margin-bottom: var(--sp-space-md);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ===========================
   Comments List
   =========================== */
.sp-comments__list {
	list-style: none;
	margin: var(--sp-space-lg) 0;
	padding: 0;
}

.sp-comments__list .sp-comments__list {
	margin-left: var(--sp-space-lg);
	margin-top: var(--sp-space-md);
	padding-left: var(--sp-space-md);
	border-left: 2px solid var(--sp-color-panel-border);
}

/* ===========================
   Comment Item
   =========================== */
.sp-comment {
	margin-bottom: var(--sp-space-md);
	padding: var(--sp-space-md);
	background-color: var(--sp-color-panel-alt);
	border: 1px solid var(--sp-color-panel-border);
	border-radius: var(--sp-radius-panel);
}

.sp-comment:hover {
	box-shadow: 0 0 16px rgba(200, 143, 255, 0.15);
}

/* ===========================
   Comment Header
   =========================== */
.sp-comment__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: var(--sp-space-sm);
	padding-bottom: var(--sp-space-sm);
	border-bottom: 1px solid var(--sp-color-panel-border);
}

.sp-comment__author {
	display: flex;
	gap: var(--sp-space-sm);
	align-items: flex-start;
	flex: 1;
}

.sp-comment__avatar {
	width: 48px;
	height: 48px;
	border-radius: 4px;
	border: 1px solid var(--sp-color-panel-border);
	flex-shrink: 0;
}

.sp-comment__meta {
	flex: 1;
}

.sp-comment__name {
	display: block;
	font-size: var(--sp-font-size-base);
	font-weight: 600;
	color: var(--sp-color-accent);
	text-decoration: none;
	margin-bottom: 0.25rem;
}

.sp-comment__name a {
	color: var(--sp-color-accent);
	text-decoration: none;
}

.sp-comment__name a:hover {
	text-decoration: underline;
}

.sp-comment__date {
	font-size: var(--sp-font-size-sm);
	color: var(--sp-color-text-secondary);
}

.sp-comment__actions {
	flex-shrink: 0;
}

/* ===========================
   Comment Content
   =========================== */
.sp-comment__content {
	font-size: var(--sp-font-size-base);
	line-height: 1.6;
	color: var(--sp-color-text);
	margin: var(--sp-space-sm) 0;
}

.sp-comment__content p {
	margin-bottom: var(--sp-space-sm);
}

.sp-comment__content a {
	color: var(--sp-color-accent);
	text-decoration: underline;
}

.sp-comment__content a:hover {
	color: var(--sp-color-accent-hover);
}

/* ===========================
   Comment Actions
   =========================== */
.sp-comment__reply {
	margin-top: var(--sp-space-sm);
	padding-top: var(--sp-space-sm);
	border-top: 1px solid var(--sp-color-panel-border);
}

.sp-comment__edit {
	margin-top: var(--sp-space-sm);
}

/* ===========================
   Comment Form
   =========================== */
.sp-comments__form-wrapper {
	margin-top: var(--sp-space-lg);
	padding: var(--sp-space-md);
	background-color: var(--sp-color-panel);
	border: 1px solid var(--sp-color-panel-border);
	border-radius: var(--sp-radius-panel);
}

.sp-comments__form-title {
	font-size: var(--sp-font-size-lg);
	font-weight: 600;
	color: var(--sp-color-accent);
	margin-bottom: var(--sp-space-md);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.sp-comments__form {
	display: grid;
	gap: var(--sp-space-sm);
}

.sp-form__group {
	display: flex;
	flex-direction: column;
}

.sp-form__group--full {
	grid-column: 1 / -1;
}

.sp-form__group label {
	font-size: var(--sp-font-size-sm);
	font-weight: 500;
	color: var(--sp-color-text-secondary);
	margin-bottom: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.sp-form__input {
	padding: var(--sp-space-sm);
	background-color: var(--sp-color-surface);
	color: var(--sp-color-text);
	border: 1px solid var(--sp-color-panel-border);
	border-radius: 4px;
	font-family: var(--sp-font-mono);
	font-size: var(--sp-font-size-base);
	transition: all 0.2s ease-in-out;
}

.sp-form__input:focus {
	outline: none;
	border-color: var(--sp-color-accent);
	box-shadow: 0 0 8px rgba(200, 143, 255, 0.25);
	background-color: var(--sp-color-panel-alt);
}

.sp-form__textarea {
	min-height: 120px;
	resize: vertical;
	font-family: var(--sp-font-mono);
}

/* ===========================
   Comment Navigation
   =========================== */
.sp-comments__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-space-md);
	margin: var(--sp-space-lg) 0;
}

.sp-comments__nav-prev,
.sp-comments__nav-next {
	text-align: center;
}

.sp-comments__nav a {
	display: inline-block;
	padding: var(--sp-space-sm) var(--sp-space-md);
	background-color: var(--sp-color-accent);
	color: var(--sp-color-bg);
	text-decoration: none;
	border-radius: 4px;
	font-size: var(--sp-font-size-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: all 0.2s ease-in-out;
}

.sp-comments__nav a:hover {
	background-color: var(--sp-color-accent-hover);
	box-shadow: 0 4px 12px rgba(200, 143, 255, 0.3);
}

/* ===========================
   Comments Closed Message
   =========================== */
.sp-comments__closed {
	padding: var(--sp-space-md);
	background-color: var(--sp-color-panel);
	color: var(--sp-color-text-secondary);
	border: 1px dashed var(--sp-color-panel-border);
	border-radius: var(--sp-radius-panel);
	text-align: center;
	font-size: var(--sp-font-size-sm);
	margin-top: var(--sp-space-lg);
}

/* ===========================
   Responsive — Tablet
   =========================== */
@media (max-width: 768px) {
	.sp-comments__list .sp-comments__list {
		margin-left: var(--sp-space-md);
		border-left-width: 1px;
	}

	.sp-comment__header {
		flex-direction: column;
		gap: var(--sp-space-sm);
	}

	.sp-comments__nav {
		grid-template-columns: 1fr;
	}

	.sp-form__input {
		font-size: 16px;
	}

	.sp-form__textarea {
		min-height: 100px;
	}
}