/* Tęcza – Opinie pacjentów
 * Kolory można nadpisać w Wygląd → Dostosuj → Dodatkowy CSS, np.:
 * .tecza-opinie { --to-akcent: #8a3d6b; }
 */
.tecza-opinie {
	--to-akcent: #2b6c7d;
	--to-akcent-tlo: #e9f2f4;
	--to-tekst: #2b3036;
	--to-szary: #6a737d;
	--to-karta: #ffffff;
	--to-ramka: #e2e7ec;
	--to-promien: 14px;
	--to-odstep: 24px;
	--to-zwiniete: 15.5em;
	--to-tecza: linear-gradient(90deg, #d9776f, #e3a066, #dcc266, #86b97c, #5fa3c7, #7f82c4, #a982bd);

	margin: 2rem 0 2.5rem;
	color: var(--to-tekst);
}

.tecza-opinie *,
.tecza-opinie *::before,
.tecza-opinie *::after {
	box-sizing: border-box;
}

/* Filtry --------------------------------------------------------------- */

.tecza-opinie__filtry {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 var(--to-odstep);
}

.tecza-opinie button.tecza-opinie__filtr {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: .55em 1.1em !important;
	font: inherit;
	font-size: .95rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	color: var(--to-tekst) !important;
	background: var(--to-karta) !important;
	border: 1px solid var(--to-ramka) !important;
	border-radius: 999px;
	box-shadow: none !important;
	text-shadow: none;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}

.tecza-opinie button.tecza-opinie__filtr:hover {
	background: var(--to-akcent-tlo) !important;
	border-color: var(--to-akcent) !important;
	color: var(--to-tekst) !important;
}

.tecza-opinie button.tecza-opinie__filtr[aria-pressed="true"] {
	background: var(--to-akcent) !important;
	border-color: var(--to-akcent) !important;
	color: #fff !important;
}

.tecza-opinie__licznik {
	margin-left: .3em;
	opacity: .7;
	font-variant-numeric: tabular-nums;
}

/* Lista ---------------------------------------------------------------- */

.tecza-opinie__lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
	gap: var(--to-odstep);
	align-items: start;
}

/* Karta ---------------------------------------------------------------- */

.tecza-opinia {
	--to-k: var(--to-akcent);
	--to-k-tlo: var(--to-akcent-tlo);

	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 30px 28px 24px;
	background: var(--to-karta);
	border: 1px solid var(--to-ramka);
	border-radius: var(--to-promien);
	box-shadow: 0 1px 2px rgba(20, 32, 44, .04), 0 10px 28px -16px rgba(20, 32, 44, .18);
	overflow: hidden;
}

.tecza-opinia[hidden] {
	display: none;
}

.tecza-opinia::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--to-tecza);
}

.tecza-opinia::after {
	content: "\201D";
	position: absolute;
	top: 14px;
	right: 22px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 88px;
	line-height: 1;
	color: var(--to-k);
	opacity: .13;
	pointer-events: none;
}

.tecza-opinia--k0 { --to-k: #b4544b; --to-k-tlo: #f8ebe9; }
.tecza-opinia--k1 { --to-k: #a8642a; --to-k-tlo: #f9efe5; }
.tecza-opinia--k2 { --to-k: #4f7f45; --to-k-tlo: #ecf4ea; }
.tecza-opinia--k3 { --to-k: #2b6c7d; --to-k-tlo: #e7f1f4; }
.tecza-opinia--k4 { --to-k: #5458a3; --to-k-tlo: #ededf8; }
.tecza-opinia--k5 { --to-k: #85578f; --to-k-tlo: #f4ecf6; }

.tecza-opinia.is-expanded {
	grid-column: 1 / -1;
}

.tecza-opinia__naglowek {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	padding-right: 48px;
}

.tecza-opinia__inicjal {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--to-k-tlo);
	color: var(--to-k);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1;
}

.tecza-opinie .tecza-opinia__imie {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: inherit;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	color: var(--to-tekst);
}

.tecza-opinie .tecza-opinia__podpis {
	margin: 3px 0 0;
	padding: 0;
	font-size: .9rem;
	line-height: 1.4;
	color: var(--to-szary);
}

.tecza-opinia__tresc {
	position: relative;
	font-size: 1rem;
	line-height: 1.75;
}

.tecza-opinie .tecza-opinia__tresc p {
	margin: 0 0 1em;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

.tecza-opinie .tecza-opinia__tresc p:last-child {
	margin-bottom: 0;
}

.tecza-opinia.is-expanded .tecza-opinia__tresc {
	max-width: 74ch;
}

/* Zwijanie długich historii (klasa dodawana przez JS) */
.tecza-opinia.is-clamped .tecza-opinia__tresc {
	max-height: var(--to-zwiniete);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
	mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.tecza-opinie button.tecza-opinia__rozwin {
	-webkit-appearance: none;
	appearance: none;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin: 14px 0 0;
	padding: 0 !important;
	font: inherit;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: var(--to-k) !important;
	background: none !important;
	border: 0 !important;
	border-radius: 4px;
	box-shadow: none !important;
	cursor: pointer;
}

.tecza-opinie button.tecza-opinia__rozwin[hidden] {
	display: none;
}

.tecza-opinie button.tecza-opinia__rozwin:hover {
	background: none !important;
	color: var(--to-k) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

.tecza-opinia__rozwin::after {
	content: "";
	width: .45em;
	height: .45em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-.15em) rotate(45deg);
	transition: transform .2s;
}

.tecza-opinia__rozwin[aria-expanded="true"]::after {
	transform: translateY(.1em) rotate(-135deg);
}

.tecza-opinie .tecza-opinia__link {
	align-self: flex-start;
	margin-top: 14px;
	font-size: .95rem;
	font-weight: 600;
	color: var(--to-k);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tecza-opinie button.tecza-opinie__filtr:focus-visible,
.tecza-opinie button.tecza-opinia__rozwin:focus-visible,
.tecza-opinie .tecza-opinia__link:focus-visible {
	outline: 2px solid var(--to-akcent);
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.tecza-opinie {
		--to-odstep: 16px;
	}

	.tecza-opinia {
		padding: 24px 20px 20px;
	}

	.tecza-opinia::after {
		font-size: 72px;
		right: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tecza-opinie *,
	.tecza-opinie *::after {
		transition: none !important;
	}
}