/* =====================================================================
   fotoapka.pl — strona główna, nagłówek i stopka

   Projekt: Claude Design, docs/projekt/Fotoapka.dc.html (25.09.2026).
   Wartości (rozmiary, clamp(), odstępy, promienie, obroty, cienie, obrysy,
   kolory) przepisane 1:1 z atrybutów style prototypu — przy zmianie
   porównuj zrzutem z projektem na 1440 px (tools/zrzut.php), nie na oko.
   Odstępstwa są tylko w blokach „Telefon” na końcu pliku: tam prototyp
   wychodził poza ekran.

   Klasy .fa- nie kolidują z .qg- ze style.css — tamten arkusz dalej
   obsługuje panel, kasę i strony prawne. Tło, krój i rozmiar tekstu strony
   dotyczą tylko <body class="fa-strona"> (strona główna); nagłówek i stopka
   niosą własny krój, bo stoją na każdej stronie.
   ===================================================================== */

:root {
	--fa-krem: #f4ede3;
	--fa-krem-ciemny: #ebe1d3;      /* tło pasów „Okazje” i „Stwórz galerię” */
	--fa-atrament: #1a1410;
	--fa-pomarancz: #e8492a;
	--fa-pomarancz-ciemny: #c93a1e; /* najechanie na pomarańczowe przyciski */
	--fa-zolty: #f2b705;
	--fa-tekst-2: #4a3f36;          /* tekst drugorzędny na jasnym */
	--fa-na-ciemnym: #e6dccf;       /* tekst drugorzędny na atramencie */
	--fa-na-ciemnym-2: #c9bcae;     /* podpisy na atramencie */
	--fa-rozowy-jasny: #f6c9cf;     /* tło kafla z psami, zanim zdjęcie dojdzie */

	/* Kolory okazji. Na żółtym, turkusowym i różowym tekst jest atramentowy,
	   na pozostałych biały — klasy .fa-kolor--* niżej. */
	--fa-urodziny: #e8492a;
	--fa-firmowka: #3b6ef5;
	--fa-psie: #2bb5a0;
	--fa-zareczyny: #f06aa0;
	--fa-imieniny: #f2b705;
	--fa-kawalerski: #8b6cf0;

	--fa-font-tekst: "Plus Jakarta Sans", sans-serif;
	--fa-font-naglowki: "Baloo 2", cursive;
}

/* ---------------------------------------------------------------------
   Kroje — pliki w fonts/, licencje OFL obok, opis w fonts/CZCIONKI.md.
   Tylko latin i latin-ext: wariant latin-ext pobiera się dopiero przy
   pierwszym polskim znaku. Plus Jakarta Sans jest krojem zmiennym.
   --------------------------------------------------------------------- */
@font-face {
	font-family: "Baloo 2";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("fonts/baloo2-800-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Baloo 2";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("fonts/baloo2-800-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------
   Podstawa strony głównej
   --------------------------------------------------------------------- */
body.fa-strona {
	margin: 0;
	background: var(--fa-krem);
	color: var(--fa-atrament);
	font-family: var(--fa-font-tekst);
	font-size: 16px;
	line-height: normal;
	-webkit-font-smoothing: antialiased;
}

/* Pasek okazji ma margines -40 px i obrót, konfetti sięga do krawędzi Hero.
   W prototypie przycina je overflow-x: hidden na opakowaniu; clip robi to
   samo, ale nie zamienia <main> w kontener przewijania. */
.fa-strona #tresc { overflow-x: clip; }

/* Kotwice (#jak, #okazje, #cennik) nie chowają nagłówka pod przyklejonym
   paskiem: 68 px paska (zmierzone; 73 px z przyciskiem menu poniżej 800 px,
   blok „Telefon” niżej) plus pasek administratora, gdy jest. */
html:has(body.fa-strona) { scroll-padding-top: calc(68px + var(--wp-admin--admin-bar--height, 0px)); }
@media (prefers-reduced-motion: no-preference) {
	html:has(body.fa-strona) { scroll-behavior: smooth; }
}

/* Marginesy przeglądarki zerowane bez wagi (:where) — każda klasa niżej może
   dołożyć własny. Nagłówki h1–h3 zerują się w swoich klasach, bo style.css
   daje im margines z wagą selektora elementu. */
:where(.fa-strona #tresc, .fa-naglowek, .fa-stopka) :where(p, figure, ul, ol) { margin: 0; }
:where(.fa-strona #tresc, .fa-naglowek, .fa-stopka) :where(ul, ol) { padding: 0; list-style: none; }
.fa-strona :is(input, select, button) { font-family: inherit; }

/* Fokus klawiatury: projekt go nie rysuje, dostępność tak. Atrament na
   jasnym, żółty na ciemnych kartach. */
:where(.fa-strona #tresc, .fa-naglowek, .fa-stopka) :focus-visible { outline: 3px solid var(--fa-atrament); outline-offset: 3px; }
.fa-ciemne :focus-visible { outline-color: var(--fa-zolty); }
.qg-pomin:focus { background: var(--fa-atrament); color: var(--fa-krem); outline-color: var(--fa-zolty); font-family: var(--fa-font-tekst); }

/* ---------------------------------------------------------------------
   Nagłówek (każda strona)
   --------------------------------------------------------------------- */
.fa-naglowek {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 20;
	background: rgba(244, 237, 227, .92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(26, 20, 16, .08);
	color: var(--fa-atrament);
	font-family: var(--fa-font-tekst);
	font-size: 16px;
	line-height: normal;
	-webkit-font-smoothing: antialiased;
}
.fa-naglowek__wnetrze {
	max-width: 1240px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.fa-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fa-atrament); }
.fa-logo:hover { color: var(--fa-atrament); }
.fa-logo__ikona { display: block; flex: none; overflow: visible; }
.fa-logo__napis { font-size: 30px; line-height: 1; font-family: var(--fa-font-naglowki); font-weight: 800; letter-spacing: -0.01em; }
.fa-logo__napis span,
.fa-stopka__logo span { color: var(--fa-pomarancz); }

.fa-nav { display: flex; align-items: center; gap: 26px; font-size: 15px; flex-wrap: wrap; }
.fa-nav__link { text-decoration: none; color: var(--fa-atrament); }
.fa-nav__link:hover { color: var(--fa-pomarancz); }
.fa-nav__przycisk { text-decoration: none; background: var(--fa-atrament); color: var(--fa-krem); padding: 10px 18px; border-radius: 999px; font-weight: 600; }
.fa-nav__przycisk:hover { color: var(--fa-krem); }

.fa-menu-przelacznik,
.fa-burger { display: none; }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.fa-hero { position: relative; max-width: 1240px; margin: 0 auto; padding: 48px 24px 72px; }
.fa-konfetti { position: absolute; inset: 0; pointer-events: none; }
.fa-konfetti i { position: absolute; }
.fa-hero__siatka {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
	gap: 56px;
	align-items: center;
}
.fa-hero__tekst { display: flex; flex-direction: column; gap: 26px; }
.fa-plakietka {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--fa-atrament);
	color: var(--fa-krem);
	font-size: 14px;
	transform: rotate(-2deg);
}
.fa-plakietka__kropka { width: 8px; height: 8px; border-radius: 50%; background: var(--fa-zolty); }
.fa-h1 {
	margin: 0;
	font-size: clamp(40px, 5vw, 68px);
	line-height: 1.02;
	font-family: var(--fa-font-naglowki);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--fa-pomarancz);
	-webkit-text-stroke: 2px var(--fa-atrament);
	paint-order: stroke fill;
	text-shadow: 2px 2px 0 var(--fa-atrament), 4px 4px 0 var(--fa-atrament), 6px 6px 0 var(--fa-atrament), 8px 9px 0 rgba(26, 20, 16, .18);
	text-wrap: balance;
}
.fa-h1 span { color: var(--fa-zolty); }
.fa-hero__lead { font-size: 19px; line-height: 1.5; max-width: 520px; color: var(--fa-tekst-2); text-wrap: pretty; }
.fa-hero__wybor { display: flex; flex-direction: column; gap: 10px; }
.fa-hero__pytanie { font-size: 14px; font-weight: 600; color: var(--fa-tekst-2); }
.fa-zakladki { display: flex; flex-wrap: wrap; gap: 8px; }
.fa-zakladka {
	border: 1.5px solid rgba(26, 20, 16, .2);
	background: transparent;
	color: var(--fa-atrament);
	border-radius: 999px;
	padding: 10px 16px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
/* Kolor wybranej okazji przychodzi z atrybutu style zakładki (--fa-kolor,
   --fa-kolor-tekst), stan — z aria-pressed, który przełącza js/fotoapka.js. */
.fa-zakladka[aria-pressed="true"] { border-color: var(--fa-kolor); background: var(--fa-kolor); color: var(--fa-kolor-tekst); }
.fa-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.fa-przycisk { text-decoration: none; background: var(--fa-pomarancz); color: #fff; padding: 18px 28px; border-radius: 999px; font-weight: 600; font-size: 17px; }
.fa-przycisk:hover { background: var(--fa-pomarancz-ciemny); color: #fff; }
.fa-hero__dopisek { font-size: 15px; color: var(--fa-tekst-2); max-width: 200px; line-height: 1.35; }

.fa-hero__grafika { position: relative; min-height: 580px; }
.fa-hero__plama {
	position: absolute;
	top: 24px;
	right: -12px;
	width: 84%;
	height: 500px;
	border-radius: 32px;
	background: var(--fa-okazja);
	transform: rotate(4deg);
}
.fa-hero__foto {
	position: absolute;
	top: 0;
	right: 12px;
	width: 84%;
	height: 500px;
	max-width: none;
	object-fit: cover;
	object-position: var(--fa-kadr, 50% 50%);
	border-radius: 28px;
	display: block;
	transform: rotate(-1.5deg);
}
.fa-hero__zart {
	position: absolute;
	top: 28px;
	left: 0;
	max-width: 240px;
	background: var(--fa-zolty);
	color: var(--fa-atrament);
	padding: 14px 18px;
	border-radius: 16px;
	font-weight: 800;
	font-size: 19px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	transform: rotate(-6deg);
	box-shadow: 0 14px 30px -14px rgba(26, 20, 16, .5);
}
/* Makieta telefonu (projekt z 29.09.2026): ramka 236 × 490 z przyciskami
   bocznymi, wyspą, paskiem stanu, adresem w pigułce, przyciskiem przyklejonym
   do dołu ekranu i paskiem home. */
.fa-telefon {
	position: absolute;
	left: 0;
	bottom: -20px;
	width: 236px;
	height: 490px;
	background: var(--fa-atrament);
	border-radius: 44px;
	padding: 9px;
	box-shadow: 0 0 0 2px #3a302a, 0 30px 60px -20px rgba(26, 20, 16, .55);
	transform: rotate(-3deg);
}
.fa-telefon i { display: block; background: var(--fa-atrament); }
.fa-telefon__bok { position: absolute; left: -3px; width: 3px; border-radius: 2px 0 0 2px; }
.fa-telefon__bok--1 { top: 96px; height: 28px; }
.fa-telefon__bok--2 { top: 136px; height: 44px; }
.fa-telefon__bok--3 { left: auto; right: -3px; top: 120px; height: 62px; border-radius: 0 2px 2px 0; }
.fa-telefon__ekran { position: relative; width: 100%; height: 100%; background: var(--fa-krem); border-radius: 36px; overflow: hidden; display: flex; flex-direction: column; }
.fa-telefon__wyspa { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 72px; height: 20px; border-radius: 999px; z-index: 2; }
.fa-telefon__stan { height: 38px; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding: 4px 20px 0; font-size: 11px; font-weight: 800; }
.fa-telefon__ikony { display: flex; align-items: center; gap: 4px; }
.fa-telefon__zasieg { display: flex; align-items: flex-end; gap: 1.5px; height: 9px; }
.fa-telefon__zasieg i { width: 2.5px; height: 3px; border-radius: 1px; }
.fa-telefon__zasieg i:nth-child(2) { height: 5px; }
.fa-telefon__zasieg i:nth-child(3) { height: 7px; }
.fa-telefon__zasieg i:nth-child(4) { height: 9px; }
.fa-telefon__siec { font-size: 10px; }
.fa-telefon__bateria { width: 19px; height: 9px; border: 1.5px solid var(--fa-atrament); border-radius: 3px; padding: 1px; box-sizing: border-box; }
.fa-telefon__bateria i { width: 70%; height: 100%; border-radius: 1px; }
.fa-telefon__adres { margin: 0 10px; background: var(--fa-krem-ciemny); border-radius: 10px; padding: 5px 10px; font-size: 10px; color: var(--fa-tekst-2); text-align: center; flex-shrink: 0; }
.fa-telefon__gora { padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.fa-telefon__nazwa { font-size: 19px; line-height: 1.05; font-family: var(--fa-font-naglowki); font-weight: 800; }
.fa-telefon__licznik { font-size: 11px; color: var(--fa-tekst-2); }
.fa-telefon__siatka { flex: 1; min-height: 0; overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 0 2px; align-content: start; }
.fa-telefon__foto { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.fa-telefon__przycisk { position: absolute; left: 12px; right: 12px; bottom: 26px; background: var(--fa-pomarancz); color: #fff; border-radius: 999px; padding: 12px; text-align: center; font-weight: 800; font-size: 13px; box-shadow: 0 3px 0 var(--fa-atrament), 0 12px 20px -8px rgba(26, 20, 16, .5); }
.fa-telefon__home { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); width: 84px; height: 4px; border-radius: 999px; }
.fa-qr-karta {
	position: absolute;
	right: 0;
	bottom: 24px;
	background: #fff;
	border-radius: 18px;
	padding: 12px;
	display: flex;
	gap: 12px;
	align-items: center;
	box-shadow: 0 20px 40px -18px rgba(26, 20, 16, .4);
	transform: rotate(4deg);
}
.fa-qr-karta__kod { width: 64px; flex: none; }
.fa-qr-karta__tekst { font-size: 13px; line-height: 1.3; font-weight: 600; max-width: 96px; }
/* Prawdziwy kod z silnika (qg_theme_qr) zamiast atrapy 25 × 25 z prototypu. */
.fa-qr-karta__kod svg,
.fa-stworz__kod svg { display: block; width: 100%; height: auto; }
.fa-qr-karta__kod path,
.fa-stworz__kod path { fill: var(--fa-atrament); }

/* ---------------------------------------------------------------------
   Pasek okazji (ciemny, obrócony)
   --------------------------------------------------------------------- */
.fa-pasek { background: var(--fa-atrament); color: var(--fa-krem); transform: rotate(-1.2deg); margin: 0 -40px; padding: 16px 0; overflow: hidden; }
.fa-pasek__tresc {
	display: flex;
	gap: 28px;
	justify-content: center;
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.01em;
	white-space: nowrap;
	text-transform: uppercase;
}
.fa-gwiazdka--zolty { color: var(--fa-zolty); }
.fa-gwiazdka--pomarancz { color: var(--fa-pomarancz); }
.fa-gwiazdka--fiolet { color: var(--fa-kawalerski); }
.fa-gwiazdka--turkus { color: var(--fa-psie); }
.fa-gwiazdka--roz { color: var(--fa-zareczyny); }

/* ---------------------------------------------------------------------
   Wspólne dla sekcji
   --------------------------------------------------------------------- */
.fa-sekcja { max-width: 1240px; margin: 0 auto; }
.fa-pas { background: var(--fa-krem-ciemny); }
.fa-h2 {
	margin: 0;
	font-size: clamp(38px, 5vw, 60px);
	line-height: 1;
	font-family: var(--fa-font-naglowki);
	font-weight: 800;
	letter-spacing: -0.01em;
	text-shadow: 3px 3px 0 rgba(26, 20, 16, .14);
	text-wrap: wrap;
}
.fa-h2--mniejszy { font-size: clamp(36px, 4.4vw, 54px); }
.fa-akcent { color: var(--fa-pomarancz); }
.fa-h3 { margin: 0; font-family: inherit; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: normal; text-wrap: wrap; }
.fa-wstep { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.fa-opis { font-size: 17px; line-height: 1.5; color: var(--fa-tekst-2); }

/* Tła i kolory tekstu okazji — etykiety na zdjęciach. */
.fa-kolor--urodziny { background: var(--fa-urodziny); color: #fff; }
.fa-kolor--firmowka { background: var(--fa-firmowka); color: #fff; }
.fa-kolor--psie { background: var(--fa-psie); color: var(--fa-atrament); }
.fa-kolor--zareczyny { background: var(--fa-zareczyny); color: var(--fa-atrament); }
.fa-kolor--imieniny { background: var(--fa-imieniny); color: var(--fa-atrament); }
.fa-kolor--kawalerski { background: var(--fa-kawalerski); color: #fff; }
.fa-kolor--atrament { background: var(--fa-atrament); color: var(--fa-krem); }
.fa-kolor--bialy { background: #fff; color: var(--fa-atrament); }

/* Zdjęcie wypełniające kafel; kadr z atrybutu style (--fa-kadr). */
.fa-zdjecie { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--fa-kadr, 50% 50%); display: block; }
/* Etykieta-pigułka na zdjęciu; obrót z atrybutu style (--fa-obrot). */
.fa-etykieta {
	margin: 0;
	position: absolute;
	top: 16px;
	left: 16px;
	font-family: inherit;
	font-weight: 800;
	font-size: 15px;
	line-height: normal;
	letter-spacing: normal;
	padding: 8px 14px;
	border-radius: 999px;
	transform: rotate(var(--fa-obrot, 0deg));
	text-wrap: wrap;
}
.fa-etykieta--dol { top: auto; bottom: 16px; }

/* ---------------------------------------------------------------------
   Fotograf kontra telefony
   --------------------------------------------------------------------- */
.fa-kontra { padding: 104px 24px 40px; display: flex; flex-direction: column; gap: 40px; }
.fa-kontra .fa-h2 { max-width: 780px; }
.fa-kontra__siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.fa-kontra__karta { border: 1.5px dashed rgba(26, 20, 16, .3); border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.fa-kontra__karta--ciemna { border: 0; background: var(--fa-atrament); color: var(--fa-krem); transform: rotate(1deg); }
.fa-kontra__gora { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fa-kontra__cena { background: var(--fa-zolty); color: var(--fa-atrament); font-size: 14px; font-weight: 800; padding: 6px 12px; border-radius: 999px; }
.fa-kontra__lista { display: flex; flex-direction: column; gap: 12px; font-size: 17px; line-height: 1.4; color: var(--fa-tekst-2); }
.fa-kontra__karta--ciemna .fa-kontra__lista { color: var(--fa-na-ciemnym); }

/* ---------------------------------------------------------------------
   Jak to działa
   --------------------------------------------------------------------- */
.fa-kroki { padding: 64px 24px 96px; display: flex; flex-direction: column; gap: 48px; }
.fa-kroki .fa-h2 { max-width: 640px; }
.fa-kroki .fa-opis { max-width: 340px; }
.fa-kroki__siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.fa-krok { border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.fa-krok--1 { background: var(--fa-pomarancz); color: #fff; transform: rotate(-1.5deg); }
.fa-krok--2 { background: var(--fa-zolty); color: var(--fa-atrament); transform: rotate(1deg); }
.fa-krok--3 { background: var(--fa-kawalerski); color: #fff; transform: rotate(-0.8deg); }
.fa-krok--4 { background: var(--fa-atrament); color: var(--fa-krem); transform: rotate(1.5deg); }
.fa-krok__numer { font-size: 72px; line-height: 1; font-family: var(--fa-font-naglowki); font-weight: 800; letter-spacing: -0.01em; }
.fa-krok--4 .fa-krok__numer { color: var(--fa-zolty); }
.fa-krok__tekst { font-size: 16px; line-height: 1.5; }
.fa-krok--4 .fa-krok__tekst { color: var(--fa-na-ciemnym); }

/* ---------------------------------------------------------------------
   Okazje
   --------------------------------------------------------------------- */
.fa-okazje { padding: 96px 24px; display: flex; flex-direction: column; gap: 48px; }
.fa-okazje .fa-h2 { max-width: 780px; }
.fa-okazje__siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.fa-okazja { display: flex; flex-direction: column; gap: 14px; }
.fa-okazja__foto { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--fa-atrament); }
.fa-okazja__tekst { font-size: 18px; line-height: 1.4; font-weight: 600; padding: 0 4px; }

/* ---------------------------------------------------------------------
   Zwierzaki
   --------------------------------------------------------------------- */
.fa-zwierzaki { padding: 104px 24px 24px; display: flex; flex-direction: column; gap: 40px; }
.fa-zwierzaki .fa-h2,
.fa-goscie .fa-h2 { max-width: 720px; }
.fa-zwierzaki .fa-opis,
.fa-goscie .fa-opis { max-width: 360px; }
.fa-zwierzaki__siatka {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	grid-auto-rows: 280px;
	grid-auto-flow: dense;
	gap: 16px;
}
.fa-kafel { position: relative; border-radius: 24px; overflow: hidden; background: var(--fa-atrament); }
.fa-kafel--szeroki { grid-column: span 2; }
.fa-kafel--wysoki { grid-row: span 2; }
.fa-kafel--rozowy { background: var(--fa-rozowy-jasny); }
.fa-kafel--zolty { background: var(--fa-zolty); }
.fa-kafel--bialy { background: #fff; }
.fa-podpis { position: absolute; font-weight: 800; font-size: 17px; line-height: 1.25; border-radius: 14px; }
.fa-podpis--lista { left: 20px; bottom: 20px; padding: 10px 16px; transform: rotate(-2deg); max-width: 320px; }
.fa-podpis--solenizant { left: 16px; right: 16px; bottom: 16px; padding: 12px 16px; transform: rotate(2deg); }

/* ---------------------------------------------------------------------
   Cennik — karty z danych silnika (qg_theme_plans)
   --------------------------------------------------------------------- */
.fa-cennik { padding: 104px 24px; display: flex; flex-direction: column; gap: 48px; }
.fa-cennik__wstep { display: flex; flex-direction: column; gap: 14px; max-width: 680px; }
.fa-cennik__siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; align-items: stretch; }
/* Poza projektem (25.09.2026): cena przedłużenia i dopłat musi być w cenniku przed zakupem (regulamin §5). */
.fa-cennik__dokupienia { max-width: 760px; margin-top: -16px; font-size: 15px; line-height: 1.55; color: var(--fa-tekst-2); }
.fa-pakiet { background: #fff; border-radius: 28px; padding: 36px 32px; display: flex; flex-direction: column; gap: 26px; }
.fa-pakiet--polecany { background: var(--fa-atrament); color: var(--fa-krem); position: relative; transform: rotate(-1deg); }
.fa-pakiet__odznaka {
	position: absolute;
	top: -14px;
	right: 24px;
	background: var(--fa-zolty);
	color: var(--fa-atrament);
	font-size: 14px;
	font-weight: 800;
	padding: 8px 14px;
	border-radius: 999px;
	transform: rotate(5deg);
}
.fa-pakiet__gora { display: flex; flex-direction: column; gap: 6px; }
.fa-pakiet__nazwa { margin: 0; font-family: inherit; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: normal; text-wrap: wrap; }
.fa-pakiet__podtytul { font-size: 15px; color: var(--fa-tekst-2); }
.fa-pakiet--polecany .fa-pakiet__podtytul { color: var(--fa-na-ciemnym-2); }
.fa-pakiet__cena { margin-top: 10px; display: flex; align-items: baseline; gap: 6px; }
.fa-pakiet__kwota { font-size: 84px; line-height: 1; font-family: var(--fa-font-naglowki); font-weight: 800; letter-spacing: -0.01em; }
.fa-pakiet__waluta { font-size: 22px; font-weight: 600; }
.fa-pakiet__wiersze { display: flex; flex-direction: column; border-top: 1px solid rgba(26, 20, 16, .15); }
.fa-pakiet__wiersze li { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(26, 20, 16, .15); font-size: 16px; }
/* 800, nie domyślne 700: projekt ładuje Plus Jakarta Sans jako trzy kroje
   400/600/800, więc <strong> trafiał w nim na 800. Nasz @font-face ma zakres
   200–800 i bez tej wagi rysowałby cieńsze 700. */
.fa-pakiet__wiersze strong { text-align: right; font-weight: 800; }
.fa-pakiet--polecany .fa-pakiet__wiersze,
.fa-pakiet--polecany .fa-pakiet__wiersze li { border-color: rgba(244, 237, 227, .2); }
.fa-pakiet__kup {
	margin-top: auto;
	display: block;
	text-align: center;
	text-decoration: none;
	border: 1.5px solid var(--fa-atrament);
	background: transparent;
	color: var(--fa-atrament);
	border-radius: 999px;
	padding: 16px;
	font-size: 16px;
	font-weight: 600;
}
.fa-pakiet__kup:hover { background: var(--fa-atrament); color: var(--fa-krem); }
.fa-pakiet--polecany .fa-pakiet__kup { border: none; background: var(--fa-pomarancz); color: #fff; padding: 17px; }
.fa-pakiet--polecany .fa-pakiet__kup:hover { background: var(--fa-pomarancz-ciemny); color: #fff; }

/* ---------------------------------------------------------------------
   Stwórz galerię
   --------------------------------------------------------------------- */
.fa-stworz { padding: 96px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px; align-items: start; }
.fa-stworz__formularz { display: flex; flex-direction: column; gap: 26px; }
.fa-stworz__wstep { display: flex; flex-direction: column; gap: 14px; }
.fa-stworz__nadtytul { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--fa-pomarancz-ciemny); font-weight: 600; }
.fa-pole { display: flex; flex-direction: column; gap: 8px; }
.fa-pole__etykieta { font-size: 14px; font-weight: 600; }
.fa-pakiety { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--fa-krem); padding: 6px; border-radius: 999px; }
.fa-pakiety__przycisk { border: none; border-radius: 999px; padding: 12px 8px; font-size: 15px; font-weight: 600; cursor: pointer; background: transparent; color: var(--fa-atrament); }
.fa-pakiety__przycisk[aria-pressed="true"] { background: var(--fa-atrament); color: var(--fa-krem); }
.fa-pakiety__info { font-size: 14px; color: var(--fa-tekst-2); }
.fa-stworz__pola { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.fa-pole__wybor,
.fa-pole__data,
.fa-pole__tekst { padding: 15px 16px; border-radius: 14px; border: 1.5px solid rgba(26, 20, 16, .2); background: #fff; font-size: 16px; color: var(--fa-atrament); }
.fa-pole__data { padding: 14px 16px; }
.fa-stworz__generuj { border: none; background: var(--fa-pomarancz); color: #fff; border-radius: 999px; padding: 18px; font-size: 17px; font-weight: 600; cursor: pointer; }
.fa-stworz__generuj:hover { background: var(--fa-pomarancz-ciemny); }

.fa-stworz__wynik {
	background: var(--fa-atrament);
	color: var(--fa-krem);
	border-radius: 32px;
	padding: 36px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
	min-height: 560px;
	justify-content: center;
	transform: rotate(1deg);
}
/* Opakowanie wyniku znika z układu (contents): jego dzieci stają w kolumnie
   karty tak jak w prototypie, gdzie <sc-if> nie tworzy elementu. */
.fa-stworz__gotowe { display: contents; }
.fa-stworz__gotowe[hidden],
.fa-stworz__puste[hidden] { display: none; }
.fa-stworz__naglowek { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
/* anywhere: nazwa galerii bez spacji (hashtag) wychodziła poza kartę. */
.fa-stworz__nazwa { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.fa-stworz__data { font-size: 15px; color: var(--fa-na-ciemnym-2); }
.fa-stworz__kod { background: #fff; padding: 20px; border-radius: 24px; width: 100%; max-width: 280px; }
.fa-stworz__adres { font-size: 14px; color: var(--fa-na-ciemnym-2); font-family: ui-monospace, monospace; overflow-wrap: anywhere; text-align: center; }
.fa-stworz__akcje { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 380px; }
.fa-stworz__pobierz { border: 1.5px solid var(--fa-krem); background: transparent; color: var(--fa-krem); border-radius: 999px; padding: 15px; font-size: 15px; font-weight: 600; cursor: pointer; }
.fa-stworz__pobierz:hover { background: var(--fa-krem); color: var(--fa-atrament); }
.fa-stworz__sms { text-decoration: none; background: var(--fa-pomarancz); color: #fff; border-radius: 999px; padding: 16px; font-size: 15px; font-weight: 600; text-align: center; }
.fa-stworz__sms:hover { color: #fff; }
.fa-stworz__puste { display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; max-width: 300px; }
.fa-stworz__ramka { width: 180px; height: 180px; border-radius: 24px; border: 2px dashed rgba(244, 237, 227, .3); display: grid; place-items: center; font-weight: 800; font-size: 40px; color: var(--fa-zolty); }
.fa-stworz__zapowiedz { font-size: 17px; line-height: 1.5; color: var(--fa-na-ciemnym-2); }

/* ---------------------------------------------------------------------
   Galeria gości
   --------------------------------------------------------------------- */
.fa-goscie { padding: 104px 24px 0; display: flex; flex-direction: column; gap: 40px; }
.fa-goscie__siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); grid-auto-rows: 240px; gap: 12px; }
.fa-wrzut { position: relative; border-radius: 20px; overflow: hidden; background: var(--fa-atrament); }
.fa-wrzut--wysoki { grid-row: span 2; }
.fa-wrzut__kto { position: absolute; left: 12px; bottom: 12px; background: rgba(26, 20, 16, .85); color: var(--fa-krem); font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; }
.fa-karaoke { grid-column: span 2; border-radius: 20px; background: var(--fa-zolty); padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.fa-karaoke__tytul { margin: 0; font-family: inherit; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; text-wrap: wrap; }
.fa-karaoke__tekst { font-size: 16px; line-height: 1.45; max-width: 520px; }

/* ---------------------------------------------------------------------
   Dla gości („wujek Zbyszek”) i Bez fotoapki („To Marek…”) — duże banery
   ze zdjęciem; od 29.09.2026 między nimi sekcja „Oglądaj na TV”
   --------------------------------------------------------------------- */
.fa-dla-gosci { padding: 96px 24px; }
.fa-przestroga { padding: 0 24px 104px; }
.fa-baner { border-radius: 36px; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.fa-baner--ciemny { background: var(--fa-atrament); color: var(--fa-krem); }
.fa-baner--pomarancz { background: var(--fa-pomarancz); color: #fff; }
.fa-baner__foto { width: 100%; height: 100%; max-width: none; min-height: 400px; object-fit: cover; object-position: var(--fa-kadr, 50% 50%); display: block; }
.fa-baner--pomarancz .fa-baner__foto { min-height: 420px; }
.fa-baner__tresc { padding: 56px 48px; display: flex; flex-direction: column; gap: 22px; justify-content: center; }
.fa-baner--pomarancz .fa-baner__tresc { gap: 24px; }
.fa-baner__odznaka { align-self: flex-start; background: var(--fa-pomarancz); color: #fff; font-size: 14px; font-weight: 800; padding: 7px 14px; border-radius: 999px; transform: rotate(-3deg); }
.fa-h2--marek { font-size: clamp(34px, 4vw, 50px); line-height: 1.02; }
.fa-baner__tekst { font-size: 18px; line-height: 1.5; max-width: 440px; }
.fa-baner--ciemny .fa-baner__tekst { color: var(--fa-na-ciemnym); }
.fa-baner__przycisk { align-self: flex-start; text-decoration: none; padding: 18px 28px; border-radius: 999px; font-weight: 600; font-size: 17px; }
.fa-baner--ciemny .fa-baner__przycisk,
.fa-baner--ciemny .fa-baner__przycisk:hover { background: var(--fa-krem); color: var(--fa-atrament); }
.fa-baner--pomarancz .fa-baner__przycisk,
.fa-baner--pomarancz .fa-baner__przycisk:hover { background: var(--fa-atrament); color: var(--fa-krem); }

/* ---------------------------------------------------------------------
   Oglądaj na TV (projekt z 29.09.2026) — tryb pokazu silnika
   --------------------------------------------------------------------- */
.fa-tv { padding: 0 24px 104px; display: flex; flex-direction: column; gap: 40px; }
.fa-tv .fa-h2 { max-width: 760px; }
.fa-tv .fa-opis { max-width: 360px; }
.fa-tv__siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
.fa-tv__ekran { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--fa-atrament); transform: rotate(var(--fa-obrot, 0deg)); }
.fa-tv__ekran .fa-etykieta { top: 18px; left: 18px; font-size: 16px; padding: 9px 15px; }
.fa-tv__karta { background: var(--fa-atrament); color: var(--fa-krem); border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; }
.fa-tv__karta--pomarancz { background: var(--fa-pomarancz); color: #fff; }
.fa-tv__foto { width: 100%; height: auto; max-width: none; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.fa-tv__tresc { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 8px; }
.fa-tv__tytul { margin: 0; font-family: var(--fa-font-naglowki); font-weight: 800; font-size: 32px; line-height: 1.05; letter-spacing: normal; color: var(--fa-zolty); text-wrap: wrap; }
.fa-tv__karta--pomarancz .fa-tv__tytul { color: inherit; }
.fa-tv__tekst { font-size: 16px; line-height: 1.5; color: var(--fa-na-ciemnym); }
.fa-tv__karta--pomarancz .fa-tv__tekst { color: inherit; }

/* ---------------------------------------------------------------------
   Stopka (każda strona)
   --------------------------------------------------------------------- */
.fa-stopka { border-top: 1px solid rgba(26, 20, 16, .12); font-family: var(--fa-font-tekst); line-height: normal; -webkit-font-smoothing: antialiased; }
.fa-stopka__wnetrze {
	max-width: 1240px;
	margin: 0 auto;
	padding: 32px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--fa-tekst-2);
}
.fa-stopka__marka { display: flex; flex-direction: column; gap: 4px; }
.fa-stopka__logo { font-size: 24px; color: var(--fa-atrament); font-family: var(--fa-font-naglowki); font-weight: 800; letter-spacing: -0.01em; }
.fa-stopka__linki { display: flex; gap: 24px; flex-wrap: wrap; }
.fa-stopka__linki a,
.fa-stopka__linki a:hover { text-decoration: none; color: var(--fa-tekst-2); }
/* Pole dotyku 44 px zamiast 18 px wiersza; ujemny margines oddaje miejsce,
   więc układ stopki się nie zmienia. */
.fa-stopka__linki a { padding: 13px 0; margin: -13px 0; }
/* Dopisek spoza projektu: © i operator płatności. Cały wiersz pod spodem. */
.fa-stopka__nota { flex-basis: 100%; font-size: 13px; }

@media print {
	.fa-naglowek, .fa-stopka { display: none !important; }
}

/* =====================================================================
   Telefon i wąskie ekrany

   Prototyp przy 390 px wychodził poza ekran: kafle ze span 2 w siatkach,
   które mają już tylko jedną kolumnę, dokładały niejawną drugą kolumnę,
   a pięć elementów kolumny graficznej Hero nachodziło na siebie. Poniżej
   ten sam wygląd, tylko bez przepełnień.
   ===================================================================== */

/* Nagłówek: logo, trzy kotwice, logowanie i przycisk nie mieszczą się
   w jednym wierszu poniżej ~760 px. Menu rozwijane bez JavaScriptu:
   checkbox + label, lista wysuwa się pod paskiem. */
@media (max-width: 799px) {
	.fa-naglowek__wnetrze { flex-wrap: nowrap; }
	.fa-menu-przelacznik { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
	.fa-burger {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 44px;
		height: 44px;
		border-radius: 999px;
		background: var(--fa-atrament);
		cursor: pointer;
	}
	.fa-burger span,
	.fa-burger span::before,
	.fa-burger span::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--fa-krem); content: ""; }
	.fa-burger span::before { transform: translateY(-6px); }
	.fa-burger span::after { transform: translateY(4px); }
	.fa-menu-przelacznik:checked + .fa-burger { background: var(--fa-pomarancz); }
	.fa-menu-przelacznik:focus-visible + .fa-burger { outline: 3px solid var(--fa-pomarancz); outline-offset: 3px; }

	.fa-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 4px 24px 20px;
		background: var(--fa-krem);
		border-bottom: 1px solid rgba(26, 20, 16, .08);
		box-shadow: 0 20px 40px -18px rgba(26, 20, 16, .4);
		font-size: 17px;
	}
	.fa-menu-przelacznik:checked ~ .fa-nav { display: flex; }
	.fa-nav__link { padding: 14px 0; border-bottom: 1px solid rgba(26, 20, 16, .08); }
	.fa-nav__przycisk { align-self: flex-start; margin-top: 16px; padding: 12px 22px; }

	/* Pasek z przyciskiem menu ma 73 px (44 + 2 × 14 + obwódka). */
	html:has(body.fa-strona) { scroll-padding-top: calc(73px + var(--wp-admin--admin-bar--height, 0px)); }

	/* Zakładki okazji (41 px) i pakiety (43 px) — pole dotyku 44 px. */
	.fa-zakladka,
	.fa-pakiety__przycisk { min-height: 44px; }
}

/* Obrócona plama z right: -12px wystaje 29 px za kolumnę graficzną, a ta
   kończy się 24 px od krawędzi ekranu aż do 1250 px szerokości — plama
   wychodziła 5 px za ekran i jej zaokrąglony róg ścinał się na płasko
   (w jednej i w dwóch kolumnach). Na 1440 px zostaje wartość z projektu. */
@media (max-width: 1250px) {
	.fa-hero__plama { right: -5px; }
}

/* Pasek administratora poniżej 600 px nie jest przyklejony — nagłówek też
   ma się przyklejać do samej góry. */
@media (max-width: 600px) {
	.fa-naglowek { top: 0; }
}

/* Galeria gości: jedna kolumna od 620 px w dół (2 × 280 + 12 + 48).
   Żółty kafel ze span 2 dokładałby drugą, niejawną kolumnę. */
@media (max-width: 619px) {
	.fa-karaoke { grid-column: auto; }
}

/* Zwierzaki: jedna kolumna od 584 px w dół (2 × 260 + 16 + 48). Długie
   etykiety dochodziły do prawej krawędzi kafla i obrócony róg ścinało
   zaokrąglenie — tu mają wcięcie z obu stron. */
@media (max-width: 583px) {
	.fa-kafel--szeroki { grid-column: auto; }
	.fa-zwierzaki .fa-etykieta { max-width: calc(100% - 32px); }
	.fa-podpis--lista { max-width: calc(100% - 40px); }
}

/* Hero na telefonie: bez własnych reguł. Od projektu z 29.09.2026 telefon
   (236 × 490 px) i karta z kodem mają na 390 px pełny rozmiar i położenie
   z projektu — pomniejszony telefon miał napisy po 6–9 px (recenzja
   29.09.2026). Karta z kodem zachodzi na przycisk w telefonie tak jak
   w projekcie; strona nie przewija się w poziomie od 320 px. */
@media (max-width: 599px) {
	/* Banery „To Marek…” i „wujek Zbyszek”: przy 56/48 px wcięcia zostawało
	   246 px na tekst i przycisk łamał się na dwie linie. */
	.fa-baner__tresc { padding: 44px 28px; }
	.fa-baner__przycisk { text-align: center; }

	/* Karta z kodem: „Wyślij SMS-em” łamało się przy dywizie. */
	.fa-stworz__wynik { padding: 32px 20px; }
	.fa-stworz__pobierz,
	.fa-stworz__sms { padding-left: 10px; padding-right: 10px; white-space: nowrap; }
}

/* Najwęższe telefony (do 399 px): „Uratuj swoją imprezę za 29 zł” łamało
   się na dwie linie (przy 360, 375 i 390 px). */
@media (max-width: 399px) {
	.fa-baner__tresc { padding-left: 20px; padding-right: 20px; }
	.fa-baner__przycisk { padding-left: 20px; padding-right: 20px; text-wrap: balance; }
}