.events-page{
    padding-bottom:60px;
}

.events-page .page-header{
    display:flex;
    align-items:flex-start;
    gap:20px;
    margin-bottom:32px;
}

.events-page .page-header-icon{
    display:inline-flex;
    flex:0 0 64px;

    width:64px;
    height:64px;

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

    border-radius:16px;

    background:#eef5fb;
    color:var(--primary);

    font-size:1.8rem;
}

.events-page h1{
    margin:0 0 6px;
    color:var(--primary);
}

.events-page .page-header p{
    margin:0;
    color:#52606d;
}

/* Mesačné boxy */

.events-months{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px;
}

.events-month{
    padding:26px;
}

.events-month h2{
    display:flex;
    justify-content:center;
    align-items:center;

    margin:0 0 20px;

    color:var(--primary);
    text-align:center;
}

.events-month .month-title{
    display:inline-flex;
    align-items:center;
    gap:10px;
}

.events-month .month-title i{
    color:var(--secondary);
    font-size:.95em;
}

/* Zoznam */

.events-page-list{
    list-style:none;
    margin:0;
    padding:0;
}

.events-page-item{
    display:grid;
    grid-template-columns:72px minmax(0, 1fr);
    gap:18px;
    align-items:start;

    padding:14px 0;

    border-bottom:1px solid var(--gray);
}

.events-page-item:last-child{
    border-bottom:0;
}

.events-page-date{
    color:#667085;
    font-weight:700;
}

.events-page-content{
    min-width:0;
}

.events-page-title{
    font-weight:700;
    color:var(--text);
}

.events-page-title a{
    color:inherit;
    text-decoration:none;
}

.events-page-title a:hover,
.events-page-title a:focus-visible{
    color:var(--primary);
    text-decoration:underline;
}

.events-page-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px;

    margin-top:3px;

    color:#667085;
    font-size:.9rem;
}

/* Farby odpadu */

.events-page-title[class*="waste-"]{
    color:var(--primary);
}

.events-page-title.waste-municipal{
    color:var(--waste-municipal);
}

.events-page-title.waste-plastic{
    color:var(--waste-plastic);
}

.events-page-title.waste-glass{
    color:var(--waste-glass);
}

.events-page-title.waste-paper{
    color:var(--waste-paper);
}

/* Prázdny stav */

.events-empty{
    padding:45px 30px;
    text-align:center;
}

.events-empty i{
    display:inline-flex;

    width:70px;
    height:70px;

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

    margin-bottom:18px;

    border-radius:18px;

    background:#eef5fb;
    color:var(--primary);

    font-size:2rem;
}

.events-empty h2{
    margin:0 0 8px;
    color:var(--primary);
}

.events-empty p{
    margin:0;
    color:#667085;
}

.events-page-item[hidden],
.events-month[hidden]{
    display:none !important;
}

/* Tablet */

@media (max-width:768px){

    .events-months{
        grid-template-columns:1fr;
    }

}

/* Mobil */

@media (max-width:480px){

    .events-page .page-header{
        gap:14px;
    }

    .events-page .page-header-icon{
        flex-basis:52px;
        width:52px;
        height:52px;
        font-size:1.45rem;
    }

    .events-page-item{
        grid-template-columns:64px minmax(0, 1fr);
        gap:12px;
    }

}
/* Filtre */

.events-filters{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;

    gap:10px;

    margin:0 0 28px;
}

.events-filter{
    display:inline-flex;
    align-items:center;
    gap:7px;

    padding:10px 16px;

    border:1px solid var(--gray);
    border-radius:999px;

    background:var(--white);
    color:var(--text);

    font:inherit;
    font-weight:600;

    cursor:pointer;

    transition:var(--transition);
}

.events-filter:hover{
    border-color:var(--primary);
    color:var(--primary);
}

.events-filter.active{
    border-color:var(--primary);

    background:var(--primary);
    color:var(--white);
}


/* Aktuálny mesiac */

.events-month.current-month{
    border:2px solid var(--primary);
}

.events-month h2{
    position:relative;
}

.events-month.current-month h2{
    margin:-26px -26px 20px;
    padding:16px 22px;

    border-radius:18px 18px 0 0;

    background:#eef5fb;
}

.events-month .current-month-badge{
    position:absolute;
    right:0;

    padding:5px 10px;

    border-radius:999px;

    background:var(--secondary);
    color:var(--white);

    font-size:.75rem;
    font-weight:700;
}