/*
 * Impact Counter — frontend styles.
 * Minimal white cards with rounded corners, soft shadow, and responsive grid/slider layouts.
 */

.impact-counter {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: inherit;
	color: #1f2937;
}

.impact-counter *,
.impact-counter *::before,
.impact-counter *::after {
	box-sizing: border-box;
}

/* ---------- Grid layout ---------- */

.impact-counter--grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 480px) {
	.impact-counter--grid.impact-counter--cols-2,
	.impact-counter--grid.impact-counter--cols-3,
	.impact-counter--grid.impact-counter--cols-4,
	.impact-counter--grid.impact-counter--cols-5,
	.impact-counter--grid.impact-counter--cols-6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.impact-counter--grid.impact-counter--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.impact-counter--grid.impact-counter--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.impact-counter--grid.impact-counter--cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.impact-counter--grid.impact-counter--cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.impact-counter--grid.impact-counter--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.impact-counter--grid.impact-counter--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.impact-counter--grid.impact-counter--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

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

.impact-counter__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 100%;
	padding: 28px 24px;
	background: #ffffff;
	color: #1f2937;
	text-align: center;
	border-radius: 16px;
	box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.impact-counter__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12), 0 2px 4px rgba(15, 23, 42, 0.06);
}

.impact-counter__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	font-size: 36px;
	line-height: 1;
}

.impact-counter__icon img {
	width: 55px;
	height: auto;
	max-height: 55px;
	object-fit: contain;
}

.impact-counter__count {
	font-size: clamp(52px, 4vw, 40px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: #0f172a;
}

.impact-counter__subtext {
	font-size: 15px;
	line-height: 1.45;
	color: #475569;
	max-width: 260px;
}

/* ---------- Slider layout ---------- */

/*
 * Compound `.impact-counter.impact-counter--slider` (two classes) raises
 * specificity above Swiper's `.swiper { padding: 0 }`, which is loaded after
 * our CSS and would otherwise strip the padding we need for shadow room.
 */
.impact-counter.impact-counter--slider {
	position: relative;
	/* Top/side padding gives card shadows room before Swiper's overflow:hidden
	   clips them. Extra bottom padding reserves space for the pagination dots
	   to sit below the cards instead of overlapping them. */
	padding: 14px 16px 48px 16px;
	/* Swiper exposes this custom property for the pagination offset — using
	   it is more robust than competing on selector specificity. */
	--swiper-pagination-bottom: 14px;
}

.impact-counter--slider .swiper-wrapper {
	align-items: stretch;
}

.impact-counter--slider .swiper-slide {
	height: auto;
	display: flex;
}

.impact-counter--slider .swiper-slide > .impact-counter__card {
	width: 100%;
}

.impact-counter--slider .swiper-button-prev,
.impact-counter--slider .swiper-button-next {
	color: #0f172a;
	width: 36px;
	height: 36px;
	background: #ffffff;
	border: 0;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
	cursor: pointer;
	/* Compensate for the asymmetric top/bottom container padding
	   (14px top vs 48px bottom) so arrows stay visually centered on
	   the cards rather than on the padded container. */
	top: calc(50% - 17px);
	transform: translateY(-50%);
	margin-top: 0;
}

.impact-counter--slider .swiper-button-prev::after,
.impact-counter--slider .swiper-button-next::after {
	font-size: 14px;
	font-weight: 700;
}

.impact-counter--slider .swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

.impact-counter.impact-counter--slider .swiper-pagination {
	/* Defensive fallback in case `--swiper-pagination-bottom` is ever
	   stripped; mirrors the value set on the container above. */
	bottom: 0;
}

.impact-counter--slider .swiper-pagination-bullet {
	background: #cbd5e1;
	opacity: 1;
}

.impact-counter--slider .swiper-pagination-bullet-active {
	background: #0f172a;
}