/* ===================================
   YEAR SELECTOR
=================================== */

.year-top-selector{
    font-size:28px;
    font-weight:500;
    color:#034EA1;
    position:relative;
    margin-bottom:20px;
}

.dropdown-years{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    border-radius:8px;
    box-shadow:0 6px 20px rgba(0,0,0,0.15);
}

@media(min-width:769px){
    .year-top-selector:hover .dropdown-years{
        display:block;
    }
}

.dropdown-years a{
    display:block;
    padding:8px 14px;
    text-decoration:none;
    color:#034EA1;
}

.dropdown-years a.active,
.dropdown-years a:hover{
    background:#034EA1;
    color:#fff;
}
.current-year{
    cursor:pointer;
    display:inline-block;
}

/* ===================================
   DESKTOP LAYOUT
=================================== */

.magazine-layout{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:40px;
}

.year-feature-card{
    width:280px;
    height:360px;
    border-radius:20px;
    background:#1456DB;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:38px;
    font-weight:700;
}

.month-grid{
    width:auto;
    display:grid;
    grid-template-columns:120px 120px;
    border-left:1px solid #ddd;
}

.month-cell{
    padding:18px 0;
    text-align:center;
    border-bottom:1px solid #ddd;
    border-right:1px solid #ddd;
    cursor:pointer;
}

.month-name{
    font-size:18px;
    color:#313131;
}
.month-cell.has-content .month-name{
    color:#fff !important;
}

.month-cell.has-content{
    background:#27a7c7;
    color:#fff;
    border-radius:6px;
}

/* ===================================
   MOBILE SIDE-BY-SIDE (LIKE IMAGE)
=================================== */

@media (max-width:768px){

    .magazine-layout{
        flex-direction:row;
        gap:12px;
    }

    .year-feature-card{
        width:42%;
        min-width:120px;
        height:300px;
        font-size:22px;
        border-radius:14px;
    }

    .year-card-inner{
        font-size:24px;
        line-height:1.2;
    }

    .month-grid{
        width:58%;
        grid-template-columns:1fr 1fr;
    }

    .month-cell{
        padding:12px 0;
    }

    .month-name{
        font-size:14px;
        font-style: 'Noto Sans', sans-serif;
    }
}

/* ACTIVE MONTH WHEN CLICK */
.month-cell.active-month{
    background:#15B1D7;
    color:#fff;
    border-radius:6px;
}

.month-cell.no-content{
    background:#f1f1f1;
    color:#aaa;
    cursor:default;
    pointer-events:none;
}