/* ============================================
   Job Details Card - Figma Design
   ============================================ */

.job-details-card {
    background-color: var(--white, #ffffff);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-job-card, 0px 2px 30px 0px rgba(0, 0, 0, 0.08));
    padding: var(--spacing-lg, 24px) var(--spacing-xl, 32px);
    margin-bottom: var(--spacing-lg, 24px);
}

/* Job Title */
.job-details-card__title {
    font-family: var(--font-heading, 'Bebas Neue', sans-serif);
    font-size: var(--font-size-h3, 33px);
    font-weight: 800;
    line-height: var(--line-height-h3, 40px);
    color: var(--blue, #4982b9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--spacing-md, 16px) 0;
}

/* Separator Line */
.job-details-card__separator {
    border: none;
    border-bottom: 1px solid #e0e0e0;
    margin: 0 0 var(--spacing-lg, 24px) 0;
}

/* Job Details Grid */
.job-details-card__details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md, 16px) var(--spacing-xl, 32px);
    margin-bottom: var(--spacing-lg, 24px);
}

/* Job Detail Item */
.job-details-card__detail {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: var(--spacing-xs, 4px);
}

.job-details-card__detail-label {
    font-family: var(--font-body, arial, helvetica, sans-serif);
    font-size: var(--font-size-body, 17px);
    font-weight: 700;
    line-height: var(--line-height-body, 24px);
    color: var(--grey-body-text, #444444);
}

.job-details-card__detail-value {
    font-family: var(--font-body, arial, helvetica, sans-serif);
    font-size: var(--font-size-body, 17px);
    font-weight: 400;
    line-height: var(--line-height-body, 24px);
    color: var(--grey-body-text, #444444);
}

/* Apply Button */
.job-details-card__apply-button {
    display: inline-block;
    background-color: var(--aqua, #27e0d0);
    color: var(--white, #ffffff);
    font-family: var(--font-body, arial, helvetica, sans-serif);
    font-size: var(--font-size-body, 17px);
    font-weight: 700;
    line-height: var(--line-height-body, 24px);
    padding: 14px 28px;
    border: none;
    border-radius: var(--radius-sm, 4px);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: center;
}

.job-details-card__apply-button:hover {
    background-color: #22c9bb;
    color: var(--white, #ffffff);
}

.job-details-card__apply-button:focus {
    outline: 2px solid var(--aqua, #27e0d0);
    outline-offset: 2px;
}

.job-details-card__apply-button:active {
    background-color: #1fb3a6;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .job-details-card__details {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .job-details-card {
        padding: var(--spacing-md, 16px);
    }
    
    .job-details-card__title {
        font-size: var(--font-size-h4, 24px);
        line-height: var(--line-height-h4, 28px);
    }
    
    .job-details-card__details {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm, 8px);
    }
    
    .job-details-card__detail-label,
    .job-details-card__detail-value {
        font-size: var(--font-size-job-info, 16px);
        line-height: var(--line-height-job-info, 24px);
    }
    
    .job-details-card__apply-button {
        width: 100%;
        font-size: var(--font-size-job-info, 16px);
    }
}