/*
 * Aktualności na stronie publicznej (docs/21).
 *
 * UWAGA — reguły globalne z main.css. Tamten arkusz powstał dla strony złożonej
 * z jednego wyśrodkowanego `article` z iframe'em i ustawia style na gołych znacznikach:
 *     article { display: flex; justify-content: center }
 *     section { padding: 1em }
 *     a       { display: block; color: white }
 * Bez odkręcenia tego dzieci wpisu ustawiają się w kolumny obok siebie, a odnośniki
 * w tekście łamią akapit i są białe na białym. Dopóki main.css nie zostanie przepisany
 * (docs/10), każdy nowy widok musi to odkręcić u siebie — dlatego **każdy** selektor
 * niżej zaczyna się od `.news`: inaczej reguła `.news article` (0,1,1) wygrywałaby
 * z `.news-card` (0,1,0) i karty znów byłyby blokami.
 *
 * Paleta i szerokość kolumny wzięte z main.css (granat #1A68BA, oliwka #A4BA07),
 * żeby sekcja nie wyglądała jak doklejona z innego serwisu. Tło strony to zdjęcie
 * kościoła, więc karty muszą mieć własne, nieprzezroczyste tło.
 *
 * Zgodnie z docs/10 §2.6: tekst bazowy 17 px, klikalne cele min. 44 px, kontrast AA.
 */

.news {
    --news-granat: #1A68BA;
    --news-granat-ciemny: #134B87;
    --news-oliwka: #A4BA07;
    --news-tekst: #23282d;
    --news-szary: #5b6670;
    --news-linia: #dfe3e8;
    --news-tlo: #f6f8fa;

    font-family: 'Open Sans', sans-serif;
    display: block;
    padding: 1.5em 1em 2.5em;
    color: var(--news-tekst);
    font-size: 17px;
    line-height: 1.6;
}

/* ── zerowanie reguł globalnych ────────────────────────────────── */

.news article { display: block; }
.news section { padding: 0; }
.news a { display: inline; color: inherit; }
/*
 * main.css niesie resztkę stylów rozwijanego menu nałożoną na GOŁE znaczniki listy:
 *     ol      { height: 50px; display: inline-block; line-height: 200% }
 *     ol > li { float: left; width: 150px; height: 50px; border-right: 1px dashed }
 *     ol a    { display: block }
 * Każda lista w treści (także `<ol>` z sanityzowanego HTML-a) dostaje przez to 150 px
 * szerokości i 50 px wysokości, a pływające elementy wpuszczają stopkę na treść.
 * Do czasu przepisania main.css (docs/10) każdy widok musi to zdjąć u siebie.
 */
.news ol,
.news ul {
    display: block;
    height: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: inherit;
    line-height: inherit;
}

.news li {
    float: none;
    width: auto;
    height: auto;
    border: 0;
    line-height: inherit;
}

/* Reguł `ol > li:hover` i `ol > li:first-child` z main.css nie trzeba zdejmować:
   mają (0,1,2), a komponenty niżej (0,2,0) — dwie klasy biją jedną klasę z pseudoklasą.
   Próba ich zerowania kończy się odwrotnie: `.news ol > li:first-child` to (0,2,2)
   i zdejmuje tło oraz obramowanie WŁASNYM komponentom. */

/* main.css ma `h2 { text-align: center; line-height: .5 }` — dla stopki, nie dla treści. */
.news h1, .news h2, .news h3 { margin: 0; line-height: 1.25; text-align: left; }
.news p { margin: 0; }

.news__inner {
    max-width: 980px;
    margin: 0 auto;
}

/* ── nagłówek sekcji ───────────────────────────────────────────── */

.news .news__head {
    background: #fff;
    border-left: 6px solid var(--news-oliwka);
    padding: 1.1em 1.3em;
    margin-bottom: 1.2em;
}

.news .news__head h1,
.news .news__head h2 {
    font-size: 1.7em;
    font-weight: 700;
    color: var(--news-granat);
}

.news .news__head--home {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1em;
    flex-wrap: wrap;
}

.news .news__all {
    display: inline-block;
    color: var(--news-granat);
    font-weight: 600;
    padding: .4em 0;
}

.news .news__all:hover { color: var(--news-granat-ciemny); text-decoration: underline; }

.news .news__desc {
    margin-top: .45em;
    color: var(--news-szary);
    font-size: .95em;
}

/* ── pasek kategorii ───────────────────────────────────────────── */

.news .news__cats {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    margin-bottom: 1.2em;
    list-style: none;
}

.news .news__cats a {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    min-height: 44px;
    padding: .35em 1.1em;
    background: #fff;
    color: var(--news-granat);
    border: 1px solid var(--news-linia);
    border-radius: 999px;
    font-size: .95em;
    font-weight: 600;
}

.news .news__cats a:hover { border-color: var(--news-granat); }

.news .news__cats a.is-active {
    background: var(--news-granat);
    border-color: var(--news-granat);
    color: #fff;
}

.news .news__cats-n { font-size: .85em; opacity: .75; font-weight: 400; }

/* ── kafelki ───────────────────────────────────────────────────── */

.news .news__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1em;
    align-items: start;
}

.news .news-card {
    display: flex;
    flex-direction: column;
    gap: .55em;
    background: #fff;
    border: 1px solid var(--news-linia);
    border-top: 4px solid var(--news-granat);
    padding: 1.1em 1.25em 1.25em;
}

.news .news-card--pinned { border-top-color: var(--news-oliwka); }

.news .news-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75em;
    font-size: .85em;
    color: var(--news-szary);
}

.news .news-card__cat {
    display: inline-block;
    color: var(--news-granat);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.news .news-card__cat:hover { color: var(--news-granat-ciemny); }

.news .news-card__title { font-size: 1.25em; font-weight: 700; }
.news .news-card__title a { color: var(--news-tekst); }
.news .news-card__title a:hover { color: var(--news-granat); }

.news .news-card__lead { color: #3d454d; }

.news .news-card__more {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--news-granat);
    font-weight: 600;
}

.news .news-card__more:hover { color: var(--news-granat-ciemny); text-decoration: underline; }

/* ── pojedynczy wpis ───────────────────────────────────────────── */

.news .news-entry {
    display: block;
    background: #fff;
    border: 1px solid var(--news-linia);
    padding: 2em 2.4em 2.4em;
}

.news .news-entry__title {
    margin: .35em 0 .5em;
    font-size: 2em;
    font-weight: 700;
    color: var(--news-granat);
}

.news .news-entry__lead {
    font-size: 1.12em;
    line-height: 1.55;
    color: #3d454d;
    margin-bottom: 1.4em;
    max-width: 60ch;
}

.news .news-entry__body { max-width: 68ch; }
.news .news-entry__body h2 { font-size: 1.35em; color: var(--news-granat); margin: 1.5em 0 .4em; }
.news .news-entry__body h3 { font-size: 1.15em; margin: 1.3em 0 .3em; }
.news .news-entry__body p { margin-bottom: .9em; }
.news .news-entry__body ul,
.news .news-entry__body ol { margin: 0 0 .9em 1.4em; }
.news .news-entry__body li { margin-bottom: .3em; }
.news .news-entry__body a { color: var(--news-granat); text-decoration: underline; }
.news .news-entry__body blockquote {
    margin: 1em 0;
    padding: .2em 0 .2em 1em;
    border-left: 4px solid var(--news-oliwka);
    color: var(--news-szary);
    font-style: italic;
}
.news .news-entry__body table { border-collapse: collapse; width: 100%; margin-bottom: 1em; }
.news .news-entry__body th,
.news .news-entry__body td { border: 1px solid var(--news-linia); padding: .4em .6em; text-align: left; }

/* ── metryczka rekolekcji ──────────────────────────────────────── */

.news .retreat-facts {
    margin: 0 0 1.8em;
    padding: 1.1em 1.3em;
    background: var(--news-tlo);
    border-left: 5px solid var(--news-granat);
    display: grid;
    gap: .55em;
}

.news .retreat-facts > div {
    display: grid;
    grid-template-columns: 9em minmax(0, 1fr);
    gap: .8em;
    align-items: baseline;
}

.news .retreat-facts dt {
    font-size: .82em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--news-szary);
}

.news .retreat-facts dd { margin: 0; }
.news .retreat-facts__leader { display: block; }

/* ── plan dnia ─────────────────────────────────────────────────── */

.news .retreat-plan { margin-top: 2em; }

.news .retreat-plan > h2 {
    font-size: 1.45em;
    font-weight: 700;
    color: var(--news-granat);
    padding-bottom: .35em;
    border-bottom: 2px solid var(--news-granat);
    margin-bottom: .2em;
}

.news .retreat-plan__day { padding: 1.1em 0; border-bottom: 1px solid var(--news-linia); }

.news .retreat-plan__day h3 {
    font-size: 1.12em;
    font-weight: 700;
    color: var(--news-granat-ciemny);
}

.news .retreat-plan__motto {
    margin: .2em 0 .7em;
    font-style: italic;
    color: var(--news-szary);
}

.news .retreat-plan__items { list-style: none; }

/* Godzina w stałej kolumnie, treść jednym blokiem — przy 60 pozycjach to jedyny układ,
   w którym da się przebiec wzrokiem po godzinach, nie czytając wszystkiego. */
.news .retreat-plan__items li {
    display: grid;
    grid-template-columns: 7.5em minmax(0, 1fr);
    gap: 1.2em;
    padding: .35em 0;
    align-items: baseline;
}

.news .retreat-plan__items li + li { border-top: 1px dotted #eceff2; }

/* Punkt bez godziny (np. „W tym dniu kolekta") zajmuje całą szerokość i jest wyróżniony. */
.news .retreat-plan__items li > .retreat-plan__body:only-child {
    grid-column: 1 / -1;
    font-weight: 600;
    color: var(--news-granat-ciemny);
}

.news .retreat-plan__time {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--news-granat);
    /* Bez `nowrap`: „7.00, 9.00, 11.00 i 17.00" ma się zawinąć w kolumnie,
       a nie rozepchnąć jej dla wszystkich pozostałych wierszy. */
}

/* ── załączniki ────────────────────────────────────────────────── */

.news .news-files { margin-top: 2em; }

.news .news-files > h2 {
    font-size: 1.45em;
    font-weight: 700;
    color: var(--news-granat);
    padding-bottom: .35em;
    border-bottom: 2px solid var(--news-granat);
    margin-bottom: .7em;
}

.news .news-files ul { list-style: none; }
.news .news-files li + li { margin-top: .45em; }

.news .news-files a {
    display: flex;
    align-items: center;
    gap: .9em;
    min-height: 44px;
    padding: .55em .9em;
    border: 1px solid var(--news-linia);
    background: var(--news-tlo);
    color: var(--news-tekst);
}

.news .news-files a:hover { border-color: var(--news-granat); background: #eef3fa; }

.news .news-files__type {
    flex: none;
    min-width: 3.8em;
    text-align: center;
    padding: .2em .45em;
    background: var(--news-granat);
    color: #fff;
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .05em;
}

.news .news-files__name { flex: 1; font-weight: 600; }
.news .news-files__size { flex: none; color: var(--news-szary); font-size: .88em; }

/* ── stronicowanie, komunikaty ─────────────────────────────────── */

.news .news__pages {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin-top: 1.5em;
    background: #fff;
    border: 1px solid var(--news-linia);
    padding: .3em 1.2em;
}

.news .news__pages a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--news-granat);
    font-weight: 600;
}

.news .news__pages a:hover { text-decoration: underline; }
.news .news__pages-n { color: var(--news-szary); font-size: .93em; }

.news .news__empty {
    background: #fff;
    border: 1px solid var(--news-linia);
    padding: 1.2em 1.3em;
}

.news .news__back { margin-top: 1em; }

.news .news__back a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.2em;
    background: #fff;
    border: 1px solid var(--news-linia);
    color: var(--news-granat);
    font-weight: 600;
}

.news .news__back a:hover { border-color: var(--news-granat); }

/* ── telefon ───────────────────────────────────────────────────── */

@media (max-width: 720px) {
    .news { padding: 1em .7em 2em; font-size: 16px; }
    .news .news-entry { padding: 1.3em 1.1em 1.8em; }
    .news .news-entry__title { font-size: 1.55em; }
    .news .retreat-facts > div { grid-template-columns: minmax(0, 1fr); gap: .15em; }
    .news .retreat-plan__items li { grid-template-columns: minmax(0, 1fr); gap: .1em; padding: .5em 0; }
    .news .news-files a { flex-wrap: wrap; }
}