/* Stacja uzdatniania wody do domu: /lp/stacja-uzdatniania-wody/.
   Uzasadnienie strony i jej osi: template-parts/content-home-station.php.

   ── KONWENCJA ARKUSZY W TYM MOTYWIE ────────────────────────────────────
   Każdy landing ma własny arkusz, a jego reguły są scope'owane pod klasę
   blueprintu z filtra body_class w functions.php. Klasa jest nadawana TAM -
   bez niej arkusz może być poprawnie zakolejkowany i mimo to nie zadziała.

   Komponenty .lp-related-grid i .lp-choice-single są celowo powtórzone tutaj,
   tak samo jak w bacteria.css i well-hub.css. To NIE jest duplikacja przez
   nieuwagę, tylko przyjęty wzorzec: landing nie zależy od arkusza innego
   landingu. .lp-check-list dokładamy z tego samego powodu - istniała dotąd
   wyłącznie w well-hub.css.

   MOBILE FIRST. Liczba kolumn zawsze JAWNA, nigdy auto-fit - reguła projektu
   z landingu bakterie.

   Ten motyw NIE MA builda. CSS serwowany wprost, cache-busting przez
   filemtime() w functions.php - nie dodawaj minifikacji bez ustalenia. */

/* ── Parametr -> stopien: rdzen strony ─────────────────────────────────── */

/* Symbol pierwiastka jest sygnalem rozpoznawczym, nie ozdoba: czlowiek
   z wynikiem analizy w reku szuka wzrokiem "Fe" albo "Mn", a nie zdania. */

/* Notka o wspoldzieleniu stopni. To ona tlumaczy, dlaczego jedno urzadzenie
   bywa odpowiedzia na kilka parametrow - czyli sedno tej strony. */

/* ── Wodociag kontra studnia ───────────────────────────────────────────── */

/* ── Typowe uklady ─────────────────────────────────────────────────────── */

/* Numerowana lista, bo w stacji KOLEJNOSC stopni ma znaczenie techniczne -
   czesc technologii nie zadziala bez poprzedzajacej. Lista punktowana
   sugerowalaby zbior dowolny. */

/* ── Komponenty wspolne, powtorzone za konwencja ────────────────────────
   Patrz komentarz na gorze pliku: kazdy landing definiuje to, czego uzywa. */

.lp-blueprint-home-station .lp-check-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-blueprint-home-station .lp-check-list li {
	position: relative;
	margin-bottom: 12px;
	padding-left: 30px;
	color: var(--lp-muted, #58627a);
	line-height: 1.6;
}

.lp-blueprint-home-station .lp-check-list li::before {
	content: "";
	position: absolute;
	top: 0.55em;
	left: 0;
	width: 12px;
	height: 12px;
	background: var(--lp-yellow, #fabe28);
	border-radius: 2px;
}

.lp-blueprint-home-station .lp-check-list strong {
	color: var(--lp-navy, #000457);
	font-weight: 500;
}

.lp-blueprint-home-station .lp-related-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.lp-blueprint-home-station .lp-related-grid a {
	display: block;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid var(--lp-line, #d6dce8);
	color: inherit;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.lp-blueprint-home-station .lp-related-grid a:hover,
.lp-blueprint-home-station .lp-related-grid a:focus-visible {
	border-color: var(--lp-blue, #00159d);
	box-shadow: 0 2px 12px rgba(0, 21, 157, .08);
}

.lp-blueprint-home-station .lp-related-grid strong {
	display: block;
	margin-bottom: 5px;
	color: var(--lp-navy, #000457);
	font-size: 1.05rem;
	font-weight: 500;
}

.lp-blueprint-home-station .lp-related-grid span {
	display: block;
	color: var(--lp-muted, #58627a);
	font-size: 0.9rem;
	line-height: 1.5;
}

.lp-blueprint-home-station .lp-choice-single {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 16px;
	color: var(--lp-muted, #58627a);
	line-height: 1.5;
}

.lp-blueprint-home-station .lp-choice-single input {
	flex: 0 0 auto;
	margin-top: 3px;
}

/* ── Od 640 px: dwie kolumny ───────────────────────────────────────────── */

@media (min-width: 640px) {

	.lp-blueprint-home-station .lp-related-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

/* ── Od 1024 px ────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
	/* Osiem parametrow dzieli sie na cztery kolumny rowno, w dwa rzedy.
	   Trzy kolumny zostawialyby w drugim rzedzie dwa kafelki i dziure. */

	.lp-blueprint-home-station .lp-related-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ── ROZDZIELNIA ────────────────────────────────────────────────────────
   Rdzeń huba. Karty SORTUJĄ, nie tłumaczą technologii - wyjaśnienia mają
   własne strony w /wiedza/ i /dom/, powielanie ich tutaj tworzyłoby
   kanibalizację. Patrz komentarz w content-home-station.php. */

.lp-blueprint-home-station .lp-router-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

.lp-blueprint-home-station .lp-router-card {
	display: flex;
	flex-direction: column;
	padding: 22px 24px;
	background: #fff;
	border: 1px solid var(--lp-line, #d6dce8);
	border-left: 3px solid var(--lp-yellow, #fabe28);
}

.lp-blueprint-home-station .lp-router-card h3 {
	margin: 0 0 10px;
	color: var(--lp-navy, #000457);
	font-size: 1.1rem;
	line-height: 1.3;
}

.lp-blueprint-home-station .lp-router-card p {
	margin: 0 0 16px;
	color: var(--lp-muted, #58627a);
	font-size: 0.95rem;
	line-height: 1.6;
}

/* Odnośnik, nie przycisk. Wyjście z huba jest drugorzędne wobec formularza -
   człowiek, który się nie rozpoznał, ma zostać, a nie szukać wyjścia. */
.lp-blueprint-home-station .lp-router-card__link {
	margin-top: auto;
	align-self: flex-start;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--lp-yellow, #fabe28);
	color: var(--lp-blue, #00159d);
	font-weight: 500;
	text-decoration: none;
}

.lp-blueprint-home-station .lp-router-card__link::after {
	content: " →";
}

.lp-blueprint-home-station .lp-router-card--wide {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
}

.lp-blueprint-home-station .lp-router-card__foto {
	margin: 0;
}

.lp-blueprint-home-station .lp-router-card__foto img {
	display: block;
	width: 100%;
	height: auto;
}

.lp-blueprint-home-station .lp-router-card__foto figcaption {
	margin-top: 8px;
	color: var(--lp-muted, #58627a);
	font-size: 0.82rem;
	line-height: 1.5;
}

/* ── OCHRONA INSTALACJI ─────────────────────────────────────────────────
   Argument ochronny, nie diagnostyczny - działa na człowieka, który uważa,
   że jego woda jest w porządku. Rozdzielenie zakresów jest OBOWIĄZKOWE:
   filtr łapie cząstki, kamień zatrzymuje zmiękczacz. Klient, który kupi sam
   filtr i zobaczy zakamieniony kocioł, będzie miał prawo czuć się oszukany. */

.lp-blueprint-home-station .lp-protection-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-bottom: 24px;
}

.lp-blueprint-home-station .lp-protection-split h3 {
	margin: 0 0 10px;
	color: var(--lp-navy, #000457);
	font-size: 1.15rem;
}

.lp-blueprint-home-station .lp-protection-split p {
	margin: 0 0 10px;
	color: var(--lp-muted, #58627a);
	line-height: 1.6;
}

.lp-blueprint-home-station .lp-protection-split__uwaga {
	padding-left: 14px;
	border-left: 3px solid var(--lp-line, #d6dce8);
	color: var(--lp-navy, #000457) !important;
	font-weight: 500;
}

/* ── PROCES DOBORU ──────────────────────────────────────────────────────
   Domyka lukę E-E-A-T po usunięciu sekcji o kosztach i typowych układach,
   a NIE dubluje /lp/studnia/, bo mówi o obsłudze klienta, nie o technologii. */

.lp-blueprint-home-station .lp-process-list {
	counter-reset: krok;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

.lp-blueprint-home-station .lp-process-list li {
	position: relative;
	padding-left: 46px;
	counter-increment: krok;
}

.lp-blueprint-home-station .lp-process-list li::before {
	content: counter(krok);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: var(--lp-yellow, #fabe28);
	color: var(--lp-navy, #000457);
	font-size: 0.95rem;
	font-weight: 500;
}

.lp-blueprint-home-station .lp-process-list strong {
	display: block;
	margin-bottom: 4px;
	color: var(--lp-navy, #000457);
	font-size: 1.05rem;
	font-weight: 500;
}

.lp-blueprint-home-station .lp-process-list span {
	display: block;
	color: var(--lp-muted, #58627a);
	line-height: 1.6;
}

/* ── ŚCIEŻKA DOBORU ─────────────────────────────────────────────────────
   ⚠️ ŚCIEŻKA NIE JEST BRAMKĄ. Panel startuje zwinięty, a formularz niżej
   działa niezależnie od tego, czy ktoś go rozwinie. Bez JavaScriptu panel
   zostaje zwinięty i strona nadal prowadzi do formularza. */

.lp-blueprint-home-station .lp-path {
	background: var(--lp-soft, #f4f7fb);
	border: 1px solid var(--lp-line, #d6dce8);
}

.lp-blueprint-home-station .lp-path__toggle {
	display: block;
	width: 100%;
	padding: 22px 24px;
	background: none;
	border: 0;
	color: var(--lp-navy, #000457);
	text-align: left;
	cursor: pointer;
}

.lp-blueprint-home-station .lp-path__toggle-main {
	display: block;
	font-size: 1.15rem;
	font-weight: 500;
}

.lp-blueprint-home-station .lp-path__toggle-main::after {
	content: " +";
	color: var(--lp-blue, #00159d);
}

.lp-blueprint-home-station .lp-path__toggle[aria-expanded="true"] .lp-path__toggle-main::after {
	content: " −";
}

.lp-blueprint-home-station .lp-path__toggle-sub {
	display: block;
	margin-top: 4px;
	color: var(--lp-muted, #58627a);
	font-size: 0.92rem;
}

.lp-blueprint-home-station .lp-path__panel {
	padding: 0 24px 24px;
}

.lp-blueprint-home-station .lp-path__q {
	margin: 0 0 22px;
	padding: 18px 0 0;
	border: 0;
	border-top: 1px solid var(--lp-line, #d6dce8);
}

.lp-blueprint-home-station .lp-path__q legend {
	padding: 0;
	color: var(--lp-navy, #000457);
	font-size: 1.02rem;
	font-weight: 500;
}

.lp-blueprint-home-station .lp-path__opcje {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
}

.lp-blueprint-home-station .lp-path__opcje label {
	position: relative;
	display: inline-flex;
	padding: 9px 15px;
	background: #fff;
	border: 1px solid var(--lp-line, #d6dce8);
	color: var(--lp-navy, #000457);
	font-size: 0.93rem;
	cursor: pointer;
}

/* Kontrolka zostaje w drzewie dla czytników ekranu, tylko schodzi z oczu. */
.lp-blueprint-home-station .lp-path__opcje input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.lp-blueprint-home-station .lp-path__opcje label:has(input:checked) {
	background: var(--lp-yellow, #fabe28);
	border-color: var(--lp-yellow, #fabe28);
}

.lp-blueprint-home-station .lp-path__opcje label:has(input:focus-visible) {
	outline: 3px solid var(--lp-blue, #00159d);
	outline-offset: 2px;
}

/* Odpowiedzi są w HTML od początku - ukryte, nie generowane. */
.lp-blueprint-home-station .lp-path__odp p {
	display: none;
	margin: 14px 0 0;
	padding-left: 14px;
	border-left: 3px solid var(--lp-yellow, #fabe28);
	color: var(--lp-muted, #58627a);
	line-height: 1.6;
}

.lp-blueprint-home-station .lp-path__odp p.is-active {
	display: block;
}

.lp-blueprint-home-station .lp-path__koniec {
	padding-top: 18px;
	border-top: 1px solid var(--lp-line, #d6dce8);
}

.lp-blueprint-home-station .lp-path__koniec p {
	margin: 0 0 14px;
	color: var(--lp-muted, #58627a);
	line-height: 1.6;
}

/* ── Od 640 px ──────────────────────────────────────────────────────── */

@media (min-width: 640px) {
	.lp-blueprint-home-station .lp-router-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lp-blueprint-home-station .lp-protection-split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 34px;
	}

	.lp-blueprint-home-station .lp-process-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

/* ── Od 1024 px ─────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
	/* Sześć kart dzieli się na trzy kolumny równo, w dwa rzędy. */
	.lp-blueprint-home-station .lp-router-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px;
	}

	/* Karta ze zdjęciem: treść szersza od fotografii, bo to treść niesie
	   ostrzeżenie o przepływach, a zdjęcie jest dowodem obok. */
	.lp-blueprint-home-station .lp-router-card--wide {
		grid-template-columns: 1.15fr 1fr;
		gap: 32px;
		align-items: center;
	}

	.lp-blueprint-home-station .lp-process-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}