/* „Dlaczego jelly i mus?” (page-o-nas.php; redesign na prośbę klienta z 2026-10-14: „nijaka ta strona i dziwna”).
   Jeden mocny element: tablica dobrych dni w hero (odbitki z podpisami z Brand Booka, przypinane raz przy wejściu).
   Reszta spokojna: każda sekcja ma jeden kolor marki (malina, krem, żółty, ciemna malina, malina), duże nagłówki
   krojem nagłówków w najgrubszej wadze, tekst przy lewej krawędzi, marginesy boczne jak w całym sklepie (--fn-margines). */

.fn .fn-onas-hero, .fn .fn-onas-forma, .fn .fn-onas-przyjaciolka, .fn .fn-onas-linie, .fn .fn-onas-koniec { padding-inline: var(--fn-margines); }
.fn .fn-onas-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-onas-lead { margin: 0; font-size: clamp(1.125rem, 1.4vw, 1.375rem); line-height: 1.5; text-wrap: pretty; }

/* ---------- Hero: pytanie i odpowiedź, obok tablica dobrych dni ---------- */
.fn .fn-onas-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-onas-pytanie {
	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-onas-odpowiedz { max-width: 32rem; margin: 0; font-size: clamp(1.25rem, 1.6vw, 1.625rem); line-height: 1.45; }
/* Odbitki: kremowa ramka z szerszym dołem na podpis, każda pod innym kątem; zachodzą na siebie jak przypięte nad biurkiem. */
.fn .fn-onas-tablica { position: relative; height: clamp(32rem, 74vh, 48rem); height: clamp(32rem, 74svh, 48rem); margin: 0; padding: 0; list-style: none; }
.fn .fn-onas-odbitka { position: absolute; width: 47%; }
.fn .fn-onas-odbitka figure { margin: 0; padding: 0.75rem 0.75rem 0; border-radius: 0.375rem; background: var(--fn-krem); box-shadow: 0 1.75rem 3rem -0.5rem rgb(22 8 14 / 0.45); }
.fn .fn-onas-odbitka img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 0.2rem; }
.fn .fn-onas-odbitka figcaption { padding: 0.6rem 0.25rem 0.85rem; font: italic 700 clamp(1.125rem, 1.4vw, 1.375rem)/1.1 var(--fn-font-naglowki); text-align: center; color: var(--fn-malina); }
.fn .fn-onas-odbitka--1 { --i: 0; left: 0; top: 0; rotate: -6deg; z-index: 1; }
.fn .fn-onas-odbitka--2 { --i: 1; right: 0; top: 4%; rotate: 5deg; z-index: 2; }
.fn .fn-onas-odbitka--3 { --i: 2; left: 5%; bottom: 0; rotate: 4deg; z-index: 3; }
.fn .fn-onas-odbitka--4 { --i: 3; right: 3%; bottom: 3%; rotate: -3deg; z-index: 4; }
/* Jedyny ruch na stronie: odbitki przypinane po kolei przy wejściu (przy ograniczonym ruchu stoją od razu). */
@media (prefers-reduced-motion: no-preference) {
	.fn .fn-onas-odbitka { animation: fn-onas-przypnij 0.7s cubic-bezier(0.2, 0.8, 0.25, 1.15) both; animation-delay: calc(0.15s + var(--i) * 0.12s); }
}
@keyframes fn-onas-przypnij { from { opacity: 0; translate: 0 -2.5rem; scale: 1.06; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* ---------- Forma: krem, cztery sposoby na zdjęciach, co drugie niżej ---------- */
.fn .fn-onas-forma { padding-block: 7rem; background: var(--fn-krem); color: var(--fn-malina-900); }
.fn .fn-onas-forma-wstep, .fn .fn-onas-linie-wstep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5rem; align-items: end; }
.fn .fn-onas-forma-wstep .fn-onas-lead, .fn .fn-onas-linie-wstep .fn-onas-lead { max-width: 32rem; }
.fn .fn-onas-formy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin: 3.5rem 0 0; padding: 0 0 3rem; list-style: none; }
.fn .fn-onas-sposob:nth-child(even) { translate: 0 3rem; }
.fn .fn-onas-sposob-zdjecie { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.25rem; }
.fn .fn-onas-sposob-opis { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.85rem; align-items: center; margin-top: 1.1rem; }
.fn .fn-onas-sposob-ikona { grid-row: span 2; width: 3.25rem; color: var(--fn-roz); }
.fn .fn-onas-sposob-nazwa { margin: 0; font: 800 1.625rem/1.05 var(--fn-font-naglowki); letter-spacing: -0.02em; color: inherit; }
.fn .fn-onas-sposob-dopisek { margin: 0.2rem 0 0; font-size: 1rem; line-height: 1.35; opacity: 0.75; }

/* ---------- „Jak przyjaciółka, nie jak ulotka.”: żółty, dwie listy, druga przekreślona ---------- */
.fn .fn-onas-przyjaciolka { padding-block: 7rem; background: var(--fn-zolty); color: var(--fn-malina-900); }
.fn .fn-onas-przyjaciolka .fn-onas-tytul { max-width: 15ch; font-size: clamp(3rem, 6.5vw, 7rem); }
.fn .fn-akcent--onas { width: clamp(5rem, 8vw, 8.5rem); right: -2rem; bottom: -1.5rem; rotate: 10deg; }
.fn .fn-onas-listy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5rem; margin-top: 4rem; }
.fn .fn-onas-lista-tytul { margin: 0; padding-bottom: 0.75rem; border-bottom: 0.3rem solid currentColor; font: 800 1.75rem/1.1 var(--fn-font-naglowki); color: inherit; }
.fn .fn-onas-lista ul { margin: 0; padding: 0; list-style: none; }
.fn .fn-onas-lista li { padding: 0.9rem 0; border-bottom: 1px solid rgb(67 16 38 / 0.2); font: 600 clamp(1.375rem, 2vw, 1.875rem)/1.25 var(--fn-font-naglowki); letter-spacing: -0.01em; }
.fn .fn-onas-lista--nie li { color: rgb(67 16 38 / 0.55); text-decoration: line-through; text-decoration-color: var(--fn-roz); text-decoration-thickness: 0.12em; }

/* ---------- Trzy linie: ciemna malina, każda linia na swoim kolorze i wzorze ---------- */
.fn .fn-onas-linie { padding-block: 7rem; background: var(--fn-malina-900); color: var(--fn-krem); }
.fn .fn-onas-linie-siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 3.5rem; }
.fn .fn-onas-linia {
	display: flex; flex-direction: column; overflow: hidden; border-radius: 1.5rem;
	background: var(--fn-linia-kolor) var(--fn-linia-tlo, none) center / cover; color: var(--fn-linia-tekst, var(--fn-krem));
}
.fn .fn-onas-linia-obraz { position: relative; aspect-ratio: 4 / 3; }
.fn .fn-onas-linia-zdjecie { display: block; width: 100%; height: 100%; object-fit: cover; }
.fn .fn-onas-linia-saszetka { position: absolute; right: 7%; bottom: -14%; width: auto; height: 72%; rotate: 8deg; filter: drop-shadow(0 1rem 1.5rem rgb(22 8 14 / 0.4)); }
.fn .fn-onas-linia-tresc { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 1.75rem 1.75rem 2rem; }
.fn .fn-onas-linia-czasem { margin: 0; max-width: 62%; font: italic 600 1.125rem/1.3 var(--fn-font-naglowki); }
.fn .fn-onas-linia-nazwa { margin: 0.35rem 0 0.6rem; font: 800 3.25rem/1 var(--fn-font-naglowki); letter-spacing: -0.03em; color: inherit; }
.fn .fn-onas-linia-opis { margin: 0 0 1.5rem; font-size: 1.0625rem; line-height: 1.45; }
.fn .fn-onas-linia .fn-przycisk-linii { margin-top: auto; }

/* ---------- Zamknięcie: zdjęcie i hasło ---------- */
.fn .fn-onas-koniec {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5rem; align-items: center;
	padding-block: 7rem; background: var(--fn-malina); color: var(--fn-krem);
}
.fn .fn-onas-koniec-zdjecie { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 2rem; }
.fn .fn-onas-haslo { margin: 0 0 1.5rem; font: 800 clamp(3.5rem, 6.5vw, 7.5rem)/0.9 var(--fn-font-naglowki); letter-spacing: -0.035em; color: var(--fn-krem); text-wrap: balance; }
.fn .fn-onas-koniec .fn-onas-lead { max-width: 28rem; }
.fn .fn-onas-koniec-przyciski { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.25rem; }
.fn .fn-onas-link { color: var(--fn-krem); font-size: 1.125rem; font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.fn .fn-onas-link:hover { text-decoration-thickness: 2px; }
.fn .fn-onas-link:focus-visible { outline: 2px solid var(--fn-zolty); outline-offset: 0.25rem; border-radius: 0.25rem; }

/* ---------- Telefon i tablet ----------
   Jedna kolumna. Tablica dobrych dni to siatka 2 × 2 (odbitki dalej pod kątem), sposoby po dwa, linie jedna pod drugą. */
@media (max-width: 991px) {
	.fn .fn-onas-hero { grid-template-columns: minmax(0, 1fr); row-gap: 3rem; min-height: 0; padding-block: 7rem 4rem; }
	.fn .fn-onas-tablica { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; height: auto; }
	.fn .fn-onas-odbitka { position: static; width: auto; }
	.fn .fn-onas-forma, .fn .fn-onas-przyjaciolka, .fn .fn-onas-linie, .fn .fn-onas-koniec { padding-block: 4.5rem; }
	.fn .fn-onas-forma-wstep, .fn .fn-onas-linie-wstep, .fn .fn-onas-listy, .fn .fn-onas-koniec { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
	.fn .fn-onas-formy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; margin-top: 2.5rem; padding-bottom: 1.5rem; }
	.fn .fn-onas-sposob:nth-child(even) { translate: 0 1.5rem; }
	.fn .fn-onas-listy { row-gap: 3rem; margin-top: 2.75rem; }
	.fn .fn-onas-linie-siatka { grid-template-columns: minmax(0, 1fr); margin-top: 2.5rem; }
	.fn .fn-onas-koniec { row-gap: 2.5rem; }
	.fn .fn-akcent--onas { right: 0; bottom: -3.5rem; }
}
@media (max-width: 479px) {
	.fn .fn-onas-odbitka figure { padding: 0.45rem 0.45rem 0; }
	.fn .fn-onas-odbitka figcaption { padding: 0.45rem 0.1rem 0.6rem; font-size: 1rem; }
	.fn .fn-onas-sposob-opis { grid-template-columns: minmax(0, 1fr); row-gap: 0.35rem; }
	.fn .fn-onas-sposob-ikona { grid-row: auto; width: 2.5rem; }
	.fn .fn-onas-sposob-nazwa { font-size: 1.3rem; }
	.fn .fn-onas-sposob-dopisek { font-size: 0.875rem; }
	.fn .fn-onas-lista li { padding: 0.7rem 0; }
}

/* ---------- 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-onas-hero { background-image: url('../img/tla/onas-hero-1920.webp'); background-size: cover; background-position: center; }
@media (max-width: 991px) { .fn .fn-onas-hero { background-image: url('../img/tla/onas-hero-1200.webp'); } }