/* ============================================================
   WPIS NA BLOGU I POJEDYNCZA AKTUALNOSC
   Ladowane na is_singular('post') i is_singular('aktualnosci').
   OBA widoki renderuje ten sam szablon Oxygena "Blog Post" (11) -
   aktualnosc ma 49 elementow z szablonu 11, dokladnie jak wpis, te sama
   klase tresci i te sama liste powiazanych. Dlatego jeden arkusz.

   Selektory uzywaja ':is(.single-post, .single-aktualnosci)' - specyficznosc
   jest taka sama jak przy pojedynczej klasie, wiec nic sie nie przesunelo
   w kaskadzie.

   Sprawdzone przed startem: 11.css NIE zawiera zadnych czarnych tel
   (w odroznieniu od szablonu archiwum, gdzie byly trzy - w tym jedno
   ukryte w 'linear-gradient(#000,#000)').

   Struktura:
     h1#headline-4-47 / #headline-6-50   <- tytul w banerze (PL / EN)
     .oxy-stock-content-styles           <- tresc wpisu (zwykly WP content)
     .oxy-dynamic-list                   <- powiazane wpisy (3 szt.),
                                            uklad taki sam jak na archiwum
   Autor: claude, 2026-08-20.
   ============================================================ */

body:is(.single-post, .single-aktualnosci) {
    --navy:       #0B2240;
    --navy-2:     #12325C;
    --red:        #DB0632;
    --ink:        #171A1E;
    --muted:      #3F4750;
    --paper:      #FCFAF6;
    --cream:      #F5F1E9;
    --line:       rgba(11, 34, 64, .13);
    --line-soft:  rgba(11, 34, 64, .07);
    /* cienie: tokeny '--shadow-*' sa na ':root' w 'bm-newhome.css' */
    --ease:       cubic-bezier(.22, 1, .36, 1);
    --serif:      "Playfair Display", Georgia, "Times New Roman", serif;
    --sans:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- 1. Tytul w banerze ----------------------------- */
body:is(.single-post, .single-aktualnosci) h1 {
    font-family: var(--serif);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -.012em;
    text-wrap: balance;
}

/* ---------- 2. Tresc wpisu ---------------------------------
   To zwykly content WordPressa. Nadajemy mu szerokosc czytania
   i rytm typograficzny z makiety. */
body:is(.single-post, .single-aktualnosci) .oxy-stock-content-styles {
    font-family: var(--sans);
    font-size: 1.01rem;
    font-weight: 300;
    line-height: 1.78;
    color: var(--ink);
    max-width: 68ch;
}

body:is(.single-post, .single-aktualnosci) .oxy-stock-content-styles p {
    margin: 0 0 1.35em;
}

body:is(.single-post, .single-aktualnosci) .oxy-stock-content-styles strong,
body:is(.single-post, .single-aktualnosci) .oxy-stock-content-styles b {
    font-weight: 600;
    color: var(--navy);
}

body:is(.single-post, .single-aktualnosci) .oxy-stock-content-styles h2,
body:is(.single-post, .single-aktualnosci) .oxy-stock-content-styles h3,
body:is(.single-post, .single-aktualnosci) .oxy-stock-content-styles h4 {
    font-family: var(--serif);
    font-weight: 500;
    color: var(--navy);
    line-height: 1.22;
    letter-spacing: -.008em;
    margin: 2em 0 .6em;
}

body:is(.single-post, .single-aktualnosci) .oxy-stock-content-styles h2 { font-size: 1.62rem; }
body:is(.single-post, .single-aktualnosci) .oxy-stock-content-styles h3 { font-size: 1.3rem; }
body:is(.single-post, .single-aktualnosci) .oxy-stock-content-styles h4 { font-size: 1.1rem; }

body:is(.single-post, .single-aktualnosci) .oxy-stock-content-styles a {
    color: var(--red);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

body:is(.single-post, .single-aktualnosci) .oxy-stock-content-styles a:hover {
    color: var(--navy);
}

body:is(.single-post, .single-aktualnosci) .oxy-stock-content-styles ul,
body:is(.single-post, .single-aktualnosci) .oxy-stock-content-styles ol {
    margin: 0 0 1.35em;
    padding-left: 1.3em;
}

body:is(.single-post, .single-aktualnosci) .oxy-stock-content-styles li {
    margin-bottom: .5em;
}

body:is(.single-post, .single-aktualnosci) .oxy-stock-content-styles blockquote {
    margin: 1.8em 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--red);
    font-family: var(--serif);
    font-size: 1.15rem;
    font-style: italic;
    color: var(--navy);
}

/* Zdjecia w tresci - zaokraglone, nigdy szersze niz kolumna.
   UWAGA: nie narzucamy tu ukladu (oplywania, kolumn). Przy karcie produktu
   probowalismy i zostalo cofniete - tresc jest wpisywana recznie i rozni sie
   miedzy wpisami, wiec kazdy uklad wypada inaczej. */
body:is(.single-post, .single-aktualnosci) .oxy-stock-content-styles img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r);
    margin: .6em 0 1.4em;
}

/* ---------- 3. Powiazane wpisy -----------------------------
   Ta sama struktura co repeater na archiwum bloga, ale tutaj sa tylko
   trzy pozycje, wiec siatka kart sprawdza sie lepiej niz lista.
   ':has(h3)' - tak jak na archiwum, odsiewa ewentualne inne dzieci. */
body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 1.8vw, 26px);
    align-items: stretch;
}

@media (max-width: 900px) {
    body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list { grid-template-columns: 1fr; }
}

body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list > div:has(h3) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}

body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list > div:has(h3):hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-mh);
    border-color: transparent;
}

/* Zdjecie jest tlem pustego <a>, nie znacznikiem <img>. */
body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list > div:has(h3) > div:first-child {
    overflow: hidden;
}

body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list > div:has(h3) > div:first-child > a {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    background-color: var(--cream);
    background-position: center !important;
    background-size: cover !important;
    transition: transform .7s var(--ease);
}

body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list > div:has(h3):hover > div:first-child > a {
    transform: scale(1.05);
}

body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list > div:has(h3) > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    padding: 18px 18px 22px;
}

/* Data - nadtytul. */
body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list > div:has(h3) > div:last-child > div:first-child {
    font-family: var(--sans);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--red);
}

body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list h3 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.08rem;
    line-height: 1.26;
    color: var(--navy);
    transition: color .35s var(--ease);
}

body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list > div:has(h3):hover h3 {
    color: var(--red);
}

body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list a {
    text-decoration: none;
}

/* ---------- 4. Naglowek sekcji powiazanych -----------------
   Celujemy w konkretny element szablonu zamiast ':not(.oxy-dynamic-list h3)' -
   zlozony selektor w :not() dziala dopiero w nowszych przegladarkach. */
body:is(.single-post, .single-aktualnosci) #headline-92-11 {
    font-family: var(--serif);
    font-weight: 500;
    color: var(--navy);
}


/* ============================================================
   2026-08-20 - POGLEBIONA PRZEBUDOWA WPISU
   ============================================================
   WAZNE: repeater powiazanych wpisow w szablonie 11 uzywa tego samego
   chwytu co archiwum:
       .oxy-dynamic-list :is([data-id="div_block-45-11"], #incspec)
   '#incspec' nie istnieje w dokumencie - siedzi w ':is()' tylko po to,
   by podbic wage do poziomu IDENTYFIKATORA (1,1,0). Reguly oparte na
   klasach przegrywaja z tym cicho. Dlatego ponizej stosujemy ten sam
   chwyt: ':is([data-id="..."], #b)'.

   Reszta strony (naglowek, metryczka, tresc) ma zwykle selektory ID,
   wiec tam wystarcza 'body:is(.single-post, .single-aktualnosci)'.
   ============================================================ */

/* ---------- Metryczka: data + kategorie -------------------- */
/* Data i kategorie stoja obok siebie. 'align-items: center' wyrownywalo
   PUDELKA, a nie tekst - a te maja rozny stopien pisma, wiec litery
   siadaly na roznych wysokosciach. Wyrownujemy po LINII PISMA
   i wymuszamy wspolna interlinie, zeby obie kolumny mialy te sama
   wysokosc wiersza. */
body:is(.single-post, .single-aktualnosci) #div_block-208-11 {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;   /* oba bloki dostaja te sama wysokosc */
    gap: 10px;
    margin-bottom: 22px;
}

/* Data i kategorie maja rozny stopien pisma, wiec ani 'center' (rownal
   pudelka), ani 'baseline' (rownal linie pisma, ale przy roznych
   interliniach nadal siadalo krzywo) nie dawaly efektu.
   Rozwiazanie pewne: rodzic rozciaga oba bloki do rownej wysokosci,
   a KAZDY Z NICH centruje swoj tekst w pionie u siebie. Wtedy nie ma
   znaczenia, jak bardzo roznia sie krojem. */
body:is(.single-post, .single-aktualnosci) #text_block-201-11,
body:is(.single-post, .single-aktualnosci) #text_block-205-11 {
    display: flex;
    align-items: center;
    line-height: 1.4;
}

body:is(.single-post, .single-aktualnosci) #text_block-201-11 {
    padding: 0;
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--red);
}

/* Czarna kreska oddzielajaca kategorie zamieniona na wloskowata. */
body:is(.single-post, .single-aktualnosci) #text_block-205-11 {
    padding-left: 12px;
    border-left-width: 1px;
    border-left-color: var(--line);
    font-family: var(--sans);
    font-size: .8rem;
    font-weight: 300;
}

body:is(.single-post, .single-aktualnosci) #text_block-205-11 a {
    color: var(--muted);
    text-decoration: none;
    transition: color .3s var(--ease);
}

body:is(.single-post, .single-aktualnosci) #text_block-205-11 a:hover {
    color: var(--red);
}

/* ---------- Zdjecie wiodace -------------------------------- */
body:is(.single-post, .single-aktualnosci) #image-198-11 {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 30px;
    border-radius: var(--r);
}

/* ---------- Naglowek sekcji powiazanych -------------------- */
body:is(.single-post, .single-aktualnosci) #headline-92-11 {
    margin-top: 46px;
    padding: 0 0 16px;
    border-top-width: 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: clamp(1.15rem, 1.9vw, 1.5rem);
}

/* ---------- Powiazane wpisy: wiersze jak w archiwum --------
   Ten sam wyglad co lista na /blog/ - dzieki temu obie listy w serwisie
   czytaja sie jednakowo. Kadr 200 px, czyli ponizej rozdzielczosci
   miniatur (300 px), wiec bez pikselozy. */
body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 22px;
}

body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list :is([data-id="div_block-39-11"], #b) {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}

body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list :is([data-id="div_block-39-11"], #b):hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-mh);
    border-color: transparent;
}

@media (max-width: 700px) {
    body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list :is([data-id="div_block-39-11"], #b) {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list :is([data-id="div_block-45-11"], #b) {
    width: 100%;
    padding: 0;
    overflow: hidden;
    border-radius: var(--r-s);
}

/* Zdjecie jest tlem tego bloku - nadajemy mu proporcje zamiast 185 px. */
body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list :is([data-id="div_block-55-11"], #b) {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    transition: transform .6s var(--ease);
}

body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list :is([data-id="div_block-39-11"], #b):hover :is([data-id="div_block-55-11"], #b) {
    transform: scale(1.05);
}

body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list :is([data-id="div_block-50-11"], #b) {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
    padding: 0 6px 0 0;
}

body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list :is([data-id="text_block-61-11"], #b) {
    font-family: var(--sans);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--red);
}

body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list :is([data-id="headline-70-11"], #b) {
    margin: 0;
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.02rem, 1.5vw, 1.22rem);
    line-height: 1.26;
    color: var(--navy);
    transition: color .35s var(--ease);
}

body:is(.single-post, .single-aktualnosci) .oxy-dynamic-list :is([data-id="div_block-39-11"], #b):hover :is([data-id="headline-70-11"], #b) {
    color: var(--red);
}

/* ---------- Tresc: wiekszy stopien i oddech ---------------- */
body:is(.single-post, .single-aktualnosci) .oxy-stock-content-styles {
    font-size: 1.06rem;
    line-height: 1.8;
    max-width: 70ch;
}

body:is(.single-post, .single-aktualnosci) .oxy-stock-content-styles img {
    border-radius: var(--r-s);
}

@media (prefers-reduced-motion: reduce) {
    body:is(.single-post, .single-aktualnosci) * { transition: none !important; }
}


/* Odstep nad kolumna boczna wpisu - na zyczenie klienta 2026-08-20. */
body:is(.single-post, .single-aktualnosci) #div_block-171-11 {
    padding-top: 20px !important;
}


/* ============================================================
   2026-09-25 - POPRAWKI KLIENTA (PDF)
   ============================================================ */

/* ---------- Tresc na cala szerokosc kolumny ----------------
   Zgloszenie: "Trzeba rozszerzyc pola tekstowe. Gorne zdjecie to obrazek
   wyrozniajacy. Tresc pod spodem wraz z grafikami z tekstu jest zwezona."

   Zmierzone przy 1440 px (przed zmiana proporcji kolumn nizej): obrazek
   wyrozniajacy (#image-198-11) mial 864 px, a tresc tylko okolo 600 px.
   Waskie byly az TRZY rzeczy naraz:
     1. rodzic tresci '#div_block-170-11' to flex z 'align-items:flex-start',
        wiec blok tresci nie rozciagal sie na szerokosc kolumny;
     2. 'czytelnosc.js' doklada blokowi klase '.bmx-waski' (max-width 62ch,
        layout.css) - ograniczenie wiersza dla stron tresciowych;
     3. sama tresc miala tutaj 'max-width: 70ch' (sekcje 2 i "Tresc:
        wiekszy stopien" wyzej).
   We wpisach znosimy wszystkie trzy: tekst i grafiki z tresci koncza sie
   na tej samej krawedzi co obrazek wyrozniajacy. Pozostale strony
   tresciowe zachowuja ograniczenie wiersza z 'czytelnosc.js'.
   Waga (1,1,1) przebija '.bmx-waski' (0,1,0). */
body:is(.single-post, .single-aktualnosci) #text_block-33-11 {
    align-self: stretch;
    width: 100%;
    max-width: none;
}

body:is(.single-post, .single-aktualnosci) .oxy-stock-content-styles {
    max-width: none;
}

/* ---------- Kategorie w kolumnie bocznej - jak na /blog/ -----
   Zgloszenie: "roznica w wygladzie kategorii pomiedzy strona glowna
   bloga a pojedynczymi wpisami".
   Na /blog/ kategorie to biala karta z malym naglowkiem wersalikami
   i pigulkami (blog.css: "1b. Kolumna kategorii" i "Kategorie w kolumnie
   bocznej"). We wpisie zostal goly widget: duzy szeryfowy naglowek,
   podkreslone odnosniki i czarne linie miedzy nimi.
   Przenosimy tu TE SAME wartosci (zmierzone na obu ekranach). Karta
   siedzi na samym widgecie '#widget-239-11', bo kolumna boczna
   '#div_block-171-11' ciagnie sie przez cala wysokosc wpisu.

   Same style nie wystarczyly: kolumna boczna wpisu miala 20% (karta
   186 px przy 1440), a na /blog/ 25% (karta 283 px). W waskiej karcie
   pigulki stawaly po jednej w wierszu, a "Na Ty z Betty Moore" lamalo
   sie w srodku pigulki. Dlatego na desktopie wpis dostaje proporcje
   archiwum: 75% / 25%, a kolumna boczna traci poziomy margines, zeby
   karta miala dokladnie te szerokosc co na /blog/ (odstep od tresci
   daje prawy margines kolumny tresci - jak na /blog/).
   Tylko wpis: aktualnosc ma kolumne boczna ukryta i tresc na srodku.
   Ponizej 992 px kolumny i tak ustawiaja sie jedna pod druga
   (11.css: 'width: 100% !important'), wiec tam nic nie ruszamy. */
@media (min-width: 992px) {
    body.single-post #div_block-170-11 {
        width: 75%;
    }

    body.single-post #div_block-171-11 {
        width: 25%;
        padding-left: 0;
        padding-right: 0;
    }
}

body:is(.single-post, .single-aktualnosci) #widget-239-11 {
    box-sizing: border-box;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-s);
    color: var(--ink);
}

body:is(.single-post, .single-aktualnosci) #widget-239-11 .widgettitle {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    font-family: var(--sans);
    font-size: .66rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink);
}

body:is(.single-post, .single-aktualnosci) #widget-239-11 ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}

body:is(.single-post, .single-aktualnosci) #widget-239-11 .cat-item {
    margin: 0;
    padding: 0;
    border: 0;
}

body:is(.single-post, .single-aktualnosci) #widget-239-11 .cat-item a {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    font-family: var(--sans);
    font-size: .76rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--navy);
    text-decoration: none;
    transition: background .3s var(--ease), color .3s var(--ease),
                border-color .3s var(--ease), transform .3s var(--ease);
}

body:is(.single-post, .single-aktualnosci) #widget-239-11 .cat-item a:hover {
    transform: translateY(-2px);
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}