/*==================================================
    UPCOMING EXAMS
==================================================*/

.gjp-upcoming-section{

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:18px;

    padding:20px;

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

    width:calc(100% - 26px);

}

.gjp-upcoming-exams{

    display:flex;

    flex-direction:column;

}

/*==================================================
HEADER
==================================================*/

.gjp-section-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:18px;

}

.gjp-section-title{

    margin:0;

    display:flex;

    align-items:center;

    gap:8px;

    font-size:24px;

    font-weight:700;

    color:#1e293b;

}

.gjp-heading-subtitle{

    font-size:14px;

    font-weight:500;

    color:#94a3b8;

}

.gjp-view-all-link{

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    color:#2563eb;

}

.gjp-view-all-link:hover{

    color:#1d4ed8;

}

/*==================================================
GRID
==================================================*/

.gjp-upcoming-grid{

    display:grid;

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

    gap:10px;

}
/*==================================================
    UPCOMING CARD
==================================================*/

.gjp-upcoming-card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    text-align:center;

    background:#ffffff;

    border:1px solid #edf2f7;

    border-radius:16px;

    padding:16px 8px;

    min-height:125px;

    max-width:145px;

    width:100%;

    margin:0 auto;

    overflow:hidden;

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

    box-shadow:
        0 2px 8px rgba(15,23,42,.04);

}

/*=============================================
Hover
=============================================*/

.gjp-upcoming-card:hover{

    transform:translateY(-3px);

    border-color:#dbeafe;

    box-shadow:
        0 10px 24px rgba(15,23,42,.08);

}

/*=============================================
Keyboard Focus
=============================================*/

.gjp-upcoming-card:focus-within{

    border-color:#2563eb;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.12);

}

/*=============================================
Content
=============================================*/

.gjp-upcoming-card>*{

    width:100%;

    position:relative;

    z-index:2;

}

.gjp-upcoming-card>*:last-child{

    margin-bottom:0;

}
/*==================================================
    DAYS NUMBER
==================================================*/

.gjp-days{

    margin:0;

    font-size:30px;

    font-weight:800;

    line-height:1;

    letter-spacing:-.5px;

    color:#2563eb;

}

/*==================================================
    DAYS LEFT
==================================================*/

.gjp-days-text{

    margin:3px 0 8px;

    font-size:10px;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

    color:#94a3b8;

}

/*==================================================
    EXAM NAME
==================================================*/

.gjp-exam-name{

    margin:0;

    font-size:14px;

    font-weight:600;

    line-height:1.30;

    color:#1e293b;

    text-align:center;

    transition:color .25s ease;

}

.gjp-upcoming-card:hover .gjp-exam-name{

    color:#2563eb;

}

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

.gjp-exam-date{

    margin-top:6px;

    font-size:11px;

    font-weight:500;

    color:#64748b;

    line-height:1.3;

}

.gjp-upcoming-card:hover .gjp-exam-date{

    color:#475569;

}

/*==================================================
    ALIGNMENT
==================================================*/

.gjp-days,
.gjp-days-text,
.gjp-exam-name,
.gjp-exam-date{

    width:100%;

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

/*==============================
    LAPTOP
==============================*/

@media (max-width:1200px){

    .gjp-upcoming-grid{

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

        gap:14px;

    }

    .gjp-section-title{

        font-size:22px;

    }

    .gjp-heading-subtitle{

        font-size:13px;

    }

    .gjp-upcoming-card{

        min-height:130px;

        padding:16px;

    }

    .gjp-days{

        font-size:32px;

    }

}

/*==============================
    TABLET
==============================*/

@media (max-width:768px){

    .gjp-section-header{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

    .gjp-view-all-link{

        margin-left:auto;

    }

    .gjp-upcoming-grid{

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

        gap:12px;

    }

}

/*==============================
    MOBILE
==============================*/

@media (max-width:576px){

    .gjp-upcoming-grid{

        grid-template-columns:1fr;

    }

    .gjp-upcoming-card{

        min-height:120px;

    }

    .gjp-section-title{

        font-size:20px;

    }

    .gjp-heading-subtitle{

        font-size:12px;

    }

    .gjp-days{

        font-size:28px;

    }

    .gjp-exam-name{

        font-size:14px;

    }

    .gjp-exam-date{

        font-size:11px;

    }

}
/*==================================================
    ACCESSIBILITY & PERFORMANCE
==================================================*/

/* Smooth rendering */
.gjp-upcoming-card,
.gjp-view-all-link{

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

}

/* Keyboard accessibility */
.gjp-view-all-link:focus-visible,
.gjp-upcoming-card:focus-visible{

    outline:2px solid #2563eb;
    outline-offset:3px;

}

/* Reduce animations for users who prefer it */
@media (prefers-reduced-motion: reduce){

    .gjp-upcoming-card,
    .gjp-view-all-link{

        transition:none !important;
        animation:none !important;

    }

}

/* Print */
@media print{

    .gjp-upcoming-section{

        box-shadow:none;
        border:1px solid #d1d5db;

    }

    .gjp-upcoming-card{

        box-shadow:none;
        transform:none !important;

    }

}