/* /wycena/: układ strony, scope .wyc-page. Pola, przyciski, .wyc-call i .ico-tile są w main.css.
   Kolejność w DOM = kolejność na telefonie (wstęp, karta, telefon, zaufanie, kroki). */

/*--------------------------------------------------------------
# Siatka: wstęp i reszta z lewej, karta wyceny z prawej
--------------------------------------------------------------*/
.wyc-page .wyc-page__hero { padding-bottom: var(--sp-sec); }

.wyc-page__grid {
	display: grid; grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "intro" "card" "side";
	gap: var(--sp-7);
}
.wyc-page__intro { grid-area: intro; }
/* scroll-margin: skok na #formularz zostawia miejsce na narożniki kadru pod nagłówkiem. */
.wyc-page__card { grid-area: card; position: relative; scroll-margin-top: var(--sp-4); }
.wyc-page__side { grid-area: side; }

@media (min-width: 960px) {
	.wyc-page__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 468px);
		grid-template-rows: auto 1fr;
		grid-template-areas: "intro card" "side card";
		gap: 0 clamp(3rem, 7vw, 6.5rem);
	}
	.wyc-page__card { align-self: start; }
}
/* Przyklejona tylko wtedy, gdy mieści się w oknie: inaczej dół karty byłby nieosiągalny. */
@media (min-width: 960px) and (min-height: 820px) {
	.wyc-page__card { position: sticky; top: calc(var(--header-h) + var(--sp-7)); }
}

/*--------------------------------------------------------------
# Wstęp
--------------------------------------------------------------*/
.wyc-page__intro h1 { max-width: 12em; }
.wyc-page__h1-2 { color: var(--t3); }

/* „Wolisz zadzwonić?" pod leadem: numer w pierwszym ekranie telefonu. Od 960 px karta
   .wyc-page__call stoi obok formularza, więc linia znika. */
.wyc-page__quick { margin-top: var(--sp-2); font-size: var(--fs-300); line-height: 1.4; color: var(--t2); }
.wyc-page__quick a {
	display: inline-flex; align-items: center; min-height: var(--tap);
	font-weight: 600; color: var(--t1); white-space: nowrap;
	text-decoration: underline; text-decoration-color: var(--line-hover); text-underline-offset: 3px;
	transition: text-decoration-color .16s var(--ease);
}
.wyc-page__quick a:hover { text-decoration-color: var(--t1); }
@media (min-width: 960px) { .wyc-page__quick { display: none; } }
/* Druga część to osobne wywołanie hds_split_words, więc jej --i liczy od zera: przesunięcie o 2 słowa. */
.js .wyc-page__h1-2 .split__w > span { animation-delay: calc((var(--i, 0) + 2) * 55ms + 60ms); }

/*--------------------------------------------------------------
# Karta wyceny
--------------------------------------------------------------*/
.wyc-page__panel {
	position: relative; overflow: hidden;
	background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}

/* Głowa karty: jedyna płaszczyzna atramentu na stronie. */
.wyc-page__head { padding: var(--sp-4) var(--sp-6) var(--sp-6); background: var(--ink); color: var(--white); }
.wyc-page__hud {
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
	min-height: 28px; font-size: var(--fs-200); line-height: 1; color: var(--ink-t2); font-variant-numeric: tabular-nums;
}
.wyc-page__hud .rec { color: var(--white); }
.wyc-page__brief { display: inline-flex; align-items: center; gap: var(--sp-3); }
.wyc-page__brief-b { display: none; color: var(--white); }
.wyc-page__frames { display: inline-flex; gap: 4px; }
.wyc-page__frames i { position: relative; width: 9px; height: 14px; border: 1px solid var(--ink-line); border-radius: 2px; overflow: hidden; }
.wyc-page__frames i::after {
	content: ''; position: absolute; inset: 0; background: var(--white);
	transform: scaleY(0); transform-origin: bottom; transition: transform .35s var(--ease-out);
}
.wyc-page__title { margin-top: var(--sp-6); font-size: var(--fs-700); line-height: 1.15; letter-spacing: -.025em; color: var(--white); }
.wyc-page__sub { margin-top: var(--sp-2); font-size: var(--fs-300); color: var(--ink-t2); }

/* Formularz: pola z .form, ramkę i tło niesie karta (tak jak .k-form na /kontakt/). */
.wyc-page .wyc-form {
	grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4);
	padding: var(--sp-6); background: none; border: 0; border-radius: 0;
}
.wyc-page .wyc-form > * { grid-column: 1 / -1; }
.wyc-page .wyc-form > .wyc-page__half { grid-column: auto; }
.wyc-page .wyc-form .btn { margin-top: var(--sp-1); }

/* Pole w fokusie dostaje narożniki kadru: kamera „łapie" to, co właśnie piszesz.
   Jeden pseudo-element = dwa narożniki (ramka przycięta clip-path do skrajnych 10 px). */
.wyc-page .wyc-form > div:not(.form__hp) { position: relative; }
.wyc-page .wyc-form > div:not(.form__hp)::before,
.wyc-page .wyc-form > div:not(.form__hp)::after {
	content: ''; position: absolute; left: -9px; right: -9px; height: 10px;
	border: 1.5px solid var(--t1); pointer-events: none;
	clip-path: polygon(0 0, 10px 0, 10px 100%, calc(100% - 10px) 100%, calc(100% - 10px) 0, 100% 0, 100% 100%, 0 100%);
	opacity: 0; transition: opacity .18s var(--ease), transform .32s var(--ease-out);
}
.wyc-page .wyc-form > div:not(.form__hp)::before { top: -8px; border-bottom: 0; transform: translateY(-4px); }
.wyc-page .wyc-form > div:not(.form__hp)::after { bottom: -9px; border-top: 0; transform: translateY(4px); }
.wyc-page .wyc-form > div:focus-within::before,
.wyc-page .wyc-form > div:focus-within::after { opacity: 1; transform: none; }
.wyc-page__note {
	display: flex; align-items: center; justify-content: center; gap: .45rem;
	font-size: var(--fs-200); line-height: 1.45; color: var(--t3); text-align: center;
}
.wyc-page__note svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Wizjer (.vf z main.css, rozmiar z kanonu) poza kartą: narożniki 12 px od krawędzi.
   Karta cofa się o te 12 px (margin-inline), żeby zewnętrzna krawędź narożników stała
   na krawędzi kolumny, a nie wystawała poza siatkę. --dx/--dy to kierunek narożnika,
   z niego liczy się wejście i dociągnięcie przy komplecie pól. */
.wyc-page__card { --vf-in: -12px; --vf-c: var(--t1); }
@media (min-width: 601px) { .wyc-page__card { margin-inline: 12px; } }
.wyc-page__card .vf > i:nth-child(1) { --dx: -1; --dy: -1; }
.wyc-page__card .vf > i:nth-child(2) { --dx: 1; --dy: -1; }
.wyc-page__card .vf > i:nth-child(3) { --dx: -1; --dy: 1; }
.wyc-page__card .vf > i:nth-child(4) { --dx: 1; --dy: 1; }

/* Klatki: każde poprawnie wypełnione pole zapala jedną. Komplet = ostrość złapana,
   narożniki dociągają do karty. Czysty CSS (:has), bez zdarzeń i bez pomiaru. */
.wyc-page__card:has(#wyc-name:valid) .wyc-page__frames i:nth-child(1)::after,
.wyc-page__card:has(#wyc-phone:valid) .wyc-page__frames i:nth-child(2)::after,
.wyc-page__card:has(#wyc-email:valid) .wyc-page__frames i:nth-child(3)::after,
.wyc-page__card:has(#wyc-msg:valid) .wyc-page__frames i:nth-child(4)::after { transform: scaleY(1); }
.wyc-page__card:has(#wyc-name:valid):has(#wyc-phone:valid):has(#wyc-email:valid):has(#wyc-msg:valid) .vf > i {
	transform: translate(calc(var(--dx) * -5px), calc(var(--dy) * -5px));
}
.wyc-page__card:has(#wyc-name:valid):has(#wyc-phone:valid):has(#wyc-email:valid):has(#wyc-msg:valid) .wyc-page__brief-a { display: none; }
.wyc-page__card:has(#wyc-name:valid):has(#wyc-phone:valid):has(#wyc-email:valid):has(#wyc-msg:valid) .wyc-page__brief-b { display: inline; }

/*--------------------------------------------------------------
# Telefon i lista zaufania
--------------------------------------------------------------*/
.wyc-page__call { margin-top: var(--sp-8); }
.wyc-page__call-label { font-size: var(--fs-200); color: var(--t3); }
.wyc-page .wyc-page__call .wyc-call { margin-top: var(--sp-3); }

.wyc-page__trust {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6);
	margin-top: var(--sp-10); padding-top: var(--sp-8); border-top: 1px solid var(--line);
}
.wyc-page__trust li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.wyc-page__trust .ico-tile { margin: 0; }
.wyc-page__trust b { display: block; font-size: var(--fs-300); font-weight: 500; line-height: 1.4; letter-spacing: -.005em; color: var(--t1); }
.wyc-page__trust-txt > span { display: block; margin-top: 2px; font-size: var(--fs-300); line-height: 1.55; color: var(--t2); }

/*--------------------------------------------------------------
# Co się dzieje po wysłaniu: pionowa oś
--------------------------------------------------------------*/
.wyc-page__next { margin-top: var(--sp-10); padding-top: var(--sp-8); border-top: 1px solid var(--line); }
.wyc-page__h2 { font-size: var(--fs-700); letter-spacing: -.02em; }
.wyc-page__steps { display: grid; gap: var(--sp-6); margin-top: var(--sp-6); }
.wyc-page__step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 var(--sp-5); }
/* Łącznik do następnego węzła: od dołu węzła do góry kolejnego (przerwa = gap listy). */
.wyc-page__step:not(:last-child)::before {
	content: ''; position: absolute; left: 20px; top: 48px; bottom: calc(8px - var(--sp-6));
	width: 1px; margin-left: -.5px; background: var(--line-strong); transform-origin: top;
}
.wyc-page__node { position: relative; display: grid; place-items: center; width: 40px; height: 40px; font-size: var(--fs-200); font-weight: 600; color: var(--t1); }
.wyc-page__node svg { position: absolute; inset: 0; width: 40px; height: 40px; fill: none; stroke: var(--t1); stroke-width: 1.5; }
.wyc-page__step-body { padding-top: 7px; }
.wyc-page__when { display: flex; }
.wyc-page__step h3 { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-600); font-weight: 500; letter-spacing: -.01em; }
.wyc-page__step-body > p:last-child { font-size: var(--fs-300); line-height: 1.6; color: var(--t2); max-width: 34em; }

/*--------------------------------------------------------------
# Dane firmy
--------------------------------------------------------------*/
.wyc-page__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); }
.wyc-page__facts > div { padding: var(--sp-5); min-width: 0; }
.wyc-page__facts > div + div { border-left: 1px solid var(--line); }
.wyc-page__facts dt { font-size: var(--fs-200); color: var(--t3); }
.wyc-page__facts dd { margin-top: var(--sp-1); font-size: var(--fs-300); font-weight: 500; line-height: 1.45; color: var(--t1); overflow-wrap: anywhere; }
.wyc-page__facts small { display: block; margin-top: 2px; font-size: var(--fs-200); font-weight: 400; color: var(--t3); }
.wyc-page__facts a { display: inline-flex; align-items: center; min-height: var(--tap); margin-block: -10px; color: var(--t1); transition: color .16s var(--ease); }
.wyc-page__facts a:hover { color: var(--t2); }
/* Dół daje stopka (margin-top), własny padding podwajałby przerwę. */
.wyc-page .wyc-page__nap { padding-bottom: 0; }

/*--------------------------------------------------------------
# Ruch (tylko z JS i bez prefers-reduced-motion; bez JS wszystko stoi w stanie końcowym)
--------------------------------------------------------------*/
@media (prefers-reduced-motion: no-preference) {
	/* Karta dosuwa się razem z H1, ale jest widoczna od pierwszej klatki (pierwszy ekran bez
	   zanikania, system-wizualny §6); potem narożniki łapią kadr (REC mruga sam w kadrze). */
	.js .wyc-page__panel { animation: wyc-card-in .7s var(--ease-out) backwards; }
	.js .wyc-page__card .vf > i { animation: wyc-vf-in .8s var(--ease-out) .65s backwards; }

	/* Ikony zaufania rysują się obrysem, gdy lista jest w kadrze ([data-live] → .is-live z main.js).
	   Sama lista stoi od początku, znika i wraca tylko obrys ikon. */
	.js .wyc-page__trust .hds-ico > * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-out) .15s; }
	.js .wyc-page__trust.is-live .hds-ico > * { stroke-dashoffset: 0; }
	.js .wyc-page__trust li:nth-child(2) .hds-ico > * { transition-delay: .25s; }
	.js .wyc-page__trust li:nth-child(3) .hds-ico > * { transition-delay: .35s; }
	.js .wyc-page__trust li:nth-child(4) .hds-ico > * { transition-delay: .45s; }

	/* Oś: węzeł rysuje wizjer, potem łącznik schodzi do następnego. */
	.js .wyc-page__step { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease-out); }
	.js .wyc-page__step::before { transform: scaleY(0); transition: transform .7s var(--ease-out); }
	.js .wyc-page__node path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease-out); }
	.js .wyc-page__steps.is-visible .wyc-page__step { opacity: 1; transform: none; }
	.js .wyc-page__steps.is-visible .wyc-page__step::before { transform: scaleY(1); }
	.js .wyc-page__steps.is-visible .wyc-page__node path { stroke-dashoffset: 0; }
	.js .wyc-page__step:nth-child(2) { transition-delay: .45s; }
	.js .wyc-page__step:nth-child(3) { transition-delay: .9s; }
	.js .wyc-page__step:nth-child(1)::before { transition-delay: .35s; }
	.js .wyc-page__step:nth-child(2)::before { transition-delay: .8s; }
	.js .wyc-page__step:nth-child(1) .wyc-page__node path { transition-delay: .1s; }
	.js .wyc-page__step:nth-child(2) .wyc-page__node path { transition-delay: .55s; }
	.js .wyc-page__step:nth-child(3) .wyc-page__node path { transition-delay: 1s; }
}
@keyframes wyc-card-in { from { transform: translateY(12px); } }
@keyframes wyc-vf-in { from { opacity: 0; transform: translate(calc(var(--dx) * 14px), calc(var(--dy) * 14px)); } }

/*--------------------------------------------------------------
# Tablet i telefon
--------------------------------------------------------------*/
/* Wąska lewa kolumna obok karty (laptop 960 do 1140 px): lista zaufania w jednym rzędzie. */
@media (min-width: 960px) and (max-width: 1140px) {
	.wyc-page__trust { grid-template-columns: 1fr; gap: var(--sp-5); }
}
@media (max-width: 959px) {
	.wyc-page__card { max-width: 640px; }
	.wyc-page__call { margin-top: var(--sp-6); }
}
@media (max-width: 600px) {
	/* Pierwsze pole ma wejść w widoczny obszar telefonu (390×664): ciaśniejsza głowa karty,
	   bez podtytułu (24 godziny i „bez zobowiązań" niosą lista zaufania i kroki niżej). */
	.wyc-page__grid { gap: var(--sp-4); }
	.wyc-page__quick { margin-top: var(--sp-1); }
	.wyc-page__head { padding: var(--sp-4) var(--sp-5); }
	.wyc-page__hud { min-height: 20px; }
	.wyc-page__title { margin-top: var(--sp-3); }
	.wyc-page__sub { display: none; }
	.wyc-page .wyc-form { padding: var(--sp-5); }
	.wyc-page__card { --vf-in: -10px; }
	.wyc-page__trust { grid-template-columns: 1fr; gap: var(--sp-5); margin-top: var(--sp-8); padding-top: var(--sp-7); }
	.wyc-page__next { margin-top: var(--sp-8); padding-top: var(--sp-7); }
	.wyc-page__step { gap: 0 var(--sp-4); }

	/* Dane firmy: wiersz pod wierszem, etykieta z lewej, wartość z prawej. */
	.wyc-page__facts { grid-template-columns: 1fr; }
	.wyc-page__facts > div { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 52px; padding: var(--sp-2) var(--sp-4); }
	.wyc-page__facts > div + div { border-left: 0; border-top: 1px solid var(--line); }
	.wyc-page__facts dd { margin: 0; text-align: right; }
}
@media (max-width: 480px) {
	.wyc-page .wyc-form > .wyc-page__half { grid-column: 1 / -1; }
}
@media (min-width: 601px) and (max-width: 959px) {
	.wyc-page__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wyc-page__facts > div:nth-child(3) { border-left: 0; }
	.wyc-page__facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}