/**
 * LaoCSO Organization Stats — front-end styles (v1.0.2 Hero Bento + lists).
 * Scoped under .laocsostats so theme styles never clash.
 * Colors are exposed as CSS custom properties (filterable in PHP).
 */

.laocsostats {
	--laocsostats-primary: #e86008;
	--laocsostats-accent: #f67b48;
	--laocsostats-soft: #fdf0e7;
	--laocsostats-ink: #0f172a;
	--laocsostats-muted: #64748b;
	--laocsostats-border: #e2e8f0;
	--laocsostats-card-bg: #ffffff;
	--laocsostats-radius: 16px;

	font-family: 'Noto Sans Lao', 'Phetsarath OT', 'Saysettha OT', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	color: var(--laocsostats-ink);
	line-height: 1.5;
	margin: 1.5rem 0;
	-webkit-font-smoothing: antialiased;
}

.laocsostats-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 34px 28px 38px;
	display: flex;
	flex-direction: column;
	gap: 30px;
	background:
		radial-gradient(720px 300px at 92% -8%, rgba(246, 123, 72, 0.16), transparent 62%),
		radial-gradient(560px 260px at 4% 112%, rgba(246, 123, 72, 0.10), transparent 60%),
		var(--laocsostats-card-bg);
	border: 1px solid rgba(232, 96, 8, 0.10);
	border-radius: 22px;
}

/* ---------- Section heading (site's own pattern) ------------------------ */

.laocsostats-head {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 2px 8px 6px;
}

.laocsostats-kicker {
	color: var(--laocsostats-primary);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.laocsostats-title {
	margin: 0;
	font-size: 1.55rem;
	font-weight: 800;
	line-height: 1.35;
	color: var(--laocsostats-ink);
}

.laocsostats-subtitle {
	margin: 0 auto;
	max-width: 620px;
	font-size: 0.92rem;
	color: var(--laocsostats-muted);
}

/* ---------- Grids ------------------------------------------------------- */

.laocsostats-grid {
	display: grid;
	gap: 14px;
}

/* Grid items must be allowed to shrink below their content size. */
.laocsostats-grid > * {
	min-width: 0;
}

.laocsostats-grid--featured {
	grid-template-columns: repeat(5, 1fr);
}

/* Association | foundation side by side (collapses on small screens). */
.laocsostats-sections {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	align-items: start;
}

.laocsostats-sections > * {
	min-width: 0;
}

/* ---------- Compact list (section content) -------------------------------- */

.laocsostats-list {
	background: var(--laocsostats-card-bg);
	border: 1px solid var(--laocsostats-border);
	border-radius: var(--laocsostats-radius);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.laocsostats-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	/* Right padding reserves room for the hover arrow so it never
	 * overlaps the number. */
	padding: 12px 38px 12px 16px;
	text-decoration: none;
	color: inherit;
	transition: background 0.15s ease;
}

.laocsostats-row + .laocsostats-row {
	border-top: 1px solid rgba(226, 232, 240, 0.7);
}

/* Hover affordance only when the row is actually a link. */
a.laocsostats-row:hover {
	background: rgba(253, 240, 231, 0.55);
}

.laocsostats-row:focus-visible {
	outline: 2px solid var(--laocsostats-primary);
	outline-offset: -2px;
}

.laocsostats-row-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--laocsostats-soft);
	color: var(--laocsostats-primary);
}

.laocsostats-row-icon svg {
	width: 17px;
	height: 17px;
}

.laocsostats-row-label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.86rem;
	color: #334155;
	line-height: 1.45;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.laocsostats-row .laocsostats-row-num {
	flex: 0 0 auto;
	margin-left: auto;
	min-width: 1.5ch;
	text-align: right;
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--laocsostats-ink);
	letter-spacing: 0;
}

.laocsostats-row .laocsostats-arrow {
	top: 50%;
	right: 14px;
	margin-top: -9px;
	transform: translate(-3px, 0);
}

a.laocsostats-row:hover .laocsostats-arrow,
a.laocsostats-row:focus-visible .laocsostats-arrow {
	opacity: 1;
	transform: translate(0, 0);
}

/* ---------- Cards (vertical: icon tile / number / label) ---------------- */

.laocsostats-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
	overflow: hidden;
	padding: 20px;
	background: var(--laocsostats-card-bg);
	border: 1px solid var(--laocsostats-border);
	border-radius: var(--laocsostats-radius);
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Hover affordance only when the card is actually a link. */
a.laocsostats-card:hover,
a.laocsostats-card:focus-visible {
	transform: translateY(-3px);
	border-color: var(--laocsostats-accent);
	box-shadow: 0 12px 26px rgba(232, 96, 8, 0.14);
}

.laocsostats-card:focus-visible {
	outline: 2px solid var(--laocsostats-primary);
	outline-offset: 2px;
}

/* ---------- Icon tile ----------------------------------------------------- */

.laocsostats-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--laocsostats-soft);
	color: var(--laocsostats-primary);
}

.laocsostats-icon svg {
	width: 22px;
	height: 22px;
	display: block;
}

/* ---------- Card body ----------------------------------------------------- */

.laocsostats-number {
	min-width: 0;
	font-size: 2.35rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--laocsostats-ink);
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.laocsostats-label {
	min-width: 0;
	margin-top: -4px;
	font-size: 0.8rem;
	color: var(--laocsostats-muted);
	line-height: 1.45;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- Hover arrow ↗ (affordance for clickable cards) ---------------- */

.laocsostats-arrow {
	position: absolute;
	top: 16px;
	right: 16px;
	display: inline-flex;
	width: 18px;
	height: 18px;
	color: var(--laocsostats-primary);
	opacity: 0;
	transform: translate(-3px, 3px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.laocsostats-arrow svg {
	width: 18px;
	height: 18px;
}

a.laocsostats-card:hover .laocsostats-arrow,
a.laocsostats-card:focus-visible .laocsostats-arrow {
	opacity: 1;
	transform: translate(0, 0);
}

/* ---------- Hero card (orange gradient, spans 2 columns) ------------------- */

.laocsostats-hero {
	grid-column: span 2;
	justify-content: center;
	gap: 14px;
	padding: 24px 26px;
	min-height: 186px;
	border: 0;
	color: #ffffff;
	background:
		radial-gradient(180px 150px at 88% 118%, rgba(255, 255, 255, 0.22), transparent 68%),
		radial-gradient(230px 180px at 102% -22%, rgba(255, 255, 255, 0.16), transparent 62%),
		linear-gradient(135deg, #d95702 0%, var(--laocsostats-primary) 46%, var(--laocsostats-accent) 100%);
	box-shadow: 0 14px 30px rgba(232, 96, 8, 0.28);
}

a.laocsostats-hero:hover,
a.laocsostats-hero:focus-visible {
	border-color: transparent;
	box-shadow: 0 18px 36px rgba(232, 96, 8, 0.34);
}

.laocsostats-hero-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;
}

.laocsostats-hero-icon svg {
	width: 23px;
	height: 23px;
}

.laocsostats-hero-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.laocsostats-hero-number {
	font-size: 3.4rem;
	font-weight: 800;
	line-height: 1.05;
	color: #ffffff;
	letter-spacing: -0.015em;
	font-variant-numeric: tabular-nums;
}

.laocsostats-hero-label {
	margin-top: -6px;
	font-size: 0.92rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.92);
	line-height: 1.4;
	max-width: 240px;
}

.laocsostats-hero .laocsostats-arrow {
	color: #ffffff;
}

/* ---------- Sections ------------------------------------------------------ */

.laocsostats-section {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.laocsostats-section-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.laocsostats-section-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--laocsostats-ink);
}

.laocsostats-section-title::before {
	content: '';
	width: 4px;
	height: 20px;
	border-radius: 99px;
	background: linear-gradient(180deg, var(--laocsostats-primary), var(--laocsostats-accent));
}

.laocsostats-pill {
	display: inline-flex;
	align-items: center;
	padding: 2px 12px;
	border-radius: 99px;
	background: var(--laocsostats-soft);
	color: var(--laocsostats-primary);
	font-size: 0.8rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ---------- Error / single-value fallbacks -------------------------------- */

.laocsostats--error {
	background: var(--laocsostats-soft);
	border: 1px dashed var(--laocsostats-accent);
	border-radius: var(--laocsostats-radius);
	padding: 18px 22px;
	color: var(--laocsostats-muted);
	font-size: 0.95rem;
}

.laocsostats-single {
	font-weight: 700;
	color: var(--laocsostats-primary);
	font-variant-numeric: tabular-nums;
}

.laocsostats-single--missing {
	color: var(--laocsostats-muted);
	font-weight: 400;
}

/* ---------- Entrance stagger (JS adds .laocsostats-js / .laocsostats-in) --- */

.laocsostats.laocsostats-js:not(.laocsostats-in) .laocsostats-card,
.laocsostats.laocsostats-js:not(.laocsostats-in) .laocsostats-row {
	opacity: 0;
}

.laocsostats.laocsostats-js.laocsostats-in .laocsostats-card,
.laocsostats.laocsostats-js.laocsostats-in .laocsostats-row {
	animation: laocsostats-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: calc(var(--laocsostats-i, 0) * 55ms);
}

@keyframes laocsostats-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- Motion preferences --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.laocsostats .laocsostats-card,
	.laocsostats .laocsostats-card:hover,
	.laocsostats .laocsostats-row {
		transform: none;
		transition: none;
		animation: none !important;
		opacity: 1 !important;
	}
}

/* ---------- Responsive ------------------------------------------------------ */

@media (max-width: 900px) {
	.laocsostats-grid--featured {
		grid-template-columns: repeat(2, 1fr);
	}

	.laocsostats-hero {
		grid-column: span 2;
	}

	.laocsostats-sections {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.laocsostats-inner {
		padding: 24px 16px 28px;
		border-radius: 18px;
	}

	.laocsostats-grid--featured {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.laocsostats-hero {
		grid-column: span 2;
		min-height: 160px;
		padding: 20px;
	}

	.laocsostats-hero-number {
		font-size: 2.6rem;
	}

	.laocsostats-card {
		padding: 16px;
		gap: 8px;
	}

	.laocsostats-number {
		font-size: 1.7rem;
	}

	.laocsostats-row {
		padding: 11px 12px;
		gap: 10px;
	}

	.laocsostats-title {
		font-size: 1.25rem;
	}
}