.container {
    width: 100%;
    max-width: 1220px;
    padding: 0 24px;
    margin: 0 auto;
}

.section {
    padding: 60px 0;
    padding-top: 0; /* Adjust for spacing below breadcrumbs */
}

/* Breadcrumbs */
.breadcrumbs {
    padding: 20px 0;
    font-size: 14px;
    color: var(--color-text-gray);
    margin-bottom: 40px;
}

    .breadcrumbs a {
        font-weight: 400;
        font-style: Regular;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0%;
        color: #000000E0;
        text-decoration: none;
    }


    .breadcrumbs span {
        margin: 0 5px;
    }

    .breadcrumbs .current {
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0%;
        color: #000000E0;
    }


.job-title {
    font-weight: 700;
    font-style: Bold;
    font-size: 28px;
    line-height: 100%;
    letter-spacing: 0%;
    margin-bottom: 24px;
}

.job-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 36px;
}

.meta-item {
    font-weight: 400;
    font-style: Regular;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #27201F;
}

.meta-icon {
    width: 20px;
    height: 20px;
    /* Apply red filter to make icons match screenshot if they are black SVGs */
    /* Only apply if the SVGs are not already red. Assuming they are standard assets (black/gray), we filter. */
    filter: invert(24%) sepia(87%) saturate(2469%) hue-rotate(345deg) brightness(88%) contrast(97%);
    /* Approximate filter for #DA291C */
}

.job-content-block {
    margin-bottom: 36px;
}

    .job-content-block h3 {
        font-weight: 700;
        font-style: Bold;
        font-size: 18px;
        line-height: 100%;
        letter-spacing: 0%;
        margin-bottom: 16px;
        color: #27201F;
    }

    .job-content-block ol {
        list-style-position: inside; /* Actually screenshot shows outside alignment, let's fix */
        list-style-type: decimal;
    }

        .job-content-block ol li {
            font-weight: 400;
            font-style: Regular;
            font-size: 16px;
            line-height: 100%;
            letter-spacing: 0%;
            line-height: 1.3;
            color: #27201F;
        }

    .job-content-block p {
        font-size: 16px;
        line-height: 1.6;
        color: #444444;
        margin-bottom: 8px;
    }

.email-link {
    color: var(--color-text-gray); /* Or inherit */
    text-decoration: underline;
    font-weight: 500;
    color: #444444;
}

.address-box {
    margin-top: 16px;
}

    .address-box p {
        font-weight: 400;
        font-style: Regular;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0%;
        margin-bottom: 4px;
    }

/* Related Positions */
.related-positions-block {
    margin-top: 80px;
}

    .related-positions-block .section-title {
        font-weight: 700;
        font-style: Bold;
        font-size: 28px;
        line-height: 100%;
        letter-spacing: 0%;
        margin-bottom: 24px;
    }

.positions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Reusing position styles but tweaking for this page context */
.position-card {
    min-height: 164px;
    background: #F7F7F7;
    border-radius: 4px; /* Screenshot looks slightly softer? Or 8px? */
    padding: 24px;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s;
    /* No border mentioned in screenshot for these cards, standard bg */
}

    .position-card:hover {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }

.card-content-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space out title and info */
    gap: 12px;
    flex: 1;
}

.pos-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary-black);
}

.pos-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-item {
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    color: #27201F;
}

    .info-item img {
        width: 16px;
        height: 16px;
        /* Red filter for these icons too */
        filter: invert(24%) sepia(87%) saturate(2469%) hue-rotate(345deg) brightness(88%) contrast(97%);
    }

.card-action-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

.apply-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #DA291C;
    text-decoration: none;
    font-weight: 500;
    font-size: 18px;
}

    .apply-link img {
        /* Apply red filter to arrow if needed, but if source SVG is black it needs filter. 
       If source SVG is red properties, no filter. 
       Assuming same assets as before which were likely black/gray.
    */
        filter: invert(24%) sepia(87%) saturate(2469%) hue-rotate(345deg) brightness(88%) contrast(97%);
        width: 16px;
        height: 16px;
    }

/* Responsive */
@media screen and (max-width: 1024px) {
    .job-details-section {
        height: auto; /* Allow auto height on smaller screens */
        padding-bottom: 60px;
    }

    .positions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .job-title {
        font-size: 24px;
    }

    .positions-grid {
        grid-template-columns: 1fr;
    }

    .job-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .position-card {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .card-action-right {
        width: 100%;
        justify-content: flex-start;
    }
}