/* ==========================================================================
   Vincent Content Typography — uklad tekstu z motywu Vincent w TRESCI
   postow i stron Hanoi. Rozmiary, interlinie i odstepy miedzy literami
   przeniesione 1:1 z Vincenta (blog/content.css + general/basics.css,
   rem przeliczone na px). Listy, cytaty, linki, wyglad hr + warianty mobile.
   Zakres: blok tresci ([data-post-content] w .c-post-main) ORAZ tytul
   posta (.c-post-headline w .c-post-header) — na wyrazna prosbe, zeby
   i ten element skalowal sie plynnie jak w Vincencie.
   Menu, logo, stopka, newsletter, karty wpisow maja WLASNE pliki
   (vincent-ui-components.css, vincent-footer.css, vincent-navigation.css,
   vincent-cards.css) — nie sa tu ruszane.

   HISTORIA odstepu miedzy akapitami: najpierw sztywne 1:1 z Vincenta
   (24px) — wygladalo gorzej niz natywny rytm Hanoi (32-48px) -> cofniete.
   Potem znowu 24px na wyrazna prosbe, po tym jak reszta motywu tez
   zaczela wygladac jak Vincent -> nadal "tekst sie skleja". Finalnie:
   stale 32px — kompromis miedzy ciasnym 24px Vincenta a szerokim
   zakresem natywnego Hanoi. Reszta relacji odstepow (przed/po naglowku,
   wokol cytatu/hr) zostaje przy oryginalnych wartosciach Vincenta —
   user zglosil problem konkretnie z odstepem miedzy akapitami. --- */

/* --- Kolumna tekstu: 760px jak w Vincencie (tylko tresc, nie newsletter) --- */
.c-post-main .c-post-main__inner {
    max-width: min(100%, 760px);
}

/* --- Baza akapitu: Geist 20px / 1.65 / letter-spacing 0 --- */
.c-post-main [data-post-content] {
    font-family: var(--gh-font-body, 'Geist', sans-serif);
    font-size: 20px;
    line-height: 1.65;
    letter-spacing: 0;
    text-wrap: pretty;
    -webkit-font-smoothing: antialiased;
    /* Bazowy odstep rytmu pionowego (patrz sekcja nizej) jako zmienna,
       zeby odstep przed naglowkiem mogl byc liczony PROPORCJONALNIE od
       niej, a nie jako druga, niezalezna sztywna liczba ktora moglaby
       sie kiedys rozjechac z ta baza. */
    --post-content-flow: 38px;
}

.c-post-main [data-post-content] > p,
.c-post-main [data-post-content] > ul,
.c-post-main [data-post-content] > ol,
.c-post-main [data-post-content] > dl {
    font-size: 20px;
    letter-spacing: 0;
    line-height: 1.65;
}

/* --- Rytm pionowy miedzy blokami. Dwa poziomy (na wyrazna prosbe):
   38px (--post-content-flow) standardowo miedzy akapitami (i miedzy
   naglowkiem a akapitem po nim). Odleglosc PRZED nowym srodtytulem
   (koniec poprzedniego bloku -> naglowek) jest o 35% wieksza niz
   standardowa (= ok. 51px), liczona proporcjonalnie przez calc() od tej
   samej zmiennej — nie jako osobna sztywna liczba — zeby automatycznie
   zostac w tej relacji, gdyby bazowy odstep kiedys sie zmienil. --- */
.c-post-main [data-post-content] > * + * {
    margin-top: var(--post-content-flow);
    margin-bottom: 0;
}
.c-post-main [data-post-content] > [id] {
    margin: 0;
}
.c-post-main [data-post-content] > * + [id] {
    margin-top: calc(var(--post-content-flow) * 1.35);
}
.c-post-main [data-post-content] > [id] + * {
    margin-top: 20px;
}
.c-post-main [data-post-content] > [id] + p {
    margin-top: var(--post-content-flow);
}
.c-post-main [data-post-content] > [id] + .kg-card {
    margin-top: 28px;
}
.c-post-main [data-post-content] > hr,
.c-post-main [data-post-content] > blockquote {
    margin-top: 48px;
}
/* Wyglad linii hr: Hanoi w ogole nie stylizuje <hr>, wiec przegladarka
   rysuje wlasny, szary "inset" 3D-rowek. Ustawiamy cienka, plaska linie
   w kolorze tekstu przy 10% kryciu (jak Vincent). */
.c-post-main [data-post-content] > hr {
    display: block;
    width: 100%;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--color-text, currentColor);
    opacity: 0.1;
}
.c-post-main [data-post-content] > hr + *,
.c-post-main [data-post-content] > blockquote + * {
    margin-top: 48px;
}
.c-post-main [data-post-content] > :not(.kg-card):not([id]) + .kg-card:is(.kg-width-wide, .kg-width-full) {
    margin-top: 48px;
}
.c-post-main [data-post-content] > .kg-card:is(.kg-width-wide, .kg-width-full) + :not(.kg-card):not([id]) {
    margin-top: 48px;
}

/* --- Naglowki w tresci: Bricolage, line-height 1.25 (jak Vincent) --- */
.c-post-main [data-post-content] h1,
.c-post-main [data-post-content] h2 {
    font-size: 40px;
    line-height: 1.25;
    letter-spacing: 0;
    font-family: var(--gh-font-heading, 'Bricolage', serif);
    font-weight: 700;
}
.c-post-main [data-post-content] h3 {
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: 0;
    font-family: var(--gh-font-heading, 'Bricolage', serif);
    font-weight: 700;
}
.c-post-main [data-post-content] h4 {
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: 0;
    font-family: var(--gh-font-heading, 'Bricolage', serif);
    font-weight: 700;
}
.c-post-main [data-post-content] h5 {
    font-size: 20px;
    line-height: 1.25;
    font-family: var(--gh-font-heading, 'Bricolage', serif);
    font-weight: 700;
}
.c-post-main [data-post-content] h6 {
    font-size: 14px;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--ghost-accent-color, var(--color-accent));
    font-family: var(--gh-font-body, 'Geist', sans-serif);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.c-post-main [data-post-content] h6 + [id] {
    margin-top: 16px !important;
}
.c-post-main [data-post-content] [id] > em {
    color: color-mix(in srgb, var(--color-text, #000) 35%, transparent);
    font-style: normal;
}

/* --- Tytul posta (hero, POZA blokiem tresci): plynne skalowanie jak
   w Vincencie, zamiast sztywnego skoku Hanoi z 40px na 64px dokladnie
   przy 1024px. Formula przeniesiona 1:1 z Vincenta (.single-title:
   clamp(3.2rem, 3vw + 1.2rem, 6.4rem), przy rem=10px w Vincencie).

   NAPRAWIONY BLAD (2026-08-16): natywny Hanoi ma na tym elemencie
   text-box: trim-both cap alphabetic — nowa, wciaz eksperymentalna
   wlasciwosc CSS, ktora "przycina" wysokosc linii do cap-height fontu.
   Dziala to na tyle niedokladnie dla konkretnych rozmiarow czcionki
   (a nasz font-size jest teraz PLYNNY, clamp() — wczesniej byly tylko
   dwie sztywne wartosci 40px/64px, ktore Hanoi zapewne testowal; teraz
   moze wypasc DOWOLNA wartosc posrednia), ze przy niektorych rozmiarach
   (zmierzone: 54px) wysokosc linii wychodzi mniejsza niz sama
   interlinia (35.6px zamiast 60.75px) — a przy polskich znakach
   diakrytycznych (np. "ś", "ć" w "prywatności"), ktore siegaja powyzej
   cap-height, gorna czesc ogonka bywa realnie ucinana. Zmierzone i
   potwierdzone bezposrednio na /polityka-prywatnosci/. Wylaczone tutaj
   calkowicie — wracamy do normalnego liczenia wysokosci linii (pelny
   ascent/descent fontu), co dziala niezawodnie dla kazdego tekstu, na
   kazdym rozmiarze, bez polegania na jeszcze niedojrzalej funkcji CSS. --- */
.c-post-headline {
    font-size: clamp(32px, 3vw + 12px, 64px);
    text-box: none;
}

/* --- Listy (jak Vincent) --- */
.c-post-main [data-post-content] > ul,
.c-post-main [data-post-content] > ol,
.c-post-main [data-post-content] > dl {
    padding-left: 24px;
}
.c-post-main [data-post-content] li:not(.toc-list-item) + li:not(.toc-list-item) {
    margin-top: 12px;
}

/* --- Cytaty (jak Vincent) --- */
.c-post-main [data-post-content] blockquote:not([class]) {
    margin-right: 0;
    margin-left: 0;
    padding: 0 0 0 20px;
    border-left: 3px solid var(--ghost-accent-color, var(--color-accent));
    color: var(--color-text);
    font-size: 24px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -0.2px;
    font-family: var(--gh-font-heading, 'Bricolage', serif);
    font-style: normal;
}
.c-post-main [data-post-content] blockquote:not([class]) strong {
    font-weight: 600;
}
.c-post-main [data-post-content] blockquote.kg-blockquote-alt {
    font-size: clamp(32px, 3.3vw, 50px);
    font-style: normal;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text);
    text-align: center;
    letter-spacing: -0.2px;
    font-family: var(--gh-font-heading, 'Bricolage', serif);
}

/* --- Linki w tresci (jak Vincent) --- */
.c-post-main [data-post-content] > p a,
.c-post-main [data-post-content] > ul a,
.c-post-main [data-post-content] > ol a,
.c-post-main [data-post-content] > blockquote a {
    color: var(--ghost-accent-color, var(--color-accent));
    text-decoration: underline;
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.1em;
    text-decoration-color: color-mix(in srgb, var(--ghost-accent-color, var(--color-accent)) 60%, transparent);
}
.c-post-main [data-post-content] > p a:hover,
.c-post-main [data-post-content] > ul a:hover,
.c-post-main [data-post-content] > ol a:hover,
.c-post-main [data-post-content] > blockquote a:hover {
    text-decoration-thickness: 0.08em;
    text-decoration-color: color-mix(in srgb, var(--ghost-accent-color, var(--color-accent)) 80%, transparent);
}

/* --- Mobile (breakpoint Vincenta: 767px) --- */
@media (max-width: 767px) {
    .c-post-main .c-post-main__inner {
        /* kolumna tresci na mobile jak w Vincencie: 90vw */
        max-width: min(100%, 90vw);
    }
    .c-post-main [data-post-content] h1,
    .c-post-main [data-post-content] h2 {
        font-size: 32px;
    }
    .c-post-main [data-post-content] h3 {
        font-size: 28px;
    }
    .c-post-main [data-post-content] > p,
    .c-post-main [data-post-content] > ul,
    .c-post-main [data-post-content] > ol,
    .c-post-main [data-post-content] > dl {
        line-height: 1.66;
    }
}