/* Blog: artykuly w jezyku wizualnym stron z cenami osiedli (ceny.css). */
.blog-naglowek { max-width: 760px; }
.blog-naglowek h1 { text-wrap: balance; }
.blog-lead { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.6; color: #2f4a46; margin: 0 0 14px; max-width: 700px; }
.blog-meta { font-size: 13px; color: #5f716f; margin: 0; font-variant-numeric: tabular-nums; }
.blog-szkic { background: #ffda6d; color: #172c32; font-weight: 700; font-size: 14px; padding: 10px 14px; border-radius: 10px; margin: -12px 0 24px; max-width: 760px; }

/* ---------------------------------------------------------------- tresc */
.blog-tresc { max-width: 700px; font-size: 17px; line-height: 1.75; color: #24403c; }
.blog-tresc > * + * { margin-top: 1.05em; }
.blog-tresc p, .blog-tresc li { max-width: 68ch; }
.blog-tresc h2 { font-size: clamp(24px, 2.6vw, 31px); line-height: 1.2; letter-spacing: -.03em; color: #172c32; margin-top: 2.1em; text-wrap: balance; }
.blog-tresc h3 { font-size: 19px; line-height: 1.35; color: #172c32; margin-top: 1.7em; }
.blog-tresc a { color: #1f5c50; text-underline-offset: 3px; }
.blog-tresc ul, .blog-tresc ol { padding-left: 1.25em; }
.blog-tresc li + li { margin-top: .45em; }
.blog-tresc strong { color: #172c32; }
.blog-tresc .przypis { font-size: 14px; color: #5f716f; line-height: 1.6; }

/* Trzy liczby na start - to one niosa tekst, wiec dostaja najwiecej miejsca. */
.blog-fakty { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 1.6em; }
.blog-fakt { background: #fff; border: 1px solid #dde5df; border-radius: 14px; padding: 18px 18px 16px; }
.blog-fakt strong { display: block; font-size: clamp(30px, 3.4vw, 38px); line-height: 1.05; letter-spacing: -.04em; color: #152d32; font-variant-numeric: tabular-nums; }
.blog-fakt span { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: #526764; }

.blog-ramka { background: #eaf0e6; border: 1px solid #d8e2d2; border-radius: 14px; padding: 18px 20px; font-size: 15.5px; line-height: 1.65; }
.blog-ramka > * + * { margin-top: .6em; }
.blog-ramka__tytul { font-size: 11px !important; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: #426e66; }

/* Tabele i wykresy moga byc szersze od kolumny tekstu, ale nigdy od ekranu. */
.blog-tresc .tabela__pudlo { margin: 1.4em 0; background: #fff; border: 1px solid #dde5df; border-radius: 14px; }
.blog-tresc .tabela { font-size: 14.5px; }
.blog-tresc .tabela td.liczba, .blog-tresc .tabela th.liczba { text-align: right; }
/* Opis w pierwszej kolumnie sie zawija - liczby zostaja w jednej linii, a tabela miesci sie na telefonie. */
.blog-tresc .tabela td:first-child, .blog-tresc .tabela th:first-child { white-space: normal; min-width: 9em; }
@media (max-width: 480px) { .blog-tresc .tabela th, .blog-tresc .tabela td { padding: 9px 8px; font-size: 13.5px; } }
.blog-tresc .tabela .dodatnia { color: #9a3b1c; font-weight: 700; }
.blog-tresc .tabela .ujemna { color: #1f6b52; font-weight: 700; }
.blog-wykres { margin: 1.6em 0; background: #fff; border: 1px solid #dde5df; border-radius: 14px; padding: 18px 16px 12px; overflow-x: auto; }
.blog-wykres svg { display: block; width: 100%; min-width: 520px; height: auto; font-family: var(--kroj); }
.blog-wykres figcaption { font-size: 13px; line-height: 1.5; color: #5f716f; margin-top: 10px; }

/* ---------------------------------------------------------------- kalkulator w tekscie */
.blog-kalkulator { background: #152d32; color: #fff; border-radius: 18px; padding: 22px 22px 20px; margin: 2em 0; max-width: 700px; }
.blog-kalkulator__tytul { font-size: clamp(20px, 2.2vw, 24px); line-height: 1.25; letter-spacing: -.02em; font-weight: 750; margin: 0; text-wrap: balance; }
.blog-kalkulator__opis { color: #c9d8d4; font-size: 14.5px; line-height: 1.55; margin: 6px 0 16px !important; }
.blog-kalkulator__formularz { display: grid; grid-template-columns: 1fr 120px auto; gap: 10px; align-items: end; }
.blog-kalkulator__pole { display: grid; gap: 5px; font-size: 12px; font-weight: 650; letter-spacing: .02em; color: #d7e3df; }
.blog-kalkulator__pole input { width: 100%; min-height: 50px; border: 0; border-radius: 10px; padding: 0 14px; font: inherit; font-size: 16px; font-weight: 500; color: #172c32; background: #fff; }
.blog-kalkulator__pole input:focus-visible { outline: 3px solid #ffda6d; outline-offset: 2px; }
.blog-kalkulator .przycisk { width: auto; min-height: 50px; padding: 0 22px; white-space: nowrap; }
@media (max-width: 640px) {
  .blog-kalkulator__formularz { grid-template-columns: 1fr 1fr; }
  .blog-kalkulator__pole:first-of-type { grid-column: 1 / -1; }
  .blog-kalkulator .przycisk { width: 100%; }
}

/* ---------------------------------------------------------------- autor i spis */
.blog-autor { max-width: 700px; margin-top: 44px; padding-top: 24px; border-top: 1px solid #dce3de; font-size: 15px; line-height: 1.65; color: #47605b; }
.blog-autor > * + * { margin-top: .6em; }
.blog-autor__kto { font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: #426e66; }
.blog-autor a { color: #1f5c50; }

.blog-lista { display: grid; gap: 14px; max-width: 860px; }
.blog-karta { display: block; background: #fff; border: 1px solid #dde5df; border-radius: 16px; padding: 22px 24px; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.blog-karta:hover { border-color: #9fb8ae; transform: translateY(-1px); }
.blog-karta:focus-visible { outline: 3px solid #ffda6d; outline-offset: 2px; }
.blog-karta h2 { font-size: clamp(20px, 2.3vw, 26px); line-height: 1.25; letter-spacing: -.025em; color: #172c32; margin: 6px 0 8px; text-wrap: balance; }
.blog-karta p:last-child { color: #47605b; line-height: 1.6; margin: 0; }
@media (prefers-reduced-motion: reduce) { .blog-karta { transition: none; } .blog-karta:hover { transform: none; } }

/* Czytelna kolumna artykulu i wykresy bez przewijania na telefonie. */
.blog-main .raport-container { max-width: 880px; }
.blog-naglowek, .blog-tresc, .blog-szkic, .blog-kalkulator, .blog-autor { max-width: 800px; }
.blog-naglowek h1 { font-size: clamp(32px, 4.3vw, 50px); line-height: 1.14; }
.blog-lead { max-width: 66ch; line-height: 1.7; }
.blog-tresc { font-size: 18px; line-height: 1.8; }
.blog-tresc h2[id] { scroll-margin-top: 100px; padding-top: 24px; border-top: 1px solid #dce3de; }
.blog-tresc p { margin-bottom: 1.2em; }
.blog-spis { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px; background: #eaf0e6; border-radius: 16px; }
.blog-spis > span { flex-basis: 100%; font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.blog-spis a { display: flex; align-items: center; min-height: 44px; padding: 8px 13px; background: #fff; border: 1px solid #d4dfd4; border-radius: 9px; font-size: 14px; line-height: 1.4; text-decoration: none; }
.blog-spis a:hover { background: #f5f8f1; border-color: #426e66; }
.blog-tresc .blog-etykieta { font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; margin: 28px 0 12px; color: #426e66; }
.blog-fakty { margin-top: 0; }
.blog-fakt { border-top: 4px solid #426e66; padding: 22px 18px; }
.blog-fakt:first-child { background: #152d32; border-color: #ffda6d; }
.blog-fakt:first-child strong { color: #ffda6d; }
.blog-fakt:first-child span { color: #e2eae5; }
.blog-fakt span { font-size: 14px; line-height: 1.6; }
.blog-wazne { padding: 20px 24px; border-left: 4px solid #d2ab3e; background: #fff6d9; border-radius: 0 12px 12px 0; font-size: 15px; line-height: 1.7; }
.blog-wazne p { margin: 6px 0 10px; }
.blog-wazne a { font-weight: 650; }
.blog-przyklad { border: 1px solid #d8e2d2; background: #eaf0e6; border-radius: 16px; padding: 24px; }
.blog-przyklad .blog-etykieta { margin-top: 0; }
.blog-przyklad > div { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.blog-przyklad > div > span { padding: 18px; border-radius: 12px; background: #fff; font-size: 14px; }
.blog-przyklad strong { display: block; font-size: clamp(24px, 3vw, 32px); line-height: 1.4; letter-spacing: -.03em; }
.blog-przyklad > p:last-child { font-size: 14px; margin: 16px 0 0; }
.blog-rozklad, .blog-osiedla { padding: 26px; border: 1px solid #dde5df; border-radius: 16px; background: #fff; }
.blog-rozklad h3, .blog-osiedla h3 { margin: 0 0 8px; font-size: 22px; }
.blog-chart-intro, .blog-osiedla > p { font-size: 14px; line-height: 1.6; }
.blog-legenda { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; margin: 18px 0 22px; }
.blog-legenda span { display: flex; align-items: center; gap: 7px; }
.blog-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #426e66; }
.blog-legenda i.prywatne { background: #d2ab3e; }
.blog-para { margin-top: 20px; }
.blog-para p { font-size: 14px; font-weight: 650; margin: 0 0 6px; }
.blog-bar { display: flex; align-items: center; gap: 8px; padding-right: 40px; margin: 4px 0; line-height: 1; }
.blog-bar > span { width: var(--bar); height: 12px; border-radius: 3px; background: #426e66; flex-shrink: 0; }
.blog-bar.prywatne > span { background: #d2ab3e; }
.blog-bar b { font-size: 12px; font-variant-numeric: tabular-nums; }
.blog-rozklad figcaption { margin-top: 24px; padding-top: 14px; border-top: 1px solid #dde5df; }
.blog-szukaj { margin: 22px 0 0; }
.blog-szukaj label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.blog-szukaj input { width: 100%; min-height: 48px; font: inherit; font-size: 16px; color: #172c32; background: #f7f8f5; padding: 10px 14px; border: 1px solid #9cafaa; border-radius: 9px; }
.blog-szukaj [data-wyniki] { font-size: 12px; color: #526764; margin: 6px 0 16px; }
.blog-ranking { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.blog-osiedle { padding: 17px 0; border-bottom: 1px solid #e5ebe6; }
.blog-osiedle > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.5; }
.blog-osiedle b { white-space: nowrap; font-size: 17px; color: #245b50; font-variant-numeric: tabular-nums; }
.blog-tor { height: 8px; background: #edf2eb; border-radius: 6px; overflow: hidden; margin: 10px 0 3px; }
.blog-tor span { display: block; height: 100%; width: var(--bar); background: #426e66; border-radius: inherit; }
.blog-osiedle small { font-size: 12px; color: #526764; }
.blog-osiedla > .przypis { margin: 22px 0 0; }
.blog-brak { padding: 18px; border-radius: 10px; background: #fff6d9; }
.blog-szczegoly { border: 1px solid #d8e2d2; border-radius: 12px; padding: 0 20px; background: #fff; font-size: 15px; }
.blog-szczegoly summary { padding: 18px 0; min-height: 48px; cursor: pointer; font-weight: 650; color: #245b50; line-height: 1.5; }
.blog-szczegoly[open] { padding-bottom: 18px; }
.blog-szczegoly .blog-ramka { margin: 0; }
.blog-szczegoly .tabela__pudlo { margin: 0; }
.blog-tresc .tabela { width: 100%; min-width: 0; }
.blog-kalkulator__formularz { grid-template-columns: minmax(0, 1fr) 120px auto; }
.blog-kalkulator__pole { min-width: 0; }
.blog-tresc [hidden] { display: none !important; }
@media (max-width: 600px) {
  .blog-tresc { font-size: 17px; line-height: 1.75; }
  .blog-spis { padding: 16px; }
  .blog-fakty { grid-template-columns: 1fr; gap: 10px; }
  .blog-fakt { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; padding: 18px 16px; border-top-width: 1px; border-left-width: 4px; }
  .blog-fakt strong { font-size: 32px; }
  .blog-fakt span { margin: 0; font-size: 13px; }
  .blog-przyklad, .blog-wazne, .blog-rozklad, .blog-osiedla { padding: 20px 16px; }
  .blog-przyklad > div { grid-template-columns: 1fr; gap: 10px; }
  .blog-przyklad > div > span { padding: 14px; }
  .blog-ranking { grid-template-columns: 1fr; }
  .blog-szczegoly { padding: 0 14px; }
  .blog-tresc .tabela td:first-child, .blog-tresc .tabela th:first-child { min-width: 0; }
  .blog-kalkulator__formularz { grid-template-columns: 1fr; }
  .blog-kalkulator .przycisk { white-space: normal; }
}

/* Wartosci wykresow w arkuszu: zgodne z CSP bez stylow inline. */
.blog-value-1 { --bar: 5.0%; }
.blog-value-2 { --bar: 2.5%; }
.blog-value-3 { --bar: 22.5%; }
.blog-value-4 { --bar: 12.5%; }
.blog-value-5 { --bar: 57.5%; }
.blog-value-6 { --bar: 30.0%; }
.blog-value-7 { --bar: 75.0%; }
.blog-value-8 { --bar: 60.0%; }
.blog-value-9 { --bar: 50.0%; }
.blog-value-10 { --bar: 62.5%; }
.blog-value-11 { --bar: 40.0%; }
.blog-value-12 { --bar: 82.5%; }
.blog-value-13 { --bar: 85.8333%; }
.blog-value-14 { --bar: 81.6667%; }
.blog-value-15 { --bar: 68.3333%; }
.blog-value-16 { --bar: 65.0%; }
.blog-value-17 { --bar: 58.3333%; }
.blog-value-18 { --bar: 55.0%; }
.blog-value-19 { --bar: 47.5%; }
.blog-value-20 { --bar: 40.8333%; }
.blog-value-21 { --bar: 37.5%; }
.blog-value-22 { --bar: 29.1667%; }
.blog-value-23 { --bar: 27.5%; }
.blog-value-24 { --bar: 21.6667%; }
.blog-value-25 { --bar: 14.1667%; }
/* Szerokosci paskow dla rozkladu z ostatnich 60 dni (skala: 40% = caly pasek). */
.blog-value-26 { --bar: 17.5%; }
.blog-value-27 { --bar: 77.5%; }
.blog-value-28 { --bar: 92.5%; }