/* =====================================================================
   KONTAKT
   Uklad: pas z danymi firmy, ponizej formularz z panelem bocznym
   (szybka wycena kuchni + nota RODO), na koncu dojazd.
   Korzysta z tych samych klas sekcji co podstrony produktowe (.pr).
   ===================================================================== */

/* --- pas z danymi: cztery karty --- */
.kt-dane {
	display: grid; gap: clamp(1rem, 1.8vw, 1.5rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: clamp(2rem, 3.4vw, 3rem);
}
@media (min-width: 900px) { .kt-dane { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.kt-karta {
	display: flex; flex-direction: column; gap: .55rem;
	padding: clamp(1.3rem, 2.2vw, 1.9rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: clamp(12px, 1.4vw, 18px) clamp(12px, 1.4vw, 18px) clamp(22px, 2.6vw, 34px) clamp(12px, 1.4vw, 18px);
	background: var(--wp--preset--color--base);
	text-decoration: none; color: inherit;
	transition: border-color .35s ease, transform .35s var(--ease-out);
}
.kt-karta__ico {
	display: flex; width: 34px; height: 34px;
	color: var(--wp--preset--color--accent);
}
.kt-karta__ico svg { width: 100%; height: 100%; }
.kt-karta__label {
	font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.kt-karta__wartosc {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
}
.kt-karta__dopisek { font-size: .92rem; line-height: 1.5; color: var(--wp--preset--color--muted); }
@media (hover: hover) {
	a.kt-karta:hover { border-color: var(--wp--preset--color--accent); transform: translateY(-3px); }
}
a.kt-karta:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

/* --- formularz i panel boczny --- */
.kt-uklad {
	display: grid; gap: clamp(1.6rem, 3vw, 2.8rem);
	margin-top: clamp(2rem, 3.4vw, 3rem);
	align-items: start;
}
@media (min-width: 1000px) {
	.kt-uklad { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
}
.kt-panel {
	padding: clamp(1.5rem, 2.8vw, 2.6rem);
	border-radius: clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px) clamp(26px, 3.2vw, 44px) clamp(14px, 1.6vw, 22px);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
}
.kt-bok { display: grid; gap: clamp(1rem, 1.8vw, 1.4rem); }
.kt-bok__blok {
	padding: clamp(1.4rem, 2.4vw, 2rem);
	border-radius: clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px) clamp(26px, 3.2vw, 44px) clamp(14px, 1.6vw, 22px);
	background: var(--wp--preset--color--accent);
	color: #fff;
}
.kt-bok__blok .pr__sub { color: #fff; }
.kt-bok__blok .pr__p { color: rgba(255, 255, 255, .78); }

/* =====================================================================
   AKCENT NA SZYBKIEJ WYCENIE KUCHNI
   Odreczny podpis ze strzalka nad boxem. Po wejsciu w pole widzenia
   (klasa z assets/js/wejscie.js) najpierw pojawia sie tekst, potem
   rysuje sie linia, na koncu grot. Bez wstrzasania boxem: drgajacy
   element czyta sie jak blad formularza, a nie jak zaproszenie.
   ===================================================================== */

/* Krój uzyty tylko do tego jednego podpisu, wiec plik jest okrojony do
   znakow ze zwrotu "potrzebujesz samej kuchni?" (8,5 kB zamiast 51 kB).
   Zmiana tresci podpisu wymaga pobrania nowego wycinka z Google Fonts. */
@font-face {
	font-family: 'Caveat';
	font-style: normal; font-weight: 600; font-display: swap;
	src: url('../fonts/caveat-podpis.woff2') format('woff2');
	unicode-range: U+20, U+3f, U+61-63, U+65, U+68-6b, U+6d-70, U+72-75, U+7a;
}

.kt-bok__blok { position: relative; }
.kt-podpis {
	display: flex; align-items: flex-end; gap: clamp(.4rem, 1vw, .9rem);
	margin: 0 0 .45rem clamp(.5rem, 2vw, 1.6rem);
	color: var(--wp--preset--color--accent);
	pointer-events: none;
}
.kt-podpis__tekst {
	font-family: 'Caveat', cursive;
	font-weight: 600;
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	line-height: 1.1;
	transform: rotate(-4deg);
	transform-origin: left bottom;
	max-width: 9em;
}
.kt-podpis__rys { flex: none; width: clamp(74px, 8vw, 104px); height: auto; opacity: .75; margin-bottom: -.55rem; }

@media (prefers-reduced-motion: no-preference) {
	.js .kt-wyroznik[data-wejscie] .kt-bok__blok {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
	}
	.js .kt-wyroznik.jest-widoczny .kt-bok__blok { opacity: 1; transform: none; }

	/* podpis: tekst wjezdza, potem rysuje sie strzalka */
	.js .kt-wyroznik[data-wejscie] .kt-podpis__tekst {
		opacity: 0;
		transform: rotate(-4deg) translateY(10px);
		transition: opacity .5s var(--ease-out) .25s, transform .5s var(--ease-out) .25s;
	}
	.js .kt-wyroznik.jest-widoczny .kt-podpis__tekst { opacity: 1; transform: rotate(-4deg); }

	.js .kt-wyroznik[data-wejscie] .kt-podpis__linia,
	.js .kt-wyroznik[data-wejscie] .kt-podpis__grot {
		stroke-dasharray: 1; stroke-dashoffset: 1;
	}
	.js .kt-wyroznik.jest-widoczny .kt-podpis__linia {
		animation: kt-rysuj .85s var(--ease-out) .55s forwards;
	}
	.js .kt-wyroznik.jest-widoczny .kt-podpis__grot {
		animation: kt-rysuj .3s var(--ease-out) 1.3s forwards;
	}

	/* Pierscien rozchodzacy sie z przycisku - dwa razy, potem cisza.
	   Siedzi na opakowaniu, a nie na samym przycisku, bo .btn ma
	   overflow: hidden (potrzebne do wjezdzajacego wypelnienia) i przycielby go. */
	.kt-wyroznik.jest-widoczny .pr__akcja::after {
		content: "";
		position: absolute; inset: 0;
		border-radius: 100px;
		border: 2px solid rgba(239, 234, 226, .85);
		opacity: 0;
		animation: kt-pierscien 1.9s var(--ease-out) 2.4s 2;
		pointer-events: none;
	}
}
@keyframes kt-rysuj { to { stroke-dashoffset: 0; } }
.kt-bok__blok .pr__akcja { position: relative; display: inline-block; }
@keyframes kt-pierscien {
	0%   { opacity: .9; transform: scale(1); }
	70%  { opacity: 0;  transform: scale(1.16); }
	100% { opacity: 0;  transform: scale(1.16); }
}
/* nota RODO stoi na piaskowej sekcji, wiec musi miec wlasne, jasne tlo */
.kt-bok__rodo {
	padding: clamp(1.2rem, 2vw, 1.6rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: clamp(12px, 1.4vw, 18px) clamp(12px, 1.4vw, 18px) clamp(22px, 2.6vw, 30px) clamp(12px, 1.4vw, 18px);
	background: var(--wp--preset--color--base);
}
.kt-bok__rodo p {
	margin: 0;
	font-size: .82rem; line-height: 1.55;
	color: var(--wp--preset--color--muted);
}
.kt-bok__rodo strong { color: var(--wp--preset--color--contrast); font-weight: 600; }

/* --- zastepnik formularza, zanim wtyczka zostanie zainstalowana --- */
.kt-brak-formularza {
	padding: clamp(1.6rem, 3vw, 2.4rem);
	border: 1px dashed rgba(38, 53, 71, .35);
	border-radius: clamp(12px, 1.4vw, 18px);
	background: var(--wp--preset--color--surface);
	font-size: .95rem; line-height: 1.6;
	color: var(--wp--preset--color--muted);
}
.kt-brak-formularza strong { display: block; margin-bottom: .4rem; color: var(--wp--preset--color--contrast); }

/* =====================================================================
   FLUENT FORMS - dociagniecie wtyczki do wygladu strony.
   Klasy sa narzucone przez wtyczke, wiec przechwytujemy je z zewnatrz.
   ===================================================================== */
.fluentform .ff-el-group { margin-bottom: clamp(1rem, 1.8vw, 1.4rem); }
.fluentform .ff-el-input--label label {
	font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.fluentform .ff-el-form-control {
	width: 100%;
	padding: .85rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
	transition: border-color .3s ease;
}
.fluentform .ff-el-form-control:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
}
/* natywna lista rozwijana potrafi dziedziczyc bialy tekst - wymuszamy kolor */
.fluentform select.ff-el-form-control option { color: var(--wp--preset--color--contrast); background: #fff; }
.fluentform textarea.ff-el-form-control { min-height: 9rem; resize: vertical; }
.fluentform .ff-el-form-check-label { font-size: .92rem; line-height: 1.5; color: var(--wp--preset--color--muted); }
.fluentform .ff-btn-submit {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
	padding: 1rem 1.7rem;
	border-radius: 100px;
	border: 2px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600; font-size: 1rem; line-height: 1.2;
	cursor: pointer;
	transition: color .35s ease, background .35s ease;
}
@media (hover: hover) {
	.fluentform .ff-btn-submit:hover { background: var(--wp--preset--color--base); color: var(--wp--preset--color--accent); }
}
.fluentform .ff-btn-submit:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

/* =====================================================================
   SZYBKA WYCENA KUCHNI - podstrona z formularzem Tally.
   Formularz jest osadzony w ramce z obcego serwera, wiec nie mamy dostepu
   do jego srodka. Otaczamy go wlasnym panelem, zeby wtapial sie w strone.
   ===================================================================== */
@media (min-width: 1240px) {
	.pr-proces__kroki--trzy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Naglowek i karta z formularzem stoja w jednej, wysrodkowanej kolumnie.
   Wczesniej naglowek trzymal sie lewej krawedzi strony, a karta byla
   wysrodkowana, wiec nic sie ze soba nie pokrywalo.
   Szerokosci kolumny nie ma sensu zwiekszac: Tally i tak renderuje formularz
   w stalych 684 px i sam go centruje, wiec szersza ramka dalaby tylko wieksza
   pusta karte wokol tego samego formularza. */
.wy-naglowek {
	max-width: 50rem;
	margin-inline: auto;
	text-align: center;
}
.wy-naglowek .pr__eyebrow { justify-content: center; }
.wy-naglowek .pr__title, .wy-naglowek .pr__p { max-width: none; }
.wy-panel {
	max-width: 50rem;
	margin: clamp(2rem, 3.4vw, 3rem) auto 0;
	padding: clamp(1rem, 2.4vw, 2.2rem) clamp(.8rem, 2.4vw, 2.2rem) clamp(1.2rem, 2.4vw, 2rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px) clamp(26px, 3.2vw, 44px) clamp(14px, 1.6vw, 22px);
	background: var(--wp--preset--color--base);
}
/* ramka Tally sama reguluje wysokosc, wiec zostawiamy jej pelna szerokosc */
.wy-panel__ramka {
	display: block;
	width: 100%;
	border: 0;
	min-height: 34rem;
	color-scheme: light;
}
.wy-panel__zapas {
	margin: clamp(.8rem, 1.6vw, 1.2rem) 0 0;
	padding-top: clamp(.8rem, 1.6vw, 1.2rem);
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: .88rem; line-height: 1.55;
	color: var(--wp--preset--color--muted);
	text-align: center;
}
.wy-panel__zapas a { color: var(--wp--preset--color--accent); text-decoration: underline; text-underline-offset: .2em; }

/* Na najwezszych telefonach dwie karty obok siebie zostawiaja okolo 80 px na
   tresc, a adres poczty potrzebuje ponad 100 px i wychodzil poza karte.
   Ponizej 520 px karty ida jedna pod druga. */
@media (max-width: 520px) {
	.kt-dane { grid-template-columns: minmax(0, 1fr); }
}
/* dlugi adres poczty nie moze rozpychac karty ani z niej wychodzic */
.kt-karta__wartosc, .kt-karta__dopisek { overflow-wrap: anywhere; }

/* Wtyczka wstrzykuje wlasna regule przycisku w tresci strony, a wiec PO naszych
   arkuszach, i robi to selektorem o wiekszej wadze:
   form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style)
   Dlatego kolor musi byc podany selektorem jeszcze mocniejszym. Bez tego
   przycisk zostaje w domyslnym kolorze wtyczki, a nie w kolorach strony.
   Swiadomie bez !important - wystarczy przebic wage. */
.fluentform form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style) {
	background-color: var(--wp--preset--color--accent);
	color: #fff;
}
@media (hover: hover) {
	.fluentform form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):hover {
		background-color: var(--wp--preset--color--base);
		color: var(--wp--preset--color--accent);
	}
}

/* Podpowiedz w polu wiadomosci lamie sie na kilka wierszy, wiec potrzebuje
   odstepu miedzy nimi. Bez tego wiersze sa sklejone. */
.fluentform textarea.ff-el-form-control { line-height: 1.6; }