/* =========================================================
   OGŁOSZENIA 60% / WYDARZENIA 40%
   Wspólna stała wysokość odpowiadająca 5 wydarzeniom.
   ========================================================= */

.hp-announcements-events-section {
    --home-event-row-height: 72px;
    --home-event-gap: 8px;

    --home-panel-header-space: 76px;
    --home-panel-footer-space: 34px;
    --home-panel-padding-y: 40px;

    --home-content-panel-height:
        calc(
            (var(--home-event-row-height) * 5)
            + (var(--home-event-gap) * 4)
            + var(--home-panel-header-space)
            + var(--home-panel-footer-space)
            + var(--home-panel-padding-y)
        );
}


.hp-announcements-events-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 3fr)
        minmax(310px, 2fr);

    gap: 34px;

    align-items: stretch;
}


/* =========================================================
   WSPÓLNA KONSTRUKCJA OBU PANELI
   ========================================================= */

.hp-announcements-events-main,
.hp-home-events {
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    min-width: 0;

    height:
        var(--home-content-panel-height);

    padding: 20px;

    overflow: hidden;

    border: 1px solid #e0e7e2;

    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            #fafcfb 0%,
            #ffffff 100%
        );

    box-shadow:
        0 12px 32px
        rgba(37, 52, 43, .045);
}


/* =========================================================
   WSPÓLNY NAGŁÓWEK
   ========================================================= */

.hp-home-panel-heading {
    flex: 0 0 auto;

    min-height:
        var(--home-panel-header-space);

    box-sizing: border-box;

    padding-bottom: 15px;

    border-bottom:
        1px solid #edf1ee;
}

.hp-home-panel-heading h2 {
    margin: 5px 0 0;

    color: #29372f;

    font-size: 1.2rem;

    line-height: 1.2;
}

.hp-home-panel-heading
.hp-eyebrow,
.hp-home-panel-heading
.hp-section-kicker {
    margin-top: 0;
}


/* =========================================================
   OGŁOSZENIA — SCROLL WEWNĄTRZ PANELU
   ========================================================= */

.hp-announcements--scroll {
    flex: 1 1 auto;

    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;

    margin-top: 12px;

    padding-right: 8px;

    overscroll-behavior: contain;

    scrollbar-width: thin;

    scrollbar-color:
        #bdc9c1
        transparent;
}

.hp-announcements--scroll::-webkit-scrollbar {
    width: 6px;
}

.hp-announcements--scroll::-webkit-scrollbar-track {
    background: transparent;
}

.hp-announcements--scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background: #bdc9c1;
}

.hp-announcements--scroll::-webkit-scrollbar-thumb:hover {
    background: #95a79b;
}


/*
 * W jednej kolumnie ogłoszenia czytają się lepiej
 * i pozwalają sensownie wykorzystać scroll.
 */

.hp-announcements--scroll.hp-announcements {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.hp-announcements--scroll
.hp-announcement-card {
    flex: 0 0 auto;

    min-width: 0;
}


/*
 * Delikatna przestrzeń pod ostatnim wpisem,
 * żeby scrollbar nie kończył się dokładnie na treści.
 */

.hp-announcements--scroll
.hp-announcement-card:last-child {
    margin-bottom: 4px;
}


/* =========================================================
   WYDARZENIA
   ========================================================= */

.hp-home-events-heading {
    margin: 0;
}

.hp-home-events-list {
    flex: 0 0 auto;

    display: flex;
    flex-direction: column;

    gap:
        var(--home-event-gap);

    margin-top: 12px;
}

.hp-home-event {
    --event-accent: #36745a;
    --event-soft: #eaf4ef;

    box-sizing: border-box;

    display: grid;

    grid-template-columns:
        46px
        minmax(0, 1fr)
        20px;

    gap: 11px;

    align-items: center;

    width: 100%;

    height:
        var(--home-event-row-height);

    min-width: 0;

    padding:
        9px
        10px
        9px
        9px;

    overflow: hidden;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--event-accent) 17%,
            #e1e7e3
        );

    border-left:
        4px solid
        var(--event-accent);

    border-radius: 10px;

    background: #fff;

    color: inherit;

    text-decoration: none;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease;
}

.hp-home-event:hover {
    transform:
        translateY(-1px);

    border-color:
        color-mix(
            in srgb,
            var(--event-accent) 32%,
            #dfe5e1
        );

    box-shadow:
        0 8px 20px
        rgba(31, 46, 37, .06);
}


/* DATA */

.hp-home-event-date {
    display: grid;

    align-content: center;
    justify-items: center;

    width: 42px;
    height: 46px;

    border-radius: 9px;

    background:
        var(--event-soft);

    color:
        var(--event-accent);
}

.hp-home-event-date strong {
    font-size: 1.05rem;

    line-height: 1;
}

.hp-home-event-date span {
    margin-top: 2px;

    font-size: .58rem;
    font-weight: 800;
}


/* TREŚĆ */

.hp-home-event-copy {
    min-width: 0;
}

.hp-home-event-meta {
    display: flex;

    flex-wrap: nowrap;

    gap: 4px 9px;

    overflow: hidden;

    margin-bottom: 3px;

    color:
        var(--event-accent);

    font-size: .61rem;
    font-weight: 750;

    white-space: nowrap;
}

.hp-home-event-meta span {
    overflow: hidden;

    text-overflow: ellipsis;
}

.hp-home-event-meta
span + span::before {
    content: "·";

    margin-right: 9px;

    color: #a1aca5;
}

.hp-home-event-title {
    display: block;

    overflow: hidden;

    color: #29372f;

    font-size: .82rem;
    font-weight: 800;

    line-height: 1.3;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.hp-home-event-copy p {
    overflow: hidden;

    margin: 3px 0 0;

    color: #78827c;

    font-size: .65rem;

    line-height: 1.25;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.hp-home-event-arrow {
    color:
        var(--event-accent);

    font-weight: 800;
}


/* =========================================================
   STOPKA WYDARZEŃ
   Zawsze przy dolnej krawędzi panelu.
   ========================================================= */

.hp-home-events-footer {
    flex: 0 0 auto;

    display: flex;

    align-items: flex-end;
    justify-content: flex-end;

    min-height:
        var(--home-panel-footer-space);

    margin-top: auto;

    padding-top: 10px;
}

.hp-home-events-all {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #4f715f;

    font-size: .7rem;
    font-weight: 800;

    text-decoration: none;
}

.hp-home-events-all:hover {
    text-decoration: underline;
}


/* =========================================================
   PUSTE STANY
   ========================================================= */

.hp-home-panel-empty,
.hp-home-events-empty {
    flex: 1 1 auto;

    display: grid;

    align-content: center;

    min-height: 0;

    margin-top: 12px;

    padding: 24px 16px;

    border:
        1px dashed
        #d8e0db;

    border-radius: 10px;

    color: #7d8981;

    text-align: center;
}

.hp-home-events-empty strong,
.hp-home-events-empty span {
    display: block;
}

.hp-home-events-empty strong {
    color: #57655d;

    font-size: .78rem;
}

.hp-home-events-empty span {
    margin-top: 4px;

    font-size: .67rem;
}


/* =========================================================
   KOLORY WYDARZEŃ
   ========================================================= */

.hp-home-event.event-color--green {
    --event-accent: #36745a;
    --event-soft: #eaf4ef;
}

.hp-home-event.event-color--blue {
    --event-accent: #3972a9;
    --event-soft: #eaf2fa;
}

.hp-home-event.event-color--purple {
    --event-accent: #7655a5;
    --event-soft: #f1ecf8;
}

.hp-home-event.event-color--amber {
    --event-accent: #a66b18;
    --event-soft: #fbf2df;
}

.hp-home-event.event-color--red {
    --event-accent: #ad4a46;
    --event-soft: #faeceb;
}

.hp-home-event.event-color--gray {
    --event-accent: #667085;
    --event-soft: #f0f2f4;
}


/* =========================================================
   TABLET / MOBILE
   Bez wewnętrznego scrolla.
   ========================================================= */

@media (max-width: 980px) {

    .hp-announcements-events-grid {
        grid-template-columns: 1fr;

        gap: 28px;
    }

    .hp-announcements-events-main,
    .hp-home-events {
        height: auto;

        min-height: 0;

        overflow: visible;
    }

    .hp-home-panel-heading {
        min-height: 0;
    }

    .hp-announcements--scroll {
        flex: none;

        max-height: none;

        overflow: visible;

        padding-right: 0;
    }

    .hp-home-events-list {
        flex: none;
    }

    .hp-home-event {
        height: auto;

        min-height:
            var(--home-event-row-height);
    }

    .hp-home-events-footer {
        min-height: 0;

        margin-top: 18px;
    }

}


@media (max-width: 560px) {

    .hp-announcements-events-main,
    .hp-home-events {
        padding: 15px;
    }

    .hp-home-event {
        grid-template-columns:
            42px
            minmax(0, 1fr);

        gap: 9px;
    }

    .hp-home-event-arrow {
        display: none;
    }

}


/* =========================================================
   ANNOUNCEMENTS DOCUMENT V2
   ========================================================= */

.hp-announcements-events-main {
    min-height: 0 !important;
}

.hp-announcements-events-main
.hp-announcements-scrollbox {
    flex: 1 1 0 !important;

    min-height: 0 !important;

    width: 100%;

    margin-top: 12px;

    padding:
        2px
        13px
        14px
        2px;

    overflow-x: hidden !important;
    overflow-y: scroll !important;

    overscroll-behavior: contain;

    scrollbar-gutter: stable;

    scrollbar-width: thin;

    scrollbar-color:
        #879b8f
        #edf1ee;
}

.hp-announcements-events-main
.hp-announcements-scrollbox::-webkit-scrollbar {
    width: 8px;
}

.hp-announcements-events-main
.hp-announcements-scrollbox::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #edf1ee;
}

.hp-announcements-events-main
.hp-announcements-scrollbox::-webkit-scrollbar-thumb {
    border: 2px solid #edf1ee;
    border-radius: 999px;
    background: #879b8f;
}


/* NUMEROWANA LISTA */

.hp-announcement-document-list {
    margin:
        0
        0
        0
        1.7rem;

    padding: 0;

    color: #39483f;
}

.hp-announcement-document-list > li {
    margin:
        0
        0
        15px;

    padding-left: 7px;

    font-size: .84rem;
    line-height: 1.58;
}

.hp-announcement-document-list > li::marker {
    color: #396e55;

    font-weight: 850;
}

.hp-announcement-item-text {
    color: #34453b;
}


/* PODPUNKTY */

.hp-announcement-sublist {
    margin:
        9px
        0
        3px;

    padding: 0;

    list-style: none;
}

.hp-announcement-sublist li {
    position: relative;

    margin:
        7px
        0;

    padding-left: 18px;

    color: #56655c;

    font-size: .79rem;
    line-height: 1.52;
}

.hp-announcement-sublist li::before {
    content: "–";

    position: absolute;

    left: 0;

    color: #527462;

    font-weight: 800;
}


/* DALSZA CZĘŚĆ PUNKTU */

.hp-announcement-continuations p {
    margin:
        7px
        0
        0;

    color: #56655c;

    font-size: .79rem;
    line-height: 1.52;
}


/* ZAKOŃCZENIE DOKUMENTU */

.hp-announcement-document-footer {
    margin:
        18px
        0
        4px
        1.7rem;

    padding:
        13px
        14px;

    border-top:
        1px solid #e1e8e3;

    color: #65736b;
}

.hp-announcement-document-footer p {
    margin:
        3px
        0;

    font-size: .77rem;
    line-height: 1.5;
}


/* FALLBACK */

.hp-announcement-document--fallback p {
    margin: 0;

    color: #4d5d53;

    font-size: .84rem;
    line-height: 1.6;
}


/*
 * Dopiero na prawdziwym mobile rezygnujemy
 * z przewijania wewnętrznego.
 */

@media (max-width: 720px) {

    .hp-announcements-events-main
    .hp-announcements-scrollbox {
        flex: none !important;

        height: auto !important;
        max-height: none !important;

        overflow: visible !important;

        padding-right: 0;
    }

}