/* Page Sections — Counters */

.ps-counters {
	background: var(--cream);
}

.ps-counters__head {
	text-align: center;
	justify-content: center;
	margin-bottom: 32px;
}

.ps-counters__head h2 {
	margin: 0 0 10px;
}

.ps-counters__intro {
	margin: 0 auto;
	max-width: 60ch;
	color: var(--grey-700, #555);
	font-size: 1rem;
	line-height: 1.55;
}

.ps-counters__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px;
}

/* Desktop column counts based on the number of counters */
.ps-counters__grid--1 { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
.ps-counters__grid--2 { grid-template-columns: repeat(2, 1fr); }
.ps-counters__grid--3 { grid-template-columns: repeat(3, 1fr); }
.ps-counters__grid--4 { grid-template-columns: repeat(4, 1fr); }
.ps-counters__grid--5 { grid-template-columns: repeat(5, 1fr); }
.ps-counters__grid--6 { grid-template-columns: repeat(6, 1fr); }

.ps-counters__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
	min-width: 0;
}

/* Cards variant — each counter in its own white card */
.ps-counters--cards .ps-counters__item {
	background: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 32px clamp(16px, 2vw, 24px);
}

/* Bare variant — no card */
.ps-counters--bare .ps-counters__item {
	background: transparent;
	box-shadow: none;
	padding: 16px clamp(12px, 1.5vw, 20px);
}

.ps-counters__icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--teal);
	width: 36px;
	height: 36px;
}

.ps-counters__icon {
	width: 36px;
	height: 36px;
	display: block;
}

.ps-counters__value {
	font-family: var(--font-heading);
	font-size: clamp(1.9rem, 3.2vw, 3rem);
	line-height: 1;
	color: var(--teal);
	font-weight: 700;
	letter-spacing: -0.01em;
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	gap: 2px;
	word-break: break-word;
}

.ps-counters__prefix,
.ps-counters__suffix {
	font-family: var(--font-heading);
	font-size: 0.65em;
	color: var(--red);
	line-height: 1;
}

.ps-counters__num {
	display: inline-block;
}

.ps-counters__label {
	font-family: var(--font);
	font-size: 0.9rem;
	color: var(--grey-700, #555);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.3;
	max-width: 22ch;
}

/* Desktop — more space, larger label */
@media (min-width: 1024px) {
	.ps-counters__head { margin-bottom: 36px; }
	.ps-counters__grid { gap: 24px; }
	.ps-counters__intro { font-size: 1.04rem; }
	.ps-counters__label { font-size: 0.92rem; }
	.ps-counters--cards .ps-counters__item { padding: 32px clamp(18px, 2vw, 24px); }
	.ps-counters--bare .ps-counters__item { padding: 18px clamp(14px, 1.5vw, 20px); }
}

@media (min-width: 1280px) {
	.ps-counters__grid { gap: 26px; }
	.ps-counters__grid--5,
	.ps-counters__grid--6 { gap: 22px; }
}

/* Tablet */
@media (max-width: 1023px) {
	.ps-counters__grid--4,
	.ps-counters__grid--5,
	.ps-counters__grid--6 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Small tablet / large phone */
@media (max-width: 767px) {
	.ps-counters__grid--3,
	.ps-counters__grid--4,
	.ps-counters__grid--5,
	.ps-counters__grid--6 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Phone */
@media (max-width: 479px) {
	.ps-counters__grid,
	.ps-counters__grid--2,
	.ps-counters__grid--3,
	.ps-counters__grid--4,
	.ps-counters__grid--5,
	.ps-counters__grid--6 {
		grid-template-columns: 1fr;
	}

	.ps-counters--cards .ps-counters__item {
		padding: 24px 18px;
	}
}