/*
 * SellItProperly.pl — style strony zapowiadającej.
 *
 * Napisane od najmniejszych ekranów w górę. Układ dwukolumnowy włącza się
 * dopiero powyżej 768 px, bo do tej szerokości i tak nie ma na niego miejsca.
 */

/* ---------------------------------------------------------------------------
   Zmienne
   --------------------------------------------------------------------------- */

:root {
	/* Paleta marki proper. Zmiana kolorystyki całej strony to edycja tych trzech linii. */
	--proper-jasny:  #e4faed;
	--proper-sredni: #8ce3ae;
	--proper-ciemny: #0f634a;

	/*
	 * Krój nadpisywany z Customizera. Wartość tutaj jest zapasowa — działa,
	 * gdyby wstawka z ustawieniami z jakiegoś powodu się nie pojawiła.
	 */
	--proper-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

	--proper-blad: #8f2c24;

	/*
	 * Uwaga na kontrast: --proper-sredni na --proper-jasny daje 1,40:1.
	 * To poniżej każdego progu czytelności — średnia zieleń może być na jasnym tle
	 * wyłącznie dużą płaszczyzną (karta, przycisk), nigdy kolorem tekstu.
	 */

	--promien-karty:   40px;
	--szerokosc-tresci: 1240px;

	--odstep-xs: 0.5rem;
	--odstep-s:  1rem;
	--odstep-m:  1.75rem;
	--odstep-l:  3rem;
	--odstep-xl: 5rem;
}

/* ---------------------------------------------------------------------------
   Podstawy
   --------------------------------------------------------------------------- */

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

html {
	/*
	 * Płynne przewijanie obsługuje też skok przez adres z #kotwica, nie tylko
	 * kliknięcie w przycisk. Wyłączone dla osób, które proszą o mniej ruchu.
	 */
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--proper-jasny);
	color: var(--proper-ciemny);
	font-family: var(--proper-font);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Widoczny znacznik aktywnego elementu — bez tego nawigacja klawiaturą to zgadywanka. */
:focus-visible {
	outline: 3px solid var(--proper-ciemny);
	outline-offset: 4px;
	border-radius: 2px;
}

/* Treść dla czytników ekranu, niewidoczna na ekranie. */
.tylko-czytnik {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
   Logo — przyklejone do okna
   --------------------------------------------------------------------------- */

.logo {
	position: fixed;
	top: var(--odstep-s);
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	display: inline-block;
	line-height: 0;
	border-radius: 8px;
}

.logo img {
	width: 132px;
	height: auto;
}

/* ---------------------------------------------------------------------------
   Sekcja komunikatu
   --------------------------------------------------------------------------- */

.hero {
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--odstep-m);
	padding: calc(var(--odstep-xl) + 2rem) var(--odstep-s) var(--odstep-l);
	text-align: center;
}

.hero__lopata {
	width: auto;
	max-height: 34vh;
	margin: 0 auto;
}

/*
 * Blok tekstowy jest kolumną również na telefonie. Bez tego nagłówek i przycisk
 * stykają się — h1 ma wyzerowany margines, a przycisk jest elementem liniowym.
 */
.hero__tresc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--odstep-m);
}

.hero__naglowek {
	margin: 0;
	max-width: 18ch;
	font-size: clamp(1.6rem, 7vw, 2.6rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--proper-ciemny);
	text-wrap: balance;
}


/* ---------------------------------------------------------------------------
   Przyciski
   --------------------------------------------------------------------------- */

.cta {
	display: inline-block;
	padding: 0.95em 2.6em;
	border: 0;
	border-radius: 999px;
	background: var(--proper-sredni);
	color: var(--proper-ciemny);
	font-family: inherit;
	font-size: clamp(0.95rem, 3.6vw, 1.15rem);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, filter 0.15s ease;
}

.cta:hover {
	filter: brightness(0.95);
}

.cta:active {
	transform: translateY(1px);
}

/*
 * Przycisk w sekcji komunikatu jest wyraźnie większy od zwykłego — w makiecie
 * zajmuje ok. 24,5% szerokości okna. Decyduje o tym rozmiar pisma, nie samo
 * wypełnienie. Reguła musi stać po .cta — obie mają tę samą specyficzność,
 * więc o wyniku decyduje kolejność w pliku.
 */
.cta--hero {
	font-size: clamp(1rem, 1.5vw, 1.5rem);
	padding: 1.15em 3.1em;
}

/* ---------------------------------------------------------------------------
   Sekcja formularza
   --------------------------------------------------------------------------- */

.formularz-sekcja {
	padding: var(--odstep-l) var(--odstep-s) var(--odstep-xl);
}

.formularz-sekcja__wnetrze {
	position: relative; /* punkt odniesienia dla nakładki z podziękowaniem */
	max-width: var(--szerokosc-tresci);
	margin: 0 auto;
}

.karta {
	background: var(--proper-sredni);
	border-radius: var(--promien-karty);
	padding: var(--odstep-m);
}

.pole {
	margin-bottom: var(--odstep-s);
}

.pole__etykieta {
	display: block;
	margin-bottom: 0.15rem;
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--proper-ciemny);
}

.pole__input {
	display: block;
	width: 100%;
	padding: 0.2em 0 0.45em;
	border: 0;
	border-bottom: 2px solid var(--proper-ciemny);
	border-radius: 0; /* iOS sam dokłada zaokrąglenie polom tekstowym */
	background: transparent;
	color: var(--proper-ciemny);
	font-family: inherit;
	font-size: 1.05rem;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
}

.pole__input:focus {
	outline: 0;
	border-bottom-width: 3px;
	padding-bottom: calc(0.45em - 1px); /* rekompensata, żeby linia nie podskakiwała */
}

.pole__input:focus-visible {
	outline: 0;
}

/* Pola generowane przez wtyczkę — typy inne niż zwykły tekst */

.pola {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.pole--polowa {
	grid-column: span 1;
}

.pole__gwiazdka {
	margin-left: 0.2em;
	opacity: 0.7;
}

.pole__input--textarea {
	resize: vertical;
	min-height: 5.5em;
}

.pole__input--select {
	/*
	 * Natywna strzałka listy rozwijanej jest szara i zupełnie nie pasuje
	 * do reszty, więc rysujemy własną w kolorze marki.
	 */
	background-image: linear-gradient(45deg, transparent 50%, var(--proper-ciemny) 50%),
	                  linear-gradient(135deg, var(--proper-ciemny) 50%, transparent 50%);
	background-position: calc(100% - 14px) calc(50% - 1px), calc(100% - 9px) calc(50% - 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2rem;
	cursor: pointer;
}

.pole__wybor {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	padding-top: 0.3rem;
}

.pole__opcja {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

.pole__opcja input {
	accent-color: var(--proper-ciemny);
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
}

/* Błędy walidacji */

.pole__blad,
.karta__blad {
	display: block;
	margin-top: 0.4rem;
	color: var(--proper-blad);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.4;
}

.karta__blad {
	margin: 0 0 var(--odstep-m);
}

.pole--blad .pole__input {
	border-bottom-color: var(--proper-blad);
	border-bottom-width: 3px;
}

.zgoda--blad {
	color: var(--proper-blad);
}

/* Pułapka na roboty — poza ekranem, ale nie display:none.
   Część botów pomija pola ukryte tą właściwością, a o to nam nie chodzi. */
.pulapka {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Zgoda na przetwarzanie danych */

.zgoda {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin: var(--odstep-m) 0;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--proper-ciemny);
}

/*
 * Komunikat o braku zgody musi stanąć pod treścią zgody, nie obok niej.
 * Bez wymuszenia pełnej szerokości staje się kolejnym elementem w tym samym
 * wierszu i ląduje z boku, daleko od pola, którego dotyczy. Wcięcie równa go
 * do tekstu zgody, a nie do kwadracika.
 */
.zgoda .pole__blad {
	flex: 0 0 100%;
	margin-top: 0.15rem;
	margin-left: calc(1.15rem + 0.7rem);
}

.zgoda input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.1rem 0 0;
	accent-color: var(--proper-ciemny);
	cursor: pointer;
}

.zgoda a {
	color: var(--proper-ciemny);
	text-underline-offset: 3px;
}

.wyslij {
	display: block;
	width: 100%;
	padding: 0.9em 1em;
	border: 0;
	border-radius: 999px;
	background: var(--proper-ciemny);
	color: var(--proper-jasny);
	font-family: inherit;
	font-size: 1.1rem;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s ease;
}

.wyslij:hover {
	filter: brightness(1.15);
}

.wyslij:active {
	transform: translateY(1px);
}

/* ---------------------------------------------------------------------------
   Stopka kontaktowa
   --------------------------------------------------------------------------- */

.stopka {
	margin-top: var(--odstep-m);
	text-align: center;
	font-size: 0.95rem;
	color: var(--proper-ciemny);
}

.stopka a {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 3px;
}

.stopka a:hover {
	text-decoration: underline;
}

.stopka__separator {
	margin: 0 0.4em;
}

/* ---------------------------------------------------------------------------
   Podziękowanie
   --------------------------------------------------------------------------- */

.komunikat {
	background: var(--proper-ciemny);
	color: var(--proper-sredni);
	border-radius: var(--promien-karty);
	padding: var(--odstep-l) var(--odstep-m);
	text-align: center;
}

.komunikat p {
	/*
	 * Wiersz tekstu nie może ciągnąć się przez całą kartę — w makiecie
	 * akapit łamie się po ok. 50 znakach i to trzyma go czytelnym.
	 */
	max-width: 52ch;
	margin: 0 auto var(--odstep-l);
	font-size: clamp(0.95rem, 3.4vw, 1.1rem);
	line-height: 1.6;
}

.komunikat__podpis {
	margin: var(--odstep-xl) 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--odstep-s);
}

.komunikat__podpis img {
	width: clamp(140px, 34vw, 200px);
}

/*
 * Podziękowanie zastępuje kartę formularza w tym samym miejscu.
 * Stopka z kontaktem zostaje widoczna — po wysłaniu zgłoszenia numer telefonu
 * jest komuś potrzebny częściej, nie rzadziej.
 */
.formularz-sekcja--wyslano .karta {
	display: none;
}

/* ---------------------------------------------------------------------------
   Od 769 px — układ dwukolumnowy
   --------------------------------------------------------------------------- */

@media (min-width: 769px) {
	:root {
		--promien-karty: 48px;
	}

	.logo {
		top: 3.4vh;
		left: 3vw;
		transform: none;
	}

	.logo img {
		width: clamp(150px, 13.4vw, 260px);
	}

	.hero {
		/*
		 * Bez odstępu bocznego — dwie równe kolumny muszą mieć środki dokładnie
		 * na 25% i 75% szerokości okna, tak jak w makiecie. Każdy padding tutaj
		 * przesuwa oba środki do wewnątrz i układ przestaje się zgadzać.
		 */
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 0;
		padding: var(--odstep-xl) 0 var(--odstep-l);
		text-align: left;
	}

	.hero__lopata {
		/*
		 * Rozmiar wyznacza szerokość, nie wysokość. Przy obrazku o proporcji 1:2
		 * w kolumnie szerszej niż on sam max-height nie zadziała — przeglądarka
		 * i tak liczy wysokość z szerokości naturalnej. W makiecie rysunek zajmuje
		 * 16,8% szerokości okna; kanwa PNG jest o ~11% szersza od samego rysunku,
		 * stąd 18,7vw.
		 */
		width: clamp(180px, 18.7vw, 440px);
		max-height: none;
		justify-self: center;
	}

	.hero__tresc {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: clamp(2rem, 5.5vh, 4.5rem);
		padding-inline: 1.5rem;
		text-align: center;
	}

	.hero__naglowek {
		/*
		 * Bez wyrównywania długości linii — makieta ma konkretny podział:
		 * "na sprzedaż swojej" jest linią najdłuższą i to ona wyznacza szerokość.
		 */
		max-width: 20ch;
		font-size: clamp(2.1rem, 3.3vw, 3.9rem);
		text-wrap: normal;
	}

	.formularz-sekcja {
		/*
		 * Bez odstępu bocznego — o szerokości karty decyduje wyłącznie
		 * .formularz-sekcja__wnetrze, liczone względem okna.
		 */
		padding: var(--odstep-l) 0 var(--odstep-xl);
	}

	.formularz-sekcja__wnetrze {
		/*
		 * 75% szerokości okna, wyśrodkowane — zmierzone w makiecie
		 * (karta od 12,4% do 87,5% szerokości kadru). Ograniczenie w pikselach
		 * powstrzymuje ją przed rozjechaniem się na bardzo szerokich ekranach.
		 */
		width: 75%;
		max-width: 1240px;
	}

	.karta {
		/*
		 * Wyściółka celowo oszczędna. Karta ma być niska, żeby wokół niej
		 * zostało jasne tło strony — puste pole średniej zieleni nad pierwszym
		 * polem tylko rozdyma kartę i nic nie wnosi.
		 */
		padding: var(--odstep-m) var(--odstep-l) var(--odstep-m);
	}

	/*
	 * Dopiero tutaj siatka ma dwie kolumny — pole oznaczone jako „połowa"
	 * zajmuje jedną z nich, zwykłe rozciąga się na obie.
	 */
	.pola {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--odstep-l);
	}

	.pole {
		grid-column: 1 / -1;
		margin-bottom: 0.5rem;
	}

	.pole--polowa {
		grid-column: span 1;
	}

	.pole__input {
		padding: 0.15em 0 0.35em;
	}

	.zgoda {
		margin: var(--odstep-s) 0 var(--odstep-s);
	}

	.pole {
		margin-bottom: var(--odstep-m);
	}

	.pole__etykieta {
		font-size: 1rem;
	}

	.komunikat {
		padding: var(--odstep-xl) var(--odstep-l);
	}

	.komunikat p {
		font-size: 1.2rem;
	}
}