/* 92-post-content.css — Typografia tresci wpisu i strony (blog_post-*) */

/*
 Poprzednia wersja ustawiala krój WYLACZNIE dla .blog_post-text p. Wszystko
 inne w tresci z edytora — naglowki, listy, tabele, cytaty — nie mialo zadnej
 reguly i lądowalo na domyslnym szeryfowym Timesie przegladarki. Stad wpis
 wygladal jak zlozony dwoma przypadkowymi krojami naraz.

 Teraz krój ustawia KONTENER, wiec dziedziczy go kazdy element tresci,
 takze taki, ktorego redaktor dopiero uzyje (tabela, cytat, <code>).
*/

/* ---------- wspolne dla obu breakpointow ---------- */
.blog_post-title h1 {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    color: var(--color-accent);
    padding: 0;
    margin: 0;
}

.blog_post-title p {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text);
    padding: 10px 0 0 0;
    margin: 0;
}

.blog_post-text {
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: var(--leading-body);
    color: var(--color-text);
}

/*
 Zawezenie kolumny czytania — patrz --measure w 05-typography.css.

 Zwezony jest KONTENER, nie poszczegolne akapity. Poprzednia wersja dawala
 max-width kazdemu elementowi tekstowemu z osobna, zeby tabele mogly byc
 szersze od tekstu — ale wtedy tabela wystawala poza kolumne tresci i
 wygladala jak osobny, szerszy blok. Teraz wpis to jedna kolumna: obraz,
 tytul, tekst i tabele maja te sama szerokosc i te sama lewa os.

 Klasa --measured, a nie samo .blog_post-content: ten sam szablon page.php
 obsluguje wszystkie strony statyczne, a kolumne dostaja tylko wybrane —
 decyduje legalhelp_is_measured() w functions.php, gdzie jest tez lista
 i powod, dla ktorego sa na niej nosotros i servicios.
*/

/*
 Trzy dokumenty formalne maja w tresci wpisane style="font-size:15px", wiec
 renderowaly sie mniejsza czcionka niz reszta strony (15 zamiast 18 px).
 Styl inline bije kazdy selektor, stad wyjatkowo !important.
 To doraznie — trwale rozwiazanie to usuniecie tego atrybutu z tresci stron
 w WordPressie; dopoki tam siedzi, ta regula pilnuje spojnosci.
*/
.blog_post-text > div[style*="font-size"] {
    font-size: var(--text-md) !important;
}

/*
 Tabela nigdy nie wychodzi poza kolumne tresci.

 display:block zamienia tabele w blok z wlasnym przewijaniem: komorki,
 ktore nie moga sie juz bardziej zlamac, przewija sie w poziomie zamiast
 rozpychac cala strone. Tabele, ktore mieszcza sie w kolumnie, nadal
 wypelniaja jej szerokosc — sprawdzone na /baremo-trafico/ przy oknie
 375 px: piec tabel, wszystkie widoczne na 338 px, przewijaja sie tylko
 te dwie, ktorych tresc wymaga 343 i 535 px.

 To naprawia tez blad starszy niz ta zmiana: ta jedna tabela rozpychala
 na telefonie cala strone do 553 px przy oknie 375 px.
*/
.blog_post-text table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.blog_post-text p {
    font-size: inherit;
    line-height: inherit;
    margin: 0 0 1.2em 0;
}

.blog_post-text h2 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    color: var(--color-accent);
    margin: 2em 0 0.6em 0;
}

.blog_post-text h3 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
    color: var(--color-text);
    margin: 1.8em 0 0.5em 0;
}

.blog_post-text h4,
.blog_post-text h5,
.blog_post-text h6 {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: var(--leading-tight);
    margin: 1.6em 0 0.4em 0;
}

.blog_post-text ul,
.blog_post-text ol {
    font-size: inherit;
    line-height: inherit;
    margin: 0 0 1.2em 0;
    padding-left: 1.4em;
}

.blog_post-text li {
    margin-bottom: 0.5em;
}

.blog_post-text a {
    color: var(--color-link);
    text-decoration: underline;
}

.blog_post-text strong,
.blog_post-text b {
    font-weight: 700;
}

.blog_post-text blockquote {
    margin: 1.6em 0;
    padding: 0.2em 0 0.2em 1.2em;
    border-left: 3px solid var(--color-accent);
    color: #444;
}

.blog_post-text img {
    max-width: 100%;
    height: auto;
}

.blog_post-text table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    margin: 0 0 1.5em 0;
}

.blog_post-text th,
.blog_post-text td {
    border: 1px solid #d8d8d8;
    padding: 0.6em 0.8em;
    text-align: left;
}

.blog_post-text th {
    background-color: #f4f6fa;
    font-weight: 700;
}

.blog_post-controls a {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-accent);
    font-weight: 700;
    cursor: pointer;
}

/* ---------- desktop (>= 1025px) ---------- */
@media screen and (min-width: 1025px) {
    .blog_post-container {
        width: 100%;
    }
    .blog_post-content {
        width: min(var(--screen-width), 100% - 80px);
        min-height: 100%;
        margin: auto;
        display: flex;
        flex-direction: column;
        padding: 100px 0 100px 0;
    }
    /* Kolumna wpisu. Musi byc PO regule wyzej — ta sama specyficznosc,
       wiec decyduje kolejnosc. */
    .blog_post-content--measured {
        width: min(var(--measure), 100% - 80px);
    }
    /*
     Uklad naglowka jest pionowy: obraz, pod nim tytul (kolejnosc ustawiona
     w single.php). Bylo: dwie kolumny obok siebie, tytul po lewej, obraz po
     prawej. Przy zwezonej kolumnie tresci dwie polowki po ~350 px nie mialy
     juz sensu ani dla tytulu, ani dla zdjecia 750x500.
    */
    .blog_post-title {
        margin: 0 0 50px 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
    }
    .blog_post-title div {
        min-width: 0;
    }
    .blog_post-title img {
        width: 100%;
        height: auto;
        display: block;
    }
    .blog_post-controls {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 50px 0 50px 0;
    }
}

/* ---------- mobile (<= 1024px) ---------- */
@media screen and (max-width: 1024px) {
    .blog_post-container {
        width: 100%;
        min-height: 100%;
    }
    .blog_post-content {
        width: 90%;
        margin: auto;
    }
    .blog_post-title {
        padding: 100px 0 50px 0;
        display: flex;
        flex-direction: column;
    }
    .blog_post-controls {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 50px 0 50px 0;
    }
    .blog_post-content img {
        width: 100%;
        padding: 20px 0 0 0;
    }
}