/* ===== Демография: M/Ж + религия (под тему --k-*) ===== */

.demo-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}
@media (max-width: 820px) { .demo-grid { grid-template-columns: 1fr; } }
.demo-grid--single { grid-template-columns: 1fr; }

.demo-card {
	background: var(--k-surface);
	border: 1.5px solid var(--k-line);
	border-radius: 18px;
	padding: 26px 28px 22px;
}
.demo-card h3 {
	font-family: 'Unbounded', sans-serif !important;
	font-size: 18px; font-weight: 700;
	color: var(--k-ink); margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--k-line);
	letter-spacing: -.01em;
}
.demo-hint {
	margin: 14px 0 0;
	font-size: 12.5px; color: var(--k-ink-faint); font-weight: 600;
}
.demo-hint b { color: var(--k-ink); font-variant-numeric: tabular-nums; }

/* несклоняемые */
.demo-single { text-align: center; padding: 16px 0; }
.demo-single-num {
	font-family: 'Unbounded', sans-serif;
	font-size: 44px; font-weight: 700;
	color: var(--k-green);
	font-variant-numeric: tabular-nums;
}
.demo-single-lbl { color: var(--k-ink-soft); font-size: 13px; font-weight: 600; margin-top: 4px; }

/* M/Ж бар */
.gender-bar {
	display: flex;
	width: 100%; height: 14px;
	border-radius: 100px; overflow: hidden;
	background: var(--k-bg);
	border: 1px solid var(--k-line);
	margin-bottom: 18px;
}
.gender-bar > div { height: 100%; transition: width .4s ease; }
.gb-male   { background: linear-gradient(90deg, #1c7b66, var(--k-green)); }
.gb-female { background: linear-gradient(90deg, var(--k-clay), #a04a64); }

.gender-legend { display: flex; flex-direction: column; gap: 6px; }
.gl-row {
	display: grid;
	grid-template-columns: 14px 1fr 110px 60px;
	gap: 12px;
	align-items: baseline;
	font-size: 14.5px; font-weight: 600;
	padding: 8px 0;
}
.gl-dot { width: 12px; height: 12px; border-radius: 4px; align-self: center; }
.gl-dot-m { background: var(--k-green); }
.gl-dot-f { background: var(--k-clay); }
.gl-dot-t { background: linear-gradient(135deg, var(--k-green), var(--k-clay)); }
.gl-name  { color: var(--k-ink-soft); }
.gl-num   { text-align: right; font-variant-numeric: tabular-nums; color: var(--k-ink); font-weight: 700; }
.gl-pct   { text-align: right; color: var(--k-ink-faint); font-variant-numeric: tabular-nums; }
.gl-total {
	margin-top: 4px; padding-top: 12px;
	border-top: 1px solid var(--k-line); font-weight: 700;
}
.gl-total .gl-name { color: var(--k-ink); }

/* в широком single-режиме — три плитки в ряд */
.demo-grid--single .gender-legend {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.demo-grid--single .gl-row {
	display: flex; flex-direction: column;
	align-items: center; text-align: center;
	gap: 6px; padding: 18px 12px;
	background: var(--k-bg);
	border: 1px solid var(--k-line);
	border-radius: 14px;
	margin: 0;
}
.demo-grid--single .gl-total { background: var(--k-green-soft); border-color: var(--k-green); }
.demo-grid--single .gl-row .gl-dot { width: 16px; height: 16px; }
.demo-grid--single .gl-row .gl-name {
	color: var(--k-ink-soft); font-size: 11px;
	letter-spacing: .04em; text-transform: uppercase; font-weight: 700;
}
.demo-grid--single .gl-row .gl-num {
	font-family: 'Unbounded', sans-serif;
	font-size: 28px; font-weight: 700;
	color: var(--k-green); line-height: 1;
	text-align: center;
}
.demo-grid--single .gl-row .gl-pct {
	color: var(--k-ink-faint); font-size: 13px; text-align: center;
}
@media (max-width: 600px) {
	.demo-grid--single .gender-legend { grid-template-columns: 1fr; }
}

/* Религия */
.rel-top { display: flex; justify-content: center; margin-bottom: 22px; }
.rel-top-ring {
	width: 160px; height: 160px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
}
.rel-top-inner {
	width: 118px; height: 118px;
	border-radius: 50%;
	background: var(--k-surface);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.rel-top-pct {
	font-family: 'Unbounded', sans-serif;
	font-size: 28px; font-weight: 700;
	color: var(--k-ink); line-height: 1;
	font-variant-numeric: tabular-nums;
}
.rel-top-name {
	font-size: 12px; color: var(--k-ink-soft);
	margin-top: 4px; letter-spacing: .02em; font-weight: 600;
}

.rel-list { display: flex; flex-direction: column; gap: 6px; }
.rel-row {
	display: grid;
	grid-template-columns: 12px 110px 1fr 50px 60px;
	gap: 10px; align-items: center;
	font-size: 13px; padding: 4px 0;
}
.rel-dot { width: 12px; height: 12px; border-radius: 50%; }
.rel-name { color: var(--k-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.rel-bar {
	height: 6px; background: var(--k-bg);
	border-radius: 100px; overflow: hidden;
	border: 1px solid var(--k-line);
}
.rel-bar > span { display: block; height: 100%; border-radius: 100px; }
.rel-pct { text-align: right; color: var(--k-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.rel-rank {
	text-align: right; font-size: 11px;
	color: var(--k-ink-faint); font-variant-numeric: tabular-nums;
}
@media (max-width: 520px) {
	.rel-row { grid-template-columns: 12px 90px 1fr 44px; }
	.rel-rank { display: none; }
}