/* =========================================================================
   page-detail.css — szczegół strony (page.php).
   Wydzielone z page.css (v3.7k refaktor 2026-05-02 noc). Źródło: 1-579.
   ========================================================================= */
/* ============================================================
   page.css — szablon szczegółu (page.php)
   v3.7 (02.05.2026)

   Layout:
   - mobile-first: pojedyncza kolumna
   - tablet 768px+: nadal 1-kol, sidebar pod treścią
   - desktop 1024px+: 2-kol (treść 2fr | sidebar 1fr)
   - sticky sidebar na desktop

   Korzysta z design tokens z styles.css:
   --green-50/-100/-700/-800, --accent-gold-500/-100, --accent-warm-600,
   --text, --text-muted, --border, --bg, --surface, --s-1..--s-9, --r-card.
   ============================================================ */

/* === Body modifier === */
.page-detail {
    background: var(--green-50);
}

/* === Breadcrumbs === */
.breadcrumbs {
    background: var(--green-50);
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--border);
    font-size: .875rem;
}
.breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .5rem;
    padding: 0;
    margin: 0;
    color: var(--text-muted);
    align-items: center;
}
.breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.breadcrumbs li + li::before {
    content: '›';
    margin-right: .35rem;
    color: var(--text-muted);
    opacity: .55;
}
.breadcrumbs a {
    color: var(--text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: color .15s ease;
}
.breadcrumbs a:hover { color: var(--green-800); }
.breadcrumbs li[aria-current="page"] {
    color: var(--text);
    font-weight: 500;
    /* Mobile: zostaw rozsądną długość, żeby nie rozbiło layoutu */
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === HERO (obraz + tytuł + meta) === */
.page-hero {
    padding: var(--s-4) 0 var(--s-3);
}
.page-hero__media {
    margin: 0 0 var(--s-4);
    max-width: 760px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(20, 30, 18, .08);
    background: var(--green-50);
    aspect-ratio: 16 / 6.5;
}
.page-hero__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.page-hero__title {
    max-width: 800px;
}
.page-hero__cat {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    background: var(--green-50);
    color: var(--green-800);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: var(--s-3);
    transition: background .15s ease;
}
.page-hero__cat:hover { background: var(--green-100); }
.page-hero__title h1 {
    font-size: clamp(1.6rem, 1rem + 2.2vw, 2.25rem);
    line-height: 1.2;
    color: var(--text);
    margin: 0 0 var(--s-4);
    font-weight: 600;
    letter-spacing: -.01em;
}
@media (max-width: 767px) {
    .page-hero {
        padding-top: var(--s-3);
    }
    .page-hero__media {
        aspect-ratio: 16 / 9;
    }
}
.page-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    align-items: center;
    color: var(--text-muted);
    font-size: .9rem;
}
.page-hero__meta > span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.page-hero__share {
    margin-left: auto;
    flex-wrap: wrap;
    gap: .4rem;
    display: flex;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .7rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: .8rem;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.share-btn:hover {
    border-color: var(--green-700);
    color: var(--green-800);
    background: var(--green-50);
}

/* === Layout główny: treść + sidebar === */
.page-grid {
    display: grid;
    gap: var(--s-5);
    grid-template-columns: 1fr;
    padding-top: var(--s-5);
    padding-bottom: var(--s-7);
}
@media (min-width: 1024px) {
    .page-grid {
        grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
        gap: var(--s-7);
    }
    .page-grid--solo {
        grid-template-columns: minmax(0, 720px);
        justify-content: center;
    }
}

/* === Article (treść) === */
.page-article {
    min-width: 0;
}
.page-content {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text);
    max-width: 720px;
    /* RWD safety: na mobile długie słowa (np. „misericordia", linki) rozjeżdżały
       layout — łamiemy je. Inline-style `text-align: justify` z admin WP daje
       brzydkie odstępy na 360px → forsujemy left tylko na mobile (≤767). */
    word-wrap: break-word;
    overflow-wrap: break-word;
}
@media (max-width: 767px) {
    .page-content,
    .page-content p,
    .page-content li {
        text-align: left !important;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
}
.page-content__lead {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
    padding: var(--s-3) 0 var(--s-3);
    border-left: 3px solid var(--green-700);
    padding-left: var(--s-4);
    margin-bottom: var(--s-5);
}
.page-content p { margin: 0 0 var(--s-4); }
/* EN Biographical Chronology: źródłowy pierwszy wpis ma inline `margin-top:0`.
   Wyrównujemy jego rytm do kolejnych dat, bez zmiany treści i innych stron. */
body[data-page-slug="biographical-chronology"] .page-content > div:first-child + p {
    margin-top: var(--s-5) !important;
}
.page-content h2 {
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--text);
    margin: var(--s-6) 0 var(--s-3);
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--border);
    scroll-margin-top: 80px;
}
.page-content h3 {
    font-size: 1.2rem;
    line-height: 1.35;
    color: var(--text);
    margin: var(--s-5) 0 var(--s-3);
    scroll-margin-top: 80px;
}
.page-content h4 {
    font-size: 1.125rem;
    color: var(--text);
    margin: var(--s-5) 0 var(--s-2);
    font-weight: 600;
}

/* === A1 (mail siostry 06.05.2026, sekcja Strony szczegółowe / 1) — typografia ===
   Treści w admin WP mają inline-style `<span style="font-size: 12pt">` w <h2>/<h3>/<h4>
   (12pt ≈ 1rem) co nadpisuje nasze 1.5/1.25/1.125 rem i sprawia że podtytuły są
   MNIEJSZE niż treść (1.05rem). Force inherit żeby siostra nie musiała czyścić
   HTML w admin. Kolor zostaje (siostra używa czerwonego #a00000 jako akcent). */
.page-content h2 *,
.page-content h3 *,
.page-content h4 *,
.page-content h5 * {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Tylna strona — gdy siostra używa <h5>/<h6> zostawiamy domyślne UA-style ale
   nie mniejsze od treści (1.05rem) na desktopie. */
.page-content h5,
.page-content h6 {
    font-size: 1.05rem;
    color: var(--text);
    margin: var(--s-4) 0 var(--s-2);
}
.page-content ul, .page-content ol {
    margin: 0 0 var(--s-4);
    padding-left: 1.5rem;
}
.page-content li { margin-bottom: .35rem; }
.page-content li::marker { color: var(--accent-gold-500); }
.page-content a {
    color: var(--green-800);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color .15s ease;
}
.page-content a:hover {
    color: var(--accent-warm-600);
}
.page-content blockquote {
    margin: var(--s-5) 0;
    padding: var(--s-4) var(--s-5);
    background: var(--green-50);
    border-left: 4px solid var(--accent-gold-500);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--text);
}
.page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: var(--s-3) 0;
    display: block;
}
/* ES prayer: the source HTML starts with an empty non-breaking-space line
   before the first image. Remove its collapsed top offset on desktop so the
   image starts at the top of the right text column. Keep the source order and
   scope the correction to this one preview page. */
@media (min-width: 1024px) {
    body[data-page-slug="la-oracion-para-pedir-por-intercesion-de-santa-faustina"] .page-content > h3:first-child {
        margin-top: 0;
        font-size: 0;
        line-height: 0;
    }
    body[data-page-slug="la-oracion-para-pedir-por-intercesion-de-santa-faustina"] .page-content > h3:first-child img {
        margin-top: 0;
    }
}
.page-content figure {
    margin: var(--s-5) 0;
}
.page-content .content-embed {
    margin: var(--s-5) 0;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}
.page-content .content-embed iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}
.page-content .content-embed-fallback {
    margin: calc(var(--s-3) * -1) 0 var(--s-5);
    padding: .75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    font-size: .9rem;
}
.page-content .content-audio {
    margin: var(--s-3) 0 var(--s-4);
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}
.page-content .content-audio audio {
    display: block;
    width: 100%;
    min-height: 40px;
    background: transparent;
}
.page-content .kzk-free-hours {
    margin: var(--s-4) 0 var(--s-5);
    padding: var(--s-4);
    background: var(--green-50);
    border: 1px solid var(--green-100);
    border-radius: var(--r-card);
}
.page-content .kzk-free-hours__title {
    margin: 0 0 var(--s-3);
    color: var(--green-800);
    font-family: var(--ff-sans);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}
.page-content .kzk-free-hours__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: .45rem var(--s-4);
}
.page-content .kzk-free-hours__list li {
    position: relative;
    margin: 0;
    padding-left: 1.1rem;
    color: #7a1f1f;
    font-weight: 600;
    line-height: 1.4;
}
.page-content .kzk-free-hours__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: .38rem;
    height: .38rem;
    border-radius: 50%;
    background: currentColor;
    transform: translateY(-50%);
}
@media (min-width: 640px) {
    .page-content .kzk-free-hours__list {
        grid-template-columns: 1fr 1fr;
    }
}
.page-content figcaption {
    font-size: .85rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: .5rem;
    font-style: italic;
}

body[data-page-slug="zdjecia-i-obrazy-sw-siostry-faustyny"] .page-content figure.wp-block-image,
body[data-page-slug="images-of-st-faustina"] .page-content figure.wp-block-image,
body[data-page-slug="foto-e-immagini-di-santa-faustina"] .page-content figure.wp-block-image {
    display: grid;
    grid-template-columns: minmax(180px, 42%) minmax(0, 1fr);
    align-items: center;
    gap: var(--s-4);
    margin: var(--s-5) 0;
    padding: var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    background: #fff;
}

body[data-page-slug="zdjecia-i-obrazy-sw-siostry-faustyny"] .page-content figure.wp-block-image img,
body[data-page-slug="images-of-st-faustina"] .page-content figure.wp-block-image img,
body[data-page-slug="foto-e-immagini-di-santa-faustina"] .page-content figure.wp-block-image img {
    width: 100%;
    margin: 0;
}

body[data-page-slug="zdjecia-i-obrazy-sw-siostry-faustyny"] .page-content figure.wp-block-image figcaption,
body[data-page-slug="images-of-st-faustina"] .page-content figure.wp-block-image figcaption,
body[data-page-slug="foto-e-immagini-di-santa-faustina"] .page-content figure.wp-block-image figcaption {
    margin: 0;
    color: var(--text);
    font-size: .98rem;
    font-style: normal;
    line-height: 1.55;
    text-align: left;
}

@media (max-width: 700px) {
    body[data-page-slug="zdjecia-i-obrazy-sw-siostry-faustyny"] .page-content figure.wp-block-image,
    body[data-page-slug="images-of-st-faustina"] .page-content figure.wp-block-image,
    body[data-page-slug="foto-e-immagini-di-santa-faustina"] .page-content figure.wp-block-image {
        grid-template-columns: 1fr;
    }
}

/* === WIDOK-03 — wylistowanie kontaktowe w treści WP ===
   To nie jest osobny szablon PHP. Redakcja wstawia semantyczny HTML w treści,
   a prototyp tylko nadaje mu spójny układ: zdjęcie pełną szerokością, potem podpisy. */
.page-content .fp-view-03 {
    display: grid;
    gap: var(--s-5);
}
.page-content .fp-view-03__intro {
    margin-bottom: 0;
    font-weight: 600;
    color: var(--green-800);
}
.page-content .fp-contact-card {
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--border);
}
.page-content .fp-contact-card:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.page-content .fp-contact-card figure {
    margin: 0 0 var(--s-3);
}
.page-content .fp-contact-card img {
    width: 100%;
    max-height: 430px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}
.page-content .fp-contact-card__body {
    display: grid;
    gap: .35rem;
}
.page-content .fp-contact-card__place {
    margin: 0;
    color: #800000;
    font-size: 1.1rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.page-content .fp-contact-card__name {
    margin: 0;
    font-weight: 700;
}
.page-content .fp-contact-card__details {
    margin: 0;
    line-height: 1.6;
}
.page-content .fp-contact-card__more {
    margin: .35rem 0 0;
    font-weight: 600;
}
.page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--s-4) 0;
    font-size: .95rem;
}
.page-content th, .page-content td {
    padding: .6rem .8rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.page-content th {
    background: var(--green-50);
    font-weight: 600;
    color: var(--text);
}
.page-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--s-5) 0;
}

/* === Tagi === */
.page-tags {
    margin: var(--s-5) 0;
    padding-top: var(--s-4);
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem var(--s-3);
}
.page-tags__label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--text-muted);
    font-size: .9rem;
    font-weight: 500;
}
.page-tags ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.page-tags a {
    display: inline-block;
    padding: .25rem .6rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .8rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.page-tags a:hover {
    border-color: var(--green-700);
    color: var(--green-800);
}

/* === Prev/Next === */
.page-prevnext {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-3);
    margin: var(--s-6) 0 0;
    padding-top: var(--s-5);
    border-top: 1px solid var(--border);
}
@media (min-width: 640px) {
    .page-prevnext { grid-template-columns: 1fr 1fr; }
}
.page-prevnext__link {
    display: flex;
    flex-direction: column;
    padding: var(--s-4);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
    color: inherit;
    min-height: 80px;
}
.page-prevnext__link:hover {
    border-color: var(--green-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(20, 30, 18, .06);
}
.page-prevnext__link--next { text-align: right; }
.page-prevnext__link--disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}
.page-prevnext__label {
    font-size: .8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .25rem;
}
.page-prevnext__title {
    color: var(--text);
    font-weight: 500;
    line-height: 1.3;
}

/* v3.7m rev. h etap 2 — wariant „next-only" (jednokierunkowy ciąg
   edukacyjny — 6 form modlitwy z maila siostry 05.05). 1 link wyrównany
   do prawej, taki sam wizualnie jak klasyczny .page-prevnext__link--next. */
.page-prevnext--next-only {
    grid-template-columns: 1fr;
    justify-content: end;
}
.page-prevnext--next-only .page-prevnext__link--next {
    margin-left: auto;
    max-width: 480px;
    width: 100%;
}
@media (min-width: 640px) {
    .page-prevnext--next-only { grid-template-columns: 1fr; }
}

/* === Sidebar (aside) === */
.page-side {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
}
@media (min-width: 1024px) {
    .page-side {
        position: sticky;
        top: 80px;
        align-self: start;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }

    /* ES preview: na stronie kultu w Zgromadzeniu prawa kolumna zaczyna się
       dokładnie na wysokości pierwszego obrazu treści, nie nad nim. */
    body[data-page-slug="en-la-congregacion"] .page-grid > .page-side {
        margin-top: var(--s-3);
    }
}

/* === TOC === */
.page-toc {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: var(--s-4);
}
.page-toc summary,
.page-toc h3 {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 var(--s-3);
    cursor: pointer;
    list-style: none;
}
.page-toc summary::-webkit-details-marker { display: none; }
.page-toc__count {
    margin-left: auto;
    background: var(--green-50);
    color: var(--green-800);
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 500;
}
.page-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc;
}
.page-toc li {
    counter-increment: toc;
    margin-bottom: .35rem;
    line-height: 1.4;
}
.page-toc li::before {
    content: counter(toc) '.';
    color: var(--accent-gold-500);
    font-weight: 500;
    margin-right: .4rem;
    font-size: .85rem;
}
.page-toc__h3 {
    padding-left: 1rem;
}
.page-toc__h3::before {
    content: '–';
    color: var(--text-muted);
}
.page-toc a {
    color: var(--text);
    font-size: .9rem;
    text-decoration: none;
    transition: color .15s ease;
}
.page-toc a:hover { color: var(--green-800); }

.page-toc--mobile {
    margin-bottom: var(--s-5);
}
@media (min-width: 1024px) {
    .page-toc--mobile { display: none; }
}
.page-toc--side {
    display: none;
}
@media (min-width: 1024px) {
    .page-toc--side { display: block; }
}

/* === Related === */
.page-related {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: var(--s-4);
}

/* IT preview — „Diario”: na desktopie blok „Leggi anche” zaczyna się na
   wysokości winietki. Na mobile pozostaje po treści, zgodnie z naturalną
   kolejnością czytania. */
.page-hero__related {
    display: none;
}
@media (min-width: 1024px) {
    .page-hero--related-at-media .container {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
        column-gap: var(--s-8);
        align-items: start;
    }
    .page-hero--related-at-media .page-hero__media {
        grid-column: 1;
        grid-row: 1;
    }
    .page-hero--related-at-media .page-hero__title {
        grid-column: 1;
        grid-row: 2;
    }
    .page-hero--related-at-media .page-hero__related {
        display: block;
        grid-column: 2;
        grid-row: 1;
    }
    .page-related--below-hero {
        display: none;
    }
}
.page-related h3 {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 var(--s-3);
}
.page-related ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.page-related li {
    border-top: 1px solid var(--border);
    padding-top: var(--s-3);
    margin-top: var(--s-3);
}
.page-related li:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}
.page-related__item {
    display: flex;
    gap: .75rem;
    text-decoration: none;
    color: inherit;
    transition: opacity .15s ease;
}
.page-related__item:hover { opacity: .85; }
.page-related__thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--green-50);
}
.page-related__thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.page-related__body {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}
.page-related__title {
    font-size: .9rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.page-related__date {
    font-size: .75rem;
    color: var(--text-muted);
}

/* CTA „Newsletter" / „Wesprzyj" celowo usunięte 03.05.2026 (decyzja siostry,
   rev. d): zbyt ambitne dla profilu Sanktuarium. W stopce na home zostają. */

/* === 404 === */
.page-empty {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === ROTATE icons (chevron) === */
.icon.rotate-90  { transform: rotate(90deg); }
.icon.rotate-180 { transform: rotate(180deg); }
.icon.rotate-270 { transform: rotate(270deg); }

/* ============================================================
   rev. h (12.05) — Kalendarium (mail S.E. „Uwagi 11 maja" pkt 1).
   Strony: /kalendarium-historia/ (Zgromadzenie, ID 1610) i /kalendarium/ (Faustyna, ID 1150).
   Data ma być boldem w osobnej linijce, pod nią treść.

   Główną pracę robi post-procesor PHP `fp_format_kalendarium_dates()` w
   `lib/page-helpers/html.php` (wstawia <br> po </strong>/</b>); CSS jest wsparciem:
     - bold-tag w treści wyraźniej oddzielony (większy odstęp + zielony akcent),
     - akapity i divy z większym margin-bottom dla czytelności,
     - puste divy (typowe dla starych WP) — schowane.
   ============================================================ */
body[data-page-slug="kalendarium"] .page-content p > strong,
body[data-page-slug="kalendarium"] .page-content p > b,
body[data-page-slug="kalendarium-historia"] .page-content p > strong,
body[data-page-slug="kalendarium-historia"] .page-content p > b,
body[data-page-slug="kalendarium-historia"] .page-content div > strong,
body[data-page-slug="kalendarium-historia"] .page-content div > b {
    font-size: 1.05em;
    color: var(--green-700);
    letter-spacing: 0.01em;
}
body[data-page-slug="kalendarium"] .page-content p,
body[data-page-slug="kalendarium-historia"] .page-content p,
body[data-page-slug="kalendarium-historia"] .page-content div {
    margin-bottom: 1.1rem;
    line-height: 1.65;
}
body[data-page-slug="kalendarium-historia"] .page-content div:empty {
    display: none;
}

/* Program transmisji jest rozkładem godzin, nie zwykłą prozą.
   Źródło WP ma każdy wiersz jako osobny <p>, więc domyślne odstępy akapitowe
   robiły z programu za długą, napuchniętą listę. Scope tylko do tej strony. */
body[data-page-slug="program-transmisji-on-line"] .page-content h3 + div[style*="margin-left"],
body[data-page-slug="program-transmisji-on-line"] .page-content div[style*="text-align"] + div[style*="margin-left"] {
    margin: .75rem 0 1.75rem !important;
    padding: .8rem 1rem;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent-gold-500);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
}

body[data-page-slug="program-transmisji-on-line"] .page-content h3 + div[style*="margin-left"] p,
body[data-page-slug="program-transmisji-on-line"] .page-content div[style*="text-align"] + div[style*="margin-left"] p {
    margin: 0 0 .38rem;
    line-height: 1.42;
}

body[data-page-slug="program-transmisji-on-line"] .page-content h3 + div[style*="margin-left"] p:last-child,
body[data-page-slug="program-transmisji-on-line"] .page-content div[style*="text-align"] + div[style*="margin-left"] p:last-child {
    margin-bottom: 0;
}

body[data-page-slug="program-transmisji-on-line"] .page-content h3 + div[style*="margin-left"] p > strong:first-child,
body[data-page-slug="program-transmisji-on-line"] .page-content div[style*="text-align"] + div[style*="margin-left"] p > strong:first-child {
    display: inline-block;
    min-width: 3.25rem;
    color: var(--green-800);
}

@media (max-width: 767px) {
    body[data-page-slug="program-transmisji-on-line"] .page-content h3 + div[style*="margin-left"],
    body[data-page-slug="program-transmisji-on-line"] .page-content div[style*="text-align"] + div[style*="margin-left"] {
        padding: .75rem .85rem;
    }

    body[data-page-slug="program-transmisji-on-line"] .page-content h3 + div[style*="margin-left"] p,
    body[data-page-slug="program-transmisji-on-line"] .page-content div[style*="text-align"] + div[style*="margin-left"] p {
        line-height: 1.5;
    }
}

.fp-contact-lines {
    margin: .75rem 0 var(--s-4, 1.5rem);
}

.fp-contact-lines p {
    margin: .15rem 0;
    line-height: 1.55;
}

/* DE / EN / IT / ES · Siostra wskazała pełny, szeroki format obrazu folderu.
   Oryginał ma 500 px, więc powiększamy wyłącznie jego prezentację w artykule. */
body[data-page-slug="faltblatt-jesu-botschaft-der-barmherzigkeit"] .page-content img[src*="folder_small_de"],
body[data-page-slug="leaflet-jesus-message-of-mercy"] .page-content img[src*="folder_small_en"],
body[data-page-slug="foglietto-messaggio-di-gesu-misericordioso"] .page-content img,
body[data-page-slug="carpeta-el-mensaje-de-la-misericordia-de-jesus"] .page-content img[src*="folder_small_es"] {
    display: block;
    width: 100%;
    height: auto;
    margin-inline: auto;
}

/* EN · Congregation / Chronology: legacy content mixes date wrappers (`div`,
   `strong`, `b` and `span`). Give every date marker the same leading rhythm
   as the PL chronology without changing the editorial text or other pages. */
body[data-page-slug="chronology"] .page-content > div[style*="#135632"],
body[data-page-slug="chronology"] .page-content p > strong:first-child,
body[data-page-slug="chronology"] .page-content p > b:first-child,
body[data-page-slug="chronology"] .page-content p > span[style*="#003300"]:first-child {
    display: block;
    margin-top: 1.1rem;
}

/* === Print === */
@media print {
    .breadcrumbs, .page-side, .page-prevnext, .page-tags, .share-btn,
    .utility-bar, .main-nav, .languages-bar, .footer, .proto-banner, .drawer,
    .section-menu-chips { display: none !important; }
    .page-content { max-width: none; }
    .page-hero--featured { background: none !important; color: var(--text) !important; }
    .page-hero--featured .page-hero__overlay { display: none; }
    .page-hero--featured h1, .page-hero--featured .page-hero__intro { color: var(--text) !important; }
}