/* =========================================================
   HOME PAGE JOBS
========================================================= */

.home-jobs-grid {

    display: grid;

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

    gap: 38px;

    margin: 20px 45px 0;

}


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

.home-job-card {

    background: #ffffff;

    border: 1px solid #dbe3ec;

    border-radius: 12px;

    overflow: hidden;

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

}


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

.home-job-card__header {

    background: #2563eb;

    color: #ffffff;

    padding: 18px 16px 15px;

    min-height: 130px;

}


.home-job-card__top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}


.home-job-card__category {

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .2px;

}


/* =========================================================
   LIVE
========================================================= */

.home-job-card__live {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    background: #ffffff;

    color: #16a34a;

    border-radius: 999px;

    padding: 4px 9px;

    font-size: 11px;

    font-weight: 700;

    white-space: nowrap;

}


.home-job-card__live span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #22c55e;

}


/* Expired */

.home-job-card__expired {

    background: #ffffff;

    color: #dc2626;

    border-radius: 999px;

    padding: 4px 9px;

    font-size: 11px;

    font-weight: 700;

}


/* =========================================================
   TITLE
========================================================= */

.home-job-card__title {

    margin: 16px 0 0;

    color: #ffffff;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.35;

}


/* =========================================================
   BODY
========================================================= */

.home-job-card__body {

    padding: 16px;

}


/* =========================================================
   INFO
========================================================= */

.home-job-info {

    padding: 0 0 15px;

    margin-bottom: 15px;

    border-bottom: 1px solid #dbe7df;

}


.home-job-info__top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}


.home-job-info__top span,
.home-job-info__label {

    display: block;

    color: #64748b;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .4px;

    text-transform: uppercase;

}


.home-job-info__top strong {

    color: #16a34a;

    font-size: 12px;

    font-weight: 700;

}


.home-job-info__value {

    margin-top: 8px;

    color: #0f172a;

    font-size: 17px;

    font-weight: 700;

}


.home-job-info__text {

    margin-top: 5px;

    color: #334155;

    font-size: 12px;

    line-height: 1.5;

}


/* =========================================================
   QUALIFICATION
========================================================= */

.home-job-info__qualification {

    margin-top: 5px;

    color: #334155;

    font-size: 12px;

    line-height: 1.5;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;

    overflow: hidden;

    min-height: 54px;

}


/* =========================================================
   VACANCIES
========================================================= */

.home-job-vacancies {

    margin-bottom: 16px;

}


/* =========================================================
   BUTTONS
========================================================= */

.home-job-card__buttons {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px;

}


.home-job-details,
.home-job-apply {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 37px;

    border-radius: 6px;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    transition: .2s ease;

}


.home-job-details {

    background: #2563eb;

    color: #ffffff;

}


.home-job-details:hover {

    background: #1d4ed8;

}


.home-job-apply {

    background: #16a34a;

    color: #ffffff;

}


.home-job-apply:hover {

    background: #15803d;

}


/* =========================================================
   NO JOBS
========================================================= */

.home-no-jobs {

    text-align: center;

    padding: 40px 20px;

    background: #ffffff;

    border-radius: 12px;

    margin-top: 40px;

}


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

@media (max-width: 992px) {

    .home-jobs-grid {

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

    }

}


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

@media (max-width: 576px) {

    .home-jobs-grid {

        grid-template-columns: 1fr;

        gap: 16px;

    }


    .home-job-card__header {

        padding: 16px 15px 18px;

    }


    .home-job-card__title {

        font-size: 17px;

    }


    .home-job-card__body {

        padding: 15px;

    }

}