/* Podstrona /kontakt/ aslandi.pl (lab kontakt-od-zera, 09.10.2026): sekcja formularza to sekcja kontaktu strony głównej
   (.kt, styl kontakt.css z wtyczki aslandi-strona-glowna); tu tylko jej dopasowanie do roli pierwszej sekcji strony i dane
   kontaktowe pod nią (.kn): telefon, e-mail, siedziba, dział handlowy. Tokeny i wartości jak w kontakt.css (DESIGN.md):
   sosna #123f2d, atrament #1c3428, szary #58685f 6,0:1, linia #dce3da, szałwia #eef3ec, złoto jasne #dcc78f, fokus #a67b23. */

/* treść strony na całą szerokość: kontener motywu (.ast-container) to flex, a element <main> bez szerokości brał ją z treści
   (na szerokim ekranie zielone tło kończyło się ok. 1460 px, Igor 09.10); ta sama reguła co .aslandi-ak-main podstron */
.aslandi-kn-main { display: block; flex: 1 1 100%; width: 100%; min-width: 0; }

/* pierwsza sekcja strony: mniej miejsca nad nagłówkiem (pod nagłówkiem witryny), formularz szybciej na ekranie */
.kt.kt--strona { padding-top: clamp(28px, 3vw, 44px); }   /* przycisk wyceny w pierwszym ekranie 1440 x 900 */

/* Twarze nad nagłówkiem (v2, Igor 16.10.2026): trzy osoby obok siebie, bez zachodzenia, w złotych obwódkach jak
   w ankiecie dofinansowań; te same pliki co portrety działu handlowego niżej (bez dodatkowego pobierania). */
.kt--strona .kt-twarze { display: flex; justify-content: center; gap: 12px; margin: 0 0 16px; padding: 0; }
.kt--strona .kt-twarze img { display: block; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #fff;
  box-shadow: 0 0 0 2px #dcc78f, 0 10px 22px -12px rgba(0, 0, 0, 0.55); }
@media (prefers-reduced-motion: no-preference) {
  .kt--strona .kt-twarze img { animation: kt-twarz 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .kt--strona .kt-twarze img:nth-child(2) { animation-delay: 90ms; }
  .kt--strona .kt-twarze img:nth-child(3) { animation-delay: 180ms; }
  @keyframes kt-twarz { from { opacity: 0; transform: translateY(8px) scale(0.94); } }
}

/* Usługi z ikonami 3D z ankiety dofinansowań (v2, Igor 16.10.2026), tylko na tej stronie: formularz wyceny 5164 na stronie
   głównej zostaje z ikonami liniowymi (kontakt.css wtyczki aslandi-strona-glowna). Rysunek w miejscu maski ikony; po
   wyborze ikona zostaje w kolorach i lekko rośnie, kafel na sośnie jak dotąd. */
.kt--strona .wpcf7-list-item label { row-gap: 6px; min-height: 108px; padding-block: 12px; }
.kt--strona .wpcf7-list-item label::after { width: 64px; height: 64px; -webkit-mask: none; mask: none; background: var(--kt-obraz, none) center / contain no-repeat;
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.kt--strona .wpcf7-list-item label:has(input:checked)::after { background: var(--kt-obraz, none) center / contain no-repeat; transform: scale(1.08); }
.kt--strona .wpcf7-list-item label:has(input[value="Pompa ciepła"])::after { --kt-obraz: url("../media/ikona-pompa.webp"); }
.kt--strona .wpcf7-list-item label:has(input[value="Fotowoltaika"])::after,
.kt--strona .wpcf7-list-item label:has(input[value="Instalacja fotowoltaiczna"])::after { --kt-obraz: url("../media/ikona-fotowoltaika.webp"); }
.kt--strona .wpcf7-list-item label:has(input[value="Magazyn energii"])::after { --kt-obraz: url("../media/ikona-magazyn.webp"); }
.kt--strona .wpcf7-list-item label:has(input[value="Klimatyzacja"])::after { --kt-obraz: url("../media/ikona-klimatyzacja.webp"); }
.kt--strona .wpcf7-list-item label:has(input[value="Inna usługa"])::after { --kt-obraz: url("../media/ikona-dom.webp"); }
@media (hover: hover) and (pointer: fine) {
  .kt--strona .wpcf7-list-item label:not(:has(input:checked)):hover::after { transform: translateY(-3px) scale(1.06); }
}
@media (max-width: 759px) {
  .kt--strona .wpcf7-list-item label { min-height: 94px; }
  .kt--strona .wpcf7-list-item label::after { width: 52px; height: 52px; }
}
@media (max-width: 699px) {
  .kt--strona .kt-twarze { gap: 10px; margin-bottom: 14px; }
  .kt--strona .kt-twarze img { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .kt--strona .wpcf7-list-item label::after { transition: none; transform: none; }
  .kt--strona .wpcf7-list-item label:has(input:checked)::after { transform: none; }
}

.kn {
  --kn-sosna: #123f2d;
  --kn-atrament: #1c3428;
  --kn-szary: #58685f;
  --kn-linia: #dce3da;
  --kn-szalwia: #eef3ec;
  --kn-fokus: #a67b23;
  padding-block: clamp(56px, 6vw, 88px);
  background: #f7f8f4;
  color: var(--kn-atrament);
  font-family: Poppins, system-ui, sans-serif;
}
.kn *, .kn *::before, .kn *::after { box-sizing: border-box; }
.kn h2, .kn h3, .kn p, .kn ul { margin: 0; padding: 0; }
.kn ul { list-style: none; }
.kn-wew { width: min(960px, 100% - 64px); margin-inline: auto; }
.kn .kn-h2 { font-family: inherit; font-size: clamp(26px, 1.6vw + 16px, 36px); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em;
  text-align: center; text-transform: none; color: var(--kn-sosna); text-wrap: balance; }
.kn .kn-h3 { margin-top: clamp(40px, 4vw, 56px); font-family: inherit; font-size: clamp(20px, 0.6vw + 16px, 24px); line-height: 1.3; font-weight: 600;
  text-align: center; text-transform: none; color: var(--kn-sosna); }

/* Telefon, e-mail, siedziba: trzy duże, klikalne karty (zadzwoń, napisz, mapa). */
.kn .kn-kanaly { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.kn a.kn-kanal, .kn a.kn-kanal:hover, .kn a.kn-kanal:focus, .kn a.kn-kanal:visited {
  display: flex; align-items: center; gap: 14px; height: 100%; min-height: 96px; padding: 20px; border: 1px solid var(--kn-linia); border-radius: 14px;
  background: #fff; color: var(--kn-atrament); text-decoration: none; box-shadow: 0 1px 2px rgba(18, 63, 45, 0.05);
  transition: border-color 160ms ease, box-shadow 160ms ease; }
.kn-ikona { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--kn-szalwia); }
.kn-ikona svg { width: 22px; height: 22px; fill: none; stroke: var(--kn-sosna); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kn-tekst { display: grid; gap: 4px; min-width: 0; }
.kn-podpis { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--kn-szary); }
.kn-wartosc { font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--kn-sosna); overflow-wrap: anywhere; }
.kn-wartosc.kn-adres { font-size: 16px; }
.kn-bez-lamania { white-space: nowrap; }
.kn-ukryte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.kn-mapa { font-size: 14px; font-weight: 600; color: var(--kn-sosna); text-decoration: underline; text-underline-offset: 3px; }

/* Dział handlowy: Dawid i Dagmara obok siebie (portret, imię, rola, telefon, e-mail). */
.kn .kn-osoby { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.kn-osoba { display: flex; align-items: center; gap: 18px; padding: 20px; border: 1px solid var(--kn-linia); border-radius: 14px; background: #fff;
  box-shadow: 0 1px 2px rgba(18, 63, 45, 0.05); }
.kn .kn-zdjecie { flex: none; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; background: var(--kn-szalwia); }
.kn-dane { display: grid; gap: 2px; min-width: 0; }
.kn .kn-imie { font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--kn-sosna); }
.kn .kn-rola { margin-bottom: 6px; font-size: 14px; line-height: 1.3; color: var(--kn-szary); }
.kn a.kn-link, .kn a.kn-link:hover, .kn a.kn-link:focus, .kn a.kn-link:visited {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--kn-atrament); font-size: 15px; font-weight: 500; line-height: 1.3;
  text-decoration: underline; text-decoration-color: rgba(18, 63, 45, 0.35); text-underline-offset: 3px; overflow-wrap: normal; }   /* cel dotyku 44 px; adres e-mail łamie się tylko przed @ (wbr) */
.kn a.kn-link svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--kn-sosna); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.kn :focus-visible { outline: 3px solid var(--kn-fokus); outline-offset: 3px; }
.kn a.kn-kanal:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  .kn a.kn-kanal:hover { border-color: var(--kn-sosna); box-shadow: 0 6px 18px -10px rgba(18, 63, 45, 0.35); }
  .kn a.kn-link:hover { text-decoration-color: currentColor; }
}

/* Węziej: kanały i osoby jedno pod drugim. */
@media (max-width: 859px) {
  .kn .kn-kanaly { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .kn a.kn-kanal { min-height: 0; }
}
@media (max-width: 699px) {
  .kn-wew { width: min(960px, 100% - 24px); }
  .kn .kn-osoby { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .kn-osoba { padding: 16px; gap: 14px; }
  .kn .kn-zdjecie { width: 88px; height: 88px; }
}
/* Wąskie telefony: zdjęcie z imieniem i rolą w jednym rzędzie, telefon i e-mail pod nimi na całą szerokość karty
   (adres e-mail nie łamie się w środku). */
@media (max-width: 479px) {
  .kn-osoba { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-items: center; }
  .kn-dane { display: contents; }
  .kn .kn-zdjecie { grid-row: 1 / span 2; width: 64px; height: 64px; }
  .kn .kn-imie { grid-column: 2; align-self: end; }
  .kn .kn-rola { grid-column: 2; align-self: start; margin-bottom: 0; }
  .kn a.kn-link { grid-column: 1 / -1; }
  .kn a.kn-link:first-of-type { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .kn a.kn-kanal { transition: none; }
}