/* =========================================
PAGE
========================================= */

.agenda-page{
    padding:60px 0 80px;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #f2f6fb 100%
        );
}

/* =========================================
WRAPPER
========================================= */

.agenda-wrapper{
    background:white;

    border-radius:32px;

    padding:40px;

    border:1px solid #e7edf5;

    box-shadow:
        0 12px 35px rgba(15,23,42,.05);
}

/* =========================================
HEADING
========================================= */

.agenda-heading{
    margin-bottom:30px;
}

.agenda-heading h3{
    font-size:36px;

    font-weight:800;

    color:#16315c;

    margin-bottom:10px;
}

.agenda-heading p{
    color:#64748b;

    font-size:16px;
}

/* =========================================
LIST
========================================= */

.agenda-list{
    display:flex;

    flex-direction:column;

    gap:24px;
}

/* =========================================
CARD
========================================= */

.agenda-card{
    display:flex;

    gap:26px;

    align-items:center;

    background:#f8fbff;

    border:1px solid #edf2f7;

    border-radius:26px;

    padding:24px;

    transition:.3s;
}

.agenda-card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 18px 35px rgba(15,23,42,.08);
}

/* =========================================
DATE
========================================= */

.agenda-date{
    width:120px;

    min-width:120px;

    height:120px;

    border-radius:24px;

    background:
        linear-gradient(
            180deg,
            #d9f99d 0%,
            #bef264 100%
        );

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;
}

.agenda-day{
    font-size:42px;

    font-weight:800;

    color:#166534;

    line-height:1;
}

.agenda-month{
    font-size:16px;

    font-weight:700;

    color:#15803d;

    margin-top:8px;
}

.agenda-year{
    font-size:14px;

    color:#15803d;

    margin-top:4px;
}

/* =========================================
CONTENT
========================================= */

.agenda-content h4{
    font-size:26px;

    line-height:1.6;

    font-weight:800;

    color:#16315c;

    margin-bottom:14px;
}

.agenda-category{
    display:flex;

    align-items:center;

    gap:10px;

    color:#64748b;

    font-size:15px;
}

.agenda-category i{
    color:#ef4444;
}

/* =========================================
CALENDAR
========================================= */

.calendar-wrapper{
    background:white;

    border-radius:32px;

    padding:30px;

    border:1px solid #e7edf5;

    box-shadow:
        0 12px 35px rgba(15,23,42,.05);

    height:fit-content;
}

.calendar-header{
    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:30px;
}

.calendar-header h5{
    font-size:22px;

    font-weight:800;

    color:#16315c;

    margin:0;
}

.calendar-header button{
    width:42px;
    height:42px;

    border:none;

    border-radius:14px;

    background:#eff6ff;

    color:#16315c;
}

.calendar-days{
    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:12px;

    margin-bottom:16px;

    text-align:center;

    font-size:14px;

    font-weight:700;

    color:#64748b;
}

.calendar-grid{
    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:12px;
}

.calendar-grid div{
    width:42px;
    height:42px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:14px;

    color:#64748b;

    transition:.3s;
}

.calendar-grid div:hover{
    background:#eff6ff;
}

.calendar-grid .active{
    background:#0d6efd;

    color:white;

    font-weight:700;
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:1200px){

    .agenda-card{
        flex-direction:column;

        align-items:flex-start;
    }

}

@media(max-width:768px){

    .agenda-page{
        padding:40px 0 60px;
    }

    .agenda-wrapper,
    .calendar-wrapper{
        padding:24px;
    }

    .agenda-heading h3{
        font-size:28px;
    }

    .agenda-content h4{
        font-size:20px;
    }

    .agenda-date{
        width:100px;
        height:100px;
    }

    .agenda-day{
        font-size:34px;
    }

}

.agenda-period{
    margin-top:8px;
    color:#64748b;
    font-size:.9rem;
}

.agenda-description{
    margin-top:12px;
    color:#475569;
    line-height:1.7;
}

.empty-agenda{
    background:#fff;
    border-radius:20px;
}