/* Careers pages (career.php, job-roofer.php): extras on top of solar-roof.css. All rules scoped under .sr-page. */

/* Photos that are not 4:3: show them whole instead of cropping */
.sr-page .sr-section-media > img.sr-natural {
    aspect-ratio: auto;
    object-fit: contain;
}

/* Quote band */
.sr-page .sr-quote {
    padding: 2.5em 0;
    text-align: center;
}

.sr-page .sr-quote h2 {
    font-size: var(--fs-2xl);
    line-height: 1.3;
    margin: 0 auto;
    max-width: 30em;
}

/* Job opening list */
.sr-page .sr-job-list {
    margin-top: 1.5em;
}

.sr-page .sr-job-list > li > a:first-child {
    font-size: var(--fs-xl);
}

.sr-page .sr-job-list p {
    margin: 0.75em 0 0 0;
}

/* Gallery + application button */
.sr-page .sr-section h3.sr-lead {
    font-size: var(--fs-xl);
    max-width: 40em;
}

.sr-page .sr-gallery {
    gap: 1em;
}

/* The photos carry a soft white feathered edge: crop it off */
.sr-page .sr-gallery img {
    aspect-ratio: 4 / 3;
    object-view-box: inset(9% 8%);
}

.sr-page .sr-apply {
    margin: 2em 0 0 0;
}

.sr-page .sr-apply a.sr-btn {
    margin: 0;
}

/* Benefits: fixed icon boxes, labels on one baseline, last row centred */
.sr-page .sr-benefits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2em;
    row-gap: 2.5em;
}

.sr-page .sr-benefit {
    flex: 0 0 25%;
    max-width: 25%;
    box-sizing: border-box;
    padding: 0 0.75em;
    text-align: center;
}

.sr-page .sr-benefit img {
    display: block;
    width: 112px;
    height: 112px;
    object-fit: contain;
    margin: 0 auto 0.75em auto;
    background-color: #ffffff;
    border-radius: 50%;
}

.sr-page .sr-section .sr-benefit p {
    margin: 0 auto;
    font-weight: 600;
    line-height: 1.35;
}

/* Job page: article column lines up with the hero title */
.sr-page .sr-article {
    margin: 0;
}

.sr-page .sr-section .sr-article > :first-child {
    margin-top: 0;
}

.sr-page .sr-article p + ul {
    margin-top: 0.75em;
}

@media (max-width: 767px) {
    .sr-page .sr-quote h2 {
        font-size: 1.5rem;
    }

    .sr-page .sr-job-list > li > a:first-child {
        font-size: var(--fs-lg);
    }

    .sr-page .sr-section h3.sr-lead {
        font-size: 1.375rem;
    }

    .sr-page .sr-section .sr-article h2 {
        font-size: 1.25rem;
        overflow-wrap: break-word;
    }

    .sr-page .sr-benefit {
        flex-basis: 50%;
        max-width: 50%;
        padding: 0 0.5em;
    }

    .sr-page .sr-benefit img {
        width: 96px;
        height: 96px;
    }

    .sr-page .sr-apply a.sr-btn {
        display: block;
    }
}