/*
 * Akcja "Razem dla schronisk".
 *
 * Plik dołączany po main.css, z którego korzystamy z klas bazowych (.form-control,
 * .form-custom, .wez-udzial-button, .container-typ, Select2). main.css pozostaje
 * niezmieniony, żeby prace nad akcją nie mogły zepsuć działającej loterii.
 *
 * Strony akcji mają jasne tło, więc powtarzamy tu nadpisania analogiczne do
 * #winner-section - z osobnym identyfikatorem #promo-section.
 */

/* ---------- sekcja zachęty na stronie głównej loterii ---------- */
/* Jedyny fragment tego pliku używany na index.php, czyli na ciemnym tle loterii. */

.promo-cta {
	padding: 60px 0;
	text-align: center;
}
.promo-cta-nadtytul {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0.75;
	margin-bottom: 10px;
}
.promo-cta-tytul {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 55px;
	line-height: 110%;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 20px;
}
.promo-cta-opis {
	max-width: 720px;
	margin: 0 auto 35px;
	font-size: 18px;
	line-height: 150%;
	color: #fff;
}
.promo-cta-buttony {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}
.promo-cta-button {
	font-family: 'Archivo', sans-serif;
	display: inline-block;
	background: var(--zloty);
	border: 2px solid var(--zloty);
	border-radius: 50px;
	padding: 14px 45px;
	font-weight: 700;
	font-size: 18px;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
}
.promo-cta-button:hover {
	background: #fff;
	border-color: #fff;
	color: var(--zloty);
	text-decoration: none;
}
.promo-cta-button-obramowany {
	background: transparent;
	border-color: #fff;
	color: #fff;
}
.promo-cta-button-obramowany:hover {
	background: #fff;
	border-color: #fff;
	color: #25006F;
}

/* ---------- strony akcji: białe tło ---------- */

/*
 * main.css nadaje body fioletowy gradient loterii i biały tekst. Strony akcji mają
 * jasny layout, więc nadpisujemy jedno i drugie na poziomie body. Bez tego pod
 * nakładką ze zwierzętami prześwitywało tło loterii, a nagłówek pasa wyglądał,
 * jakby sięgał niżej niż grafika.
 */
body.promo-strona {
	background: #fff;
	color: #282828;
}

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

.promo-header {
	position: relative;
	/* Nakładka ze zwierzętami wystaje poniżej pasa nagłówka, więc bez overflow:hidden
	   (klasa .header-container z main.css je obcinała - dlatego jej tu nie używamy).
	   Odstęp pod nagłówkiem daje padding sekcji, nie margines: margines na tym
	   elemencie odsłaniałby tło body pod zwierzętami. */
	overflow: visible;
}
.promo-header .promo-header-tlo {
	display: block;
	width: 100%;
	height: auto;
}
.promo-header .promo-header-zwierzeta {
	position: absolute;
	left: 2%;
	bottom: -18%;
	width: 25%;
	max-width: 480px;
	height: auto;
}

/* ---------- sekcja formularza na jasnym tle ---------- */

section#promo-section {
	background: none;
	background: #fff;
	/* Musi pomieścić część nakładki ze zwierzętami wystającą poniżej pasa nagłówka
	   (przy 1920 px to ok. 60 px) i dać oddech przed nagłówkiem tekstowym. */
	padding-top: 110px;
}
#promo-section h2 {
	font-family: 'Archivo', sans-serif;
	padding-top: 0 !important;
	color: #000;
	font-weight: 900;
	font-size: 45px;
	text-transform: uppercase;
	margin-bottom: 40px;
}
#promo-section .zadanie {
	font-family: 'Archivo', sans-serif;
	font-weight: 400;
	color: #282828;
	font-size: 55px;
	line-height: 118%;
	margin-bottom: 50px;
}
#promo-section .zadanie span {
	font-weight: 900;
}
#promo-section .h2-desc {
	margin-top: 0;
	margin-bottom: 40px;
	color: #3C3C3C;
	font-size: 20px;
}
#promo-section .req {
	color: #FF0000;
}
#promo-section small.light {
	color: #3C3C3C;
}
#promo-section .form-body .form-group label {
	margin-top: 15px;
	color: #3C3C3C;
	font-size: 16px;
}
#promo-section .form-body .form-group input.form-custom,
#promo-section .form-body .form-group select.form-custom {
	border-color: #3C3C3C;
	color: #3C3C3C;
}
#promo-section .form-group.error input,
#promo-section .form-group.error select {
	border: 1px solid #FF0000 !important;
}
#promo-section .form-group.error .form-error,
#promo-section .custom-checkbox.error label {
	color: #FF0000 !important;
}
#promo-section .form-footer .custom-checkbox label {
	color: #3C3C3C;
}
/* main.css daje stopce formularza margin:45px auto - powiększamy odstęp
   między tabelą klas a zgodami. */
#promo-section .form-footer {
	margin-top: 70px;
}
/* Odstęp między blokiem zgód a przyciskiem wysyłki. */
#promo-section .form-footer .promo-akcja-wyslij {
	margin-top: 50px;
}
#promo-section .form-footer .custom-checkbox {
	margin-bottom: 12px;
}
/* Nagłówek nad ostatnią zgodą (oświadczenie dotyczące danych nauczycieli/opiekunów). */
#promo-section .promo-zgoda-naglowek {
	font-weight: 700;
	font-size: 14px;
	color: #282828;
	margin: 20px 0 8px;
}

/*
 * Checkboxy zgód. main.css przy zaznaczeniu ustawia ramkę na białą, a „ptaszka”
 * rysuje kolorem #fff - na ciemnym tle loterii to widać, na jasnym tle akcji
 * zaznaczone pole znikało. Zaznaczenie wypełniamy więc kolorem akcentu, a biały
 * znacznik zostaje i daje wysoki kontrast. Cień z main.css wyłączamy, bo na białym
 * tle robi rozmytą plamę pod kwadratem.
 */
#promo-section .customcheck .checkmark {
	border: 1px solid #ABABAB;
	background-color: #fff;
	filter: none;
}
#promo-section .customcheck:hover input ~ .checkmark {
	background-color: #F1F1F1;
}
#promo-section .customcheck input:checked ~ .checkmark {
	background-color: var(--zloty);
	border: 1px solid var(--zloty);
}
#promo-section .customcheck .checkmark:after {
	border-color: #fff;
}
/* Brakującą zgodę oznaczamy też na samym kwadracie, nie tylko na tekście. */
#promo-section .custom-checkbox.error .checkmark {
	border-color: #FF0000;
}
#promo-section .form-footer a {
	color: var(--zloty);
}

/* ---------- Select2 na jasnym tle ---------- */
/*
 * main.css stylizuje Select2 pod ciemne tło loterii: białe ramki, biały tekst i
 * granatowy rozwijany panel. Na jasnym tle akcji pole wygląda, jakby nie miało
 * obramowania (a wpisana nazwa szkoły jest niewidoczna), dlatego przebarwiamy
 * wszystkie warstwy. Identyfikator #promo-section daje wyższą specyficzność niż
 * reguły z main.css, więc nie potrzebujemy !important poza tym jednym miejscem,
 * gdzie main.css sam go użył.
 */
#promo-section .school-select2-group .select2-container--default .select2-selection--single {
	border: 1px solid #3C3C3C;
	background: #fff;
}
#promo-section .school-select2-group .select2-container--default.select2-container--focus .select2-selection--single,
#promo-section .school-select2-group .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--zloty);
}
#promo-section .school-select2-group .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #3C3C3C;
}
#promo-section .school-select2-group .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #808080;
}
#promo-section .school-select2-group .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: #3C3C3C transparent transparent transparent;
}
#promo-section .school-select2-group .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-color: transparent transparent #3C3C3C transparent;
}
#promo-section .school-select2-group .select2-selection__clear {
	color: #808080;
}
#promo-section .school-select2-group .select2-selection__clear:hover {
	color: #3C3C3C;
}

/* Panel rozwijany trafia do #promo-form .form-body (dropdownParent), więc mieści się
   w zasięgu tych reguł. */
#promo-section .form-body .select2-dropdown {
	border: 1px solid #D5D5D5;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
	background: #fff;
	backdrop-filter: none;
}
#promo-section .form-body .select2-search--dropdown {
	background: #F7F7F7;
	border-bottom: 1px solid #E2E2E2;
}
#promo-section .form-body .select2-search--dropdown .select2-search__field {
	border: 1px solid #C4C4C4;
	background: #fff;
	color: #3C3C3C;
}
#promo-section .form-body .select2-search--dropdown .select2-search__field::placeholder {
	color: #A0A0A0;
}
#promo-section .form-body .select2-results__option {
	color: #3C3C3C;
}
#promo-section .form-body .select2-results__option--selected {
	background: #F1F1F1;
	color: #282828;
}
#promo-section .form-body .select2-results__message {
	color: #808080;
}
#promo-section .form-body .select2-results__option[aria-disabled="true"] {
	color: #B5B5B5;
}
#promo-section .form-body .school-select2-option__meta {
	color: #808080;
}
#promo-section .form-body .select2-results__option--highlighted.select2-results__option--selectable .school-select2-option__meta {
	color: rgba(255, 255, 255, 0.9);
}

/* ---------- kroki formularza ---------- */

.promo-ukryte {
	display: none;
}
.promo-sekcja {
	margin-bottom: 40px;
}
.promo-sekcja-naglowek {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 30px;
	color: #282828;
	text-align: center;
	margin-bottom: 25px;
}
/* Po dodaniu szkoły blokujemy jej edycję - dane są już w sesji zgłoszenia. */
.promo-zablokowana {
	opacity: 0.6;
	pointer-events: none;
}
.promo-akcja {
	margin-top: 25px;
	margin-bottom: 10px;
}
/*
 * Przyciski akcji: wygląd jak .nagrody-button z landingu (zielone tło, biały napis),
 * ale rozciągnięte na pełną szerokość kontenera zgodnie z makietą. Dzięki temu
 * „dodaj szkołę” i „dodaj klasę” mają szerokość pól formularza (.form-body),
 * a „wyślij” szerokość stopki formularza (.form-footer), tak jak w projekcie.
 * Nie używamy .wez-udzial-button, żeby nie ścierać się o specyficzność z main.css.
 */
.promo-button {
	font-family: 'Archivo', sans-serif;
	display: block;
	width: 100%;
	background: var(--zloty);
	border: 1px solid var(--zloty);
	border-radius: 50px;
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 110%;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: #fff;
	padding: 14px 32px;
	transition: 0.5s ease all;
	cursor: pointer;
}
.promo-button:hover {
	color: var(--zloty);
	background: #fff;
}
.promo-button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.promo-button:disabled:hover {
	color: #fff;
	background: var(--zloty);
}

.promo-komunikat {
	font-size: 14px;
	line-height: 18px;
	margin-bottom: 10px;
	min-height: 18px;
}
.promo-komunikat-blad {
	color: #FF0000;
}
.promo-komunikat-ok {
	color: var(--zloty);
}

/* ---------- nazwa wybranej szkoły ---------- */

.promo-szkola-wybrana {
	margin-bottom: 35px;
	padding-left: 18px;
	border-left: 4px solid var(--zloty);
}
.promo-szkola-etykieta {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--zloty);
	margin-bottom: 4px;
}
.promo-szkola-nazwa {
	display: block;
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 26px;
	line-height: 120%;
	color: #282828;
}
.promo-szkola-miasto {
	display: block;
	font-size: 16px;
	color: #808080;
	margin-top: 4px;
}

/* ---------- tabela zarejestrowanych klas ---------- */

.promo-klasy-box {
	/* Odstęp od przycisku „dodaj klasę” i komunikatu nad tabelą. */
	margin-top: 60px;
	padding: 25px;
	border: 1px solid #E2E2E2;
	border-radius: 16px;
}
.promo-klasy-tytul {
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: #282828;
}
.promo-klasy-opis {
	font-size: 14px;
	color: #808080;
	margin-bottom: 18px;
}
.promo-klasy-scroll {
	overflow-x: auto;
}
.promo-klasy-tabela {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	color: #3C3C3C;
}
.promo-klasy-tabela th {
	font-weight: 700;
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid #E2E2E2;
	white-space: nowrap;
}
.promo-klasy-tabela td {
	padding: 12px;
	border-bottom: 1px solid #F1F1F1;
	vertical-align: middle;
}
.promo-klasy-tabela tr:last-child td {
	border-bottom: none;
}
.promo-klasy-tabela .promo-klasa-usun {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 700;
	color: var(--czerwony);
	text-decoration: none;
	white-space: nowrap;
}
.promo-klasy-tabela .promo-klasa-usun:hover {
	color: var(--ciemnoczerwony);
	text-decoration: none;
}
.promo-klasy-tabela .promo-klasa-usun-ikona {
	display: block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
/* Blokada podwójnego kliknięcia na czas trwania żądania. */
.promo-klasy-tabela .promo-klasa-usun.promo-usuwanie {
	opacity: 0.5;
	pointer-events: none;
}
.promo-klasy-tabela tr.promo-klasa-zapisana td {
	color: #5a5a5a;
}
.promo-klasy-tabela .promo-klasa-zapisana-akcja {
	color: #ababab;
}
.promo-klasy-pusto td {
	color: #808080;
	text-align: center;
	padding: 25px 12px;
}
.promo-klasy-licznik {
	font-size: 14px;
	color: #808080;
	margin-top: 15px;
}

/* ---------- link do zgłoszenia na ekranie potwierdzenia ---------- */

.promo-link-zgloszenia {
	margin: 30px auto 10px;
	font-size: 16px;
	color: #3C3C3C;
	word-break: break-all;
	max-width: 640px;
}
.promo-link-zgloszenia a {
	color: var(--zloty);
	font-size: 13px;
}

/* ---------- głosowanie: nagłówek z klasą ---------- */

.promo-glosowanie-naglowek {
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
	margin-bottom: 45px;
}
.promo-glosowanie-naglowek .promo-szkola-wybrana {
	margin-bottom: 0;
}
.promo-glosowanie-naglowek-srodek {
	justify-content: center;
}
.promo-glosowanie-zasady {
	margin-bottom: 35px;
}
.promo-glosowanie-tytul {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 30px;
	line-height: 120%;
	color: #282828;
	margin-bottom: 12px;
}
.promo-glosowanie-opis {
	font-size: 16px;
	line-height: 150%;
	color: #3C3C3C;
}

/* ---------- głosowanie: siatka kafelków ---------- */

.promo-zwierzeta-siatka {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.promo-zwierze {
	border: 2px solid transparent;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	transition: border-color 0.15s ease;
}
.promo-zwierze.promo-wybrany {
	border-color: var(--zloty);
}
.promo-zwierze-foto {
	position: relative;
	line-height: 0;
	aspect-ratio: 410 / 274;
	overflow: hidden;
	border-radius: 12px 12px 0 0;
	background: #2e2e2e;
}
.promo-zwierze-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: opacity 0.15s ease;
}
.promo-zwierze.promo-wybrany .promo-zwierze-foto img {
	opacity: 0.4;
}

/* Ramka z punktami: na desktopie odsłaniana po najechaniu, na dotyku po dotknięciu. */
.promo-punkty {
	position: absolute;
	top: 18px;
	left: 18px;
	display: none;
	gap: 8px;
}
.promo-zwierze:hover .promo-punkty,
.promo-zwierze:focus-within .promo-punkty,
.promo-zwierze.promo-otwarty .promo-punkty,
.promo-zwierze.promo-wybrany .promo-punkty {
	display: flex;
}
.promo-punkt {
	width: 52px;
	height: 58px;
	border: 2px solid #E2E2E2;
	border-radius: 8px;
	background: #fff;
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: #808080;
	cursor: pointer;
	padding: 0;
	line-height: 54px;
}
.promo-punkt:hover {
	border-color: var(--zloty);
	color: var(--zloty);
}
.promo-punkt-wybrany {
	border-color: var(--zloty);
	color: var(--zloty);
	background: #fff;
}
/* Punktacja zajęta przez inne zwierzę - kliknięcie ją przeniesie. */
.promo-punkt-zajety {
	border-style: dashed;
	color: #C4C4C4;
}
.promo-zwierze-badge {
	position: absolute;
	top: 16px;
	right: 16px;
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 14px;
	line-height: 1;
	color: #fff;
	background: var(--zloty);
	border-radius: 50px;
	padding: 8px 14px;
}
.promo-zwierze-badge:empty {
	display: none;
}
.promo-zwierze-tresc {
	padding: 18px;
}
.promo-zwierze-nazwa {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 20px;
	color: #282828;
	margin-bottom: 6px;
}
.promo-zwierze-schronisko {
	font-size: 13px;
	font-weight: 700;
	color: var(--zloty);
	margin-bottom: 10px;
}
.promo-zwierze-opis {
	font-size: 15px;
	line-height: 145%;
	color: #3C3C3C;
}
.promo-zwierze-opis p {
	margin: 0 0 0.5em;
}
.promo-zwierze-opis p:last-child {
	margin-bottom: 0;
}
.promo-zwierze-opis ul,
.promo-zwierze-opis ol {
	margin: 0.4em 0 0.4em 1.2em;
	padding: 0;
}
.promo-zwierze-opis a {
	color: var(--zloty);
	font-weight: 700;
}

.promo-glosowanie-podsumowanie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin: 35px 0 25px;
}
.promo-glosowanie-licznik {
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: #282828;
}
.promo-wyniki-info {
	margin-top: 45px;
	text-align: center;
	font-size: 18px;
	color: #3C3C3C;
}
.promo-wyniki-info a {
	color: var(--zloty);
	font-weight: 700;
}
.promo-regulamin-link {
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 145%;
}
.promo-regulamin-link-srodek {
	margin-top: 18px;
	text-align: center;
}
.promo-regulamin-link a {
	color: var(--zloty);
	font-weight: 700;
	text-decoration: underline;
}
.promo-regulamin-link a:hover,
.promo-regulamin-link a:focus {
	color: var(--zloty);
	opacity: 0.85;
}

/* ---------- widok po oddaniu głosów ---------- */

.promo-dziekujemy {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 55px;
	line-height: 110%;
	text-align: center;
	color: var(--zloty);
	padding-top: 20px;
	margin-bottom: 25px;
}
.promo-dziekujemy-opis {
	max-width: 640px;
	margin: 0 auto 40px;
	text-align: center;
	font-size: 16px;
	line-height: 150%;
	color: #3C3C3C;
}
.promo-karty-siatka {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.promo-karta {
	border: 1px solid #E2E2E2;
	border-radius: 14px;
	overflow: hidden;
	padding-bottom: 18px;
}
.promo-karta-foto {
	position: relative;
	line-height: 0;
	aspect-ratio: 396 / 260;
	overflow: hidden;
	background: #2e2e2e;
}
.promo-karta-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.promo-karta-badge {
	position: absolute;
	top: 16px;
	right: 16px;
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 14px;
	line-height: 1;
	color: #fff;
	background: var(--zloty);
	border-radius: 50px;
	padding: 8px 14px;
}
.promo-karta-nazwa {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 22px;
	color: #282828;
	margin: 18px 18px 6px;
}
.promo-karta-schronisko {
	font-size: 13px;
	font-weight: 700;
	color: var(--zloty);
	margin: 0 18px 10px;
}
.promo-karta-opis {
	font-size: 15px;
	line-height: 145%;
	color: #3C3C3C;
	margin: 0 18px;
}
.promo-karta-opis p {
	margin: 0 0 0.5em;
}
.promo-karta-opis p:last-child {
	margin-bottom: 0;
}
.promo-karta-opis ul,
.promo-karta-opis ol {
	margin: 0.4em 0 0.4em 1.2em;
	padding: 0;
}
.promo-karta-opis a {
	color: var(--zloty);
	font-weight: 700;
}

/* ---------- widoki TYP na jasnym tle ---------- */

#promo-section .container-typ {
	color: #282828;
}

/*
 * main.css stylizuje a.typ-button wyłącznie wewnątrz .container-typ. W widoku podglądu
 * zgłoszenia ten link leży w .form-body, więc zostawał zupełnie bez stylu. Powtarzamy
 * wygląd przycisku, ale jako wąską pigułkę - to akcja drugorzędna, nie główne CTA,
 * dlatego nie używamy tu pełnej szerokości jak w .promo-button.
 */
#promo-section a.typ-button {
	font-family: 'Archivo', sans-serif;
	display: inline-block;
	background: var(--zloty);
	border: 1px solid var(--zloty);
	border-radius: 50px;
	padding: 14px 32px;
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 110%;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	transition: 0.5s ease all;
}
#promo-section a.typ-button:hover {
	color: var(--zloty);
	background: #fff;
	text-decoration: none;
}
/* Odstęp od tabeli klas - tylko w widoku podglądu, widoki TYP mają własny układ. */
#promo-section .form-body div.typ-button {
	margin-top: 40px;
}

/* ---------- mobile ---------- */

@media (max-width: 991px) {
	.promo-cta {
		padding: 40px 0;
	}
	.promo-cta-tytul {
		font-size: 34px;
	}
	.promo-cta-opis {
		font-size: 16px;
	}
	.promo-cta-button {
		font-size: 16px;
		padding: 12px 30px;
	}
	#promo-section h2 {
		font-size: 30px;
		margin-bottom: 25px;
	}
	#promo-section .zadanie {
		font-size: 32px;
		margin-bottom: 30px;
	}
	.promo-sekcja-naglowek {
		font-size: 24px;
	}
	.promo-szkola-nazwa {
		font-size: 20px;
	}
	section#promo-section {
		padding-top: 60px;
	}
	.promo-header .promo-header-zwierzeta {
		width: 32%;
		bottom: -12%;
	}
	.promo-glosowanie-tytul {
		font-size: 24px;
	}
	.promo-dziekujemy {
		font-size: 34px;
	}
	.promo-zwierzeta-siatka,
	.promo-karty-siatka {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.promo-glosowanie-naglowek {
		gap: 25px;
	}
}

@media (max-width: 767px) {
	.promo-zwierzeta-siatka,
	.promo-karty-siatka {
		grid-template-columns: 1fr;
	}
	/* Brak hovera na małych ekranach - ramka punktów widoczna zawsze (Q25). */
	.promo-punkty {
		display: flex;
	}
}

@media (max-width: 575px) {
	/* Na wąskich ekranach nakładka wchodzi w układ pod pasem nagłówka, więc nic
	   już nie wystaje i sekcja nie potrzebuje zapasu na górze. */
	.promo-header .promo-header-zwierzeta {
		position: static;
		display: block;
		width: 55%;
		margin: -10% auto 0;
	}
	section#promo-section {
		padding-top: 25px;
	}
	.promo-klasy-box {
		padding: 15px;
	}
	.promo-klasy-tabela {
		font-size: 13px;
	}
}