/*
 * Component: Empty Comment State
 * Hiển thị lời mời thảo luận khi bài viết chưa có bình luận.
 * Mobile-first · CSS Variables · Dark Mode · WCAG AA
 */

/* =============================================================================
   CSS VARIABLES – TOKEN
   ============================================================================= */

:root {
	--dp-ces-bg:          transparent;
	--dp-ces-border:      hsl(220 13% 91%);
	--dp-ces-title-color: hsl(220 20% 28%);
	--dp-ces-desc-color:  hsl(220 10% 48%);
	--dp-ces-radius:      1rem;
	--dp-ces-py:          clamp(2rem, 5vw, 3rem);
	--dp-ces-px:          clamp(1rem, 4vw, 2rem);
}

[data-bs-theme="dark"] {
	--dp-ces-border:      hsl(220 13% 22%);
	--dp-ces-title-color: hsl(220 15% 82%);
	--dp-ces-desc-color:  hsl(220 10% 56%);
}

/* =============================================================================
   WRAPPER
   ============================================================================= */

.dp-comment-empty-state {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
	padding:        var(--dp-ces-py) var(--dp-ces-px);
	border:         1px solid var(--dp-ces-border);
	border-radius:  var(--dp-ces-radius);
	background:     var(--dp-ces-bg);
	margin-block:   1.25rem;
}

/* =============================================================================
   TYPOGRAPHY – TITLE
   Đủ tương phản WCAG AA (≥ 4.5:1 với nền trắng / ≥ 3:1 bold large text)
   ============================================================================= */

.dp-comment-empty-state__title {
	margin:         0 0 0.5rem;
	font-size:      clamp(1rem, 2vw + 0.5rem, 1.125rem);
	font-weight:    600;
	line-height:    1.4;
	color:          var(--dp-ces-title-color);
	letter-spacing: -0.01em;
}

/* =============================================================================
   TYPOGRAPHY – DESCRIPTION
   ============================================================================= */

.dp-comment-empty-state__description {
	margin:      0;
	max-width:   38ch;
	font-size:   clamp(0.875rem, 1.5vw + 0.25rem, 0.9375rem);
	line-height: 1.6;
	color:       var(--dp-ces-desc-color);
}

/* =============================================================================
   RESPONSIVE – Tablet & Desktop (≥ 768px)
   ============================================================================= */

@media (min-width: 768px) {
	.dp-comment-empty-state {
		margin-block: 1.5rem;
	}

	.dp-comment-empty-state__description {
		max-width: 42ch;
	}
}