/* =========================================================
   Camper Social Stats — frontend
   ========================================================= */
.csm-stats,
.csm-stats * { box-sizing: border-box; }

.csm-stats {
	max-width: 700px;
	font-family: 'Manrope', system-ui, -apple-system, sans-serif;
	color: #131313;
}

.csm-stats__title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #64748b;
	margin: 0 0 14px;
}

.csm-stats__cards {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Karta — 2 sekcje obok siebie: biała (ikona platformy) + zielona (metryki) */
.csm-card {
	display: flex;
	border-radius: 16px;
	overflow: hidden;
	background: #1e3a5f;
	text-decoration: none;
	color: inherit;
	transition: transform .2s ease, box-shadow .2s ease;
}
a.csm-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(30, 58, 95, .25);
}

.csm-card__platform {
	flex: 0 0 130px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.csm-card__metrics {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0;
	padding: 24px 28px;
	color: #fff;
}

.csm-metric {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	text-align: center;
	position: relative;
	padding: 0 12px;
}
.csm-metric + .csm-metric::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10%;
	bottom: 10%;
	width: 1px;
	background: rgba(255, 255, 255, .25);
}

.csm-metric__icon {
	color: rgba(255, 255, 255, .85);
	margin-bottom: 4px;
}

.csm-metric__value {
	font-size: 25px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: #fff;
}
.csm-metric__label {
	font-size: 13px;
	color: rgba(255, 255, 255, .8);
	margin-top: 4px;
	font-weight: 500;
}

/* Karta audience */
.csm-card__platform--audience {
	flex-direction: column;
	gap: 4px;
}
.csm-audience-label {
	font-size: 20px;
	font-weight: 800;
	color: #131313;
	letter-spacing: -.01em;
}
.csm-card__metrics--audience .csm-metric {
	padding: 0 8px;
}

/* Ikony platform — kolor tła okrągły */
.csm-icon {
	display: inline-block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #e2e8f0;
	background-size: 32px 32px;
	background-position: center;
	background-repeat: no-repeat;
}
/* Możesz nadpisać tym że dodasz logo na własną — używamy SVG inline jako background */
.csm-icon-facebook {
	background-color: #1877F2;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}
.csm-icon-instagram {
	background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z'/%3E%3C/svg%3E");
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 32px 32px;
}
/* Instagram — gradient bg + icon overlay (trzeba podwójne tło) */
.csm-icon-instagram {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z'/%3E%3C/svg%3E"),
		linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
	background-size: 32px 32px, cover;
}
.csm-icon-tiktok {
	background-color: #000;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1.84-.1z'/%3E%3C/svg%3E");
}
.csm-icon-youtube {
	background-color: #FF0000;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}
.csm-icon-x {
	background-color: #000;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}
.csm-icon-linkedin {
	background-color: #0A66C2;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.063 2.063 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
}

/* Mobile */
@media (max-width: 600px) {
	.csm-card {
		flex-direction: column;
		border-radius: 14px;
	}
	.csm-card__platform {
		flex: 0 0 auto;
		padding: 18px;
	}
	.csm-card__metrics {
		padding: 18px;
	}
	.csm-metric__value {
		font-size: 22px;
	}
	.csm-card__platform--audience {
		padding: 14px 18px;
	}
}