/*
 * Dział Aktualności (inc/aktualnosci.php). Wczytywany przez wp_head(), czyli po app.css,
 * więc nadpisuje reguły motywu przy tej samej szczegółowości.
 */

/* Menu: separator po „Zbiory”, a nie po 5. pozycji — nowa pozycja na początku menu go nie przesuwa. */
header .center .upper-menu .menu li:nth-child(5) {
    border-right: 0;
}
header .center .upper-menu .menu li.menu-item-37 {
    border-right: 1px solid #FFFFFF;
}
header .center .upper-menu .menu li:has(> a[href$="/zbiory"]) {
    border-right: 1px solid #FFFFFF;
}
@media screen and (max-width: 74.9375em) {
    header .center .upper-menu .menu li:nth-child(5) {
        padding-right: 6px;
    }
    header .center .upper-menu .menu li.menu-item-37 {
        padding-right: 12px;
    }
    header .center .upper-menu .menu li:has(> a[href$="/zbiory"]) {
        padding-right: 12px;
    }
}

/*
 * Kafle wydarzeń (main-boxes w motywie) na telefonie: motyw na przemian daje zdjęcie u góry i tytuł u góry, co w jednej
 * kolumnie stawiało obok siebie dwa zdjęcia albo dwa tytuły. Na telefonie zawsze tytuł, pod nim zdjęcie — jak w parzystych
 * kaflach motywu (także opis po najechaniu pod tytułem). Od 640 px bez zmian.
 */
@media screen and (max-width: 39.9375em) {
    .content .main-boxes > div.columns:nth-child(2n + 1) .title {
        top: 0;
        bottom: auto;
        display: flex;
        flex-direction: column;
    }
    .content .main-boxes > div.columns:nth-child(2n + 1) .title .upper {
        order: -1;
    }
    .content .main-boxes > div.columns:nth-child(2n + 1) .image {
        bottom: 0;
    }
}

/*
 * Nagłówki sekcji na głównej („Aktualności”, „Wydarzenia”) jak nagłówki list motywu (body h1, np. „AKTUALNE WYDARZENIA”):
 * Lato Light 25,536 px, wersaliki, wcięcie 24 px, 48 px do treści. Lista /aktualnosci/ ma zwykły h1 motywu, bez reguł tutaj.
 */
.naglowek-sekcji {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-size: 25.536px;
    line-height: 29.792px;
    text-transform: uppercase;
    color: #000000;
    margin: 48px 36px 48px 24px;
}

/*
 * Strona główna z sekcją aktualności — odstępy między blokami z projektu: slider → „Aktualności” 72 px
 * (24 + 48 pod sliderem w motywie), karty → „Wydarzenia” 64 px, kafle → skróty 128 px (104 + 24 pod kaflem w motywie).
 */
.sekcja-aktualnosci > .naglowek-sekcji {
    margin-top: 24px;
}
.sekcja-aktualnosci .siatka-aktualnosci {
    margin-bottom: 0;
}
.sekcja-aktualnosci + .naglowek-sekcji {
    margin-top: 64px;
}
.sekcja-aktualnosci ~ .main-boxes {
    margin-bottom: 104px;
}
@media screen and (max-width: 39.9375em) {
    .sekcja-aktualnosci + .naglowek-sekcji {
        margin-top: 40px;
    }
    .sekcja-aktualnosci ~ .main-boxes {
        margin-bottom: 48px;
    }
}

/* Siatka kart: 3 kolumny, 2 na tablecie, 1 na telefonie. */
.siatka-aktualnosci {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 38px 26px;
    margin-bottom: 48px;
}
@media screen and (max-width: 63.9375em) {
    .siatka-aktualnosci {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        padding: 0 12px;
    }
}
@media screen and (max-width: 39.9375em) {
    .siatka-aktualnosci {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * Karta: tekst po lewej, zdjęcie po prawej, żółta ramka nad oboma. Wielkości jak kafel wydarzenia w motywie (app.css
 * ma stałe piksele): wysokość 408 px, tytuł 22 pt, „czytaj więcej” 16 pt jak data kafla, zajawka 11 pt jak opis kafla.
 * Proporcje z projektu (tekst 54%) mieszczą tytuł 22 pt dopiero w karcie od 500 px; węższe karty dają tekstowi 68%
 * (75% przy 1024–1439 px), żeby mieściły się najdłuższe słowa; tytuły łamią się na 3–4 linie jak w kaflach wydarzeń.
 */
.karta-aktualnosci {
    position: relative;
    display: grid;
    grid-template-columns: 68% 32%;
    height: 408px;
    background-color: #FFFFFF;
    color: #000000;
    text-decoration: none;
    overflow: hidden;
}
.karta-aktualnosci__tekst {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 46px 6px 42px 32px;
    transition: background-color 0.3s ease;
}
.karta-aktualnosci__typ {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 10pt;
    line-height: 1.3;
    color: #FCB322;
}
.karta-aktualnosci__tytul {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-size: 22pt;
    line-height: 26.8pt;
    color: inherit;
    margin: 10px 0 0;
    padding: 0;
    overflow-wrap: break-word;
    /* Słowa do 11 liter mieszczą się w kolumnie na laptopie; dłuższe dzielimy z łącznikiem. */
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 12 5 5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}
.karta-aktualnosci__zajawka {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 11pt;
    line-height: 18pt;
    margin-top: 28px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.karta-aktualnosci__wiecej {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    white-space: nowrap;
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-size: 16pt;
    line-height: 1;
}
.karta-aktualnosci__wiecej::before {
    content: "";
    flex: 0 0 auto;
    width: 32px;
    margin-bottom: 0.15em;
    border-top: 2px solid #FCB322;
    transition: border-color 0.3s ease;
}
.karta-aktualnosci__zdjecie {
    position: relative;
    background-color: #E6E6E6;
}
.karta-aktualnosci__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.karta-aktualnosci__ramka {
    position: absolute;
    inset: 22px 20px 22px 18px;
    z-index: 2;
    border: 4px solid #FCB322;
    pointer-events: none;
    transition: border-color 0.3s ease;
}
@media screen and (min-width: 64em) and (max-width: 89.9375em) {
    .karta-aktualnosci {
        grid-template-columns: 75% 25%;
    }
}
/* 1024–1199 px: kolumna tekstu ok. 200 px, „czytaj więcej” z kreską 32 px nie mieściło się o 5 px. */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {
    .karta-aktualnosci__wiecej::before {
        width: 24px;
    }
}
/* Karta od 500 px (ekrany od ok. 2300 px): proporcje z projektu 54 / 46. */
@media screen and (min-width: 144.375em) {
    .karta-aktualnosci {
        grid-template-columns: 54% 46%;
    }
    .karta-aktualnosci__tekst {
        padding: 52px 12px 46px 43px;
    }
    .karta-aktualnosci__wiecej::before {
        width: 40px;
    }
}

/* Najazd i fokus: żółte pole tekstu, biała ramka. Tekst czarny, bo biały na żółtym ma za mały kontrast (1,81:1). */
.karta-aktualnosci:hover,
.karta-aktualnosci:focus {
    color: #000000;
}
.karta-aktualnosci:hover .karta-aktualnosci__tekst,
.karta-aktualnosci:focus-visible .karta-aktualnosci__tekst {
    background-color: #FCB322;
}
.karta-aktualnosci:hover .karta-aktualnosci__typ,
.karta-aktualnosci:focus-visible .karta-aktualnosci__typ {
    color: #000000;
}
.karta-aktualnosci:hover .karta-aktualnosci__ramka,
.karta-aktualnosci:focus-visible .karta-aktualnosci__ramka,
.karta-aktualnosci:hover .karta-aktualnosci__wiecej::before,
.karta-aktualnosci:focus-visible .karta-aktualnosci__wiecej::before {
    border-color: #FFFFFF;
}
.karta-aktualnosci:focus-visible {
    outline: 3px solid #000000;
    outline-offset: 3px;
}

/* Lista /aktualnosci/: strzałki kolejnych stron z motywu. */
.lista-aktualnosci__strony {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 48px;
}
.lista-aktualnosci__pusto {
    font-family: "Lato", sans-serif;
    margin: 0 0 48px;
}

/* Pojedyncza aktualność — góra: ramka z tytułem i zdjęcie jak we wpisie wydarzenia (.post .top). */
.wpis-aktualnosci .top {
    margin-top: 50px;
}
/* Tytuł w ramce jak tytuł wydarzenia (.post .top .frame h2). */
.wpis-aktualnosci .top .frame h1 {
    color: inherit;
    font-family: "Playfair Display", serif;
    font-size: 31.92px;
    line-height: 37.24px;
    font-weight: bold;
    text-transform: none;
    margin: 0;
    padding: 0 24px 0 0;
}
@media screen and (max-width: 39.9375em) {
    .wpis-aktualnosci .top .frame h1 {
        line-height: 42.56px;
        padding-right: 0;
    }
}
@media screen and (min-width: 90em) {
    .wpis-aktualnosci .top .frame h1 {
        font-size: 39.9px;
        line-height: 48.279px;
    }
}
/*
 * Wydarzenie ma między tytułem a datą podtytuł (h3, marginesy 9,6 / 14,4 px), aktualność nie — bez odstępu ogonki
 * Playfaira (ą, ę, y) z ostatniej linii tytułu nachodziły na datę. Odstęp jak pod podtytułem wydarzenia.
 */
.wpis-aktualnosci .top .frame .date {
    margin-top: 14.4px;
}
/*
 * W motywie ramka ma stałą wysokość i leży absolutnie nad zdjęciem, więc długi tytuł (6+ linii przy ok. 1500 px)
 * wychodził z ramki i zachodził na zajawkę. Ten sam układ (ramka 40%, zdjęcie 60% + 24 px, 48 px niżej) w siatce:
 * ramka rośnie z tytułem, nie niższa niż w motywie, a treść pod spodem przesuwa się razem z nią.
 */
@media screen and (min-width: 40em) {
    .wpis-aktualnosci .top {
        display: grid;
        grid-template-columns: 40% minmax(0, 1fr);
        align-items: start;
    }
    .wpis-aktualnosci .top .frame {
        position: relative;
        grid-area: 1 / 1;
        width: auto;
        height: auto;
        min-height: 336px;
    }
    .wpis-aktualnosci .top .img {
        grid-area: 1 / 1 / 2 / 3;
        justify-self: end;
        float: none;
    }
    .wpis-aktualnosci .top > br {
        display: none;
    }
}
@media screen and (min-width: 90em) {
    .wpis-aktualnosci .top .frame {
        min-height: 408px;
    }
}
.wpis-aktualnosci .top .img--brak {
    background-color: #E6E6E6;
}

/*
 * Treść: spis treści i śródtytuły. Motyw daje 24 px pod blokiem (.post .left .text), stąd .left w selektorze spisu.
 * Spis → pierwszy śródtytuł 96 px jak w projekcie; gdy treść zaczyna się akapitem, spis → akapit 48 px.
 */
.wpis-aktualnosci .left .spis-tresci {
    display: block;
    margin-bottom: 48px;
}
.wpis-aktualnosci .spis-tresci + .text > h2:first-child {
    margin-top: 96px;
}
.wpis-aktualnosci .spis-tresci ol {
    margin-bottom: 0;
}
.wpis-aktualnosci .text h2 {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.35;
    margin: 70px 0 10px;
    scroll-margin-top: 24px;
}
.wpis-aktualnosci .text h3 {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.4;
    margin: 32px 0 8px;
}
.wpis-aktualnosci .text img {
    max-width: 100%;
    height: auto;
}
/* Linki w treści mają żółte tło (app.css); na logo partnera dawało to żółte paski po bokach. */
.wpis-aktualnosci .text a:has(> img) {
    background-color: transparent;
    padding: 0;
}

/*
 * Dół: „Inne aktualności” jak „Inne wydarzenia” pod wydarzeniem (.post .bottom h4): 21,28 px, wersaliki, biała linia,
 * 48 px do kart. Razem z 24 px pod treścią (.post .left .text) odstęp od treści wynosi 145 px.
 */
.wpis-aktualnosci .bottom {
    margin-top: 121px;
}
.wpis-aktualnosci .related .naglowek-sekcji {
    font-size: 21.28px;
    margin: 0 0 48px;
    padding-bottom: 20.4px;
    border-bottom: 2px solid #FFFFFF;
}
.wpis-aktualnosci .related .siatka-aktualnosci {
    margin-bottom: 10px;
}

/* Tablet i telefon: mniejsze odstępy we wpisie, nagłówek „Inne aktualności” w linii z kartami. */
@media screen and (max-width: 63.9375em) {
    .wpis-aktualnosci .left .spis-tresci {
        margin-bottom: 40px;
    }
    .wpis-aktualnosci .spis-tresci + .text > h2:first-child {
        margin-top: 64px;
    }
    .wpis-aktualnosci .text h2 {
        margin-top: 56px;
    }
    .wpis-aktualnosci .bottom {
        margin-top: 96px;
    }
    .wpis-aktualnosci .related .naglowek-sekcji {
        margin-left: 12px;
        margin-right: 12px;
    }
}
@media screen and (max-width: 39.9375em) {
    .wpis-aktualnosci .top {
        margin-top: 24px;
    }
    .wpis-aktualnosci .left .spis-tresci {
        margin-bottom: 32px;
    }
    .wpis-aktualnosci .text h2,
    .wpis-aktualnosci .spis-tresci + .text > h2:first-child {
        margin-top: 48px;
    }
    .wpis-aktualnosci .bottom {
        margin-top: 72px;
    }
}