/* Careers pages: CTA pairs, video poster + lightbox, inquiry form, sidebar hiring box */

.careers-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: clamp( 10px, 0.625vw, 12px ) clamp( 12px, 0.833vw, 16px );
    margin: clamp( 20px, 1.667vw, 32px ) 0;
}

.careers-ctas .btn {
    margin: 0;
}

/* Sitewide .btn-orange:hover uses margin: -5px auto 5px; auto margins slide flex items, so keep only the lift */
.careers-ctas .btn.btn-orange:hover {
    margin: -5px 0 5px;
}

/* Secondary CTA: outlined version of the site button */
.careers-ghost {
    background-color: transparent;
    border: 2px solid currentColor;
    border-radius: 26px;
    color: #2b3034;
}

.careers-ghost:hover,
.careers-ghost:focus-visible {
    background-color: #202722;
    border-color: #202722;
    color: #fff;
}

.careers-vid {
    float: right;
    width: min( 42%, 340px );
    margin: 6px 0 clamp( 16px, 1.042vw, 20px ) clamp( 20px, 1.458vw, 28px );
    text-align: center;
}

.careers-vid-link {
    position: relative;
    display: block;
    margin-bottom: clamp( 12px, 0.729vw, 14px );
}

.careers-vid-link img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* Keep the floated video inside its own section */
.entry h2 {
    clear: both;
}

/* Center the sitewide popVid play button over the poster */
.careers-vid-link.popVid::after {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: 72px;
    height: 72px;
    font-size: 24px;
    background-color: rgba( 0, 0, 0, 0.45 );
    transform: translate( -50%, -50% );
}

.careers-vid .btn {
    margin: 0;
}

/* Vertical (Shorts) video in the Magnific lightbox */
.careers-mfp-vertical .mfp-iframe-holder .mfp-content {
    max-width: min( 92vw, calc( ( 100vh - 100px ) * 0.5625 ) );
}

.careers-mfp-vertical .mfp-iframe-scaler {
    padding-top: 177.78%;
}

.careers-apply {
    clear: both;
    margin-top: clamp( 32px, 2.5vw, 48px );
    padding: clamp( 24px, 2.083vw, 40px );
    background-color: #f4f4f1;
    scroll-margin-top: 160px;
}

.careers-apply h2 {
    margin-top: 0;
}

.careers-apply .wpcf7-form label,
.careers-apply .wpcf7-form legend {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.careers-apply .wpcf7-form fieldset {
    margin: 0 0 clamp( 14px, 0.938vw, 18px );
    padding: 0;
    border: 0;
}

.careers-apply .wpcf7-form .field {
    margin-bottom: clamp( 14px, 0.938vw, 18px );
}

.careers-apply .wpcf7-form input[type="text"],
.careers-apply .wpcf7-form input[type="tel"],
.careers-apply .wpcf7-form input[type="email"],
.careers-apply .wpcf7-form input[type="date"],
.careers-apply .wpcf7-form textarea {
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    padding: clamp( 8px, 0.521vw, 10px ) clamp( 12px, 0.729vw, 14px );
    border: 1px solid #b9bbb5;
    background-color: #fff;
    font-size: 16px;
}

.careers-apply .wpcf7-form textarea {
    height: 120px;
}

.careers-apply .wpcf7-form-control.wpcf7-radio,
.careers-apply .wpcf7-form-control.wpcf7-checkbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.careers-apply .wpcf7-list-item {
    margin: 0 clamp( 14px, 0.938vw, 18px ) 8px 0;
}

.careers-apply .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    font-weight: 400;
}

.careers-apply .wpcf7-list-item input {
    width: 20px;
    height: 20px;
    margin: 0;
}

.careers-apply .wpcf7-form .grid {
    display: grid;
    grid-template-columns: repeat( 3, 1fr );
    gap: 0 clamp( 16px, 1.042vw, 20px );
}

.careers-apply .wpcf7-form .hint {
    margin: 4px 0 0;
    font-size: 14px;
}

.careers-apply .wpcf7-submit {
    margin-top: 8px;
}

.careers-side {
    color: #2b3034;
}

.careers-side-body {
    padding: clamp( 16px, 1.042vw, 20px );
}

.careers-side-body .careers-ctas {
    flex-direction: column;
    margin-bottom: 0;
}

.careers-side-body .btn {
    width: 100%;
    text-align: center;
}

@media ( max-width: 1024px ) {
    .careers-apply .wpcf7-form .grid {
        grid-template-columns: 1fr;
    }
}

@media ( max-width: 768px ) {
    .careers-vid {
        float: none;
        width: 100%;
        max-width: 400px;
        margin: 0 auto 24px;
    }

    .careers-ctas .btn {
        flex: 1 1 100%;
        text-align: center;
    }
}