/* Strony „fotowoltaika <miasto>” (lab miasta/, 04.11.2026): tylko klocki, których nie ma w ../v3/fotowoltaika.css (.pc) ani miasta-baza.css (kopia miasta.css labu pomp). Zmienne jak w gora.css. */

/* Karta opisuje kolory wyniku także w trybie „Mam już panele” */
.fm { --pc-tekst-maks: 68ch; }
.fm .mg-wynik-mam .mg-kwota-nowa, .fm .mg-wynik-mam .mg-kwota-stara { font-size: clamp(26px, 5vw, 38px); }
.fm .mg-wynik-mam .mg-przedpo { grid-template-columns: 1fr 1fr; }
.fm .mg-wynik-mam .mg-por-tytul, .fm .mg-wynik-mam #mg-por-tytul, .fm .mg-wynik-mam .mg-kafle { display: none; }

/* wybór rozmiaru: panele rysuje kod */
.fm .mg-rozmiar { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fm .mg-rozmiar span { font-size: 12.5px; color: var(--mut); line-height: 1.2; }
.fm .fm-panele { width: 62px; height: 44px; fill: var(--sosna); }
.fm .mg-rozmiar[aria-pressed="true"] .fm-panele { fill: var(--sosna2); }

/* klipy realizacji */
.fm .fm-klipy { list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fm .fm-klip { background: #fff; border: 1px solid var(--pc-linia, #dce3da); border-radius: 14px; overflow: hidden; }
.fm .fm-klip video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--sosna3); }
.fm .fm-klip p { margin: 0; padding: 10px 12px 12px; font-size: 14px; line-height: 1.35; }
.fm .fm-klip strong { display: block; font-size: 15px; }
.fm .fm-klip span { color: var(--mut); }
@media (max-width: 900px) { .fm .fm-klipy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* produkcja: tekst obok słupków miesięcy */
.fm .fm-dwa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 3vw, 48px); align-items: start; margin-top: 14px; }
@media (max-width: 900px) { .fm .fm-dwa { grid-template-columns: 1fr; } }
.fm .fm-wykres { margin: 0; background: #fff; border: 1px solid var(--pc-linia, #dce3da); border-radius: 16px; padding: clamp(14px, 2vw, 22px); }
.fm .fm-wykres figcaption { font-weight: 600; font-size: 15px; margin-bottom: 14px; color: var(--atrament); }
.fm .fm-slupki { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; align-items: end; height: 210px; }
.fm .fm-slupki li { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 3px; min-width: 0; }
.fm .fm-slupek { display: block; width: 100%; height: calc(var(--w) * 150px); background: linear-gradient(180deg, var(--zloto), var(--sosna2)); border-radius: 4px 4px 1px 1px; order: 1; }
.fm .fm-slupki b { font-size: 12px; font-weight: 600; order: 0; }
.fm .fm-slupki small { font-size: 11px; color: var(--mut); order: 2; }
@media (max-width: 420px) { .fm .fm-slupki b { font-size: 10.5px; } .fm .fm-slupki small { font-size: 10px; } .fm .fm-slupki { gap: 3px; } }

/* dach czy grunt: karty ze zdjęciem */
.fm .fm-karty { list-style: none; margin: clamp(18px, 2.4vw, 28px) 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fm .fm-karta { background: var(--pc-tlo, #f7f8f4); border-radius: 16px; overflow: hidden; }
.fm .fm-karta img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.fm .fm-karta h3 { font-size: 18px; margin: 14px 16px 6px; color: var(--sosna); }
.fm .fm-karta p { margin: 0 16px 16px; font-size: 15px; line-height: 1.5; }
@media (max-width: 900px) { .fm .fm-karty { grid-template-columns: 1fr; } }

/* programy dopłat */
.fm .fm-programy { list-style: none; margin: clamp(18px, 2.4vw, 28px) 0 18px; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fm .fm-program { background: #fff; border: 1px solid var(--pc-linia, #dce3da); border-radius: 16px; padding: 18px; font-size: 15px; line-height: 1.5; }
.fm .fm-program h3 { font-size: 18px; margin: 8px 0 4px; line-height: 1.3; color: var(--sosna); }
.fm .fm-program p { margin: 0 0 8px; }
.fm .fm-program-status { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: var(--szalwia); color: var(--sosna); }
.fm .fm-program-zamkniety .fm-program-status { background: #f3e4e1; color: #8a3324; }
.fm .fm-program-kwota { font-size: 20px; font-weight: 700; color: var(--sosna2); }
.fm .fm-program-zamkniety .fm-program-kwota { color: var(--mut); text-decoration: none; }
@media (max-width: 900px) { .fm .fm-programy { grid-template-columns: 1fr; } }

/* tabele i odstępy dolnej części: oddech jak na stronach miast */
.fm .pc-temat-h3 { margin-top: clamp(26px, 3vw, 40px); }
.fm .pc-zrodla { margin-top: clamp(24px, 3vw, 36px); }
.fm .pc-okruszki { margin-top: 16px; }
.fm .pc-yt-ramka { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.fm .pc-kroki-montazu { list-style: none; padding: 0; }

/* kafle kwot: „ponad 500” nie może wejść pod kółko wyboru na telefonie */
.fm .mg-opcje-kwoty .mg-opcja-duze { font-size: clamp(20px, 5.6vw, 27px); padding-right: 12px; white-space: nowrap; }

/* dzielnice: zwarta siatka zamiast długiej tabeli */
.fm .fm-dzielnice { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.fm .fm-dzielnice li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 10px 14px; background: var(--pc-tlo, #f7f8f4); border-radius: 10px; font-size: 15px; }
.fm .fm-dzielnice strong { font-weight: 600; color: var(--sosna); }
.fm .fm-dzielnice span { color: var(--mut); white-space: nowrap; }

/* źródła i okruszki na jasnym tle: klocki strony usługi są pisane pod ciemną sekcję końcową */
.fm .pc-zrodla-tytul { color: var(--sosna); font-weight: 600; font-size: 14px; margin: 0 0 6px; }
.fm .pc-zrodla ul { margin: 0; padding-left: 18px; color: var(--mut); font-size: 14px; line-height: 1.5; }
.fm .pc-zrodla li { color: var(--mut); }
.fm .pc-okruszki, .fm .pc-okruszki a, .fm .pc-okruszki li { color: var(--mut); }
.fm .pc-okruszki li[aria-current] { color: var(--sosna); font-weight: 600; }
.fm .fm-do-kalk { margin-top: 18px; display: inline-flex; }
.fm .pc-okruszki li + li::before { color: var(--mut); }
.fm .pc-okruszki ol { color: var(--mut); }

/* cennik na telefonie: wiersz jako karta, zestaw nad parametrami (dwa zestawy w jednym wierszu nie mieszczą się obok etykiet) */
@media (max-width: 760px) {
  .fm .pc-cennik .pc-tabela tbody tr { display: block; padding: 12px 14px; }
  .fm .pc-cennik .pc-tabela tbody th { display: block; position: static; width: auto; padding: 0 0 6px; font-size: 16px; }
  .fm .pc-cennik .pc-tabela tbody td { display: flex; justify-content: space-between; gap: 12px; position: static; padding: 3px 0; margin: 0; width: auto; }
  .fm .pc-cennik .pc-tabela tbody td::before { position: static; flex: none; }
}

/* tekst obok zdjęcia w cenach i dotacjach; dzielnice na telefonie w dwóch kolumnach */
.fm .fm-obok { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; margin-top: clamp(14px, 2vw, 24px); }
.fm .fm-zdjecie { position: relative; margin: 0; }
.fm .fm-zdjecie img { display: block; width: 100%; height: auto; border-radius: 16px; }
.fm .fm-zdjecie figcaption { margin-top: 6px; font-size: 13.5px; color: var(--mut); }
.fm .fm-zdjecie .mg-ai { position: absolute; top: 10px; right: 10px; z-index: 1; }
@media (max-width: 900px) { .fm .fm-obok { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .fm .fm-dzielnice { grid-template-columns: 1fr 1fr; } .fm .fm-dzielnice li { flex-direction: column; gap: 0; padding: 8px 10px; font-size: 14px; } }

/* Teksty, które nie są nagłówkami dokumentu (C04): tytuły w karcie wyniku i podziękowanie */
.fm p.mg-nad { margin: 16px 0 8px; font-weight: 600; font-size: 16px; color: var(--sosna); text-align: center; }
.fm p.mg-nad:empty { display: none; }
.fm .mg-dzieki-h { font-size: 22px; font-weight: 600; color: var(--sosna); margin: 0 0 6px; }
.fm small.mg-zgoda { display: block; }
.fm .fm-stan { margin-top: clamp(22px, 3vw, 34px); font-size: 14px; font-weight: 400; color: var(--mut); }
.fm .fm-dzielnice { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fm .fm-dzielnice li { flex-direction: column; gap: 4px; align-items: flex-start; }
.fm .fm-dzielnice span { white-space: normal; }
@media (max-width: 760px) { .fm .fm-dzielnice { grid-template-columns: 1fr; } }

/* po odbiorze r1: cena przy wyniku, dostępność, cele dotyku */
.fm { --mut: #4d5d54; }
.fm .mg-wynik-cena-krotko { margin: 6px 0 0; text-align: center; font-size: 14.5px; font-weight: 500; color: var(--atrament); }
.fm .mg-rozmiar[aria-pressed="true"] span { color: #e6efe8; }
.fm .mg-wstecz, .fm .mg-link-niewiem, .fm .mg-zmien, .fm .mg-kontakt-tel { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.fm .mg-strona { position: relative; }
.fm .mg-strona .mg-ai { position: absolute; top: 6px; left: 6px; z-index: 1; }
.fm .fm-dwa .fm-zdjecie { margin-top: 14px; }
.fm .fm-obok-waskie { align-items: center; }
.fm .fm-obok-waskie .fm-zdjecie img { max-height: 240px; object-fit: cover; }

/* po odbiorze r2: ikony programów, przycisk filmu z dala od twarzy, kontrast małych liter w wyniku */
.fm .fm-program-ikona { display: block; width: 84px; height: 84px; object-fit: contain; margin: -4px 0 8px; }
.fm #czy-sie-oplaca .pc-yt-play { left: 24%; }
.fm .mg-przedpo small { color: var(--atrament); font-size: 11px; }
.fm #mg-kontakt h3 span { color: var(--sosna2); }
.fm small.mg-zgoda a, .fm .mg-szczegoly summary { display: inline-block; min-height: 44px; line-height: 44px; }

/* po odbiorze r3: rytm, wyrównanie, ikony i wykres na telefonie, cel dotyku, kontrast */
.fm #dotacje { padding-top: clamp(8px, 1.6vw, 22px); }
.fm .fm-mapa-sekcja .pc-okolica-gora { align-items: start; }
.fm .mg-programy b { color: #0d7a42; }
.fm .mg-postep .mg-wstecz { min-width: 44px; min-height: 44px; justify-content: center; }
@media (max-width: 760px) { .fm .fm-program-ikona { width: 104px; height: 104px; } }
@media (max-width: 900px) { .fm .fm-dwa { display: flex; flex-direction: column; } .fm .fm-dwa > .fm-wykres { order: -1; width: 100%; } }

/* po odbiorze r4: kolejność na telefonie, kontrast numerów pól, kapsuła „W cenie” */
.fm .mg-pole-nazwa i { background: #0d7a42; }
.fm .fm-wcenie-kapsula { margin: 0 0 8px; font-weight: 500; }
@media (max-width: 900px) {
  .fm #czy-sie-oplaca .pc-temat-uklad-film { display: flex; flex-direction: column; }
  .fm #czy-sie-oplaca .pc-temat-uklad-film > .pc-temat-film { order: -1; }
  .fm #dotacje .fm-obok { display: flex; flex-direction: column; }
  .fm #dotacje .fm-obok > .fm-zdjecie { order: -1; }
}

/* po odbiorze r5: strzałka nie wchodzi na tekst, większe ikony programów. Globalnie odstępów sekcji nie zmniejszam: rozjeżdża ekrany pomiaru. */
@media (min-width: 761px) { .fm .mg-strzalka-zlota { top: -46px; } .fm .fm-program-ikona { width: 116px; height: 116px; } }
/* mniej pustego pasa między dotacjami a mapą (uwaga recenzji r5); mapa wchodzi wyżej na ekran z tabelą */
@media (min-width: 901px) { .fm #dotacje { padding-bottom: 44px; } .fm #w-miescie { padding-top: 44px; } }

/* hero z dolnym sprzętem na zdjęciu (panele na dachu płaskim): w niskich, szerokich oknach pokaż dolną część kadru. Włączane polem gora.hero.tlo_nizej, inne miasta bez zmian. */
@media (min-width:1181px) { .fm .mg-hero-foto img[data-fm-tlo-nizej] { object-position:50% 45%; } }
/* wąski telefon (360, 320): długie słowo w dopłatach rozpychało kartę wyniku o 18-58 px; body ma overflow-x:hidden, więc scrollWidth tego nie widział (KA-19) */
.fm .mg-wynik, .fm .mg-wynik > .mg-panel { min-width: 0; max-width: 100%; }
.fm .mg-programy li > span { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 340px) { .fm .mg-strzalka-zlota { display: none; } .fm .mg-kafel strong { font-size: 19px; } }
/* wąski telefon na żywej stronie (09.11.2026): Poppins ze strony głównej rysuje liczby o 2-6 px szerzej niż lab, więc kafelki, plakietka „polecany” i etykieta karty wychodziły poza pole; dopłaty na 320 px łamały słowa w połowie. Kwota dopłaty schodzi pod opis. */
@media (max-width: 380px) {
  .fm .mg-kafel { padding-left: 6px; padding-right: 6px; }
  .fm .mg-programy li { flex-wrap: wrap; row-gap: 2px; }
  .fm .mg-programy li > span { flex: 1 1 calc(100% - 52px); overflow-wrap: normal; }
  .fm .mg-programy b { margin-left: 52px; }
}
@media (max-width: 340px) {
  .fm .mg-kafel strong { font-size: 18px; }
  .fm .mg-rozmiar { padding-left: 2px; padding-right: 2px; }
  .fm .mg-rozmiar b { font-size: 13px; }
  .fm .mg-rozmiar span { font-size: 11.5px; }
  .fm .mg-rozmiar small { padding-left: 5px; padding-right: 5px; }
  .fm .mg-strona { padding-left: 6px; padding-right: 6px; }
  .fm .mg-strona .mg-etykieta { padding-left: 8px; padding-right: 8px; }
}