/* ==========================================================================
   emedia: uklad wpisow bazy wiedzy
   Utworzone 04.09.2026 z blokow, ktore od 01.09 rosly warstwami w css/style.css
   i css/style-mob.css. Tutaj sa scalone w jeden arkusz, uporzadkowane wedlug
   przeplywu strony i pozbawione powtorzonych deklaracji.

   Arkusz jest ladowany tylko na pojedynczych wpisach, po obu arkuszach bazowych,
   z numerem wersji liczonym z daty pliku. Podmiana pliku wystarczy, zeby zmiana
   dotarla do przegladarek: nie trzeba niczego podbijac recznie.

   Wszystkie reguly wisza na body.single-post i klasach em-*, wiec kazdy nowy
   wpis dostaje ten sam uklad bez pracy w edytorze. Klasy em-* nadaje skrypt
   js/emedia-wpisy.js. Warunki, ktore tresc musi spelniac, opisuje
   docs/emedia-pl/uklad-wpisow/README.md w repozytorium myemedia.
   ========================================================================== */

/* --- 1. Typografia i rytm pionowy tresci wpisu ------------------------------ */

body.single-post #content_single p strong,
body.single-post #content_single li strong {
  color: #121924;
  font-weight: 600;
}

body.single-post p.em-tagi-wpisu,
body.single-post #content_single p.em-tagi-wpisu {
  font-size: 12px !important;
}

body.single-post h1 {
  margin-top: 14px !important;
  margin-right: 0 !important;
  margin-bottom: 14px !important;
  margin-left: 0 !important;
}

body.single-post #content_single {
  padding-top: 8px !important;
}

body.single-post .content_bazawiedzy {
  padding-top: 2px !important;
}

body.single-post .bggrey > .fit-1200 {
  padding-top: 18px !important;
  padding-bottom: 20px !important;
}

body.single-post .bggrey .wp-block-group.is-style-fit {
  padding-top: 28px !important;
  padding-bottom: 10px !important;
}

body.single-post .bggrey .wp-block-columns.is-style-default {
  padding-bottom: 8px !important;
}

body.single-post .bggrey .wp-block-columns.is-style-default > .wp-block-column {
  padding-bottom: 8px !important;
}

@media (max-width: 767px) {

  body.single-post #content_single > .wp-block-separator,
  body.single-post #content_single .wp-block-separator {
    margin: 30px 0 !important;
  }

  body.single-post #content_single ul.wp-block-list,
  body.single-post #content_single ol.wp-block-list {
    padding-left: 21px !important;
    margin-bottom: 20px !important;
  }

  body.single-post #content_single code {
    font-size: 0.92em !important;
    background: #f2f4f7;
    padding: 1px 5px;
    border-radius: 3px;
    word-break: break-word;
  }

  body.single-post #content_single figure.em-diagram-img img {
    min-width: 660px;
    width: 660px !important;
    max-width: none !important;
  }

  body.single-post #content_single figure.wp-block-image.alignright,
  body.single-post #content_single figure.wp-block-image.alignleft {
    float: none !important;
    margin: 22px 0 !important;
  }

  body.single-post #content_single figure.wp-block-image.alignright img,
  body.single-post #content_single figure.wp-block-image.alignleft img {
    width: 100% !important;
  }

  body.single-post #content_single .wp-block-button {
    width: 100%;
  }

  body.single-post #content_single .wp-block-button__link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 18px !important;
  }

  body.single-post #content_single p[style*="12.5px"] {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  body.single-post #content_single h2 {
    font-size: 20px !important;
    line-height: 1.3 !important;
    margin: 26px 0 10px !important;
  }

  body.single-post #content_single .fit-1200,
  body.single-post #content_single .fit {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.single-post #content_single figure.em-diagram-img {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* cien po prawej mowi palcem: tu jest wiecej */
      background: linear-gradient(to left, rgba(25,39,67,.10), rgba(25,39,67,0) 34px);
    margin-left: -16px !important;
    margin-right: -16px !important;
    margin-top: 26px !important;
    margin-bottom: 8px !important;
  }

  body.single-post #content_single figure.em-diagram-img figcaption {
    position: sticky;
    left: 0;
    font-size: 13px !important;
    line-height: 1.45;
    padding: 0 16px;
  }

  body.single-post #content_single .wp-block-group.has-background {
    padding: 22px 18px !important;
    background-color: #fdf3ef !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    margin-top: 28px !important;
    margin-bottom: 28px !important;
  }

  body.single-post #content_single h3 {
    line-height: 1.34 !important;
    margin: 22px 0 8px !important;
    font-size: 15.5px !important;
  }

  body.single-post #content_single details.wp-block-details summary {
    line-height: 1.4 !important;
    padding: 12px 0 !important;
    font-size: 14px !important;
  }

  body.single-post #content_single .wp-block-group.has-background h3 {
    margin-bottom: 10px !important;
    font-size: 17px !important;
  }

  body.single-post #content_single .wp-block-group.has-background p {
    font-size: 13.5px !important;
  }

  body.single-post #content_single figcaption {
    line-height: 1.45 !important;
    font-size: 11.5px !important;
  }

  body.single-post h1 {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  body.single-post #content_single p,
  body.single-post #content_single p.wp-block-paragraph {
    margin-bottom: 13px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body.single-post #content_single ul.wp-block-list li,
  body.single-post #content_single ol.wp-block-list li {
    line-height: 1.6 !important;
    margin-bottom: 9px !important;
    font-size: 13px !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body.single-post #content_single details.wp-block-details p {
    margin-bottom: 16px !important;
    font-size: 13px !important;
  }

  body.single-post #content_single {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 6px !important;
  }

}


/* --- 2. Naglowek wpisu: tytul, tabela parametrow, udostepnianie, okruszki --- */

#content_author .content_author_inner .desc {
  font-size:12.5px;
  line-height:1.5;
  color:#5B6473;
}

#content_author .content_author_inner .desc .desc-skrot {
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

#content_author .content_author_inner .desc .desc-skrot p {
  margin:0 0 6px;
}

body.single-post #content_single .em-pasek-wpisu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 26px;
  border-bottom: 1px solid #e3e7ec;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 14px;
  padding-left: 0;
}

body.single-post #content_single .em-pasek-info {
  font-size: 13.5px;
  color: #667085;
  line-height: 1.3;
}

body.single-post #content_single .em-pasek-akcja {
  flex: 0 0 auto;
  border: 1px solid #d3d8df;
  background: #fff;
  color: #22334D;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 3px;
  cursor: pointer;
}

body.single-post #content_single .em-pasek-akcja:hover {
  border-color: #8a94a6;
}

body.single-post .em-okruszki {
  display: block;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  font-size: 11.5px !important;
}

body.single-post .em-okruszki::-webkit-scrollbar {
  display: none;
}

body.single-post .em-param-nazwa {
  flex: 0 0 auto;
  font-size: 10.5px;
  color: #586477;
}

body.single-post .em-param-wartosc {
  font-size: 11px;
  color: #22334D;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

body.single-post .em-param-wartosc::-webkit-scrollbar {
  display: none;
}

body.single-post .em-param-imie {
  text-decoration: underline;
  font-weight: 600;
}

body.single-post .em-param-wartosc a {
  color: #22334D;
}

body .em-udostepnij {
  position: fixed;
  top: 24px;
  right: 84px;
  z-index: 9997;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 2px 10px rgba(25,39,67,.16);
  color: #22334D;
  cursor: pointer;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

body .em-udostepnij.em-skopiowano {
  color: #6DB83F;
}

body.single-post .em-udostepnij-tekst {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 11px;
  color: #00A4E0;
  text-decoration: underline;
  cursor: pointer;
}

body.single-post .desc,
body.single-post .desc-skrot {
  max-width: 100% !important;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

body.single-post .single_top,
body.single-post .postHead {
  padding-top: 14px !important;
}

body.single-post .em-param {
  display: flex;
  gap: 7px;
  padding: 4px 0;
  border-bottom: 1px solid #f0f2f5;
  min-width: 0;
  align-items: center !important;
  min-height: 32px;
}

body.single-post .em-param-nazwa,
body.single-post .em-param-wartosc {
  line-height: 1.25 !important;
}

/* Dluga nazwa kategorii nie miesci sie w kolumnie i urywala sie w polowie
   slowa bez zadnego znaku. Wiersz zostaje jeden, ale widac, ze tekst trwa dalej.
   Element z linkiem musi miec wlasne skracanie, bo to on jest za waski. */
body.single-post .em-param-wartosc,
body.single-post .em-param-wartosc a {
  text-overflow: ellipsis;
}

body.single-post .em-param-wartosc a {
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
}

body.single-post .em-param-foto {
  order: 2;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  align-self: center;
  flex: 0 0 auto;
}

body.single-post .em-parametry-zwijane:not(.em-parametry-otwarte) {
  grid-template-rows: auto !important;
}

body.single-post .em-parametry-zwijane .em-param {
  display: none;
}

body.single-post .em-parametry-zwijane .em-param:nth-child(1),
body.single-post .em-parametry-zwijane .em-param:nth-child(4) {
  white-space: nowrap;
  display: flex;
}

body.single-post .em-parametry-otwarte .em-param {
  display: flex !important;
}

body.single-post .em-param-wiecej {
  margin-left: auto;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
}

body.single-post .em-param-wiecej::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-right: 1.6px solid #8a94a6;
  border-bottom: 1.6px solid #8a94a6;
  transform: rotate(45deg);
  transition: transform .18s ease;
}

body.single-post .em-parametry-otwarte .em-param-wiecej::after {
  transform: rotate(-135deg);
  top: 9px;
}

body.single-post .em-parametry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 0 18px;
  margin-bottom: 6px !important;
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
}

body.single-post section.wpis > .fit-1200:first-child,
body.single-post .single_top {
  padding-bottom: 6px !important;
}

body.single-post .em-hero-koniec {
  padding-bottom: 4px !important;
}

@media (max-width: 767px) {

  body.single-post #content_single .em-pasek-wpisu {
    margin: 0 0 22px;
    padding-bottom: 12px;
  }

  body.single-post #content_single .em-pasek-info {
    font-size: 13px;
  }

  body.single-post #content_single .em-pasek-akcja {
    font-size: 13px;
    padding: 8px 13px;
  }

  body.single-post .single_top,
  body.single-post .postHead,
  body.single-post .entry-header {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  body.single-post #content_single .em-pasek-info,
  body.single-post #content_single .em-pasek-akcja {
    font-size: 12px !important;
  }

  body.single-post .em-parametry {
    gap: 0 14px;
  }

}

@media (min-width: 768px) {

  body.single-post #content_single .em-pasek-wpisu {
    justify-content: flex-start;
    gap: 18px;
  }

  body.single-post #content_single .em-pasek-info {
    flex: 0 0 auto;
  }

  body .em-udostepnij {
    display: none !important;
  }

}

@media (max-width:782px) {

  #content_author .content_author_inner .desc .desc-skrot {
    -webkit-line-clamp:5;
  }

}


/* --- 3. Pigulka "W skrocie" nad trescia ------------------------------------- */

#content_single .em-skrot__odpowiedz {
  margin: 0 0 14px;
}

#content_single .em-skrot__tabela {
  margin: 16px 0 12px;
  overflow-x: auto;
}

/* Tabela w pigulce ma wlasne jasne tlo, wiec musi tez ustawic ciemny tekst.
   Bez tego dziedziczy jasny kolor z granatowego tla pigulki i znika. */
#content_single .em-skrot__tabela table,
#content_single .em-skrot__tabela th,
#content_single .em-skrot__tabela td {
  color: #22334D;
}

#content_single .em-skrot__tabela table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #fff;
}

/* Na telefonie cztery kolumny nie mieszcza sie w 322 px i ostatnia znikala
   za krawedzia. Tabela dostaje wlasna szerokosc i przewija sie w swojej ramce. */
@media (max-width: 767px) {
  #content_single .em-skrot__tabela {
    -webkit-overflow-scrolling: touch;
  }

  #content_single .em-skrot__tabela table {
    min-width: 460px;
  }

  #content_single .em-skrot__tabela th,
  #content_single .em-skrot__tabela td {
    padding: 9px 10px;
    font-size: 13.5px;
  }
}

#content_single .em-skrot__tabela th,
#content_single .em-skrot__tabela td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid #e6e8ec;
}

#content_single .em-skrot__tabela thead th {
  font-weight: 600;
  border-bottom: 1px solid #c9ced6;
}

#content_single .em-skrot__tabela tbody tr:last-child td {
  border-bottom: 0;
}

/* Podpis lezy juz na granatowym tle pigulki, nie na bialym tle tabeli,
   wiec szary #6b7280 dawal kontrast ponizej 3:1. */
#content_single .em-skrot__tabela figcaption {
  font-size: 12.5px;
  color: #b6c4da;
  margin: 8px 0 0;
}

#content_single .em-skrot__stan {
  font-size: 12.5px;
  color: #6b7280;
  margin: 0;
}

body.single-post #content_single .em-skrot,
.em-skrot {
  margin: 26px 0 30px !important;
  padding: 17px 21px 18px !important;
  background: #192743 !important;
  border-radius: 3px !important;
  color: #dfe6f0;
  box-sizing: border-box;
  width: 100%;
  clear: both;
}

body.single-post #content_single .em-skrot ul,
.em-skrot ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.single-post #content_single .em-skrot li,
.em-skrot li {
  position: relative;
  margin: 0 0 7px !important;
  padding: 0 0 0 15px !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  color: #dfe6f0 !important;
  list-style: none !important;
}

body.single-post #content_single .em-skrot li:last-child,
.em-skrot li:last-child {
  margin-bottom: 0 !important;
}

body.single-post #content_single .em-skrot li::before,
.em-skrot li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 1px;
  background: #7b8ca8;
}

.em-skrot li strong {
  color: #ffffff !important;
  font-weight: 600;
}

.em-skrot a {
  color: #7cc7f0;
}

.em-skrot__tytul {
  display: block !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

body.single-post #content_single .em-skrot {
  margin-top: 10px !important;
}

@media (max-width: 767px) {

  #content_single .em-skrot__tabela table {
    font-size: 13px;
  }

  #content_single .em-skrot__tabela th,
  #content_single .em-skrot__tabela td {
    padding: 8px 9px;
  }

  body.single-post #content_single .em-skrot {
    padding: 18px 18px 19px !important;
    border-radius: 0 !important;
    width: auto !important;
    margin-right: -18px !important;
    margin-bottom: 26px !important;
    margin-left: -18px !important;
  }

  body.single-post #content_single .em-skrot li {
    line-height: 1.5 !important;
    margin-bottom: 9px !important;
    font-size: 13px !important;
  }

  .em-skrot__tytul {
    font-size: 19px !important;
  }

}


/* --- 4. Spis tresci --------------------------------------------------------- */

body.single-post #content_single #tocList {
  margin: 0 0 8px !important;
  column-count: 2;
  column-gap: 42px;
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 19px !important;
}

body.single-post #content_single #tocList li a:hover {
  text-decoration: underline;
}

body.single-post #spisTresci_header {
  color: #1b2330 !important;
  text-align: left !important;
  padding: 16px 0 10px !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  font-size: 21px !important;
  font-weight: 700 !important;
}

body.single-post #content_single #tocList li {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  break-inside: avoid;
  color: #667085;
  border-bottom: 1px solid rgba(255,255,255,.75);
  padding: 6px 0 !important;
}

body.single-post #content_single #tocList li:last-child {
  border-bottom: 0;
}

body.single-post #content_single #tocList li a {
  padding: 0 !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: #22334D;
  text-decoration: none;
  display: inline-flex !important;
  align-items: baseline;
  gap: 7px;
}

body.single-post .em-toc-ikona {
  display: inline-block;
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-right: 1.5px solid #00A4E0;
  border-bottom: 1.5px solid #00A4E0;
  transform: rotate(-45deg);
  position: relative;
  top: -1px;
}

body.single-post #spisTresci.my-toc-block {
  background-image: none !important;
  padding: 0 0 6px !important;
  margin: 22px 0 28px !important;
  text-align: left !important;
  font-weight: 400 !important;
  border: 0 !important;
  border-top: 1px solid #e3e7ec !important;
  box-shadow: none !important;
  background-color: #d7ecf9 !important;
}

@media (max-width: 767px) {

  body.single-post #content_single #tocList {
    column-count: 1 !important;
    padding-left: 20px !important;
  }

  body.single-post #spisTresci.my-toc-block {
    border: 0 !important;
    margin: 22px -16px 26px !important;
    padding: 16px 16px 12px !important;
  }

  body.single-post #content_single #tocList li {
    font-size: 15.5px !important;
    color: #00A4E0 !important;
  }

  body.single-post #content_single #tocList li a {
    font-size: 15.5px !important;
    color: #22334D !important;
  }

  body.single-post #spisTresci_header {
    padding: 0 0 10px !important;
    color: #192743 !important;
    font-size: 19px !important;
  }

  body.single-post #content_single #tocList li,
  body.single-post #content_single #tocList li a {
    font-size: 13px !important;
  }

}


/* --- 5. Rozwijane dzialy na telefonie --------------------------------------- */

body.single-post #content_single h2.em-sekcja-naglowek {
  background: #eaeff5 !important;
}

body.single-post #content_single h2.em-sekcja-naglowek.em-dzial-mocny {
  background: #dfe6ef !important;
}

body.single-post #content_single h2.em-sekcja-naglowek[data-stan="otwarty"] {
  background: transparent !important;
}

@media (max-width: 767px) {

  body.em-akordeon #content_single hr.wp-block-separator {
    display: none !important;
  }

  body.single-post #content_single h2.em-sekcja-naglowek[data-stan="zwiniety"] + .em-sekcja-tresc {
    display: none;
  }

  body.single-post #content_single h2.em-sekcja-naglowek[data-stan="zwiniety"] {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }

  body.single-post #content_single > p,
  body.single-post #content_single > ul,
  body.single-post #content_single > ol,
  body.single-post #content_single > h2,
  body.single-post #content_single > h3,
  body.single-post #content_single > .em-sekcja-tresc,
  body.single-post #content_single .em-sekcja-tresc > p,
  body.single-post #content_single .em-sekcja-tresc > ul,
  body.single-post #content_single .em-sekcja-tresc > ol {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.single-post #content_single .em-sekcja-tresc {
    padding-top: 4px;
    padding-right: 0;
    padding-bottom: 16px;
    padding-left: 0;
  }

  body.single-post #content_single h2.em-sekcja-naglowek + .em-sekcja-tresc {
    border-bottom: 0;
  }

  body.single-post #content_single h2.em-sekcja-naglowek[data-stan="otwarty"] + .em-sekcja-tresc {
    border-bottom: 1px solid #e3e7ec;
    padding-bottom: 20px;
    margin-bottom: 12px;
  }

  body.single-post #content_single h2.em-sekcja-naglowek {
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    padding-bottom: 12px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    color: #22334D !important;
    border: 0 !important;
    font-size: 15px !important;
    margin: 0 0 4px !important;
    border-bottom: 3px solid #fff !important;
    border-radius: 5px;
    padding-top: 12px !important;
    padding-right: 38px !important;
    padding-left: 14px !important;
  }

  body.single-post #content_single h2.em-sekcja-naglowek .em-dzial-przycisk::after {
    content: "";
    position: absolute;
    border-right: 2px solid #8a94a6;
    border-bottom: 2px solid #8a94a6;
    transform: rotate(45deg);
    transition: transform .18s ease;
    width: 8px;
    height: 8px;
    border-color: #a8b0bd;
    border-width: 2px;
    top: 16px;
    right: 14px;
  }

  body.single-post #content_single h2.em-sekcja-naglowek[data-stan="otwarty"] {
    color: #192743 !important;
    font-weight: 700 !important;
    padding-right: 34px !important;
    margin-bottom: 2px !important;
    font-size: 16.5px !important;
    border-bottom: 0 !important;
    padding-left: 0 !important;
  }

  body.single-post #content_single h2.em-sekcja-naglowek[data-stan="otwarty"] .em-dzial-przycisk::after {
    transform: rotate(-135deg);
    right: 4px;
    border-color: #667085;
    top: 20px;
  }

}


/* --- 6. Wyroznienia w tekscie nadawane automatycznie ------------------------ */

body.single-post #content_single p.em-zapowiedz {
  color: #192743 !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
}

body.single-post #content_single p.em-otwarcie {
  color: #1b2330 !important;
}

body.single-post #content_single .em-modul p.em-zapowiedz {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #192743 !important;
  line-height: 1.3 !important;
  margin-bottom: 14px !important;
}

/* Ostrzezenie bez kolorowej krawedzi: u nas kolorowa krawedz jest zabroniona,
   a przy malej czcionce robila z akapitu alert rodem z generatora. Zostaje samo
   cieple tlo i normalna wielkosc tekstu. */
body.single-post #content_single p.em-uwaga-akapit {
  border: 0 !important;
  border-radius: 6px;
  padding: 14px 16px !important;
  background: #fdeee7 !important;
  font-size: 15.5px !important;
  margin-top: 18px !important;
  margin-right: 0 !important;
  margin-bottom: 18px !important;
  margin-left: 0 !important;
}

/* Srodtytul: akapit zlozony w calosci z pogrubienia. Ma byc wiekszy niz tekst,
   ktory zapowiada, bez tla i bez krawedzi. */
/* Srodtytul stoi nizej niz H3, wiec musi byc od niego mniejszy. Wyroznia go waga
   i kolor, nie wielkosc: przy 17 px byl wiekszy od naglowka dzialu i hierarchia
   sie odwracala. */
body.single-post #content_single p.em-srodtytul {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #192743 !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 22px 0 8px !important;
}

@media (min-width: 768px) {
  body.single-post #content_single p.em-srodtytul {
    font-size: 17.5px !important;
    margin: 28px 0 10px !important;
  }
}

body.single-post #content_single p.em-srodtytul strong {
  font-weight: 600;
}

@media (max-width: 767px) {

  body.single-post #content_single p.em-uwaga-akapit {
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding: 13px 16px !important;
  }

  body.single-post #content_single p.em-otwarcie {
    font-size: 14px !important;
  }

  /* Tytul nad kartami stoi nizej niz naglowek dzialu, wiec nie moze byc od niego
     wiekszy. Przy 17 px przebijal H2 i uklad czytalo sie od srodka, nie od gory. */
  body.single-post #content_single .em-modul p.em-zapowiedz {
    font-size: 15.5px !important;
  }

}


/* --- 7. Moduly z kartami przewijanymi w bok --------------------------------- */

body.single-post #content_single .em-modul {
  background: #f2f8f4;
  border-radius: 6px 0 0 6px;
  padding: 16px 0 14px 16px;
  margin: 20px -16px 22px 0;
}

body.single-post #content_single .em-modul .em-karuzela {
  margin: 0 !important;
  padding: 0 16px 2px 0 !important;
}

body.single-post #content_single .em-modul .em-kropki {
  margin: 10px 0 0 !important;
}



body.single-post #content_single .em-modul-cyan {
  background: #d7ecf9 !important;
}

body.single-post #content_single .em-modul-zielony {
  background: #e0f2d3 !important;
}

body.single-post #content_single .em-modul-pomarancz {
  background: #fde0d3 !important;
}

body.single-post #content_single .em-modul-magenta {
  background: #f6d9ee !important;
}

body.single-post #content_single .em-modul .em-karta {
  background: #fff !important;
}

body.single-post #content_single .em-modul p.em-modul-wstep {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #1b2330 !important;
  margin: 0 0 12px !important;
  font-weight: 600 !important;
}

@media (max-width: 767px) {

  body.single-post #content_single .em-karuzela::-webkit-scrollbar {
    display: none;
  }

  body.single-post #content_single .em-karta {
    flex: 0 0 84%;
    scroll-snap-align: start;
    background: #f7f9fb;
    border-radius: 4px;
    padding: 15px 16px 16px;
    box-sizing: border-box;
    display: flex;
    gap: 9px;
  }

  body.single-post #content_single .em-karta-nr {
    font-size: 15.5px;
    font-weight: 700;
    color: #586477;
    flex: 0 0 auto;
  }

  body.single-post #content_single .em-karta-tresc {
    font-size: 15.5px;
    line-height: 1.55;
    color: #22334D;
  }

  body.single-post #content_single .em-karta-tresc strong {
    font-weight: 600;
    color: #121924;
  }

  body.single-post #content_single .em-karta-tresc code {
    font-size: 0.92em;
    background: #eceff3;
    padding: 1px 5px;
    border-radius: 3px;
  }

  body.single-post #content_single .em-kropki {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin: 0 0 18px !important;
    padding: 0;
  }

  body.single-post #content_single .em-kropka {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d3d8df;
    transition: all .18s ease;
  }

  body.single-post #content_single .em-kropka.akt {
    width: 18px;
    border-radius: 3px;
    background: #192743;
  }

  body.single-post #content_single .em-karuzela {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 16px;
    padding-right: 16px;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    padding-top: 0;
    padding-bottom: 4px;
  }

  body.single-post #content_single .em-karta-tresc,
  body.single-post #content_single .em-karta-nr {
    font-size: 13px !important;
  }

}

@media (prefers-reduced-motion: reduce) {


}


/* --- 8. Komentarz autora ---------------------------------------------------- */

body.single-post #content_single .emedia-author-comment {
  background: #d8ecc8 !important;
  border: 0 !important;
  border-radius: 6px;
  padding: 16px 18px !important;
}

body.single-post #content_single .emedia-author-comment p {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}

body.single-post #content_single .emedia-author-comment .wp-block-column {
  flex-basis: auto !important;
}

body.single-post #content_single .emedia-author-comment img {
  border-radius: 50%;
}

@media (max-width: 767px) {

  body.single-post #content_single .em-skrot,
  body.single-post #content_single .wp-block-group.has-background,
  body.single-post #content_single .emedia-author-comment {
    margin-left: -16px !important;
    margin-right: -16px !important;
  }

  body.single-post #content_single .emedia-author-comment {
    margin-left: -16px !important;
    margin-right: -16px !important;
    border-radius: 0;
    padding: 15px 16px !important;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }

  body.single-post #content_single .emedia-author-comment .wp-block-columns {
    display: flex !important;
    flex-direction: column;
    gap: 10px !important;
  }

  body.single-post #content_single .emedia-author-comment p {
    font-size: 13px !important;
  }

}


/* --- 9. Koniec wpisu: ocena, komentarze, metryka, podpis autora ------------- */

#content_author .content_author_inner {
  padding:18px 22px;
  gap:4px 18px;
  grid-template-columns:72px auto;
}

#content_author .content_author_inner .img {
  min-width:72px;
  flex-basis:72px;
}

#content_author .content_author_inner .about .header {
  font-size:11px;
  padding-bottom:2px;
}

#content_author .content_author_inner .about .imie {
  font-size:16px;
  line-height:1.3;
}

#content_author .content_author_inner .about .funkcja {
  font-size:12.5px;
  line-height:1.4;
}

#content_author .content_author_inner .czytaj-wiecej {
  display:inline-block;
  margin-top:6px;
  font-size:12.5px;
  font-weight:600;
  color:#F25E2A;
  text-decoration:none;
}

#content_author .content_author_inner .czytaj-wiecej:hover {
  text-decoration:underline;
}

#content_single .em-data-wpisu {
  font-size:12.5px !important;
  line-height:1.5 !important;
  color:#6b7280 !important;
  margin:32px 0 0 !important;
  padding:0 !important;
}

body.single-post #content_single details.em-nota {
  margin: 26px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid #e3e7ec;
}

body.single-post #content_single details.em-nota summary {
  cursor: pointer;
  font-size: 12.5px;
  color: #586477;
  padding: 0;
  list-style: none;
}

body.single-post #content_single details.em-nota summary::-webkit-details-marker {
  display: none;
}

body.single-post #content_single details.em-nota summary::after {
  content: " ▾";
  opacity: .6;
}

body.single-post #content_single details.em-nota[open] summary::after {
  content: " ▴";
}

body.single-post #content_single details.em-nota p {
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: #586477 !important;
  margin: 10px 0 0 !important;
}

body.single-post details.em-nota {
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid #eef0f3;
}

body.single-post details.em-nota summary {
  font-size: 11.5px !important;
  color: #586477 !important;
}

body.single-post details.em-nota p {
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  color: #586477 !important;
  margin: 8px 0 0 !important;
}

body.single-post p.em-data-wpisu,
body.single-post #content_single p.em-data-wpisu,
body.single-post .fit-1200 p.em-data-wpisu {
  font-size: 11.5px !important;
  color: #586477 !important;
  margin-top: 4px !important;
}

body.single-post .em-komentarz-przycisk[aria-expanded="true"] {
  border-radius: 4px 4px 0 0;
}

body.single-post .em-komentarz-ukryty {
  display: none !important;
}

body.single-post .em-komentarz-przycisk:hover {
  background: #9c1879 !important;
}

body.single-post .em-koniec {
  margin: 34px 0 26px;
}

body.single-post .em-koniec-kreska {
  display: block;
  height: 1px;
  background: #e3e7ec;
  margin: 0 0 18px;
}

body.single-post .em-koniec-wiersz {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

body.single-post .em-koniec .comments-area {
  flex: 1 0 100%;
  order: 10;
  margin: 0;
}

body.single-post .em-koniec-sep {
  width: 1px;
  height: 13px;
  background: #d3d8df;
}

body.single-post .em-koniec-napis {
  margin-left: 0 !important;
  order: 9;
  text-align: right;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #192743 !important;
  letter-spacing: -.01em;
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

body.single-post .em-koniec .post-rating,
body.single-post .em-ocena-mala {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px !important;
}

body.single-post .em-ocena-mala .stars {
  font-size: 13px !important;
  letter-spacing: 1px;
}

body.single-post .em-ocena-mala .star {
  font-size: 13px !important;
}

body.single-post .em-koniec-komentarz {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 11.5px;
  color: #b83a11;
  text-decoration: underline;
  cursor: pointer;
}

body.single-post .em-koniec-komentarz:hover {
  color: #96300e;
}

body.single-post details.em-metryka {
  margin: 20px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid #eef0f3;
}

body.single-post details.em-metryka summary {
  cursor: pointer;
  list-style: none;
  font-size: 11.5px;
  color: #586477;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.single-post details.em-metryka summary::-webkit-details-marker {
  display: none;
}

body.single-post .em-metryka-wiecej {
  text-decoration: underline;
}

body.single-post details.em-metryka summary::after {
  content: "▾";
  opacity: .6;
}

body.single-post details.em-metryka[open] summary::after {
  content: "▴";
}

body.single-post details.em-metryka p {
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  color: #586477 !important;
  margin: 9px 0 0 !important;
}

body.single-post .em-zaproszenie {
  margin: 26px 0;
  padding: 0;
  text-align: left;
}

body.single-post .em-zaproszenie p {
  font-size: 13.5px !important;
  color: #667085 !important;
  margin: 0 0 10px !important;
}

/* Pomarancz marki #F25E2A daje z biela kontrast 3.28:1, a przy tekscie 14 px
   norma wymaga 4.5:1. Ciemniejszy odcien tej samej barwy daje 4.68:1. */
body.single-post .em-zaproszenie-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: #cf4415;
  border-radius: 40px;
  padding: 12px 24px;
  text-decoration: none;
}

body.single-post .em-zaproszenie-link:hover {
  background: #b83a11;
}

body.single-post .em-podpis .em-podpis-linia {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

body.single-post .em-podpis .em-podpis-linia::-webkit-scrollbar {
  display: none;
}

body.single-post .em-podpis .header {
  font-size: 11px !important;
  color: #586477 !important;
  margin: 0 !important;
}

body.single-post .em-podpis .imie {
  font-size: 11px !important;
  margin: 0 !important;
}

body.single-post .em-podpis .imie a {
  font-size: 13.5px !important;
  font-weight: 700 !important;
}

body.single-post .em-podpis .funkcja {
  font-size: 11px !important;
  color: #586477 !important;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: 3px !important;
}

body.single-post .em-podpis .funkcja::-webkit-scrollbar {
  display: none;
}

body.single-post .em-podpis,
body.single-post .em-podpis > *,
body.single-post .em-podpis-linia,
body.single-post .em-podpis .funkcja {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

body.single-post .em-komentarz-przycisk {
  box-sizing: border-box;
  cursor: pointer;
  border-right: 3px solid #F25E2A;
  font-family: inherit;
  margin: 20px 0 0;
  background: #B51C8D !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 40px !important;
  padding: 13px 26px !important;
  width: auto !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;
  display: none !important;
}

body.single-post .komentarze_inner {
  box-shadow: none !important;
}

@media (max-width: 767px) {

  body.single-post .autor_single img,
  body.single-post .postAuthor img {
    width: 40px !important;
    height: 40px !important;
  }

  body.single-post .em-koniec-napis {
    flex: 1 0 100%;
    font-size: 19px !important;
  }

  body.single-post #content_single .em-koniec .em-koniec-napis,
  body.single-post .em-koniec p.em-koniec-napis {
    font-size: 20px !important;
    text-align: center !important;
    margin-top: 8px !important;
  }

  body.single-post .em-koniec-wiersz {
    justify-content: flex-start;
  }

}

@media (max-width:782px) {

  #content_author .content_author_inner {
    grid-template-columns:56px auto;
    padding:16px;
    gap:4px 14px;
  }

  #content_author .content_author_inner .img {
    min-width:56px;
    flex-basis:56px;
  }

}


/* --- 10. Nawigacja po serii i pas "Zobacz rowniez" --------------------------- */

body.single-post #content_single .em-seria__licznik a {
  color: #22334D;
}

body.single-post #content_single .em-seria__nast {
  text-align: right;
  grid-column: 2;
}

body.single-post #content_single .em-seria__poprz {
  grid-column: 1;
}

body.single-post #content_single .em-seria__link:hover {
  background: #eef2f6;
}

body.single-post #content_single .em-seria {
  border-left: 3px solid #00A4E0;
  border-top: 0 !important;
  margin: 34px 0 0 !important;
  background: #fdf1ec !important;
  border: 0 !important;
  border-radius: 6px;
  padding: 18px 18px 20px !important;
}

body.single-post #content_single .em-seria__licznik {
  line-height: 1.4 !important;
  font-size: 12px !important;
  color: #5b6a80 !important;
  display: block;
  margin: 0 0 14px !important;
}

body.single-post .em-seria__tytul {
  display: block;
  font-size: 19px;
  font-weight: 700;
  color: #192743;
  line-height: 1.3;
  margin-bottom: 4px;
}

body.single-post .em-seria__cala {
  font-size: 12px;
  color: #a24a22;
  text-decoration: underline;
}

body.single-post #content_single .em-seria__linki {
  display: grid;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

body.single-post #content_single .em-seria__poprz,
body.single-post #content_single .em-seria__nast {
  grid-column: auto !important;
  text-align: left !important;
}

body.single-post #content_single .em-seria__link {
  display: block;
  text-decoration: none;
  color: #22334D;
  background: #fff;
  padding: 11px 12px;
  border-radius: 4px;
}

body.single-post #content_single .em-seria__link span {
  display: block;
  margin-bottom: 3px;
  font-size: 10.5px;
  color: #8a6153;
}

body.single-post #content_single .em-seria__link strong {
  display: block;
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 600;
}

@media (max-width: 767px) {

  body.single-post #content_single .em-seria__nast,
  body.single-post #content_single .em-seria__poprz {
    grid-column: 1;
    text-align: left;
  }

  body.single-post .em-seria__tytul {
    font-size: 17px;
  }

  body.single-post #content_single .em-seria {
    margin: 24px -16px 0 !important;
    border-radius: 0;
  }

}


/* --- 11. Pasek postepu czytania i powrot na gore ----------------------------- */

.em-postep {
  height: 5px !important;
}

@media (max-width: 767px) {

  .em-postep {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, #00A4E0, #6DB83F, #F25E2A, #B51C8D);
    z-index: 9999;
    pointer-events: none;
  }

  .em-do-gory {
    position: fixed;
    right: 14px;
    bottom: 16px;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: #192743;
    color: #fff;
    font-size: 21px;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 9998;
    box-shadow: 0 4px 16px rgba(25, 39, 67, .3);
  }

  .em-do-gory.widoczny {
    opacity: .94;
    pointer-events: auto;
  }

}


/* --- 14. nic w tresci nie rozpycha ekranu telefonu ---------------------- */

@media (max-width: 767px) {

  /* Zdjecia, filmy i osadzenia ze starszych wpisow mialy sztywna szerokosc
     w pikselach i rozpychaly uklad nawet do 1300 px, przez co telefon
     pokazywal cala strone pomniejszona. Diagramy zostaja szersze celowo:
     maja wlasna regule o wyzszej wadze i przewijaja sie w swojej ramce. */
  body.single-post #content_single img,
  body.single-post #content_single video,
  body.single-post #content_single iframe,
  body.single-post #content_single embed,
  body.single-post #content_single object {
    max-width: 100% !important;
    height: auto;
  }

  /* Dlugi adres albo linia z podkreslen wklejona zamiast separatora potrafi
     byc szersza niz caly ekran. Wlasnosc dziedziczy sie w dol, wiec lapie
     takze goly tekst wstawiony wprost do kontenera tresci, bez akapitu. */
  body.single-post #content_single {
    overflow-wrap: break-word;
  }

  body.single-post #content_single a {
    overflow-wrap: anywhere;
  }

}


/* --- 15. Czytelnosc: jasne tlo w ciemnym otoczeniu --------------------- */

/* Pigulka ma ciemne tlo i jasny tekst, wiec kazdy element, ktory maluje w niej
   wlasne jasne tlo, musi tez ustawic ciemny kolor. Bez tego dziedziczy jasny
   tekst z pigulki i znika, jak stalo sie z tabela w tekscie o YouTube. */
body.single-post #content_single .em-skrot code,
body.single-post #content_single .em-skrot table,
body.single-post #content_single .em-skrot th,
body.single-post #content_single .em-skrot td,
body.single-post #content_single .em-skrot .wp-block-group.has-background,
body.single-post #content_single .em-skrot .em-karta,
body.single-post #content_single .em-skrot [class*="em-modul"] {
  color: #22334D;
}

/* To samo w komentarzu autora i w nawigacji po serii: obie maja wlasne tlo. */
body.single-post #content_single .emedia-author-comment code,
body.single-post #content_single .emedia-author-comment table,
body.single-post #content_single .em-seria code,
body.single-post #content_single .em-seria table {
  color: #22334D;
}


/* --- 16. Kontrast tekstu wobec tla ------------------------------------- */

/* Pomiar WCAG na 30 wpisach pokazal, ze pomarancz marki #F25E2A daje na bialym
   tle 3.22:1, a przy tekscie mniejszym niz 18 px norma wymaga 4.5:1. Ciemniejszy
   odcien tej samej barwy daje 5.65:1 na bieli i nie schodzi ponizej 4.4:1 na
   zadnym z naszych kolorowych tel. Pomarancz marki zostaje tam, gdzie jest
   powierzchnia, nie tekst: w paskach, kropkach i tle wyroznien. */
body.single-post #content_single a:not([class]),
body.single-post #content_single p a,
body.single-post #content_single li a,
body.single-post #content_single td a,
body.single-post #content_single a.em-tag,
body.single-post a.czytaj-wiecej {
  color: #b83a11;
}

body.single-post #content_single a:not([class]):hover,
body.single-post #content_single p a:hover,
body.single-post #content_single li a:hover,
body.single-post a.czytaj-wiecej:hover {
  color: #8f2c0c;
}

/* Drobny druk mial #98a0ae, czyli 2.59:1. To ponizej progu nawet dla tekstu
   pomocniczego, a stopka o zrodlach jest tresci, nie ozdoba. */
/* #667085 wystarczal na bialym, ale drobny druk trafia tez na zielone tlo
   komentarza autora, gdzie schodzil do 3.97:1. Ciemniejszy odcien spelnia prog
   na kazdym z naszych tel: bialym, zielonym, cieplym i szarym. */
body.single-post #content_single p.has-small-font-size,
body.single-post #content_single p.has-small-font-size span,
body.single-post #content_single p.has-small-font-size em,
body.single-post #content_single p.em-tagi-wpisu,
body.single-post .em-tagi-wpisu {
  color: #586477 !important;
}

body.single-post #content_single p.has-small-font-size span[style*="4b5563"] {
  color: #4b5563 !important;
}

/* Licznik glosow przy ocenie wpisu miał #bbbbbb, czyli 1.92:1 na bialym. */
body.single-post .rating-stats .noOfVotes,
body.single-post span.noOfVotes {
  color: #586477 !important;
}

/* Komentarze pod wpisem: data miala #bfbfbf (1.84:1), a przycisk wysylki biel
   na pomaranczu marki (3.28:1). Przycisk dostaje to samo ciemniejsze tlo, co
   przyciski Gutenberga w tresci, zeby byl jeden odcien przycisku na wpisie. */
body.single-post .comment-metadata time,
body.single-post .comment-metadata a,
body.single-post .comment-metadata {
  color: #586477 !important;
}

/* nazwa autora komentarza jako odnosnik: ten sam #bfbfbf */
body.single-post .comment-author a.url,
body.single-post .comment-body a.url {
  color: #22334D !important;
}

body.single-post #respond button.wp-block-button__link,
body.single-post .comment-form button[type="submit"] {
  background-color: #cf4415 !important;
  color: #fff !important;
}

/* Przycisk pobrania pliku: pomarancz jako tekst na bialym dawal 3.22:1. */
body.single-post #content_single a.wp-block-file__button {
  color: #b83a11 !important;
}

/* Kolory z palety Gutenberga sa jasne i zaden nie spelnia progu na bialym.
   Zamiast usuwac je z tresci, mapujemy na ciemniejsze odpowiedniki, ktorych
   juz uzywamy w wyroznieniach. */
body.single-post #content_single .has-luminous-vivid-orange-color,
body.single-post #content_single .has-vivid-red-color {
  color: #9c3e00 !important;
}

body.single-post #content_single .has-vivid-cyan-blue-color,
body.single-post #content_single .has-pale-cyan-blue-color {
  color: #0a6f96 !important;
}

body.single-post #content_single .has-vivid-green-cyan-color,
body.single-post #content_single .has-light-green-cyan-color {
  color: #26734d !important;
}

body.single-post #content_single .has-luminous-vivid-amber-color,
body.single-post #content_single .has-vivid-purple-color {
  color: #9a5a08 !important;
}

/* Podpis zrodla w panelu cytatu dziedziczy #74808f z bloku feature-columns
   motywu: 3.71:1 na szarym tle panelu. */
body.single-post #content_single .em-cytat-panelu__zrodlo {
  color: #586477 !important;
}

/* Kod inline w pigulce (granatowe tlo) mial kolor tekstu tresci #22334d, czyli 1,17:1. */
body.single-post #content_single .em-skrot code,
body.single-post #content_single .em-skrot kbd {
  color: #fff !important;
  background: rgba(255, 255, 255, .14) !important;
  border-color: rgba(255, 255, 255, .25) !important;
}

/* Notka o stanie lezy na granatowym tle pigulki, wiec szary dawal 3.08:1. */
body.single-post #content_single .em-skrot__stan,
body.single-post #content_single .em-skrot .em-skrot__stan {
  color: #b6c4da !important;
}

/* Podpisy pod grafikami i metryka: ta sama szarosc co drobny druk. */
body.single-post #content_single figcaption,
body.single-post #content_single .wp-element-caption,
body.single-post details.em-metryka summary {
  color: #586477;
}


/* Ciemny odcien odnosnika dziala na jasnych tlach, ale pigulka ma ciemne tlo navy
   i ten sam kolor spada tam do 2.58:1, wiec w niej odnosniki i podpisy musza byc
   jasne. Regula stoi nizej i ma wyzsza wage niz ogolna regula odnosnikow, wiec
   wygrywa w pigulce. Komentarz autora ma jasne zielone tlo #d8ecc8, wiec zostaje
   przy ciemnym odnosniku z reguly ogolnej. */
body.single-post #content_single .em-skrot a,
body.single-post #content_single .em-skrot p a,
body.single-post #content_single .em-skrot li a {
  color: #7cc7f0 !important;
}

body.single-post #content_single .em-skrot a:hover {
  color: #a8dcf7 !important;
}

body.single-post #content_single .em-skrot figcaption,
body.single-post #content_single .em-skrot .wp-element-caption {
  color: #b6c4da !important;
}

/* Odnosnik "Czytaj wiecej o autorze" stoi poza trescia wpisu, wiec ogolna regula
   go nie obejmowala. */
body.single-post a.czytaj-wiecej,
body.single-post .content_author a,
body.single-post #content_author a {
  color: #b83a11;
}

/* Przycisk Gutenberga: biel na pomaranczu marki to 3.28:1 przy tekscie 14 px. */
body.single-post #content_single .wp-block-button__link {
  background-color: #cf4415 !important;
  color: #fff !important;
}


/* Odnosnik pod opisem autora bierze kolor z arkusza motywu, ktory wygrywa
   specyficznoscia, wiec tu potrzebna jest wyzsza waga. */
body.single-post .content_author_inner a.czytaj-wiecej,
body.single-post .desc a.czytaj-wiecej,
body.single-post a.czytaj-wiecej {
  color: #b83a11 !important;
}

body.single-post a.czytaj-wiecej:hover {
  color: #8f2c0c !important;
}


/* Przyciski to odnosniki na kolorowym tle, wiec ogolna regula koloru odnosnikow,
   stojaca nizej w arkuszu, odbierala im biel i zostawiala ciemny pomarancz
   na pomaranczowym tle: kontrast 1.23:1. Kolor tekstu przycisku ustawiamy tu,
   na koncu, zeby nic go juz nie nadpisalo. */
body.single-post #content_single a.em-zaproszenie-link,
body.single-post #content_single p a.em-zaproszenie-link,
body.single-post .em-zaproszenie a.em-zaproszenie-link,
body.single-post #content_single a.wp-block-button__link,
body.single-post #content_single p a.wp-block-button__link,
body.single-post #content_single .wp-block-button a {
  color: #fff !important;
}



/* Kreska nad metryka, gdy ta zostala wyprowadzona z zwinietego dzialu na koniec
   wpisu. Oddziela informacje techniczne od tresci. */
/* Ostatni zwiniety dzial ma juz dolna krawedz, wiec przy malym odstepie obie
   linie zlewaly sie w jedna gruba kreske. */
body.single-post #content_single hr.em-metryka-kreska {
  border: 0;
  border-top: 1px solid #e3e7ec;
  margin: 40px 0 16px !important;
  height: 0;
  background: none;
}


/* --- 18. Widok desktop: uwagi CEO z 4.09.2026 -------------------------- */
/* Zasada z tych uwag: moduly odcinamy od tresci samym granatowym obramowaniem,
   bez kolorowych tel. Stoi na koncu arkusza, zeby wygrywac pozycja. */

/* Spis tresci: jasnoniebieskie tlo i tekst przy samej krawedzi. */
body.single-post #spisTresci.my-toc-block {
  background-color: transparent !important;
  border: 1px solid #192743 !important;
  border-radius: 6px;
  padding: 6px 22px 16px !important;
}

body.single-post #content_single #tocList li {
  border-bottom-color: #e3e7ec;
}

@media (max-width: 767px) {
  body.single-post #spisTresci.my-toc-block {
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0;
    padding: 14px 16px 12px !important;
  }
}

/* Komentarz autora: zielone tlo schodzi, zostaje obramowanie. Zdjecie stoi
   po lewej jako wstawka o stalej szerokosci, tekst zaczyna sie tuz obok,
   a nie w drugiej polowie ekranu. */
body.single-post #content_single .emedia-author-comment {
  background: #fff !important;
  border: 1px solid #192743 !important;
  border-radius: 6px;
  padding: 18px 22px !important;
}

body.single-post #content_single .emedia-author-comment.wp-block-columns {
  display: flex !important;
  gap: 18px !important;
  align-items: flex-start !important;
}

body.single-post #content_single .emedia-author-comment > .wp-block-column:first-child {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 150px;
}

body.single-post #content_single .emedia-author-comment > .wp-block-column:first-child figure {
  margin: 0 0 6px !important;
}

body.single-post #content_single .emedia-author-comment > .wp-block-column:first-child img {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover;
}

body.single-post #content_single .emedia-author-comment > .wp-block-column:first-child p {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body.single-post #content_single .emedia-author-comment > .wp-block-column:last-child {
  flex: 1 1 auto !important;
  min-width: 0;
}

body.single-post #content_single .emedia-author-comment > .wp-block-column:last-child p {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

@media (max-width: 767px) {
  body.single-post #content_single .emedia-author-comment {
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0;
  }
  body.single-post #content_single .emedia-author-comment.wp-block-columns {
    flex-direction: column;
    gap: 10px !important;
  }
  /* na telefonie kolumna ze zdjeciem staje sie pozioma wizytowka nad tekstem */
  body.single-post #content_single .emedia-author-comment > .wp-block-column:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: none;
  }
  body.single-post #content_single .emedia-author-comment > .wp-block-column:first-child figure {
    margin: 0 !important;
  }
  body.single-post #content_single .emedia-author-comment > .wp-block-column:first-child img {
    width: 48px !important;
    height: 48px !important;
  }
}

/* Naglowki dzialow na szerokim ekranie 1,4 raza wieksze: 24 -> 34 px. Naglowek
   spisu tresci i naglowki karuzel maja wlasne rozmiary i zostaja. */
@media (min-width: 768px) {
  body.single-post #content_single h2:not(#spisTresci_header):not(.em-karta-tytul):not(.em-sekcja-naglowek):not(.em-polecane-tytul) {
    font-size: 34px !important;
    line-height: 1.2 !important;
  }
}

/* Koniec wpisu: motyw daje ocenie polowe szerokosci, przez co "Dodaj komentarz"
   stal daleko od gwiazdek. Ocena zajmuje tyle, ile potrzebuje, a podziekowanie
   dochodzi do prawej krawedzi. */
body.single-post .em-koniec .post-rating,
body.single-post .em-ocena-mala {
  flex: 0 0 auto !important;
  width: auto !important;
}

body.single-post .em-koniec-napis {
  margin-left: auto !important;
}



/* --- 19. Zwijane dzialy jako karty: telefon i proba na desktop ------------ */
/* Uwagi CEO z 4.09.2026: dzial to delikatnie cieniowany przycisk z animowana
   strzalka, rozwijanie powolne, naglowek w obu stanach w tym samym miejscu
   i rozmiarze, karta rosnie o tresc. Sekcja stoi po 5 i 18, wiec wygrywa
   pozycja; tam, gdzie sekcja 5 ma wyzsza specyficznosc, powtarzamy jej selektor. */

body.em-akordeon #content_single hr.wp-block-separator {
  display: none !important;
}

body.em-akordeon #content_single .em-dzial {
  background: #fff;
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(25, 39, 67, .04);
  margin: 0 0 10px;
  transition: box-shadow .35s ease, border-color .35s ease, background-color .35s ease;
}

body.em-akordeon #content_single .em-dzial:hover {
  box-shadow: 0 1px 3px rgba(25, 39, 67, .07);
}

/* (c) co drugi dzial odrobine ciemniejszy, zeby rzad kart mial rytm */
body.em-akordeon #content_single .em-dzial.em-dzial-parzysty {
  background: #f6f8fa;
}

/* tylko w stanie zwinietym; otwarte kolko wypelnia granat jak w kazdej karcie */
body.em-akordeon #content_single .em-dzial.em-dzial-parzysty h2.em-sekcja-naglowek[data-stan="zwiniety"] .em-dzial-przycisk::before {
  background: #fff;
}

body.em-akordeon #content_single .em-dzial.em-dzial-otwarty {
  border-color: #192743;
}

/* Naglowek: to samo wciecie, tlo i waga zwiniety i rozwiniety. Rozmiar bierze
   z sekcji 18 na desktopie (34 px) i z reguly ponizej na telefonie. */
body.em-akordeon #content_single h2.em-sekcja-naglowek,
body.em-akordeon #content_single h2.em-sekcja-naglowek.em-dzial-mocny,
body.em-akordeon #content_single h2.em-sekcja-naglowek[data-stan="otwarty"],
body.em-akordeon #content_single h2.em-sekcja-naglowek[data-stan="zwiniety"] {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px;
  color: #192743 !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  display: block;
  scroll-margin-top: 96px;
}

/* Przycisk w naglowku: caly wiersz karty, dziedziczy krój i kolor, bez wlasnego tla */
body.em-akordeon #content_single h2.em-sekcja-naglowek .em-dzial-przycisk {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 15px 64px 15px 20px;
  font: inherit;
  color: inherit;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.em-akordeon #content_single .em-dzial-znak {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #F25E2A;
  /* na wysokosci srodka pierwszego wiersza (21 px * 1.3 / 2 minus polowa kropki) */
  margin-top: 9px;
}

body.em-akordeon #content_single h2.em-sekcja-naglowek .em-dzial-przycisk:focus-visible {
  outline: 2px solid #00A4E0;
  outline-offset: 2px;
}

/* Strzalka: kolko z chevronem, obraca sie powoli; w stanie otwartym kolko
   wypelnia sie granatem. */
body.em-akordeon #content_single h2.em-sekcja-naglowek .em-dzial-przycisk::before {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #dfe4ea;
  box-shadow: 0 1px 3px rgba(25, 39, 67, .10);
  transition: background .4s ease, border-color .4s ease;
}

body.em-akordeon #content_single h2.em-sekcja-naglowek .em-dzial-przycisk::after,
body.em-akordeon #content_single h2.em-sekcja-naglowek[data-stan="otwarty"] .em-dzial-przycisk::after {
  content: "";
  position: absolute;
  right: 29px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 2px solid #192743;
  border-bottom: 2px solid #192743;
  border-color: #192743;
  transform: rotate(45deg);
  transition: transform .55s cubic-bezier(.2, .7, .2, 1), margin-top .55s cubic-bezier(.2, .7, .2, 1), border-color .4s ease;
}

body.em-akordeon #content_single h2.em-sekcja-naglowek .em-dzial-przycisk:hover::before {
  background: #f0f3f7;
}

body.em-akordeon #content_single h2.em-sekcja-naglowek[data-stan="otwarty"] .em-dzial-przycisk::before {
  background: #192743;
  border-color: #192743;
}

body.em-akordeon #content_single h2.em-sekcja-naglowek[data-stan="otwarty"] .em-dzial-przycisk::after {
  transform: rotate(-135deg);
  margin-top: -2px;
  border-color: #fff;
}

/* Tresc: wysokosc animuje skrypt przez max-height, arkusz dodaje odstepy,
   przejrzystosc i widocznosc. Sekcja 5 chowala zwinieta tresc przez display: none,
   co nie da sie animowac, wiec tu ten sam selektor przywraca block. */
body.em-akordeon #content_single .em-sekcja-tresc,
body.em-akordeon #content_single h2.em-sekcja-naglowek[data-stan="zwiniety"] + .em-sekcja-tresc {
  display: block;
  overflow: hidden;
  max-height: 0;
  padding: 0 20px !important;
  border: 0 !important;
  margin: 0 !important;
  opacity: 0;
  visibility: hidden;
  transition: max-height .55s cubic-bezier(.2, .7, .2, 1), padding .55s cubic-bezier(.2, .7, .2, 1), opacity .35s ease, visibility 0s linear .55s;
}

body.em-akordeon #content_single h2.em-sekcja-naglowek[data-stan="otwarty"] + .em-sekcja-tresc {
  display: block;
  padding: 2px 20px 22px !important;
  border: 0 !important;
  margin: 0 !important;
  opacity: 1;
  visibility: visible;
  transition: max-height .55s cubic-bezier(.2, .7, .2, 1), padding .55s cubic-bezier(.2, .7, .2, 1), opacity .45s ease .12s, visibility 0s;
}

body.em-akordeon #content_single .em-sekcja-tresc > :first-child {
  margin-top: 6px !important;
}

@media (min-width: 768px) {
  body.em-akordeon-desktop #content_single .em-sekcja-tresc p,
  body.em-akordeon-desktop #content_single .em-sekcja-tresc li,
  body.em-akordeon-desktop #content_single .em-sekcja-tresc td,
  body.em-akordeon-desktop #content_single .em-sekcja-tresc th,
  body.em-akordeon-desktop #content_single .em-sekcja-tresc figcaption {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
  /* srodtytuly w dziale pod naglowkiem karty 21 px, wiec schodza z 20 na 17 px */
  body.em-akordeon-desktop #content_single .em-sekcja-tresc h3 {
    font-size: 17px !important;
    line-height: 1.3 !important;
  }
  /* tresc zaczyna sie w linii tytulu, za punktatorem */
  body.em-akordeon-desktop #content_single .em-sekcja-tresc,
  body.em-akordeon-desktop #content_single h2.em-sekcja-naglowek[data-stan="zwiniety"] + .em-sekcja-tresc {
    padding-left: 41px !important;
    padding-right: 24px !important;
  }
  body.em-akordeon-desktop #content_single h2.em-sekcja-naglowek[data-stan="otwarty"] + .em-sekcja-tresc {
    padding: 0 24px 22px 41px !important;
  }
}

/* margines ostatniego akapitu sumowal sie z odstepem karty w pusty pas na dole */
body.em-akordeon #content_single .em-sekcja-tresc > :last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 767px) {
  body.em-akordeon #content_single .em-dzial {
    margin: 0 0 10px;
  }
  body.em-akordeon #content_single h2.em-sekcja-naglowek,
  body.em-akordeon #content_single h2.em-sekcja-naglowek.em-dzial-mocny,
  body.em-akordeon #content_single h2.em-sekcja-naglowek[data-stan="otwarty"],
  body.em-akordeon #content_single h2.em-sekcja-naglowek[data-stan="zwiniety"] {
    font-size: 16px !important;
  }
  body.em-akordeon #content_single h2.em-sekcja-naglowek .em-dzial-przycisk {
    padding: 13px 56px 13px 16px;
    gap: 10px;
  }
  body.em-akordeon #content_single .em-dzial-znak {
    width: 8px;
    height: 8px;
    margin-top: 7px;
  }
  body.em-akordeon #content_single h2.em-sekcja-naglowek .em-dzial-przycisk::before {
    right: 14px;
    width: 28px;
    height: 28px;
    margin-top: -14px;
  }
  body.em-akordeon #content_single h2.em-sekcja-naglowek .em-dzial-przycisk::after,
  body.em-akordeon #content_single h2.em-sekcja-naglowek[data-stan="otwarty"] .em-dzial-przycisk::after {
    right: 24px;
  }
  body.em-akordeon #content_single .em-sekcja-tresc,
  body.em-akordeon #content_single h2.em-sekcja-naglowek[data-stan="zwiniety"] + .em-sekcja-tresc {
    padding: 0 16px !important;
  }
  body.em-akordeon #content_single h2.em-sekcja-naglowek[data-stan="otwarty"] + .em-sekcja-tresc {
    padding: 2px 16px 18px !important;
  }
  /* na telefonie obrazy w tresci maja ujemne marginesy na pelna szerokosc ekranu;
     w karcie z ramka wychodzilyby poza nia i byly ucinane */
  body.em-akordeon #content_single .em-sekcja-tresc figure,
  body.em-akordeon #content_single .em-sekcja-tresc .wp-block-image,
  body.em-akordeon #content_single .em-sekcja-tresc img,
  body.em-akordeon #content_single .em-sekcja-tresc .em-skrot,
  body.em-akordeon #content_single .em-sekcja-tresc .wp-block-group.has-background,
  body.em-akordeon #content_single .em-sekcja-tresc .emedia-author-comment,
  body.em-akordeon #content_single .em-sekcja-tresc .em-karuzela {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: auto;
  }
  body.em-akordeon #content_single .em-sekcja-tresc img {
    width: 100%;
    height: auto;
    border-radius: 6px;
  }
  /* diagram zostaje szeroki i przewijany w bok (tak jest czytelny), ale siega
     do krawedzi karty, nie konczy sie 16 px przed nia */
  body.em-akordeon #content_single .em-sekcja-tresc figure.em-diagram-img {
    margin-left: -16px !important;
    margin-right: -16px !important;
    max-width: none !important;
    width: auto !important;
    overflow-x: auto;
  }
  body.em-akordeon #content_single .em-sekcja-tresc figure.em-diagram-img img {
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.em-akordeon #content_single .em-dzial,
  body.em-akordeon #content_single .em-sekcja-tresc,
  body.em-akordeon #content_single h2.em-sekcja-naglowek .em-dzial-przycisk::before,
  body.em-akordeon #content_single h2.em-sekcja-naglowek .em-dzial-przycisk::after {
    transition: none !important;
  }
}


/* --- 20. "Zobacz rowniez": karty z listy bazy wiedzy ---------------------- */
/* Karta a.wpis ma style w arkuszu motywu (biel, ramka, obraz 400/210,
   kategorie, tytul, data, "Zobacz") i tak wyglada na liscie wpisow. Tu tylko
   uklad pasa i to, co kontekst wpisu psuje: kolor odnosnika i zbyt jasne
   szarosci motywu (#BFBFBF daje 1,84:1). */
body.single-post .em-polecane,
body.single-post #content_single .em-polecane {
  background: none !important;
  border: 0 !important;
  border-top: 1px solid #e3e7ec !important;
  border-radius: 0 !important;
  padding: 26px 0 0 !important;
  margin: 36px 0 26px !important;
}

body.single-post .em-polecane-tytul,
body.single-post #content_single h2.em-polecane-tytul {
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #192743 !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  text-align: left !important;
  background: none !important;
  border: 0 !important;
}

body.single-post .em-polecane-pas,
body.single-post #content_single .em-polecane-pas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 0;
  margin: 0;
}

body.single-post a.wpis.em-polecana,
body.single-post #content_single a.wpis.em-polecana {
  text-decoration: none !important;
  color: #22334D !important;
  padding: 16px !important;
  min-width: 0;
  margin: 0 !important;
}

body.single-post #content_single a.wpis .img,
body.single-post a.wpis.em-polecana .img {
  margin: 0 !important;
  aspect-ratio: 16 / 9 !important;
}

body.single-post #content_single a.wpis .img img,
body.single-post a.wpis.em-polecana .img img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Grafika kwadratowa w ramce 16/9 traci gore i dol, a tam zwykle stoi napis.
   Takiej nie przycinamy: pokazujemy cala na jasnym tle. Klase nadaje skrypt
   po zaladowaniu obrazka, bo dopiero wtedy znamy proporcje pliku. */
body.single-post a.wpis.em-polecana .img.em-kwadrat {
  background: #f4f6f9 !important;
}

body.single-post a.wpis.em-polecana .img.em-kwadrat img {
  object-fit: contain !important;
}

body.single-post #content_single a.wpis .title,
body.single-post a.wpis.em-polecana .title {
  font-size: 17px !important;
  line-height: 1.3 !important;
  padding: 8px 0 12px !important;
  color: #192743 !important;
}

body.single-post #content_single a.wpis .cats,
body.single-post #content_single a.wpis .cats span,
body.single-post #content_single a.wpis .bottom,
body.single-post #content_single a.wpis .bottom span,
body.single-post a.wpis.em-polecana .cats,
body.single-post a.wpis.em-polecana .cats span,
body.single-post a.wpis.em-polecana .bottom,
body.single-post a.wpis.em-polecana .bottom span {
  color: #586477 !important;
  font-size: 13px !important;
}

body.single-post a.wpis.em-polecana .cats {
  padding-top: 14px !important;
  min-height: 16px;
}

body.single-post a.wpis.em-polecana .cats:empty {
  display: none;
}

body.single-post a.wpis.em-polecana .cats .separator {
  margin: 0 6px;
}

body.single-post a.wpis.em-polecana:hover .bottom span,
body.single-post a.wpis.em-polecana:hover .cats span {
  color: #192743 !important;
}

/* wiecej niz trzy pozycje: na szerokim ekranie pierwsze trzy, na telefonie wszystkie */
@media (min-width: 768px) {
  body.single-post .em-polecane-pas > a.wpis:nth-child(n+4) {
    display: none;
  }
}

@media (max-width: 767px) {
  body.single-post .em-polecane,
  body.single-post #content_single .em-polecane {
    margin: 30px 0 22px !important;
    padding-top: 22px !important;
  }
  body.single-post .em-polecane-tytul,
  body.single-post #content_single h2.em-polecane-tytul {
    font-size: 19px !important;
    margin-bottom: 14px !important;
  }
  body.single-post .em-polecane-pas,
  body.single-post #content_single .em-polecane-pas {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px 6px;
  }
  body.single-post .em-polecane-pas::-webkit-scrollbar {
    display: none;
  }
  body.single-post a.wpis.em-polecana,
  body.single-post #content_single a.wpis.em-polecana {
    flex: 0 0 78%;
    scroll-snap-align: start;
    padding: 12px !important;
  }
  body.single-post #content_single a.wpis .title,
  body.single-post a.wpis.em-polecana .title {
    font-size: 15.5px !important;
  }
}


/* --- 21. Komentarz eksperta miedzy kartami i koniec wpisu ------------------ */
/* Uwagi CEO z 5.09.2026. Komentarz autora wyprowadzony z dzialu (skrypt, czesc 4)
   stoi na stale pod druga albo trzecia karta, w delikatnej ramce jak karty,
   z odstepem gora i dol. Poza akordeonem komentarz zostaje w tresci z granatowa
   ramka z sekcji 18. */
body.em-akordeon #content_single .emedia-author-comment.em-komentarz-wyprowadzony {
  margin: 22px 0 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(25, 39, 67, .04);
  padding: 18px 22px !important;
}

@media (max-width: 767px) {
  body.em-akordeon #content_single .emedia-author-comment.em-komentarz-wyprowadzony {
    margin: 18px 0 !important;
    border: 1px solid #dfe4ea !important;
    border-radius: 8px;
    padding: 16px !important;
  }
}

/* zdjecie autora w komentarzu jest kolem na kazdym ekranie */
body.single-post #content_single .emedia-author-comment img {
  border-radius: 50% !important;
}

/* Blok "Opublikowano, zrodla, jak to powstaje" konczyl kontener tresci, a kontener
   autora zaczynal sie tuz pod nim, bez odstepu. Teraz nad blokiem kreska jak nad
   pasem "Zobacz rowniez" (1 px #e3e7ec, 36 px nad, 22 px pod) i odstep pod nim,
   zeby odsunac autora. */
body.single-post details.em-metryka,
body.single-post #content_single details.em-metryka {
  margin: 36px 0 0 !important;
  padding: 22px 0 24px !important;
  border-top: 1px solid #e3e7ec !important;
}

/* metryka wyprowadzona z dzialu dostawala osobna kreske; teraz ma wlasna */
body.single-post #content_single hr.em-metryka-kreska {
  display: none !important;
}

/* --- 22. Stabilnosc ukladu przy ladowaniu (CLS) --------------------------- */
/* Miniatury w liscie "Przeczytaj takze" (zrodlo pasa) maja stale pole, zanim
   obraz dojdzie; skrypt i tak zamienia liste na pas. */
body.single-post #content_single img.em-mini {
  width: 56px;
  height: 56px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Klasa em-akordeon-start na <html> stawia ja inline skrypt w naglowku strony
   (inc/functions-settings.php), zanim cokolwiek sie namaluje. Do czasu przebudowy
   przez skrypt wszystko po pierwszym H2 jest schowane, wiec przebudowa na karty
   nie przesuwa juz tresci widocznej na ekranie. Skrypt zdejmuje klase na koncu. */
html.em-akordeon-start body.single-post #content_single > h2 ~ :not(h2) {
  display: none;
}

/* Okladka wpisu (obraz 16:9 wstawiony w tresc bez width/height) ma zarezerwowane
   pole, zanim obraz dojdzie. */
body.single-post #content_single img[src*="wp-featured-16x9"],
body.single-post #content_single img[src*="-16x9-"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Okruszki na wpisie: motyw daje #9499a1 na #f7f7f7 (2,6:1); drobny druk ma #586477. */
body.single-post .em-okruszki,
body.single-post .em-okruszki a,
body.single-post .em-okruszki span,
body.single-post .breadcrumb_last {
  color: #586477 !important;
}

/* motyw daje pojemnikowi okruszkow opacity .78, przez co #586477 wychodzi jako
   #7b8493 (3,5:1); pelne krycie daje 5,3:1 */
body.single-post #breadcrumbs {
  opacity: 1 !important;
}

/* Akapity we wpisie nie wjezdzaja z przezroczystosci: animacja em-wejscie z bloku
   feature-columns (sterowana przewijaniem) zostawiala akapity poza ekranem
   z opacity ok. 0,17, co Lighthouse liczyl jako tekst bez kontrastu. */
body.single-post #content_single p.wp-block-paragraph,
body.single-post #content_single .wp-block-paragraph {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Naglowek wpisu przed skryptem ma juz ksztalt, ktory skrypt mu nada: okruszki
   w jednej przewijanej linii, blok autora o wysokosci przyszlych parametrow
   (41 px), etykieta kategorii schowana. Bez tego skrypt z stopki skracal
   naglowek o 59 px na telefonie i 106 px na desktopie po pierwszym malowaniu. */
body.single-post span:has(> .breadcrumb_last),
body.single-post span:has(> span > .breadcrumb_last) {
  display: block;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  font-size: 11.5px !important;
}

body.single-post div.autor:not(.em-parametry) {
  height: 41px;
  overflow: hidden;
  visibility: hidden;
  margin: 0 0 6px !important;
  padding: 0 !important;
}

/* etykieta kategorii stoi obok bloku autora (kategoria jest juz w parametrach) */
body.single-post .fit-1200 > span.cat,
body.single-post .fit-1200 .details > span.cat,
body.single-post .fit-1200 .details:has(> span.cat:only-child),
body.single-post .fit-1200 .details:not(:has(> :not(span.cat))) {
  display: none !important;
}

/* --- 23. Po ocenach agentow (noc 5/6.09) ---------------------------------- */
/* Sekcje z generatora wpisow (.em-sec.em-reveal) odslaniaja sie dopiero przy
   przewijaniu; bez przewiniecia strona miala tysiace pikseli bieli. We wpisach
   tresc jest widoczna od razu. */
body.single-post #content_single .em-reveal,
body.single-post #content_single .em-sec,
body.single-post #content_single [class*="reveal"] {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  visibility: visible !important;
}

/* Komentarz eksperta bez zdjecia dostaje wizytowke autora: zdjecie i imie po lewej,
   tekst obok, jak w komentarzach z kolumnami. */
body.em-akordeon #content_single .emedia-author-comment.em-komentarz-z-wizytowka {
  display: flex !important;
  gap: 18px;
  align-items: flex-start;
}

body.em-akordeon #content_single .em-komentarz-wizytowka {
  flex: 0 0 auto;
  max-width: 150px;
}

body.em-akordeon #content_single .em-komentarz-wizytowka img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
  margin: 0 0 6px !important;
}

body.em-akordeon #content_single .em-komentarz-wizytowka p {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body.em-akordeon #content_single .em-komentarz-tresc {
  flex: 1 1 auto;
  min-width: 0;
}

body.em-akordeon #content_single .em-komentarz-tresc > :last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 767px) {
  body.em-akordeon #content_single .emedia-author-comment.em-komentarz-z-wizytowka {
    flex-direction: column;
    gap: 10px;
  }
  body.em-akordeon #content_single .em-komentarz-wizytowka {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: none;
  }
  body.em-akordeon #content_single .em-komentarz-wizytowka img {
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
  }

  /* Telefon: jeden rozmiar tresci w karcie (15 px), srodtytul 16 px, naglowek karty
     17 px. Wczesniej akapity mialy 13, 14 i 15,5 px w jednej karcie, a H3 tyle samo,
     co naglowek karty. */
  body.em-akordeon #content_single .em-sekcja-tresc p,
  body.em-akordeon #content_single .em-sekcja-tresc li,
  body.em-akordeon #content_single .em-sekcja-tresc p.em-otwarcie,
  body.em-akordeon #content_single .em-sekcja-tresc p.em-zapowiedz,
  body.em-akordeon #content_single .em-sekcja-tresc p.wp-block-paragraph {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
  body.em-akordeon #content_single .em-sekcja-tresc h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }
  body.em-akordeon #content_single h2.em-sekcja-naglowek,
  body.em-akordeon #content_single h2.em-sekcja-naglowek.em-dzial-mocny,
  body.em-akordeon #content_single h2.em-sekcja-naglowek[data-stan="otwarty"],
  body.em-akordeon #content_single h2.em-sekcja-naglowek[data-stan="zwiniety"] {
    font-size: 17px !important;
  }

  /* moduly (karuzele, kolorowe pola) w karcie trzymaja odstep od obu ramek */
  body.em-akordeon #content_single .em-sekcja-tresc .em-modul,
  body.em-akordeon #content_single .em-sekcja-tresc .em-karuzela,
  body.em-akordeon #content_single .em-sekcja-tresc .wp-block-group.has-background {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* obraz (nie diagram) w karcie na cala szerokosc karty */
  body.em-akordeon #content_single .em-sekcja-tresc figure.wp-block-image:not(.em-diagram-img) {
    margin-left: -16px !important;
    margin-right: -16px !important;
    max-width: none !important;
    width: auto !important;
  }
  body.em-akordeon #content_single .em-sekcja-tresc figure.wp-block-image:not(.em-diagram-img) img {
    width: 100% !important;
    border-radius: 0 !important;
  }
}

/* Bloki we wpisie nie wjezdzaja z przezroczystosci: skrypt motywu animuje wejscie
   kolumn, grup i cytatow przy przewijaniu, przez co komentarz eksperta i seria byly
   niewidoczne do czasu przewiniecia (na zrzutach pusty pas 185 px). */
body.single-post #content_single .wp-block-columns,
body.single-post #content_single .wp-block-group,
body.single-post #content_single .wp-block-quote,
body.single-post #content_single .emedia-author-comment,
body.single-post #content_single figure,
body.single-post .em-seria,
body.single-post .em-polecane,
body.single-post .em-koniec {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Ocena stoi teraz po pasie polecanych, ktory ma wlasna kreske; druga kreska
   nad wierszem oceny dawala trzy linie na stu pikselach. */
body.single-post .em-polecane + .em-koniec .em-koniec-kreska {
  display: none;
}

/* Akapit otwierajacy (lead) miedzy pigulka a spisem: 16 px, nie 18 (wielkosc
   srodtytulu). */
body.single-post #content_single p.em-otwarcie {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

@media (max-width: 767px) {
  /* odstep miedzy akapitami w karcie: jedna interlinia, nie dwie */
  body.em-akordeon #content_single .em-sekcja-tresc p,
  body.em-akordeon #content_single .em-sekcja-tresc p.wp-block-paragraph {
    margin: 0 0 12px !important;
  }
  /* przycisk powrotu na gore po lewej, zeby nie zaslanial kolek strzalek kart */
  body.single-post .em-do-gory {
    right: auto !important;
    left: 12px !important;
    bottom: 14px !important;
  }
}

/* W komentarzu eksperta kursywa jest kursywa, nie wyroznieniem w kolorze odnosnika:
   caly komentarz w ceglastym wygladal jak link. */
body.single-post #content_single .emedia-author-comment em,
body.single-post #content_single .emedia-author-comment i {
  color: inherit !important;
}