/**
 * Style bloków układu i treści: ikona, lista, akordeon, zakładki, licznik, opinia, cennik,
 * separator, okruszki.
 *
 * Ten arkusz ładuje się tylko na stronach, na których naprawdę stoi któryś z tych bloków
 * (patrz Frontend::block_assets). Zasada jak w pagecraft.css: wszystko, co da się wziąć
 * z tokenów globalnych, brane jest przez `var()` z wartością zapasową, więc blok wygląda
 * sensownie także w witrynie bez ustawionych stylów.
 *
 * Kolejność: te reguły są bazą, a arkusz wygenerowany dla dokumentu dokłada się po nich.
 */

/* ---------------------------------------------------------------- Wspólne */

/*
 * Podpowiedź widoczna wyłącznie w edytorze: blok bez treści na produkcji nie renderuje nic,
 * więc ta ramka nigdy nie trafia na stronę publiczną.
 */
.pgc-podpowiedz {
	margin: 0;
	padding: 1.25rem;
	border: 1px dashed var(--pgc-c-obrys, rgba(0, 0, 0, .2));
	border-radius: var(--pgc-r-m, 12px);
	text-align: center;
	color: var(--pgc-c-przygaszony, #6b7079);
	font-size: .9em;
}

/* Rysunek skaluje się z tekstem, więc ikona przy zdaniu zawsze pasuje do jego wielkości. */
.pgc-ikona {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -.125em;
	flex: none;
}

/*
 * Widoczny fokus jest wymogiem, nie ozdobą: bez niego nie da się korzystać z akordeonu
 * ani zakładek z klawiatury. Obrys rysujemy na zewnątrz elementu, żeby nie przycinał go
 * sąsiedni `overflow`.
 */
.pgc-akordeon__przycisk:focus-visible,
.pgc-zakladki__zakladka:focus-visible,
.pgc-zakladki__panel:focus-visible,
.pgc-cennik__przycisk:focus-visible,
.pgc-okruszki__link:focus-visible,
.pgc-ikona-blok__link:focus-visible {
	outline: 2px solid var(--pgc-c-akcent, #a85f37);
	outline-offset: 2px;
	border-radius: var(--pgc-r-s, 6px);
}

/* ---------------------------------------------------------------- Ikona */

.pgc-ikona-blok {
	display: flex;
	color: var(--pgc-c-akcent, #a85f37);
}

.pgc-ikona-blok .pgc-ikona {
	width: 1em;
	height: 1em;
}

.pgc-ikona-blok--s  { font-size: 1.25rem; }
.pgc-ikona-blok--m  { font-size: 2rem; }
.pgc-ikona-blok--l  { font-size: 3rem; }
.pgc-ikona-blok--xl { font-size: 4.5rem; }

.pgc-ikona-blok__link {
	display: inline-flex;
	color: inherit;
	text-decoration: none;
	transition: transform .18s ease;
}

.pgc-ikona-blok__link:hover { transform: translateY(-2px); }

/* Tło bierze kolor ikony i rozjaśnia go samą przezroczystością — bez drugiego pola w panelu. */
.pgc-ikona-blok--tlo-kolo > *,
.pgc-ikona-blok--tlo-kwadrat > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .5em;
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.pgc-ikona-blok--tlo-kolo > *    { border-radius: var(--pgc-r-pill, 999px); }
.pgc-ikona-blok--tlo-kwadrat > * { border-radius: var(--pgc-r-m, 12px); }

/* ---------------------------------------------------------------- Lista z ikonami */

.pgc-lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--pgc-s-s, .75rem);
}

.pgc-lista--ko-dwie { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pgc-lista--tx-s { font-size: var(--pgc-t-s, .9rem); }
.pgc-lista--tx-m { font-size: var(--pgc-t-m, 1rem); }
.pgc-lista--tx-l { font-size: var(--pgc-t-l, 1.125rem); }

.pgc-lista__punkt {
	display: flex;
	align-items: flex-start;
	gap: .6em;
	line-height: 1.5;
}

.pgc-lista__ikona {
	margin-top: .2em;
	color: var(--pgc-lista-kolor, var(--pgc-c-akcent, #a85f37));
}

/* ---------------------------------------------------------------- Akordeon */

.pgc-akordeon {
	display: flex;
	flex-direction: column;
}

.pgc-akordeon--linie .pgc-akordeon__sekcja {
	border-bottom: 1px solid var(--pgc-c-obrys, rgba(0, 0, 0, .15));
}

.pgc-akordeon--linie .pgc-akordeon__sekcja:first-child {
	border-top: 1px solid var(--pgc-c-obrys, rgba(0, 0, 0, .15));
}

.pgc-akordeon--karty {
	gap: var(--pgc-s-s, .75rem);
}

.pgc-akordeon--karty .pgc-akordeon__sekcja {
	border: 1px solid var(--pgc-c-obrys, rgba(0, 0, 0, .15));
	border-radius: var(--pgc-r-m, 12px);
	overflow: hidden;
	background: var(--pgc-c-tlo-karty, transparent);
}

.pgc-akordeon__naglowek {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.pgc-akordeon__przycisk {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	width: 100%;
	/* Pole dotykowe ma mieć co najmniej 44 px wysokości — panel działa też na tablecie. */
	min-height: 44px;
	padding: .9em .2em;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.pgc-akordeon--karty .pgc-akordeon__przycisk { padding-inline: 1em; }

.pgc-akordeon__przycisk:hover { color: var(--pgc-c-akcent, #a85f37); }

/* Znak rozwinięcia rysujemy CSS-em, żeby nie dokładać obrazka do każdego pytania. */
.pgc-akordeon__znak {
	flex: none;
	width: .6em;
	height: .6em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-.1em, -.1em);
	transition: transform .2s ease;
}

.pgc-akordeon__przycisk[aria-expanded="true"] .pgc-akordeon__znak {
	transform: rotate(-135deg) translate(-.15em, -.15em);
}

.pgc-akordeon__tresc {
	padding: 0 .2em 1.1em;
	line-height: 1.6;
}

.pgc-akordeon--karty .pgc-akordeon__tresc { padding-inline: 1em; }

.pgc-akordeon__tresc > :first-child { margin-top: 0; }
.pgc-akordeon__tresc > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Zakładki */

.pgc-zakladki {
	display: flex;
	flex-direction: column;
	gap: var(--pgc-s-s, .75rem);
}

.pgc-zakladki__pasek {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	border-bottom: 1px solid var(--pgc-c-obrys, rgba(0, 0, 0, .15));
}

.pgc-zakladki__zakladka {
	min-height: 44px;
	padding: .6em 1.1em;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.pgc-zakladki__zakladka[aria-selected="true"] {
	color: var(--pgc-c-akcent, #a85f37);
	border-bottom-color: currentColor;
}

.pgc-zakladki__panel {
	line-height: 1.6;
}

.pgc-zakladki__panel > :first-child { margin-top: 0; }
.pgc-zakladki__panel > :last-child { margin-bottom: 0; }

.pgc-zakladki--wy-srodek .pgc-zakladki__pasek { justify-content: center; }

.pgc-zakladki--wy-rowno .pgc-zakladki__zakladka {
	flex: 1 1 0;
	white-space: normal;
}

/* Zakładki z boku: rząd staje się kolumną, a kreska zaznaczenia przesuwa się na bok. */
@media (min-width: 768px) {
	.pgc-zakladki--bok {
		flex-direction: row;
		gap: var(--pgc-s-m, 1.5rem);
	}

	.pgc-zakladki--bok .pgc-zakladki__pasek {
		flex-direction: column;
		flex-wrap: nowrap;
		flex: none;
		width: 12rem;
		border-bottom: 0;
		border-right: 1px solid var(--pgc-c-obrys, rgba(0, 0, 0, .15));
	}

	.pgc-zakladki--bok .pgc-zakladki__zakladka {
		text-align: left;
		white-space: normal;
		border-bottom: 0;
		border-right: 2px solid transparent;
		margin-bottom: 0;
		margin-right: -1px;
	}

	.pgc-zakladki--bok .pgc-zakladki__zakladka[aria-selected="true"] {
		border-right-color: currentColor;
	}

	.pgc-zakladki--bok .pgc-zakladki__panele { flex: 1 1 auto; min-width: 0; }
}

/* ---------------------------------------------------------------- Licznik */

.pgc-licznik {
	display: flex;
	flex-direction: column;
	gap: .2em;
}

.pgc-licznik--wy-srodek   { align-items: center; text-align: center; }
.pgc-licznik--wy-poczatek { align-items: flex-start; text-align: left; }

.pgc-licznik__wartosc {
	display: inline-flex;
	align-items: baseline;
	gap: .15em;
	font-weight: 700;
	line-height: 1.05;
	color: var(--pgc-c-akcent, #a85f37);
	/* Cyfry o równej szerokości: przy naliczaniu liczba nie skacze w lewo i w prawo. */
	font-variant-numeric: tabular-nums;
}

.pgc-licznik--m  .pgc-licznik__wartosc { font-size: clamp(1.8rem, 5vw, 2.4rem); }
.pgc-licznik--l  .pgc-licznik__wartosc { font-size: clamp(2.4rem, 8vw, 3.6rem); }
.pgc-licznik--xl .pgc-licznik__wartosc { font-size: clamp(3rem, 11vw, 5rem); }

.pgc-licznik__przed,
.pgc-licznik__po {
	font-size: .5em;
	font-weight: 600;
}

.pgc-licznik__opis {
	color: var(--pgc-c-przygaszony, #6b7079);
	font-size: var(--pgc-t-m, 1rem);
	line-height: 1.4;
}

/* ---------------------------------------------------------------- Opinia */

.pgc-opinia {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .9em;
}

.pgc-opinia--karta {
	padding: var(--pgc-s-m, 1.5rem);
	border-radius: var(--pgc-r-m, 12px);
	background: color-mix(in srgb, currentColor 5%, transparent);
}

.pgc-opinia__ocena {
	display: flex;
	gap: .15em;
	margin: 0;
	font-size: 1.1rem;
	color: var(--pgc-c-obrys, rgba(0, 0, 0, .25));
}

.pgc-opinia__gwiazdka--pelna { color: var(--pgc-c-akcent, #a85f37); }

.pgc-opinia__cytat {
	margin: 0;
	font-size: var(--pgc-t-l, 1.125rem);
	line-height: 1.6;
}

.pgc-opinia__cytat > :first-child { margin-top: 0; }
.pgc-opinia__cytat > :last-child { margin-bottom: 0; }

.pgc-opinia__podpis {
	display: flex;
	align-items: center;
	gap: .75em;
}

.pgc-opinia__zdjecie {
	width: 3rem;
	height: 3rem;
	border-radius: var(--pgc-r-pill, 999px);
	object-fit: cover;
	flex: none;
}

.pgc-opinia__osoba {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pgc-opinia__autor { font-weight: 700; }

.pgc-opinia__rola {
	font-size: var(--pgc-t-s, .9rem);
	color: var(--pgc-c-przygaszony, #6b7079);
}

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

.pgc-cennik {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .6em;
	height: 100%;
	padding: var(--pgc-s-m, 1.5rem);
	border: 1px solid var(--pgc-c-obrys, rgba(0, 0, 0, .15));
	border-radius: var(--pgc-r-m, 12px);
}

.pgc-cennik--wyrozniony {
	border-color: var(--pgc-c-akcent, #a85f37);
	box-shadow: 0 .75rem 2rem color-mix(in srgb, currentColor 12%, transparent);
}

.pgc-cennik__wstega {
	align-self: flex-start;
	margin: 0;
	padding: .3em .8em;
	border-radius: var(--pgc-r-pill, 999px);
	background: var(--pgc-c-akcent, #a85f37);
	color: var(--pgc-c-jasny, #fff);
	font-size: var(--pgc-t-xs, .78rem);
	font-weight: 700;
	letter-spacing: .04em;
}

.pgc-cennik__nazwa {
	margin: 0;
	font-size: var(--pgc-t-l, 1.125rem);
}

.pgc-cennik__cena {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .3em;
	margin: 0;
	font-size: clamp(1.9rem, 6vw, 2.6rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--pgc-c-akcent, #a85f37);
}

.pgc-cennik__okres {
	font-size: var(--pgc-t-s, .9rem);
	font-weight: 500;
	color: var(--pgc-c-przygaszony, #6b7079);
}

.pgc-cennik__opis {
	margin: 0;
	color: var(--pgc-c-przygaszony, #6b7079);
	line-height: 1.5;
}

.pgc-cennik__cechy {
	margin: .4em 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .45em;
	/* Lista rozpycha kartę, żeby przycisk stał równo w kilku kartach obok siebie. */
	flex: 1 1 auto;
}

.pgc-cennik__cecha {
	display: flex;
	align-items: flex-start;
	gap: .55em;
	line-height: 1.45;
}

.pgc-cennik__znak {
	margin-top: .2em;
	width: 1em;
	height: 1em;
	flex: none;
	color: var(--pgc-c-akcent, #a85f37);
}

.pgc-cennik__cecha--bez {
	color: var(--pgc-c-przygaszony, #6b7079);
	text-decoration: line-through;
}

.pgc-cennik__cecha--bez .pgc-cennik__znak {
	color: var(--pgc-c-przygaszony, #6b7079);
	transform: rotate(90deg);
}

.pgc-cennik__przycisk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: .6em;
	padding: .75em 1.6em;
	border-radius: var(--pgc-r-pill, 999px);
	background: var(--pgc-c-akcent, #a85f37);
	color: var(--pgc-c-jasny, #fff);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.pgc-cennik__przycisk[aria-disabled="true"] {
	opacity: .55;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------- Separator */

.pgc-separator {
	display: flex;
	align-items: center;
	gap: .8em;
	width: 100%;
	margin-inline: auto;
	color: var(--pgc-separator-kolor, var(--pgc-c-obrys, rgba(0, 0, 0, .18)));
}

.pgc-separator--od-s { margin-block: var(--pgc-s-s, .75rem); }
.pgc-separator--od-m { margin-block: var(--pgc-s-m, 1.5rem); }
.pgc-separator--od-l { margin-block: var(--pgc-s-l, 2.5rem); }

.pgc-separator--sz-pelna  { max-width: 100%; }
.pgc-separator--sz-polowa { max-width: 50%; }
.pgc-separator--sz-krotka { max-width: 6rem; }

.pgc-separator__linia {
	flex: 1 1 auto;
	height: 0;
	border-top: 1px solid currentColor;
}

.pgc-separator--gruba .pgc-separator__linia { border-top-width: 3px; }
.pgc-separator--przerywana .pgc-separator__linia { border-top-style: dashed; }

/* Wariant „cień” to nie linia, tylko delikatne przejście — stąd brak obrysu. */
.pgc-separator--cien .pgc-separator__linia {
	height: 1.5rem;
	border: 0;
	background: radial-gradient(ellipse at 50% 0, currentColor, transparent 70%);
	opacity: .25;
}

.pgc-separator__srodek {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-size: 1.2rem;
}

.pgc-separator__kropka {
	width: .35em;
	height: .35em;
	border-radius: var(--pgc-r-pill, 999px);
	background: currentColor;
}

.pgc-separator--kropki .pgc-separator__linia { display: none; }
.pgc-separator--kropki { justify-content: center; }

/* ---------------------------------------------------------------- Okruszki */

.pgc-okruszki--s { font-size: var(--pgc-t-s, .9rem); }
.pgc-okruszki--m { font-size: var(--pgc-t-m, 1rem); }

.pgc-okruszki__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .1em .5em;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--pgc-c-przygaszony, #6b7079);
}

.pgc-okruszki__ogniwo {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	min-width: 0;
}

.pgc-okruszki__link {
	color: inherit;
	text-decoration: none;
}

.pgc-okruszki__link:hover {
	color: var(--pgc-c-akcent, #a85f37);
	text-decoration: underline;
}

.pgc-okruszki__biezaca { color: var(--pgc-c-tekst, inherit); }

.pgc-okruszki__znak { opacity: .6; }

/* ---------------------------------------------------------------- Wąskie ekrany */

/*
 * Wszystko ma być czytelne na 360 px: dwie kolumny listy schodzą do jednej, zakładki dostają
 * własny pasek przewijania zamiast łamać się na sześć rzędów, a karta cenowa traci szeroki
 * odstęp wewnętrzny.
 */
@media (max-width: 767px) {
	.pgc-lista--ko-dwie { grid-template-columns: 1fr; }

	.pgc-zakladki__pasek {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: thin;
	}

	.pgc-zakladki--wy-rowno .pgc-zakladki__zakladka { flex: 0 0 auto; }

	.pgc-cennik { padding: var(--pgc-s-s, .75rem); }

	.pgc-opinia__podpis { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------- Ruch */

@media (prefers-reduced-motion: reduce) {
	.pgc-akordeon__znak,
	.pgc-ikona-blok__link {
		transition: none;
	}

	.pgc-ikona-blok__link:hover { transform: none; }
}