/*
 * site/faq — STRUKTURA obu wariantów. Wygląd: css/site-faq.css.
 *   is-karty    AC §5.6; SG L422–451 (pasmo `.s-pw-band`, skin.css §12)
 *   is-details  AP S14; `Strona wizytowka.dc.html` L298–308, grupy i chipy
 *               `FAQ.dc.html` L233–262 (sekcja `.s-pw-sec`)
 * Stan zwinięty kart istnieje wyłącznie pod `html.js` — bez JS każda
 * odpowiedź jest widoczna (constraints PlanMax pkt 5).
 */

.s-faq__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* --- Karty (strona główna) -------------------------------------------- */

.s-faq.is-karty {
	overflow: hidden;
}

.s-faq.is-karty .s-faq__wrap {
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
}

.s-faq.is-karty .s-faq__head {
	margin-bottom: 46px;
}

.s-faq.is-karty .s-faq__title {
	max-width: 22ch;
}

.s-faq.is-karty .s-faq__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.s-faq__item {
	overflow: hidden;
	border-radius: 22px;
	transition: border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

.s-faq__q {
	margin: 0;
}

.s-faq__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	width: 100%;
	margin: 0;
	padding: 24px 26px;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* text-wrap:pretty tylko w wariancie kart (SG L438) — details nie ma tego
   w designie (`Strona wizytowka.dc.html` L302: summary bez text-wrap), inny
   punkt łamania na 390px niż w WP z nim (strona-firmowa, „Ile trwa…”). */
.s-faq.is-karty .s-faq__question {
	text-wrap: pretty;
}

.s-faq__ico {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	transition: transform 0.42s var(--pw-ease), background 0.3s ease, color 0.3s ease;
}

.s-faq__item.is-open .s-faq__ico {
	transform: rotate(135deg);
}

html.js .s-faq__ans {
	overflow: hidden;
	transition: max-height 0.45s var(--pw-ease);
}

/* Zwinięta odpowiedź: zero wysokości i poza drzewem dostępności (po
   zakończeniu animacji zwijania), żeby Tab nie wchodził w ukryte linki. */
html.js .s-faq__item:not(.is-open) .s-faq__ans {
	max-height: 0;
	visibility: hidden;
	transition: max-height 0.45s var(--pw-ease), visibility 0s linear 0.45s;
}

.s-faq.is-karty .s-faq__answer {
	max-width: 66ch;
	padding: 0 26px 26px;
	text-wrap: pretty;
}

.s-faq__answer > * {
	margin: 0;
}

.s-faq__answer > * + * {
	margin-top: 12px;
}

.s-faq__link {
	display: inline-flex;
	margin-top: 12px;
}

.s-faq__more {
	display: flex;
	justify-content: center;
	margin-top: 34px;
}

.s-faq__more-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 52px;
	padding: 0 28px;
	border-radius: 100px;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.18s var(--pw-ease);
}

.s-faq__more-btn:hover {
	transform: translateY(-2px);
}

.s-faq__more-btn:active {
	transform: translateY(0) scale(0.97);
}

/* --- Details (podstrony) ------------------------------------------------ */

.s-faq.is-details .s-faq__wrap {
	max-width: 860px;
}

/* Bez `text-wrap: pretty` dziedziczonego z `.s-pw-h2` (skin.css): H2 FAQ
   podstron w designie go nie ma (`Strony internetowe Lublin.dc.html` L300,
   tak samo 10 pozostałych `#faq-h`) i na 390 px „pretty” łamało tytuł
   inaczej. Wariant karty już ma `wrap` przez `.s-pw-h2.is-home` — H2 FAQ
   strony głównej (SG L431) też jest bez text-wrap. */
.s-faq.is-details .s-faq__title {
	margin-right: auto;
	margin-left: auto;
	text-wrap: wrap;
}

.s-faq__head + .s-faq__chips,
.s-faq__head + .s-faq__groups {
	margin-top: 34px;
}

.s-faq__chips + .s-faq__groups {
	margin-top: 40px;
}

.s-faq__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 9px;
}

html:not(.js) .s-faq__chips {
	display: none;
}

.s-faq__chip {
	height: 40px;
	padding: 0 18px;
	border-radius: 100px;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
}

.s-faq__groups {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.s-faq__group[hidden] {
	display: none;
}

.s-faq__group-title {
	margin: 0 0 16px;
}

.s-faq.is-details .s-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.s-faq__details {
	border-radius: 22px;
}

.s-faq__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 22px 24px;
	cursor: pointer;
}

.s-faq__plus {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	transition: transform 0.25s ease, background 0.2s ease;
}

.s-faq__details[open] .s-faq__plus {
	transform: rotate(45deg);
}

.s-faq__body {
	padding: 0 24px 24px;
}

.s-faq__more-text {
	margin: 22px 0 0;
	text-align: center;
}

@media (max-width: 900px) {
	.s-faq.is-karty {
		overflow: visible;
	}

	.s-faq__chip {
		min-height: 44px;
	}
}

/* Cele dotyku: linki w treści odpowiedzi (richtext), „→” pod odpowiedzią i
   „Wszystkie pytania” w wariancie details są za małe (bramka mobile.tapTargets,
   próg 44×44). `::after` z chrome.css nie działa tu wprost — gate mierzy
   `getBoundingClientRect()` samego `<a>`, a niewidoczny obszar na pseudo­
   elemencie `position:absolute` NIE powiększa ramki elementu, którą bramka
   czyta. Padding + ujemny margines tej samej wielkości na każdej stronie
   powiększa realną ramkę (border-box, czytaną przez bramkę i przez hit-test
   dotyku), a jednocześnie znosi dodatkowe miejsce zarezerwowane w przepływie
   (margin-box wraca do rozmiaru sprzed zmiany) — sąsiedni tekst i zawijanie
   linii nie rusza się, `.s-faq__link` (inline-flex) też nie rośnie wizualnie. */
@media (max-width: 1024px), (pointer: coarse) {
	.s-faq__answer a,
	.s-faq__link,
	.s-faq__more-link {
		padding: 13px 8px;
		margin: -13px -8px;
	}

	/* Link pod odpowiedzią zachowuje swoje 12 px odstępu od tekstu
	   (12 − 13 px paddingu = −1 px), inaczej na telefonie wjeżdża pod
	   ostatni wiersz odpowiedzi (FAQ L254). */
	.s-faq__link {
		margin-top: -1px;
	}
}