/* ============================================================================= blog-post.css — styl STRONY POSTA bloga (ICOD-002, dekompozycja schstyle.css) Wszystko specyficzne dla widoku pojedynczego artykulu: mostek CTA, pas CTA, nawigacja miedzy artykulami, poprawki szerokosci/overflow na mobile. Wspolne budulce (tlo markowe, przyciski, akcent) sa w cta.css. ============================================================================= */ /* --- Mostek CTA pod artykulem ----------------------------------------------- Lzejszy niz sekcja kontaktu (bez badge, podtytulu, social) — zamkniecie tekstu, nie final strony. */ .blog-cta{ margin: 34px 0 10px; padding: 26px 24px; border: 1px solid #ffffff1f; border-left: 3px solid var(--schcolor1); border-radius: 12px; background: rgba(255,255,255,.03); text-align: center; } .blog-cta-text{ color: #fff; font-weight: 600; font-size: 18px; line-height: 1.55; margin: 0 0 18px; } .blog-cta-actions{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } @media (max-width: 767px){ .blog-cta{ padding: 20px 16px; } .blog-cta-text{ font-size: 16px; } .blog-cta-actions .cta-btn{ width: 100%; justify-content: center; } } /* --- Pas CTA miedzy postem a komentarzami ----------------------------------- Tlo markowe niesie .brand-bg (cta.css) — tu ustawiamy tylko parametry poswiaty i wypelnienie. Element ma w HTML klasy `... blog-cta-band brand-bg`. */ .blog-cta-band{ background-color: var(--schcolor3) !important; padding: 112px 0; --brand-mask: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 80%); --brand-glow: radial-gradient(ellipse, #b2cc2638, #b2cc2618 45%, transparent 72%); --brand-glow-top: 50%; --brand-glow-left: 50%; --brand-glow-w: 760px; --brand-glow-h: 420px; --brand-glow-transform: translate(-50%, -50%); --brand-glow-maxw: 120vw; } /* tresc ponad tlem */ .blog-cta-band > div{ position: relative; z-index: 1; } /* W pasie tlo niesie sekcja, wiec kafelek mostka gubi wlasna ramke i wypelnienie — inaczej pudelko w pudelku. */ .blog-cta-band .blog-cta{ margin: 0; padding: 0; border: 0; background: transparent; } .blog-cta-band .blog-cta-text{ font-size: 21px; margin-bottom: 22px; /* Rownomierny podzial na linie zamiast "dluga linia + ogonek". Zmierzone na 390px: bez tego 320+132 px, z tym 195+204 px. */ text-wrap: balance; } @media (max-width: 767px){ .blog-cta-band{ padding: 80px 0; --brand-glow-w: 420px; --brand-glow-h: 300px; } /* 15px zamiast 17px — mniej lamania. Jedna linia wymagalaby 13px i dzialalaby tylko dla najkrotszego tekstu; dluzszy cta_text lamie sie na dwie nawet przy 13px. */ .blog-cta-band .blog-cta-text{ font-size: 15px; } } /* --- Sekcje wystawaly poza ekran na mobile ---------------------------------- Bootstrapowy .row ma ujemne marginesy (-12px), ktore normalnie kompensuje padding .container. Na stronie posta sekcje leza BEZPOSREDNIO w , bez kontenera — wiec kazdy blok byl szerszy od viewportu i strona przewijala sie w poziomie. */ #blog-post > .row{ margin-left: 0; margin-right: 0; } /* Domkniecie od strony dokumentu — pojedynczy szeroki element w tresci (tabela,

, osadzony film) nie odtworzy przewijania. */
#blog-post{
    overflow-x: hidden;
}

/* Odzyskanie szerokosci tekstu na mobile.
   blog.css ustawia .post/.tile/.post-comments na `padding: 50px 60px`. Na 375px
   same boki zjadaly 120px — tekst dostawal 277px (74% ekranu). */
@media (max-width: 767px){
    #blog-post .post{
        padding: 28px 18px 10px;
    }
    #blog-post .post-comments,
    #blog-post .tile,
    #blog-post .post-nav{
        padding: 28px 18px;
    }
    /* Puste kolumny 1/10/1 zwijaja sie na mobile do pelnej szerokosci i dokladaja
       pionowe odstepy przy zerowej tresci. */
    #blog-post > .row > .col-md-1:empty{
        display: none;
    }
}

/* --- Nawigacja miedzy artykulami (zastapila goly link "Powrot") -------------
   Ramke kafelka `.post-nav` niesie blog.css (ten sam styl co .post/.post-comments),
   wiec sekcja potrzebuje tylko odstepu i tla. */
.post-nav-section{
    background-color: #181818 !important;
    padding: 112px 0;
    border-top: 1px solid rgba(178, 204, 38, .28);
}
/* Ramka kafelka .post-nav dziedziczy z blog.css `padding: 50px 60px` (wspolne z .post/.post-comments).
   Dla nawigacji to za duzo — border "ucieka" daleko od dwoch kafelkow prev/next, robiac pusta
   obwodke. Tu ciasniej: ramka blisko tresci. */
.post-nav{
    padding: 22px 24px;
}
.post-nav-links{
    display: flex;
    gap: 14px;
    align-items: stretch;
}
.post-nav-item{
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid #ffffff1f;
    border-radius: 10px;
    background: rgba(255,255,255,.02);
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.post-nav-item:hover,
.post-nav-item:focus{
    border-color: var(--schcolor1);
    background: rgba(178,204,38,.07);
    transform: translateY(-2px);
}
/* Kierunek limonka, tytul bialy — inaczej globalna `a { color: akcent }`
   zrobilaby caly kafelek zielonym i tytul przestalby byc czytelny. */
.post-nav-kierunek{
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--schcolor1) !important;
}
.post-nav-tytul{
    font-family: 'Manrope', 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.35;
    color: #fff !important;
}
.post-nav-next{
    text-align: right;
}
/* Gdy jest tylko jeden sasiad — kafelek nie rozpycha sie na cala szerokosc. */
.post-nav-links > .post-nav-item:only-child{
    max-width: 60%;
}
.post-nav-links > .post-nav-next:only-child{
    margin-left: auto;
}
.post-nav-lista{
    display: block;
    margin-top: 18px;
    text-align: center;
    font-size: 14px;
    opacity: .75;
}
.post-nav-lista:hover{
    opacity: 1;
}
@media (max-width: 767px){
    .post-nav-section{ padding: 80px 0; }
    .post-nav-links{ flex-direction: column; gap: 10px; }
    .post-nav-next{ text-align: left; }
    .post-nav-links > .post-nav-item:only-child{ max-width: none; }
    .post-nav-links > .post-nav-next:only-child{ margin-left: 0; }
    .post-nav-tytul{ font-size: 15px; }
}