/* „Jak stosować” (page-jak-stosowac.php; redesign na prośbę klienta z 2026-10-14: „tak samo nijaki”).
   Jeden mocny element: schemat w hero (saszetka w środku, cztery sposoby na okrągłych zdjęciach, strzałki do saszetki).
   Dalej spokojnie: „Którą linię wybrać?” jako wiersze z odnośnikami w kolorach linii, hasło na żółtym, porcja i ostrzeżenia
   na kremie. Kroje i marginesy jak w całym sklepie, tekst przy lewej krawędzi. */

.fn .fn-jak-hero, .fn .fn-jak-wybor, .fn .fn-jak-regularnosc, .fn .fn-jak-porcja { padding-inline: var(--fn-margines); }
.fn .fn-jak-tytul {
	margin: 0; font: 800 clamp(2.75rem, 5vw, 5.25rem)/0.95 var(--fn-font-naglowki);
	letter-spacing: -0.03em; color: inherit; text-wrap: balance;
}
.fn .fn-jak-lead { margin: 0; max-width: 34rem; font-size: clamp(1.125rem, 1.4vw, 1.375rem); line-height: 1.5; text-wrap: pretty; }

/* ---------- Hero: tekst i schemat ---------- */
.fn .fn-jak-hero {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 5rem; align-items: center;
	min-height: 100vh; min-height: 100svh; padding-block: 8rem 5rem; background: var(--fn-malina); color: var(--fn-krem); overflow: clip;
}
.fn .fn-jak-tytul-strony {
	margin: 0 0 2rem; font: 800 clamp(3rem, 5.4vw, 6rem)/0.98 var(--fn-font-naglowki);
	letter-spacing: -0.02em; color: var(--fn-krem); text-wrap: balance;
}
.fn .fn-jak-odpowiedz { max-width: 32rem; margin: 0; font-size: clamp(1.25rem, 1.6vw, 1.625rem); line-height: 1.45; }
/* Schemat jest kwadratem; saszetka na tle koła w środku, sposoby w rogach (30% boku), strzałki od podpisów do saszetki. */
.fn .fn-jak-schemat { position: relative; width: 100%; max-width: 46rem; aspect-ratio: 1; margin-inline: auto; }
.fn .fn-jak-schemat::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--fn-malina-600); }
.fn .fn-jak-saszetka {
	position: absolute; left: 50%; top: 50%; width: auto; height: 56%; translate: -50% -50%; rotate: -6deg;
	filter: drop-shadow(0 1.5rem 2rem rgb(22 8 14 / 0.4));
}
.fn .fn-jak-sposoby { margin: 0; padding: 0; list-style: none; }
.fn .fn-jak-sposob { position: absolute; width: 30%; text-align: center; }
.fn .fn-jak-sposob--1 { left: 0; top: 0; }
.fn .fn-jak-sposob--2 { right: 0; top: 3%; }
.fn .fn-jak-sposob--3 { left: 2%; bottom: 0; }
.fn .fn-jak-sposob--4 { right: 0; bottom: 2%; }
.fn .fn-jak-sposob-zdjecie {
	display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 0.35rem solid var(--fn-krem); border-radius: 50%;
	box-shadow: 0 1.25rem 2.5rem -0.5rem rgb(22 8 14 / 0.45);
}
.fn .fn-jak-sposob-podpis { margin: 0.75rem 0 0; }
.fn .fn-jak-sposob-podpis strong { display: block; font: 800 clamp(1.125rem, 1.6vw, 1.5rem)/1.05 var(--fn-font-naglowki); letter-spacing: -0.01em; }
.fn .fn-jak-sposob-podpis span { display: block; margin-top: 0.2rem; font-size: 0.9375rem; line-height: 1.3; opacity: 0.8; }
/* Strzałka z tego samego rysunku co podpisy linii na stronie o marce; obrócona tak, żeby z każdego rogu celowała w saszetkę. */
.fn .fn-jak-strzalka { position: absolute; width: 4.5rem; height: auto; color: var(--fn-zolty); }
.fn .fn-jak-sposob--1 .fn-jak-strzalka { right: -38%; top: 62%; }
.fn .fn-jak-sposob--2 .fn-jak-strzalka { left: -38%; top: 62%; scale: -1 1; }
.fn .fn-jak-sposob--3 .fn-jak-strzalka { right: -38%; top: 2%; scale: 1 -1; }
.fn .fn-jak-sposob--4 .fn-jak-strzalka { left: -38%; top: 2%; scale: -1 -1; }

/* ---------- Którą linię wybrać: wiersze z odnośnikami w kolorach linii ---------- */
.fn .fn-jak-wybor { padding-block: 7rem; background: var(--fn-malina-900); color: var(--fn-krem); }
.fn .fn-jak-wstep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5rem; align-items: end; }
.fn .fn-jak-kiedy { margin: 3.5rem 0 0; padding: 0; list-style: none; border-bottom: 1px solid rgb(255 251 247 / 0.2); }
.fn .fn-jak-kiedy-wiersz {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); column-gap: 3rem; align-items: center;
	padding: 1.5rem 0; border-top: 1px solid rgb(255 251 247 / 0.2);
}
.fn .fn-jak-kiedy-tekst { margin: 0; font: 700 clamp(1.5rem, 2.6vw, 2.5rem)/1.15 var(--fn-font-naglowki); letter-spacing: -0.02em; text-wrap: balance; }
.fn .fn-jak-linia {
	display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1rem; align-items: center;
	min-height: 5.5rem; padding: 0.5rem 1.25rem 0.5rem 0.75rem; border-radius: 1.25rem; text-decoration: none;
	background: var(--fn-linia-kolor) var(--fn-linia-tlo, none) center / cover; color: var(--fn-linia-tekst, var(--fn-krem));
	transition: translate 0.15s ease, box-shadow 0.15s ease;
}
.fn .fn-jak-linia:hover { translate: 0 -2px; box-shadow: 0 0.75rem 1.5rem rgb(22 8 14 / 0.35); }
.fn .fn-jak-linia:focus-visible { outline: 3px solid var(--fn-zolty); outline-offset: 3px; }
.fn .fn-jak-linia-saszetka { justify-self: center; width: auto; max-width: 100%; height: 4.75rem; object-fit: contain; rotate: -8deg; filter: drop-shadow(0 0.5rem 0.75rem rgb(22 8 14 / 0.35)); }
.fn .fn-linia-zestaw .fn-jak-linia-saszetka { height: auto; rotate: 0deg; }
.fn .fn-jak-linia-nazwa { display: block; font: 800 1.625rem/1.05 var(--fn-font-naglowki); letter-spacing: -0.02em; }
.fn .fn-jak-linia-opis { display: block; margin-top: 0.15rem; font-size: 0.9375rem; line-height: 1.3; opacity: 0.9; }

/* ---------- Regularność: hasło na żółtym ---------- */
.fn .fn-jak-regularnosc { padding-block: 7rem; background: var(--fn-zolty); color: var(--fn-malina-900); }
.fn .fn-jak-haslo { max-width: 12ch; margin: 0 0 2rem; font: 800 clamp(3.5rem, 8vw, 9rem)/0.88 var(--fn-font-naglowki); letter-spacing: -0.035em; color: inherit; text-wrap: balance; }

/* ---------- Porcja i ostrzeżenia: krem, etykieta jak informacje o suplemencie na stronie produktu ---------- */
.fn .fn-jak-porcja {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5rem; align-items: start;
	padding-block: 7rem; background: var(--fn-krem); color: var(--fn-malina-900);
}
.fn .fn-jak-porcja .fn-jak-lead { margin-top: 1.5rem; }
.fn .fn-jak-porcja-linki { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.fn .fn-jak-porcja-linki a {
	display: inline-block; padding: 0.5rem 1.1rem 0.6rem; border-radius: 6.25rem; color: inherit; font: 700 1.0625rem/1.2 var(--fn-font-naglowki);
	text-decoration: none; box-shadow: inset 0 0 0 2px currentColor;
}
.fn .fn-jak-porcja-linki a:hover { background: var(--fn-malina-900); color: var(--fn-krem); }
.fn .fn-jak-porcja-linki a:focus-visible { outline: 3px solid var(--fn-roz); outline-offset: 3px; }
.fn .fn-jak-etykieta { padding: 1.75rem 2rem 1.25rem; border: 3px solid currentColor; border-radius: 1.5rem; background: var(--fn-roz-200); }
.fn .fn-jak-etykieta-tytul { margin: 0; padding-bottom: 0.85rem; border-bottom: 0.5rem solid currentColor; font: 800 1.75rem/1.1 var(--fn-font-naglowki); letter-spacing: -0.01em; color: inherit; }
.fn .fn-jak-etykieta ul { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.fn .fn-jak-etykieta li { padding: 0.85rem 0; border-bottom: 1px solid rgb(67 16 38 / 0.2); font-size: 1.0625rem; line-height: 1.45; }
.fn .fn-jak-etykieta li:last-child { border-bottom: 0; }

/* ---------- Telefon i tablet ---------- */
@media (max-width: 991px) {
	.fn .fn-jak-hero { grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; min-height: 0; padding-block: 7rem 4rem; }
	.fn .fn-jak-schemat { max-width: 34rem; }
	.fn .fn-jak-wybor, .fn .fn-jak-regularnosc, .fn .fn-jak-porcja { padding-block: 4.5rem; }
	.fn .fn-jak-wstep, .fn .fn-jak-porcja { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
	.fn .fn-jak-porcja { row-gap: 2.5rem; }
	.fn .fn-jak-kiedy { margin-top: 2.5rem; }
	.fn .fn-jak-kiedy-wiersz { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; }
}
@media (max-width: 479px) {
	.fn .fn-jak-sposob { width: 32%; }
	.fn .fn-jak-sposob-zdjecie { border-width: 0.2rem; }
	.fn .fn-jak-sposob-podpis { margin-top: 0.4rem; }
	.fn .fn-jak-sposob-podpis span { display: none; }
	.fn .fn-jak-strzalka { width: 2.75rem; }
	.fn .fn-jak-etykieta { padding: 1.25rem 1.25rem 0.75rem; }
	.fn .fn-jak-etykieta-tytul { font-size: 1.375rem; }
}

/* ---------- Tło hero z Codex (prośba klienta z 2026-10-14: „własne stylizowane pod nasz design bg”, potem „tylko hero
   grafika w tle, a dalej jednolite tła”): płaski wzór ton w ton w stylu teł linii (bin/tla.py); na telefonie mniejszy plik. ---------- */
.fn .fn-jak-hero { background-image: url('../img/tla/jak-hero-1920.webp'); background-size: cover; background-position: center; }
@media (max-width: 991px) { .fn .fn-jak-hero { background-image: url('../img/tla/jak-hero-1200.webp'); } }