/**
 * HiKapto Analytics — light section + SVG dashboard mock.
 */

.hikapto-analytics {
	--analytics-bg: #f9fafb;
	--analytics-surface: #ffffff;
	--analytics-text: #111827;
	--analytics-muted: #4b5563;
	--analytics-border: #e5e7eb;
	--analytics-brand: #008bff;
	--analytics-pad-y: clamp(4rem, 7vw, 6rem);
	--analytics-pad-x: clamp(1.25rem, 4vw, 2rem);

	background-color: var(--analytics-bg);
	color: var(--analytics-text);
}

.hikapto-analytics__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--analytics-pad-y) var(--analytics-pad-x);
}

.hikapto-analytics__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

.hikapto-analytics__title {
	margin: 0 0 1rem;
	font-size: clamp(1.75rem, 3.5vw, 2.25rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--analytics-text);
}

.hikapto-analytics__lead {
	margin: 0 0 1.5rem;
	font-size: clamp(1rem, 2vw, 1.125rem);
	line-height: 1.6;
	color: var(--analytics-muted);
}

.hikapto-analytics__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hikapto-analytics__list li {
	position: relative;
	padding-left: 1.25rem;
	margin-bottom: 1rem;
	font-size: clamp(0.875rem, 1.8vw, 0.9375rem);
	line-height: 1.55;
	color: var(--analytics-muted);
}

.hikapto-analytics__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--analytics-brand);
}

.hikapto-analytics__list li strong {
	color: var(--analytics-text);
	font-weight: 700;
}

/* Dashboard mock */
.hikapto-analytics__panel {
	background: var(--analytics-surface);
	border: 1px solid var(--analytics-border);
	border-radius: 8px;
	padding: clamp(1rem, 3vw, 1.5rem);
	box-shadow: 0 12px 32px rgba(17, 24, 39, 0.06);
}

.hikapto-analytics__panel-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--analytics-border);
}

.hikapto-analytics__panel-label {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--analytics-text);
}

.hikapto-analytics__panel-period {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--analytics-brand);
}

.hikapto-analytics__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.hikapto-analytics__stat-card {
	padding: 0.875rem 1rem;
	border: 1px solid var(--analytics-border);
	border-radius: 8px;
	background: var(--analytics-bg);
}

.hikapto-analytics__stat-card--highlight {
	border-color: rgba(0, 139, 255, 0.35);
	background: linear-gradient(180deg, #ffffff 0%, #e8f4ff 100%);
}

.hikapto-analytics__stat-label {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--analytics-muted);
	margin-bottom: 0.35rem;
}

.hikapto-analytics__stat-value {
	font-size: clamp(1.25rem, 3vw, 1.5rem);
	font-weight: 800;
	color: var(--analytics-text);
	line-height: 1.2;
}

.hikapto-analytics__stat-card--highlight .hikapto-analytics__stat-value {
	color: var(--analytics-brand);
}

.hikapto-analytics__chart-wrap {
	margin: 0;
}

.hikapto-analytics__chart-caption {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--analytics-muted);
}

.hikapto-analytics__chart {
	display: block;
	width: 100%;
	height: auto;
	max-height: 240px;
}

.hikapto-analytics__axis-label {
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-size: 11px;
	fill: #6b7280;
}

@media (min-width: 768px) {
	.hikapto-analytics__grid {
		grid-template-columns: 55fr 45fr;
		gap: clamp(2rem, 4vw, 3rem);
	}

	.hikapto-analytics__copy {
		grid-column: 1;
		grid-row: 1;
	}

	.hikapto-analytics__dashboard {
		grid-column: 2;
		grid-row: 1;
	}
}

@media (max-width: 767px) {
	.hikapto-analytics__stats {
		grid-template-columns: 1fr;
	}
}