/* ============================================================
   BLOG - ARCHIWUM WPISOW (uklad LISTY)
   Ladowane na is_home() i archiwach wpisow (patrz bm-newlayout.php).

   HISTORIA TEGO PLIKU - nie powtarzac bledow:
   Pierwsza wersja robila z wpisow siatke kafelkow. Odrzucone przez klienta:
   tresc jest pozioma, wiec w waskich kafelkach robila sie nieczytelna.
   Wracamy do listy - jeden wpis = jeden wiersz, zdjecie z lewej, tresc z prawej.

   DRUGI BLAD: regula '.oxy-dynamic-list > div' obejmowala TEZ stronicowanie,
   bo paginacja jest RENDEROWANA WEWNATRZ repeatera (lista ma 21 bezposrednich
   dzieci przy 10 wpisach). Dlatego elementy listy wybieramy przez ':has(h3)' -
   tylko wpisy maja naglowek, paginacja nie.

   Uklad kafelka w szablonie Oxygena "Archive" (10):
     .oxy-dynamic-list
       > div                      <- wpis
           > div:first-child > a  <- zdjecie (jako background-image, nie <img>)
           > div:last-child       <- data, tytul, zajawka
   Autor: claude, 2026-08-20.
   ============================================================ */

body.blog,
body.archive {
    --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);
    --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. Czarny pasek z szablonu Oxygena --------------
   '#section-3-300 { background-color:#000000; color:#ffffff }' pochodzi
   z 10.css i jest starsze niz nasze prace. Selektor ma ID (waga 1,0,0),
   wiec dokladamy 'body' -> (1,1,1). */
body.blog #section-3-300,
body.archive #section-3-300 {
    background-color: var(--paper);
    color: var(--ink);
}

body.blog #section-3-300 *,
body.archive #section-3-300 * {
    color: inherit;
}

/* ---------- 1b. Kolumna kategorii --------------------------
   '#div_block-50-10 { width:25%; background-color:#000000; background:black }'
   z 10.css - czarny panel z lista kategorii. Nadpisujemy OBIE deklaracje
   (skrot 'background' i 'background-color'), bo w regule zrodlowej wystepuja
   obie. Selektor ma ID (1,0,0), wiec dokladamy 'body' -> (1,1,1). */
body.blog #div_block-50-10,
body.archive #div_block-50-10 {
    background: #fff;
    background-color: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-s);
    padding: 20px 22px;
    color: var(--ink);
}

body.blog #div_block-50-10 *,
body.archive #div_block-50-10 * {
    color: inherit;
}

body.blog #div_block-50-10 a,
body.archive #div_block-50-10 a {
    color: var(--navy);
    text-decoration: none;
}

body.blog #div_block-50-10 a:hover,
body.archive #div_block-50-10 a:hover {
    color: var(--red);
}

/* ---------- 1c. Widget kategorii ---------------------------
   UWAGA - inna sztuczka niz wyzej. Oxygen NIE ustawia tu czarnego
   'background-color' (ten jest bialy), tylko maluje czern GRADIENTEM:
     #widget-114-10 { background-image: linear-gradient(#000000,#000000);
                      background-color: #ffffff }
   Dlatego skan po 'background-color:#000' tego nie wykrywal.
   Gasimy sam obraz tla. */
body.blog #widget-114-10,
body.archive #widget-114-10 {
    background-image: none;
    background-color: #fff;
    color: var(--ink);
}

body.blog #widget-114-10 *,
body.archive #widget-114-10 * {
    color: inherit;
}

body.blog #widget-114-10 a,
body.archive #widget-114-10 a {
    color: var(--navy);
    text-decoration: none;
}

body.blog #widget-114-10 a:hover,
body.archive #widget-114-10 a:hover {
    color: var(--red);
}

/* ---------- 2. Lista wpisow -------------------------------- */
body.blog .oxy-dynamic-list,
body.archive .oxy-dynamic-list {
    display: block;
}

/* Wpis = wiersz. ':has(h3)' celowo - odsiewa stronicowanie,
   ktore siedzi w tym samym kontenerze. */
body.blog .oxy-dynamic-list > div:has(h3),
body.archive .oxy-dynamic-list > div:has(h3) {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 32px);
    align-items: start;
    padding: clamp(20px, 2.4vw, 30px) 0;
    border-bottom: 1px solid var(--line-soft);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    transition: none;
}

@media (max-width: 720px) {
    body.blog .oxy-dynamic-list > div:has(h3),
    body.archive .oxy-dynamic-list > div:has(h3) {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* ---------- 3. Zdjecie -------------------------------------
   To tlo pustego <a>, nie znacznik <img> - proporcje nadajemy linkowi. */
body.blog .oxy-dynamic-list > div:has(h3) > div:first-child,
body.archive .oxy-dynamic-list > div:has(h3) > div:first-child {
    overflow: hidden;
    border-radius: var(--r-s);
}

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

body.blog .oxy-dynamic-list > div:has(h3):hover > div:first-child > a,
body.archive .oxy-dynamic-list > div:has(h3):hover > div:first-child > a {
    transform: scale(1.04);
}

/* ---------- 4. Tresc wiersza ------------------------------- */
body.blog .oxy-dynamic-list > div:has(h3) > div:last-child,
body.archive .oxy-dynamic-list > div:has(h3) > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
}

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

body.blog .oxy-dynamic-list h3,
body.archive .oxy-dynamic-list h3 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.15rem, 1.7vw, 1.42rem);
    line-height: 1.24;
    color: var(--navy);
    letter-spacing: -.005em;
    transition: color .35s var(--ease);
}

body.blog .oxy-dynamic-list > div:has(h3):hover h3,
body.archive .oxy-dynamic-list > div:has(h3):hover h3 {
    color: var(--red);
}

body.blog .oxy-dynamic-list a,
body.archive .oxy-dynamic-list a {
    text-decoration: none;
}

/* Zajawka - w ukladzie listy jest miejsce na wiecej tekstu niz w kafelku. */
body.blog .oxy-dynamic-list > div:has(h3) > div:last-child > div:last-child,
body.archive .oxy-dynamic-list > div:has(h3) > div:last-child > div:last-child {
    font-family: var(--sans);
    font-size: .885rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--muted);
    max-width: 72ch;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- 5. Stronicowanie -------------------------------
   Kontener paginacji NIE jest wpisem - zerujemy wszystko, co moglo
   na niego splynac, i ustawiamy go na srodku pod lista. */
body.blog .oxy-dynamic-list > div:not(:has(h3)),
body.archive .oxy-dynamic-list > div:not(:has(h3)) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    display: block;
}

body.blog .oxy-dynamic-list > div:has(.page-numbers),
body.archive .oxy-dynamic-list > div:has(.page-numbers) {
    margin-top: 34px;
    text-align: center;
}

body.blog .page-numbers,
body.archive .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--sans);
    font-size: .82rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--navy);
    text-decoration: none;
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

body.blog a.page-numbers:hover,
body.archive a.page-numbers:hover {
    border-color: var(--navy);
    background: var(--cream);
}

body.blog .page-numbers.current,
body.archive .page-numbers.current {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

body.blog ul.page-numbers,
body.archive ul.page-numbers {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
    height: auto;
    background: transparent;
}

body.blog ul.page-numbers li,
body.archive ul.page-numbers li {
    border: 0;
    margin: 0;
    background: transparent;
}

/* ---------- 6. Lista kategorii ----------------------------- */
body.blog .cat-item a,
body.archive .cat-item a {
    font-family: var(--sans);
    font-size: .86rem;
    color: var(--navy);
    text-decoration: none;
}

body.blog .cat-item a:hover,
body.archive .cat-item a:hover {
    color: var(--red);
}


/* ============================================================
   2026-08-20 - POGLEBIONA PRZEBUDOWA ARCHIWUM
   Dopisane na koncu: przy remisie wagi wygrywa to, co pozniej.
   Uklad LISTY zostaje (decyzja z 2026-08-20 - kafelki zostaly odrzucone),
   dokladamy hierarchie: naglowek sekcji, wyrozniony pierwszy wpis
   i czytelniejsze wiersze.
   ============================================================ */

/* ---------- Naglowek archiwum ------------------------------ */
.bmx-blog-hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(30px, 4vw, 56px) clamp(16px, 3vw, 30px) clamp(14px, 2vw, 26px);
}

.bmx-blog-hero__e {
    display: inline-block;
    margin-bottom: 12px;
    font-family: var(--sans);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--red);
}

.bmx-blog-hero__h {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.06;
    letter-spacing: -.02em;
    color: var(--navy);
}

.bmx-blog-hero__h em { font-style: italic; color: var(--red); }

.bmx-blog-hero__l {
    margin: 16px 0 0;
    max-width: 56ch;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--muted);
}

/* ---------- Wyrozniony pierwszy wpis -----------------------
   Klase dokleja blog.js.

   BEZ BIALEJ KARTY (poprawka z 2026-08-20): pierwsza wersja stawiala ten
   wpis na bialym prostokacie. Reszta listy stoi na przezroczystym tle
   z wloskowatymi separatorami, wiec jedno biale pudelko na gorze wygladalo
   jak obcy element, a zdjecie dotykajace jego krawedzi - jak niedokonczone.
   Wyroznienie robimy tym samym, czym rozni sie tresc: WIELKOSCIA zdjecia
   i tytulu oraz plakietka. Tlo zostaje wspolne dla calej listy.
   ------------------------------------------------------------ */
body.blog .oxy-dynamic-list > div.bmx-blog-glowny {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 8px;
    padding: 0 0 clamp(22px, 2.6vw, 34px);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

body.blog .oxy-dynamic-list > div.bmx-blog-glowny:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--line-soft);
}

/* Zdjecie panoramiczne, zaokraglone tak samo jak miniatury w wierszach. */
body.blog .oxy-dynamic-list > div.bmx-blog-glowny > div:first-child {
    border-radius: var(--r-s);
}

body.blog .oxy-dynamic-list > div.bmx-blog-glowny > div:first-child > a {
    aspect-ratio: 21 / 9;
}

/* Tresc bez wciec bocznych - lewa krawedz w jednej linii z reszta listy. */
body.blog .oxy-dynamic-list > div.bmx-blog-glowny > div:last-child {
    padding: 0;
    gap: 10px;
}

body.blog .oxy-dynamic-list > div.bmx-blog-glowny h3 {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1.16;
}

body.blog .oxy-dynamic-list > div.bmx-blog-glowny > div:last-child > div:last-child {
    -webkit-line-clamp: 3;
    font-size: .94rem;
}

/* Plakietka "Najnowsze" - zeby bylo widac, ze wpis jest wyrozniony
   z powodu daty, a nie przypadkiem. */
body.blog .oxy-dynamic-list > div.bmx-blog-glowny > div:last-child > div:first-child::before {
    content: "Najnowsze";
    display: inline-block;
    margin-right: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--red);
    font-size: .58rem;
    letter-spacing: .16em;
    color: #fff;
}

/* ---------- Wiersze pozostalych wpisow ---------------------
   Wieksze zdjecie i wyrazniejszy podzial niz w pierwszej wersji. */
body.blog .oxy-dynamic-list > div:has(h3):not(.bmx-blog-glowny) {
    grid-template-columns: 260px minmax(0, 1fr);
    padding: clamp(18px, 2vw, 26px) 0;
}

@media (max-width: 720px) {
    body.blog .oxy-dynamic-list > div:has(h3):not(.bmx-blog-glowny) {
        grid-template-columns: 1fr;
    }
}

/* Strzalka pojawiajaca sie pod kursorem - sygnal, ze wiersz jest klikalny. */
body.blog .oxy-dynamic-list > div:has(h3):not(.bmx-blog-glowny) > div:last-child::after {
    content: "";
    display: block;
    width: 34px;
    height: 34px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='9' viewBox='0 0 15 9' fill='none'%3E%3Cpath d='M0 4.5h13M9.5 1l3.5 3.5L9.5 8' stroke='%230B2240' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
}

body.blog .oxy-dynamic-list > div:has(h3):not(.bmx-blog-glowny):hover > div:last-child::after {
    opacity: 1;
    transform: none;
}

/* ---------- Kategorie w kolumnie bocznej -------------------
   Naga lista odnosnikow zamieniona na pigulki. */
body.blog .widget_categories .widgettitle,
body.archive .widget_categories .widgettitle {
    margin: 0 0 14px;
    font-family: var(--sans);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}

body.blog .widget_categories ul,
body.archive .widget_categories ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.blog .widget_categories .cat-item,
body.archive .widget_categories .cat-item {
    margin: 0;
}

/* CHIPY KATEGORII - wyrownane do wzorca 2026-09-16.
   Zgloszenie: "buttony kategorii sa niezgodne z ustalonym designem".

   Wzorcem jest '.bmx-sal-woj' (pigulki wojewodztw pod mapa salonow) -
   to ten sam rodzaj elementu: filtr nawigacyjny, nie przycisk akcji.
   Zgodnie z 'design.md' chipy NIE dostaja pedzla; rozni je od przyciskow
   wlasnie to, plus brak wersalikow.

   Rozjazdy, ktore to zamyka (zmierzone na zywo):
       tlo spoczynkowe   przezroczyste  ->  rgba(255,255,255,.78)
       wysokosc          35 px          ->  41 px (padding 9/16)
       stopien pisma     .74rem         ->  .76rem
       uniesienie        brak           ->  translateY(-2px)
       TEKST NA HOVER    czerwien       ->  biel                  */
body.blog .widget_categories .cat-item a,
body.archive .widget_categories .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;
    color: var(--navy);
    text-decoration: none;
    transition: background .3s var(--ease), color .3s var(--ease),
                border-color .3s var(--ease), transform .3s var(--ease);
}

/* WAGA: identyfikator widgetu jest tu KONIECZNY.
   Wyzej w tym samym pliku stoi 'body.blog #widget-114-10 a:hover
   { color: var(--red) }' o wadze (1,2,2) - regula ogolna dla odnosnikow
   w bocznej kolumnie. Bila nasz chip (0,4,2) i na hoverze napis robil sie
   CZERWONY NA GRANATOWYM TLE: kontrast okolo 2:1, czyli praktycznie
   nieczytelny. Z identyfikatorem mamy (1,3,2) i wygrywamy. */
body.blog #widget-114-10 .cat-item a:hover,
body.archive #widget-114-10 .cat-item a:hover,
body.blog .widget_categories .cat-item a:hover,
body.archive .widget_categories .cat-item a:hover {
    transform: translateY(-2px);
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    body.blog .widget_categories .cat-item a,
    body.archive .widget_categories .cat-item a { transition: none; }
}

body.blog .widget_categories .cat-item.current-cat a,
body.archive .widget_categories .cat-item.current-cat a {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    body.blog .oxy-dynamic-list > div:has(h3) > div:last-child::after { transition: none; }
}


/* ============================================================
   2026-08-20 (poprawka 2) - CALA LISTA NA BIALYCH KARTACH
   Biale tlo zostaje, ale przestaje byc wyjatkiem dla jednego wpisu:
   kazdy wpis to teraz osobna karta. Dzieki temu wyrozniony wpis rozni
   sie od reszty SKALA, a nie rodzajem tla - i nic nie wyglada na obce.

   To NADAL uklad listy, nie kafelki: karta jest pozioma (zdjecie z lewej,
   tresc z prawej) i zajmuje cala szerokosc kolumny, wiec zajawka ma tyle
   samo miejsca co wczesniej. Kafelki zostaly odrzucone wlasnie dlatego,
   ze tekst robil sie w nich nieczytelny.

   Stronicowanie zostaje poza kartami - wybieramy wpisy przez ':has(h3)',
   a ono naglowka nie ma.
   ============================================================ */

body.blog .oxy-dynamic-list,
body.archive .oxy-dynamic-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body.blog .oxy-dynamic-list > div:has(h3),
body.archive .oxy-dynamic-list > div:has(h3) {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: clamp(16px, 2vw, 26px);
    align-items: center;
    margin: 0;
    padding: clamp(16px, 1.8vw, 22px);
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    box-shadow: none;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}

body.blog .oxy-dynamic-list > div:has(h3):hover,
body.archive .oxy-dynamic-list > div:has(h3):hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-mh);
    border-color: transparent;
}

@media (max-width: 720px) {
    body.blog .oxy-dynamic-list > div:has(h3),
    body.archive .oxy-dynamic-list > div:has(h3) {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

/* Zdjecie w karcie */
body.blog .oxy-dynamic-list > div:has(h3) > div:first-child,
body.archive .oxy-dynamic-list > div:has(h3) > div:first-child {
    border-radius: var(--r-s);
}

/* ---------- Wyrozniony wpis jako duza karta ----------------
   Ta sama karta, tylko zdjecie idzie na gore i na cala szerokosc. */
body.blog .oxy-dynamic-list > div.bmx-blog-glowny {
    grid-template-columns: 1fr;
    gap: clamp(16px, 2vw, 22px);
    padding: clamp(16px, 1.8vw, 22px);
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    align-items: start;
}

body.blog .oxy-dynamic-list > div.bmx-blog-glowny:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-mh);
    border-color: transparent;
}

body.blog .oxy-dynamic-list > div.bmx-blog-glowny > div:first-child > a {
    aspect-ratio: 21 / 9;
}

body.blog .oxy-dynamic-list > div.bmx-blog-glowny > div:last-child {
    padding: 0 clamp(2px, 0.6vw, 10px) clamp(4px, 0.8vw, 10px);
}

/* Strzalka w wierszach - zostaje, ale bez marginesu, bo karta ma juz padding. */
body.blog .oxy-dynamic-list > div:has(h3):not(.bmx-blog-glowny) > div:last-child::after {
    margin-top: 4px;
}


/* ============================================================
   2026-08-20 (poprawka 3) - JEDEN KSZTALT DLA WSZYSTKICH WPISOW
   Poprzednio wyrozniony wpis byl karta PIONOWA (zdjecie u gory),
   a reszta POZIOMA (zdjecie z lewej). Dwa rozne ksztalty w jednej liscie
   wygladaly jak dwa rozne projekty. Teraz wszystkie wpisy maja ten sam
   uklad co wyrozniony - rozni je tylko rozmiar.

   Zwykle wpisy ida po DWA w rzedzie. To wciaz nie sa dawne kafelki:
   tamte byly po cztery w rzedzie i tekst robil sie w nich nieczytelny -
   tutaj karta ma polowe szerokosci kolumny, wiec zajawka miesci sie
   spokojnie w trzech wierszach.
   ============================================================ */

body.blog .oxy-dynamic-list,
body.archive .oxy-dynamic-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

@media (max-width: 640px) {
    body.blog .oxy-dynamic-list,
    body.archive .oxy-dynamic-list {
        grid-template-columns: 1fr;
    }
}

/* Wspolny ksztalt karty: zdjecie u gory, tresc pod nim. */
body.blog .oxy-dynamic-list > div:has(h3),
body.archive .oxy-dynamic-list > div:has(h3) {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: clamp(14px, 1.6vw, 18px);
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}

body.blog .oxy-dynamic-list > div:has(h3) > div:first-child,
body.archive .oxy-dynamic-list > div:has(h3) > div:first-child {
    border-radius: var(--r-s);
    overflow: hidden;
}

body.blog .oxy-dynamic-list > div:has(h3) > div:first-child > a,
body.archive .oxy-dynamic-list > div:has(h3) > div:first-child > a {
    aspect-ratio: 16 / 10;
}

/* Tresc rosnie do dolu - stopki kart w rzedzie wyrownuja sie. */
body.blog .oxy-dynamic-list > div:has(h3) > div:last-child,
body.archive .oxy-dynamic-list > div:has(h3) > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
    padding: 0 4px 4px;
}

body.blog .oxy-dynamic-list h3,
body.archive .oxy-dynamic-list h3 {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.24;
}

body.blog .oxy-dynamic-list > div:has(h3) > div:last-child > div:last-child,
body.archive .oxy-dynamic-list > div:has(h3) > div:last-child > div:last-child {
    -webkit-line-clamp: 3;
    font-size: .855rem;
    max-width: none;
}

/* Strzalka - przyklejona do dolu karty. */
body.blog .oxy-dynamic-list > div:has(h3):not(.bmx-blog-glowny) > div:last-child::after {
    margin-top: auto;
}

/* ---------- Wyrozniony wpis: ta sama karta, cala szerokosc --- */
body.blog .oxy-dynamic-list > div.bmx-blog-glowny {
    grid-column: 1 / -1;
    padding: clamp(16px, 1.8vw, 22px);
}

body.blog .oxy-dynamic-list > div.bmx-blog-glowny > div:first-child > a {
    aspect-ratio: 21 / 9;
}

body.blog .oxy-dynamic-list > div.bmx-blog-glowny h3 {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1.16;
}

body.blog .oxy-dynamic-list > div.bmx-blog-glowny > div:last-child > div:last-child {
    -webkit-line-clamp: 3;
    font-size: .94rem;
}

/* Stronicowanie zajmuje caly rzad pod siatka. */
body.blog .oxy-dynamic-list > div:not(:has(h3)),
body.archive .oxy-dynamic-list > div:not(:has(h3)) {
    grid-column: 1 / -1;
}


/* ============================================================
   2026-08-20 (poprawka 4) - LISTA, JEDEN WPIS NA WIERSZ
   Poprzednia wersja ustawiala wpisy po dwa w rzedzie - to byla siatka,
   a ma byc LISTA. Wracamy do jednej kolumny: kazdy wpis zajmuje cala
   szerokosc, jeden pod drugim.

   Ksztalt karty zostaje ten sam dla wszystkich (zdjecie u gory, pod nim
   tresc) - to on sie podobal. Wyrozniony wpis rozni sie tylko wyzszym
   zdjeciem, wiekszym tytulem i plakietka.
   ============================================================ */

body.blog .oxy-dynamic-list,
body.archive .oxy-dynamic-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

body.blog .oxy-dynamic-list > div:has(h3),
body.archive .oxy-dynamic-list > div:has(h3) {
    width: 100%;
    padding: clamp(16px, 1.8vw, 22px);
}

/* Zdjecie panoramiczne - przy pelnej szerokosci kwadratowe proporcje
   zajmowalyby pol ekranu na jeden wpis. */
body.blog .oxy-dynamic-list > div:has(h3) > div:first-child > a,
body.archive .oxy-dynamic-list > div:has(h3) > div:first-child > a {
    aspect-ratio: 21 / 9;
}

body.blog .oxy-dynamic-list h3,
body.archive .oxy-dynamic-list h3 {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.2;
}

body.blog .oxy-dynamic-list > div:has(h3) > div:last-child > div:last-child,
body.archive .oxy-dynamic-list > div:has(h3) > div:last-child > div:last-child {
    -webkit-line-clamp: 3;
    font-size: .9rem;
    max-width: 78ch;
}

/* Wyrozniony wpis - ta sama karta, tylko wieksza. */
body.blog .oxy-dynamic-list > div.bmx-blog-glowny > div:first-child > a {
    aspect-ratio: 2 / 1;
}

body.blog .oxy-dynamic-list > div.bmx-blog-glowny h3 {
    font-size: clamp(1.5rem, 2.8vw, 2.15rem);
    line-height: 1.14;
}


/* ============================================================
   2026-08-20 (poprawka 5) - WSZYSTKIE WPISY DOKLADNIE JAK WYROZNIONY
   Kazdy wpis dostaje te same wartosci co karta "Najnowsze": ten sam
   padding, te same proporcje zdjecia, ta sama skala tytulu i zajawki.
   Jedyna roznica, jaka zostaje, to sama PLAKIETKA - i tylko ona.

   Reguly wypisane wspolnym selektorem, zeby nie dalo sie ich rozjechac
   przy nastepnej zmianie: to, co ustawiamy dla '.bmx-blog-glowny',
   ustawiamy w tym samym miejscu dla wszystkich pozostalych.
   ============================================================ */

body.blog .oxy-dynamic-list > div:has(h3),
body.archive .oxy-dynamic-list > div:has(h3) {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vw, 22px);
    width: 100%;
    margin: 0;
    padding: clamp(16px, 1.8vw, 22px);
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    align-items: stretch;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}

body.blog .oxy-dynamic-list > div:has(h3) > div:first-child,
body.archive .oxy-dynamic-list > div:has(h3) > div:first-child {
    border-radius: var(--r-s);
    overflow: hidden;
}

body.blog .oxy-dynamic-list > div:has(h3) > div:first-child > a,
body.archive .oxy-dynamic-list > div:has(h3) > div:first-child > a {
    aspect-ratio: 2 / 1;
}

body.blog .oxy-dynamic-list > div:has(h3) > div:last-child,
body.archive .oxy-dynamic-list > div:has(h3) > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    /* Wciecie z lewej odsuwa tekst od krawedzi zdjecia - bez niego data
       i tytul zaczynaly sie dokladnie w linii kadru i karta wygladala
       na sciesniona. */
    padding: 0 clamp(10px, 1.6vw, 22px) clamp(6px, 1vw, 12px) clamp(10px, 1.6vw, 22px);
}

body.blog .oxy-dynamic-list h3,
body.archive .oxy-dynamic-list h3 {
    font-size: clamp(1.22rem, 2vw, 1.62rem);
    line-height: 1.2;
}

body.blog .oxy-dynamic-list > div:has(h3) > div:last-child > div:last-child,
body.archive .oxy-dynamic-list > div:has(h3) > div:last-child > div:last-child {
    -webkit-line-clamp: 3;
    font-size: .94rem;
    max-width: none;
}

/* Strzalka byla dokladana tylko wierszom, wiec przy jednym ksztalcie
   nie ma juz czego rozrozniac - wylaczamy ja calkiem. */
body.blog .oxy-dynamic-list > div:has(h3) > div:last-child::after {
    content: none;
}


/* ============================================================
   2026-08-20 (poprawka 6) - WCIECIE NA KARCIE, NIE NA TEKSCIE
   Poprzednio wciecie dostal sam blok opisu, przez co ZDJECIE nadal
   dotykalo krawedzi karty. Odwracamy: caly oddech daje karta, a tekst
   i zdjecie zaczynaja sie w tej samej linii.
   ============================================================ */

body.blog .oxy-dynamic-list > div:has(h3),
body.archive .oxy-dynamic-list > div:has(h3) {
    padding: clamp(18px, 2.2vw, 28px);
}

body.blog .oxy-dynamic-list > div:has(h3) > div:last-child,
body.archive .oxy-dynamic-list > div:has(h3) > div:last-child {
    padding: 0;
}


/* ============================================================
   2026-08-20 (poprawka 7) - WLASCIWA PRZYCZYNA
   ============================================================
   DLACZEGO POPRZEDNIE POPRAWKI NIE DAWALY EFEKTU:
   Oxygen zapisuje reguly repeatera w postaci
       .oxy-dynamic-list :is([data-id="div_block-9-10"], #incspec) { ... }
   '#incspec' to atrapa, ktora NIE ISTNIEJE w dokumencie - siedzi w ':is()'
   wylacznie po to, zeby podniesc wage selektora do poziomu IDENTYFIKATORA.
   Efektywnie te reguly maja (1,1,0), a wszystkie moje - opartre na klasach -
   najwyzej (0,4,4). Przegrywaly wiec CICHO: plik sie ladowal, reguly byly
   w kodzie, ale nie mialy prawa zadzialac.

   Stad brały sie objawy: zdjecia przy krawedzi (padding z Oxygena),
   ogromna przerwa (padding-right:30px), staly wysokosc 185px i biala
   ramka 5px wokol kadru - nic z tego nie dalo sie ruszyc klasami.

   ROZWIAZANIE: stosujemy DOKLADNIE TEN SAM chwyt. ':is([data-id="..."], #b)'
   daje nam rowniez wage identyfikatora, a dolozone klasy przewazaja szale.
   Nasze reguly maja teraz (1,2,1) kontra (1,1,0) Oxygena.
   ============================================================ */

/* --- wiersz wpisu --- */
body.blog .oxy-dynamic-list :is([data-id="div_block-8-10"], #b),
body.archive .oxy-dynamic-list :is([data-id="div_block-8-10"], #b) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: clamp(18px, 2.2vw, 26px);
    border-bottom-width: 0;
    background: #fff;
    border-radius: var(--r);
    border: 1px solid var(--line-soft);
}

/* --- kolumna ze zdjeciem --- */
body.blog .oxy-dynamic-list :is([data-id="div_block-9-10"], #b),
body.archive .oxy-dynamic-list :is([data-id="div_block-9-10"], #b) {
    width: 100%;
    padding: 0;
}

/* --- samo zdjecie (tlo pustego <a>) ---
   Oxygen trzymal tu 'height:185px' i biala ramke 5px; proporcje wymuszal
   pseudoelementem 'padding-top:75%'. Zdejmujemy oba i dajemy wlasne
   proporcje panoramiczne. */
body.blog .oxy-dynamic-list :is([data-id="link-10-10"], #b),
body.archive .oxy-dynamic-list :is([data-id="link-10-10"], #b) {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 21 / 9;
    border-width: 0;
    border-radius: var(--r-s);
    background-size: cover;
    background-position: center;
}

body.blog .oxy-dynamic-list :is([data-id="link-10-10"], #b)::before,
body.archive .oxy-dynamic-list :is([data-id="link-10-10"], #b)::before {
    content: none;
    padding-top: 0;
}

/* --- kolumna z trescia --- */
body.blog .oxy-dynamic-list :is([data-id="div_block-11-10"], #b),
body.archive .oxy-dynamic-list :is([data-id="div_block-11-10"], #b) {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 100%;
    padding: 0;
}

/* --- data --- */
body.blog .oxy-dynamic-list :is([data-id="text_block-12-10"], #b),
body.archive .oxy-dynamic-list :is([data-id="text_block-12-10"], #b) {
    font-family: var(--sans);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--red);
}

/* --- tytul --- */
body.blog .oxy-dynamic-list :is([data-id="headline-15-10"], #b),
body.archive .oxy-dynamic-list :is([data-id="headline-15-10"], #b) {
    margin: 0;
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.22rem, 2vw, 1.62rem);
    line-height: 1.2;
    color: var(--navy);
}

/* --- zajawka --- */
body.blog .oxy-dynamic-list :is([data-id="text_block-62-10"], #b),
body.archive .oxy-dynamic-list :is([data-id="text_block-62-10"], #b) {
    font-family: var(--sans);
    font-size: .885rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- wyrozniony wpis: wyzszy kadr i wiekszy tytul --- */
body.blog .oxy-dynamic-list > .bmx-blog-glowny :is([data-id="link-10-10"], #b) {
    aspect-ratio: 2 / 1;
}

body.blog .oxy-dynamic-list > .bmx-blog-glowny :is([data-id="headline-15-10"], #b) {
    font-size: clamp(1.45rem, 2.6vw, 2rem);
    line-height: 1.14;
}


/* ============================================================
   2026-08-20 (poprawka 8) - POWROT DO WIERSZY, ALE PORZADNIE
   ============================================================
   Zdjecia w repeaterze to miniatury ~300 px szerokosci
   (np. "..._okienko-1-2-300x231.jpg"). Kadr na cala szerokosc karty
   rozciagal je kilkukrotnie - stad pikseloza. Wracamy wiec do ukladu
   POZIOMEGO: zdjecie z lewej w ramce 220 px, czyli PONIZEJ ich wlasnej
   rozdzielczosci, wiec zawsze ostre.

   Wszystkie reguly ida chwytem ':is([data-id="..."], #b)' - inaczej
   przegrywaja z (1,1,0) Oxygena (patrz poprawka 7).
   ============================================================ */

body.blog .oxy-dynamic-list,
body.archive .oxy-dynamic-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* --- wiersz: zdjecie | tresc --- */
body.blog .oxy-dynamic-list :is([data-id="div_block-8-10"], #b),
body.archive .oxy-dynamic-list :is([data-id="div_block-8-10"], #b) {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: center;
    gap: clamp(16px, 2vw, 26px);
    padding: 16px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-bottom-width: 1px;
    border-bottom-color: var(--line-soft);
    border-radius: var(--r);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}

body.blog .oxy-dynamic-list :is([data-id="div_block-8-10"], #b):hover,
body.archive .oxy-dynamic-list :is([data-id="div_block-8-10"], #b):hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-mh);
    border-color: transparent;
}

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

/* --- kadr: 220 px, czyli mniej niz 300 px zrodla --- */
body.blog .oxy-dynamic-list :is([data-id="div_block-9-10"], #b),
body.archive .oxy-dynamic-list :is([data-id="div_block-9-10"], #b) {
    width: 100%;
    padding: 0;
    overflow: hidden;
    border-radius: var(--r-s);
}

body.blog .oxy-dynamic-list :is([data-id="link-10-10"], #b),
body.archive .oxy-dynamic-list :is([data-id="link-10-10"], #b) {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-width: 0;
    border-radius: 0;
    background-size: cover;
    background-position: center;
    transition: transform .6s var(--ease);
}

body.blog .oxy-dynamic-list :is([data-id="div_block-8-10"], #b):hover :is([data-id="link-10-10"], #b),
body.archive .oxy-dynamic-list :is([data-id="div_block-8-10"], #b):hover :is([data-id="link-10-10"], #b) {
    transform: scale(1.05);
}

/* --- tresc --- */
body.blog .oxy-dynamic-list :is([data-id="div_block-11-10"], #b),
body.archive .oxy-dynamic-list :is([data-id="div_block-11-10"], #b) {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 0 6px 0 0;
}

body.blog .oxy-dynamic-list :is([data-id="headline-15-10"], #b),
body.archive .oxy-dynamic-list :is([data-id="headline-15-10"], #b) {
    font-size: clamp(1.1rem, 1.7vw, 1.42rem);
    line-height: 1.24;
    transition: color .35s var(--ease);
}

body.blog .oxy-dynamic-list :is([data-id="div_block-8-10"], #b):hover :is([data-id="headline-15-10"], #b),
body.archive .oxy-dynamic-list :is([data-id="div_block-8-10"], #b):hover :is([data-id="headline-15-10"], #b) {
    color: var(--red);
}

body.blog .oxy-dynamic-list :is([data-id="text_block-62-10"], #b),
body.archive .oxy-dynamic-list :is([data-id="text_block-62-10"], #b) {
    -webkit-line-clamp: 2;
    max-width: 74ch;
}

/* --- wyrozniony wpis: szerszy kadr, wiekszy tytul, trzy linie zajawki --- */
body.blog .oxy-dynamic-list > .bmx-blog-glowny :is([data-id="div_block-8-10"], #b),
body.blog .oxy-dynamic-list > div.bmx-blog-glowny {
    grid-template-columns: 300px minmax(0, 1fr);
    padding: 20px;
}

body.blog .oxy-dynamic-list > .bmx-blog-glowny :is([data-id="link-10-10"], #b) {
    aspect-ratio: 4 / 3;
}

body.blog .oxy-dynamic-list > .bmx-blog-glowny :is([data-id="headline-15-10"], #b) {
    font-size: clamp(1.3rem, 2.1vw, 1.72rem);
}

body.blog .oxy-dynamic-list > .bmx-blog-glowny :is([data-id="text_block-62-10"], #b) {
    -webkit-line-clamp: 3;
}

@media (max-width: 700px) {
    body.blog .oxy-dynamic-list > div.bmx-blog-glowny { grid-template-columns: 1fr; }
}


/* ============================================================
   2026-08-20 (poprawka 9) - ROWNY START OBU KOLUMN
   Lista wpisow ma w 10.css '#_dynamic_list-7-10 { padding-top: 20px }',
   a kolumna z kategoriami nie ma nic - stad pierwszy kafelek zaczynal sie
   20 px nizej niz panel kategorii. Zerujemy to wciecie; odstep od naglowka
   sekcji daje juz sam naglowek.
   Selektor zrodlowy ma ID (1,0,0), wiec 'body.blog' daje (1,1,1).
   ============================================================ */
body.blog #_dynamic_list-7-10,
body.archive #_dynamic_list-7-10 {
    padding-top: 0;
}


/* ============================================================
   2026-08-20 (poprawka 10) - WIDOCZNA CYFRA BIEZACEJ STRONY
   Aktywna pozycja to '<span class="page-numbers current">'. Miala juz
   regule z bialym tekstem, ale przegrywala z NASZA WLASNA, starsza:
       body.blog #section-3-300 * { color: inherit }   -> (1,1,1)
   ktora dodalismy przy gaszeniu czarnego tla sekcji. Gwiazdka lapie tez
   ten span, wiec cyfra dziedziczyla kolor tekstu sekcji - granat na
   granatowym tle, czyli niewidoczna.
   Podnosimy wage ponad (1,1,1), dokladajac ten sam identyfikator sekcji.
   ============================================================ */
body.blog #section-3-300 .page-numbers.current,
body.archive #section-3-300 .page-numbers.current {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

body.blog #section-3-300 a.page-numbers,
body.archive #section-3-300 a.page-numbers {
    color: var(--navy);
}

body.blog #section-3-300 a.page-numbers:hover,
body.archive #section-3-300 a.page-numbers:hover {
    background: var(--cream);
    border-color: var(--navy);
    color: var(--navy);
}

body.blog #section-3-300 .page-numbers.dots,
body.archive #section-3-300 .page-numbers.dots {
    border-color: transparent;
    color: var(--muted);
}