/*
 * „Dodatkowe informacje” — ciemny blok, 2026.
 *
 * Wygląd wzięty z ciemnej sekcji makiety: nagłówek lekki i duży po lewej,
 * pozycje po prawej jako wiersze rozdzielone włosowymi liniami.
 *
 * MECHANIZM ZOSTAJE. Rozwijaniem steruje `pages.js`: przełącza klasę `active`
 * na przycisku i wpisuje `max-height` w atrybut `style` panelu. Dlatego `.panel`
 * zachowuje `max-height: 0` i `overflow: hidden` z `pages.css` — zmieniamy tu
 * wyłącznie wygląd.
 */

.add-information {
	/*
	 * Blok jasny — zamienił się barwą z sekcją taryfy pod nim.
	 *
	 * Przy kremowym tle:
	 *
	 *   tekst   #515555  6,82:1
	 *   2. plan #6f6b68  4,77:1
	 *   akcent  #b03f3f  5,23:1
	 *
	 * Akcent NIE jest czerwienią marki. #c94d4d daje na kremie 4,08:1, czyli
	 * poniżej progu 4,5:1 — a akcent nosi tu tekst (nagłówek otwartego pytania),
	 * nie samą grafikę. Przyciemnienie o dwa stopnie wystarcza.
	 *
	 * Ta przyciemniona czerwień mieszka od 17.08.2026 w `--pakiet-red-ciemny`
	 * w `style.css`, żeby szła za akcentem przy zmianie barw z panelu. Wcześniej
	 * była wpisana tutaj liczbą i zostałaby czerwona na zawsze.
	 */
	--pytania-tlo: var(--pakiet-cream);
	--pytania-tekst: var(--pakiet-ink);
	--pytania-drugi-plan: var(--pakiet-muted);
	--pytania-linia: var(--pakiet-line);
	--pytania-akcent: var(--pakiet-red-ciemny);
	--pytania-akcent-tekst: var(--pakiet-red-ciemny);
}

/* ------------------------------------------------------------------- blok */

/*
 * Pas na całą szerokość, treść w kolumnie.
 *
 * Blok stoi teraz POD zakładkami, a nie w środku którejś z nich, więc jest
 * naturalnie pełnej szerokości i nie potrzebuje żadnych sztuczek: tło kładziemy
 * wprost, a treść wraca do kolumny opakowaniem o zadanej szerokości.
 *
 * Poprzednia wersja rozciągała pas ujemnym marginesem liczonym z `vw` i wracała
 * dopełnieniem. Działało, ale `vw` nie odejmuje paska przewijania, więc pas
 * celowo wychodził poza okno i trzeba go było przycinać na kontenerze zakładek.
 * Po przeniesieniu blok ma tę szerokość sam z siebie i cały ten aparat znika.
 */
.add-information {
	/* Bez marginesu: pas kart nad tym blokiem jest ciemny, a ten jasny — biała
	   szpara między dwiema barwami czytałaby się jak niedokończony układ.
	   Odstęp robi dopełnienie w środku każdego z pasów. */
	margin: 0;
	padding: var(--klucz-pas-y) var(--klucz-margines-boczny);
	border: 0;
	border-radius: 0;
	background: var(--pytania-tlo);
	color: var(--pytania-tekst);
}

/* Ta sama szerokość co zakładki wyżej, żeby treść stała w jednej kolumnie
   z kartkami pakietów.

   MARGINES BOCZNY ODEJMUJEMY, I TO NIE JEST OZDOBNIK. `--klucz-kolumna` opisuje
   szerokość pasa RAZEM z dopełnieniem — tak liczy ją `.dlaczego` w `taryfa.css`,
   gdzie `max-width` i `padding` siedzą na tym samym elemencie. Tutaj dopełnienie
   nosi `.add-information`, a szerokość jej wnętrze, więc bez odjęcia obu marginesów
   ten pas wychodził o 35 px szerszy z każdej strony niż ciemny nad nim. Widać to
   dopiero powyżej 1495 px, bo węziej i tak decyduje szerokość okna. */
.add-information-wnetrze {
	max-width: calc(var(--klucz-kolumna) - 2 * var(--klucz-margines-boczny));
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------- nagłówek */

/* Kreska PRZED napisem, w jednym wierszu — ten sam gest co przy nadtytule
   slajdu, tylko przy większym stopniu pisma. */
.add-information-title {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 0;
	/* Lekki odstęp do pierwszego pytania. Od 768 px w górę rośnie do 26 px,
	   a od 1024 px znika — tam nagłówek stoi w osobnej kolumnie obok listy,
	   więc nie ma czego odsuwać. Na wąskim ekranie napis dotykał kreski
	   pierwszego wiersza. */
	margin-bottom: 14px;
	text-align: left;
	color: var(--pytania-tekst);
	font-family: var(--klucz-font-ui);
	font-size: clamp(1.625rem, 3vw, 2.5rem);
	font-weight: 400;
	letter-spacing: -.03em;
	line-height: 1.06;
}

.add-information-title::before {
	content: "";
	flex: 0 0 auto;
	width: 28px;
	height: 2px;
	background: var(--pytania-akcent);
}

/* --------------------------------------------------------------- wiersze */

.add-information-box > div {
	border-top: 1px solid var(--pytania-linia);
}

.add-information-box > div:last-child {
	border-bottom: 1px solid var(--pytania-linia);
}

.add-information .question-accordion {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 17px 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--pytania-tekst);
	font-family: var(--klucz-font-ui);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

/*
 * Zdjęcie wyglądu ze starego akordeonu.
 *
 * `pages.css` ma regułę `.active, .accordion:hover`, która dokłada białą
 * obwódkę (`box-shadow` o rozmyciu 0 i rozszerzeniu 2 px), czerwone tło
 * i `scale(1.01)`. Na jasnym akordeonie regulaminów to działa, na ciemnym
 * blokupytań wygląda jak ramka doklejona przypadkiem.
 *
 * Selektor `.active` jest tam podany BEZ kontekstu, więc łapie każdy element
 * z tą klasą — także nasze przyciski, gdy skrypt oznaczy je jako otwarte.
 * Stąd potrzeba jawnego zdjęcia wszystkich trzech rzeczy naraz.
 */
.add-information .question-accordion:hover,
.add-information .question-accordion:focus,
.add-information .question-accordion.active {
	transform: none;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--pytania-akcent-tekst);
}

/* `pages.css` gasi obwódkę zaznaczenia (`outline: none`), a bez niej przycisk
   znika dla osoby idącej klawiaturą. Przywracamy ją dla samego zaznaczenia
   z klawiatury, żeby nie pojawiała się przy kliknięciu myszą. */
.add-information .question-accordion:focus-visible {
	outline: 2px solid var(--pytania-akcent);
	outline-offset: 3px;
}

/* Ptaszka obracana o pół obrotu — ta sama co przy „Szczegółach” na slajdzie. */
.add-information .question-accordion::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 150ms ease;
}

.add-information .question-accordion.active::after {
	transform: translateY(2px) rotate(-135deg);
}

/* --------------------------------------------------------------- odpowiedź */

/*
 * Rozwijanie bez liczenia wysokości — siatka zamiast `max-height`.
 *
 * MECHANIZM SIĘ ZMIENIŁ. Wcześniej `pages.js` wpisywał w atrybut `style` wysokość
 * panelu w pikselach, zmierzoną w chwili kliknięcia. Liczba zostawała na zawsze,
 * a wysokość odpowiedzi zależy od stopnia pisma: po powiększeniu tekstu do 150%
 * przy otwartym pytaniu treść potrzebowała 236 px, a panel miał wpisane 97 px.
 * 139 px odpowiedzi stawało się nieosiągalne — u kogoś, kto właśnie powiększył
 * tekst, bo inaczej nie przeczyta.
 *
 * Wiersz siatki o wysokości `0fr` rozwijany do `1fr` robi to samo bez ani jednej
 * liczby: przeglądarka sama zna wysokość treści, w każdej chwili i przy każdym
 * stopniu pisma. Skrypt tylko przełącza klasę i stan dla czytnika ekranu.
 *
 * `min-height: 0` na dziecku jest konieczne: element siatki domyślnie nie kurczy
 * się poniżej swojej treści i wiersz `0fr` nic by nie dał.
 *
 * Zerujemy `max-height` z `pages.css` — inaczej stara reguła trzymałaby panel
 * zamknięty niezależnie od siatki.
 */
.add-information .panel {
	display: grid;
	grid-template-rows: 0fr;
	max-height: none;
	padding-right: 0;
	padding-left: 0;
	border-radius: 0;
	background: none;
	transition: grid-template-rows 300ms ease-out;
}

.add-information .accordion.active + .panel {
	grid-template-rows: 1fr;
}

.add-information .panel > .answear-box {
	min-height: 0;
	overflow: hidden;
}

/* Kto nie chce ruchu, dostaje samo rozwinięcie. Pasek dostępności ustawia tę klasę,
   a `prefers-reduced-motion` łapie ustawienie systemowe — obie drogi prowadzą tu. */
@media (prefers-reduced-motion: reduce) {
	.add-information .panel {
		transition: none;
	}
}

html.klucz-bez-ruchu .add-information .panel {
	transition: none;
}

/*
 * Odstęp pod odpowiedzią siedzi na liście, nie na pudełku.
 *
 * Wiersz siatki o wysokości `0fr` zeruje TREŚĆ pozycji, ale dopełnienie zostaje —
 * zwinięty panel miał przez to 18 px wysokości zamiast zera, pięć razy na stronie.
 * Na liście w środku dopełnienie znika razem z nią, bo `.answear-box` przycina
 * wszystko, co się nie mieści.
 */
.add-information .answear-box {
	padding: 0;
}

.add-information .answear-box ul {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	/* Dolne 18 px to odstęp pod odpowiedzią, przeniesiony tutaj z `.answear-box`.
	   Na pudełku zostawał przy zwiniętym panelu i dawał mu 18 px wysokości zamiast
	   zera; tu znika razem z listą. */
	padding: 0 0 18px;
	list-style: none;
}

.add-information .answear {
	position: relative;
	margin: 0;
	padding-left: 18px;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--pytania-drugi-plan);
}

.add-information .answear::before {
	content: "";
	position: absolute;
	top: .62em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--pytania-akcent);
}

.add-information .answear a {
	color: var(--pytania-akcent);
	text-decoration: underline;
}

/* --------------------------------------------------------------- skróty */

/*
 * Trzy skróty do działań: doładowanie, sklep, przeniesienie numeru.
 *
 * Bez ramek i bez tła — na jasnym pasie kartka w kartce robiłaby trzecią warstwę
 * pudełek na jednym ekranie, licząc kafelki wyżej i wiersze pytań obok. Rozdziela
 * je odstęp i włosowa linia u góry, ta sama co między pytaniami.
 */
.skroty {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin: var(--klucz-blok-y) 0 0;
	padding: var(--klucz-blok-y) 0 0;
	border-top: 1px solid var(--pytania-linia);
	list-style: none;
}

/* Treść przy lewej krawędzi kolumny — tak jak wszystko inne na tym pasie:
   nagłówek sekcji, pytania i ich odpowiedzi. Wyśrodkowanie robiło z tych trzech
   skrótów osobny wysep o innej regule niż reszta bloku. */
.skrot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	text-align: left;
}

.skrot-tytul {
	margin: 0;
	font-family: var(--klucz-font-ui);
	font-size: 1.375rem;
	font-weight: 400;
	letter-spacing: -.02em;
	line-height: 1.2;
	color: var(--pytania-tekst);
}

/* `margin-bottom: auto` dosuwa przycisk do dołu, więc przy nierównych opisach
   wszystkie trzy stoją w jednej linii. */
.skrot-opis {
	max-width: 22rem;
	margin: 0 0 auto;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--pytania-drugi-plan);
}

/*
 * Przycisk w tym samym języku co ten na slajdzie: pigułka, biel na czerwieni
 * marki (4,51:1), strzałka dorysowana pseudoelementem.
 */
.skrot-przycisk {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1.25rem;
	padding: 0.7rem 1.4rem;
	border-radius: 999px;
	background: var(--pakiet-red);
	color: #fff;
	font-family: var(--klucz-font-ui);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 150ms ease;
}

.skrot-przycisk::after {
	content: "→";
	font-weight: 400;
}

.skrot-przycisk:hover,
.skrot-przycisk:focus {
	background: var(--pakiet-red-ciemny);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.skrot-przycisk {
		transition: none;
	}
}

@media screen and (min-width: 700px) {
	.skroty {
		grid-template-columns: repeat(3, 1fr);
		gap: 2.5rem;
	}
}

/* ------------------------------------------------------------ szerokości */

/*
 * Trzy progi, bo blok zachowuje się inaczej na każdym:
 *
 *   telefon   — jedna kolumna, nagłówek nad wierszami, ciasne dopełnienie
 *   tablet    — jedna kolumna, luźniej; dwie byłyby za wąskie na pytania,
 *               z których część ma po dwa wiersze tekstu
 *   desktop   — dwie kolumny jak w makiecie: nagłówek po lewej, wiersze po prawej
 */

/* Na każdym progu zmienia się tylko dopełnienie treści — rozciągnięcie tła
   zostaje takie samo, bo pas ma być pełny niezależnie od szerokości. */
@media screen and (min-width: 768px) {
	.add-information {
		padding: var(--klucz-pas-y) 32px;
	}

	.add-information-title {
		margin-bottom: 26px;
	}
}

@media screen and (min-width: 1024px) {
	.add-information {
		/*
		 * 35 px, tyle samo co ciemny pas „dlaczego Klucz” (`taryfa.css`, `.dlaczego`).
		 * Stało tu 44 px i przez to dwa pasy jeden pod drugim zaczynały treść
		 * w innym miejscu: ciemny na 35, jasny na 44. Na oko dziewięć pikseli, ale
		 * te sekcje stoją bezpośrednio nad sobą i krawędź widać.
		 */
		padding: var(--klucz-pas-y) var(--klucz-margines-boczny);
	}

	/* Dwie kolumny na opakowaniu, nie na pasie: pas ma zostać pełnej szerokości,
	   a dzielić się ma tylko treść w środku. */
	.add-information-wnetrze {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 56px;
		align-items: start;
	}

	/* Pod nagłówkiem i pytaniami naraz, na całą szerokość kolumny. */
	.skroty {
		grid-column: 1 / -1;
	}

	/* Nagłówek zostaje przy górze swojej kolumny, nawet gdy wierszy jest dużo. */
	.add-information-title-container,
	.add-information-title {
		margin-bottom: 0;
	}

	.add-information .question-accordion {
		font-size: 1rem;
		padding: 19px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.add-information .question-accordion::after {
		transition: none;
	}
}