/* LAB sekcja usług nowej strony głównej aslandi.pl, v2 (28.09.2026).
   Uwagi Igora do v1: usługi na równo (pompa ciepła tak samo ważna jak fotowoltaika), każdy kafel tej samej
   wielkości z tą samą pętlą wideo, mało tekstu, ilustracja i jasne „Zobacz ofertę”; każda usługa jako
   osobny kafel (karta). Kolejność ustawia skrypt (sezon grzewczy, pytanie o fotowoltaikę w hero), wielkość
   nigdy. 30.09: siatka 2 × 2 na pełną szerokość sekcji zamiast czterech w rzędzie (Igor: „wróć do 2x2… szerokość
   ma być taka sama… kafelki, a szczególnie obrazy większe”, bo zależy mu na pętlach); dawny układ pod ?uklad=4x1.
   Marka: sosna #123f2d, złoto #ceb472, Poppins, jasny motyw (marka/DESIGN.md). Kształty: kafle i pas 18 px,
   przycisk w kaflu 10 px, pigułki i plakietki pełne. Ruch: pętle wideo w kaflach, raz przy wejściu kafle
   pojawiają się kaskadą (co 60 ms), najechanie i nacisk z krzywą Emila; przy ograniczonym ruchu bez przesunięć. */
.us {
  --us-sosna: #123f2d;
  --us-sosna-2: #19583f;
  --us-atrament: #1c3428;
  --us-szary: #58685f;
  --us-zloto: #ceb472;
  --us-zloto-2: #d8c287;
  --us-zloto-tekst: #182e23;
  --us-zloto-jasne: #dcc78f;
  --us-tlo: #f7f8f4;
  --us-szalwia: #eaf0e3;
  --us-linia: #dce3da;
  --us-fokus: #a67b23;
  --us-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --us-r: 18px;
  background: var(--us-tlo);
  color: var(--us-atrament);
  font-family: Poppins, system-ui, sans-serif;
  padding-block: clamp(64px, 7vw, 104px);
}
.us *, .us *::before, .us *::after { box-sizing: border-box; }
.us h2, .us h3, .us p, .us ul { margin: 0; }
.us ul { padding: 0; list-style: none; }
.us a { -webkit-tap-highlight-color: transparent; }
.us ::selection { background: #cfdcc5; color: var(--us-atrament); }
/* obrys fokusu idzie za promieniem samego elementu (border-radius tutaj zmieniał kształt pigułek i przycisków, 28.09) */
.us :focus-visible { outline: 3px solid var(--us-fokus); outline-offset: 3px; }

.us-wew { width: min(1280px, 100% - 64px); margin-inline: auto; }

/* Nagłówek nad równą siatką: wyśrodkowany, jeden komunikat i jedno zdanie o dotacjach. */
.us-naglowek { max-width: 46rem; margin: 0 auto clamp(36px, 4.5vw, 56px); text-align: center; }
.us h2 { font-size: clamp(30px, 2.2vw + 16px, 48px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: var(--us-sosna); text-wrap: balance; }
.us h2 em { font-style: normal; padding-inline: 2px; background: linear-gradient(transparent 66%, rgba(206, 180, 114, 0.55) 66%, rgba(206, 180, 114, 0.55) 92%, transparent 92%); }
.us-lead { margin-top: 14px; font-size: clamp(16.5px, 0.3vw + 15px, 18.5px); line-height: 1.55; color: var(--us-szary); text-wrap: balance; }

/* Cztery równe kafle 2 × 2 (pary: prąd, ciepło); ta sama pętla 4:3 w każdym. */
/* grid-auto-rows 1fr: wszystkie wiersze tej samej wysokości, więc kafle są równe także w dwóch i w jednej kolumnie */
.us-kafle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(16px, 1.8vw, 24px); }
.us-kafle > li { display: flex; min-width: 0; }
.us-kafel { position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden; isolation: isolate;
  border-radius: var(--us-r); border: 1px solid var(--us-linia); background: #fff; color: inherit; text-decoration: none;
  box-shadow: 0 1px 2px rgba(18, 63, 45, 0.05), 0 14px 30px -22px rgba(18, 63, 45, 0.45);
  transition: transform 220ms var(--us-ease), box-shadow 220ms var(--us-ease), border-color 220ms ease;
  touch-action: manipulation; }
.us-kafel:focus-visible { outline: 3px solid var(--us-fokus); outline-offset: 4px; border-radius: var(--us-r); }
.us-kafel:active { transform: scale(0.985); }

.us-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--us-szalwia); }
.us-media > video, .us-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.us-media > video, .us-media > img, .us-zastepcze { transition: transform 600ms var(--us-ease); }

/* Pole zastępcze do czasu pętli wideo. */
.us-zastepcze { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 20px 24px; text-align: center; font-size: 13.5px; line-height: 1.45; color: var(--us-szary);
  background: linear-gradient(160deg, #eef3e8 0%, #e1e9d9 100%); }
.us-zastepcze::before { content: ""; position: absolute; inset: 10px; border: 1.5px dashed #b4c3ad; border-radius: 10px; pointer-events: none; }
.us-zastepcze svg { width: 28px; height: 28px; fill: none; stroke: var(--us-sosna); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 2px; }
.us-zastepcze-tytul { font-weight: 600; font-size: 14.5px; color: var(--us-atrament); }

/* treść rośnie z kaflem (kontener: li): w szerokim kaflu 2 × 2 większe odstępy, tytuł i opis, w wąskim jak dotąd;
   przeglądarki bez jednostek cqw zostają przy pierwszej wartości */
.us-tresc { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 18px 20px 20px; padding: clamp(18px, 3.6cqw, 24px) clamp(20px, 4.2cqw, 28px) clamp(20px, 4.2cqw, 28px); }
.us-tytul { font-size: clamp(19px, 0.5vw + 15px, 22px); font-size: clamp(19px, 3.8cqw, 24px); line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--us-sosna); }
.us-opis { padding-bottom: 12px; font-size: 15.5px; font-size: clamp(15.5px, 2.7cqw, 17px); line-height: 1.5; color: var(--us-szary); text-wrap: pretty; }
/* przycisk zawsze na dole kafla, więc w rzędzie stoją w jednej linii niezależnie od długości opisu */
.us-cta { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: auto;
  border-radius: 10px; background: var(--us-sosna); color: #fff; font-size: 16px; font-weight: 600; line-height: 1.2;
  -webkit-user-select: none; user-select: none; transition: background-color 160ms ease; }
.us-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--us-ease); }

/* Dotacja jako dodatek do oferty w treści karty, pod opisem i nad „Zobacz ofertę”. Jasne złoto (wartość, pieniądze),
   tekst w zieleni marki. Pigułka na szerokość treści, bez cienia: czyta się jak etykieta, nie jak drugi przycisk,
   więc nie konkuruje z pełnym zielonym „Zobacz ofertę” na całą szerokość. Moneta z ikonką usługi, pod nazwą dodatku
   zdjęcie obawy przed papierami. Jeden miękki błysk przy wejściu kafli. */
.us-dodatek { position: relative; overflow: hidden; isolation: isolate; align-self: flex-start; display: flex; align-items: center;
  gap: 10px; padding: 5px 16px 5px 5px; border-radius: 999px; background: #f8f1de;
  box-shadow: inset 0 0 0 1px rgba(206, 180, 114, 0.6); }
/* „.us p” zeruje marginesy, stąd selektor z .us-tresc: dodatek bliżej opisu, wyraźny odstęp od przycisku */
.us-tresc .us-dodatek { margin: -4px 0 16px; }
.us-dodatek-moneta { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f6e8bd 0%, #ddc486 45%, #b8994f 100%);
  box-shadow: inset 0 -1.5px 0 rgba(90, 66, 16, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.us-dodatek-moneta svg { width: 17px; height: 17px; fill: none; stroke: #123f2d; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.us-dodatek-tekst { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.us-dodatek-tekst strong { font-size: 14px; font-weight: 700; color: var(--us-sosna); }
.us-dodatek-tekst span { font-size: 12.5px; font-weight: 500; color: #6b5a2c; }
.us-dodatek::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%); transform: translateX(-130%); }
html.us-anim .us-kafle.widac .us-dodatek::after { animation: us-blysk 1.4s var(--us-ease) 0.8s 1 both; }
@keyframes us-blysk { to { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .us-dodatek::after { display: none; } }

/* Pozostałe usługi: małe kafelki z ikoną nad nazwą (ikony 3D z Gemini, bez tła, w barwach bez zieleni, bo tło
   wycinane z zielonego ekranu). Lżejsze od czterech głównych kafli: bez pętli, a zamiast przycisku mały link tekstowy
   ze strzałką (komponent marki), żeby z nimi nie konkurowały. Komputer i tablet: pięć w rzędzie, węziej niż kafle (1040 px); telefon: trzy i dwa. Cień pod ikoną
   tonowany sosną (marka). */
.us-inne { margin-top: clamp(36px, 4.5vw, 52px); }
.us-inne-tytul { margin-bottom: 14px; text-align: center; font-size: 16px; font-weight: 600; color: var(--us-atrament); }
.us-inne ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 1040px; margin-inline: auto; }
.us-inne li { display: flex; flex: 0 1 calc((100% - 4 * 12px) / 5); min-width: 0; container-type: inline-size; }
.us-inne a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 44px; padding: 14px 10px 16px;
  border-radius: 14px; border: 1px solid var(--us-linia); background: #fff; color: var(--us-atrament); font-size: 15px; font-weight: 500;
  line-height: 1.25; text-align: center; text-wrap: balance; text-decoration: none; touch-action: manipulation;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms var(--us-ease); }
.us-inne img { width: clamp(60px, 6vw, 88px); height: auto; aspect-ratio: 1; filter: drop-shadow(0 6px 6px rgba(18, 63, 45, 0.14));
  transition: transform 220ms var(--us-ease); }
.us-inne a:active { transform: scale(0.97); }
/* CTA na dole kafelka, więc w rzędzie stoją w jednej linii niezależnie od tego, czy nazwa ma jedną linię, czy dwie */
.us-inne-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 2px; font-size: 13px; font-weight: 600;
  line-height: 1.2; color: var(--us-sosna); white-space: nowrap; }
.us-inne-cta svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; transition: transform 220ms var(--us-ease); }
@container (max-width: 159px) { .us-inne-cta-dluzej { display: none; } }

/* Pas o dofinansowaniu: zamknięcie sekcji, telefon pod ręką. */
.us-dotacje { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 24px 48px; align-items: center;
  margin-top: clamp(32px, 4vw, 44px); padding: clamp(24px, 3vw, 36px) clamp(24px, 3.4vw, 44px);
  border-radius: var(--us-r); background: var(--us-sosna); color: #fff; box-shadow: 0 18px 40px -24px rgba(18, 63, 45, 0.55); }
.us-dotacje h3 { font-size: clamp(21px, 0.6vw + 17px, 26px); line-height: 1.25; font-weight: 600; color: #fff; }
.us-dotacje p { margin-top: 8px; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.88); max-width: 40rem; }
.us-dotacje-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.us-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 24px; border-radius: 10px;
  border: 1.5px solid var(--us-zloto); background: var(--us-zloto); color: var(--us-zloto-tekst);
  font: 600 16px/1.2 Poppins, system-ui, sans-serif; text-decoration: none; white-space: nowrap; -webkit-user-select: none; user-select: none;
  touch-action: manipulation; transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--us-ease); }
.us-btn:active { transform: scale(0.97); }
/* motyw zmienia linkom kolor na złoty przy najechaniu i fokusie (a:hover, a:focus): na złotym przycisku napis znikał
   (kontrast 1:1); linki sekcji trzymają swoje kolory w każdym stanie (28.09) */
.us a.us-btn, .us a.us-btn:hover, .us a.us-btn:focus, .us a.us-btn:active, .us a.us-btn:visited { color: var(--us-zloto-tekst); }
.us a.us-tel, .us a.us-tel:focus, .us a.us-tel:active, .us a.us-tel:visited { color: #fff; }
.us a.us-strzalka, .us a.us-strzalka:focus, .us a.us-strzalka:active, .us a.us-strzalka:visited { color: var(--us-zloto-jasne); }
.us-tel { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; border-radius: 6px; color: #fff; font-size: 18px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.us-tel svg { width: 20px; height: 20px; fill: none; stroke: var(--us-zloto-jasne); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.us-strzalka { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border-radius: 6px; color: var(--us-zloto-jasne); font-size: 15.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.us-strzalka svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.us-dotacje :focus-visible { outline-color: var(--us-zloto-jasne); }

/* Najechanie tylko na urządzeniach z kursorem. */
@media (hover: hover) and (pointer: fine) {
  .us-kafel:hover { transform: translateY(-3px); border-color: #c9d6c5; box-shadow: 0 2px 4px rgba(18, 63, 45, 0.06), 0 22px 40px -24px rgba(18, 63, 45, 0.55); }
  .us-kafel:hover:active { transform: translateY(-1px) scale(0.985); }
  .us-kafel:hover .us-media > video, .us-kafel:hover .us-media > img, .us-kafel:hover .us-zastepcze { transform: scale(1.04); }
  .us-kafel:hover .us-cta { background: var(--us-sosna-2); }
  .us-kafel:hover .us-cta svg { transform: translateX(3px); }
  .us-inne a:hover { border-color: var(--us-sosna); color: var(--us-sosna); }
  .us-inne a:hover img { transform: translateY(-3px); }
  .us-inne a:hover .us-inne-cta svg { transform: translateX(3px); }
  .us-btn:hover { background: var(--us-zloto-2); border-color: var(--us-zloto-2); }
  .us a.us-tel:hover, .us a.us-strzalka:hover { color: #fff; }
}

/* Wejście kafli raz na wizytę; ukrycie tylko po klasie z JS na <html>, więc bez skryptu treść jest widoczna. */
html.us-anim .us-kafle > li { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--us-ease), transform 500ms var(--us-ease); }
html.us-anim .us-kafle.widac > li { opacity: 1; transform: none; }
html.us-anim .us-kafle.widac > li:nth-child(2) { transition-delay: 60ms; }
html.us-anim .us-kafle.widac > li:nth-child(3) { transition-delay: 120ms; }
html.us-anim .us-kafle.widac > li:nth-child(4) { transition-delay: 180ms; }

/* Dawny układ do porównania w labie ?uklad=4x1: cztery w rzędzie na komputerze (do 30.09 domyślny). */
@media (min-width: 1024px) {
  .us[data-uklad="4x1"] .us-kafle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Klimatyzacja: przełącznik trybu nad obrazem kafla (stoi poza linkiem kafla, więc klik nie otwiera podstrony);
   dwa filmy leżą na sobie, widać ten z aktywnego trybu. */
.us-kafle > li { position: relative; container-type: inline-size; }
/* na dole obrazu (4:3 = 75% szerokości kafla), żeby nie zasłaniał urządzenia; starsze przeglądarki: u góry */
.us-tryb { position: absolute; z-index: 3; top: 12px; top: calc(75cqw - 58px); left: 12px; display: flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 2px rgba(18, 63, 45, 0.08), 0 8px 20px -10px rgba(18, 63, 45, 0.45); }
.us-tryb-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--us-sosna); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; }
.us-tryb-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.us-tryb-btn[aria-pressed="true"] { background: var(--us-sosna); color: #fff; }
.us-tryb-btn:focus-visible { outline: 2px solid var(--us-fokus); outline-offset: 2px; }
.us-media video[data-tryb] { opacity: 0; transition: opacity 400ms var(--us-ease); }
.us-media[data-tryb="chlodzenie"] video[data-tryb="chlodzenie"], .us-media[data-tryb="grzanie"] video[data-tryb="grzanie"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .us-media video[data-tryb] { transition: none; } }

/* Tablet: pas dotacji w jednej kolumnie (kafle 2 × 2 jak na komputerze). */
@media (max-width: 1023px) {
  .us-dotacje { grid-template-columns: minmax(0, 1fr); }
}

/* Telefon: jeden kafel w rzędzie, ten sam format obrazu, przyciski pod kciuk. */
@media (max-width: 599px) {
  .us-wew { width: min(1280px, 100% - 32px); }
  .us-kafle { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .us-tresc { padding: 16px 18px 18px; }
  .us-inne ul { gap: 10px; }
  .us-inne li { flex-basis: calc((100% - 2 * 10px) / 3); }
  .us-inne a { padding: 12px 4px 14px; font-size: 13.5px; }
  .us-dotacje-akcje { flex-direction: column; align-items: stretch; }
  .us-dotacje-akcje .us-btn { width: 100%; }
  .us-tel, .us-strzalka { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .us-kafel, .us-media > video, .us-media > img, .us-zastepcze, .us-cta svg, .us-inne a, .us-inne img, .us-inne-cta svg, .us-btn { transition: none; }
  .us-kafel:hover, .us-kafel:active, .us-kafel:hover .us-media > video, .us-kafel:hover .us-media > img, .us-kafel:hover .us-zastepcze { transform: none; }
  html.us-anim .us-kafle > li { transform: none; transition: opacity 300ms ease; }
}