/* ============================================================
   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:      #6C7079;
    --paper:      #FCFAF6;
    --cream:      #F5F1E9;
    --line:       rgba(11, 34, 64, .13);
    --line-soft:  rgba(11, 34, 64, .07);
    --shadow-m:   0 14px 40px -18px rgba(11, 34, 64, .22);
    --r:          18px;
    --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-m);
    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);
}