/**
 * jp-471-jobs.css — /de/jobs/ page follow-up fixes (JP-471)
 *
 * Scope: ONLY `body.page-id-8337` (/de/jobs/).
 * Page:  https://dev-jtl-nguyenvtk-2.betterscale.dev/de/jobs/
 * Figma: VSSY3wxlC31HrYDwwmHmrv node 351:6708 (Infobox mit Bild)
 * Jira:  JP-471 (sub-task under JP-433) — Done; this sheet is a
 *        post-merge responsive follow-up.
 *
 * Fix: the "Wir sind bereit für die nächsten Schritte…" CTA card
 *      (`section.product-cta-section.green .product-subcard-widget`)
 *      stacks text-over-image below the md breakpoint, but the image
 *      keeps its intrinsic ~282px width and floats right inside the
 *      now-full-width column, leaving a big empty gap on the left (and
 *      bleeding the card edge in the 500–767px band). The custom-clone
 *      `img { width:100% }` rule loses because the picture/flex wrapper
 *      doesn't stretch the img. Force the image to fill the card width
 *      with a fixed height + object-fit cover when stacked, and soften
 *      the inline `margin-top:-102px` so the card doesn't overlap the
 *      section above on small screens.
 */

@media (max-width: 991.98px) {
    body.page-id-8337 section.product-cta-section.green .product-subcard-widget {
        max-width: 100% !important;
        margin-top: -48px !important;
    }
    /* Image column fills the card width when stacked. The custom-clone
       rule sets the wrapper `display:flex; align-items:center`, which
       centers the picture at its intrinsic ~282px instead of stretching
       it — flip to block so `width:100%` on the picture/img fills. */
    body.page-id-8337 section.product-cta-section.green .product-subcard-widget__image-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 16px 0 0 !important;
        padding: 0 !important;
    }
    body.page-id-8337 section.product-cta-section.green .product-subcard-widget__image-wrapper picture {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;   /* widget caps the picture at 282px + auto margins -> right-offset */
        margin: 0 !important;
    }
    body.page-id-8337 section.product-cta-section.green .product-subcard-widget__image-wrapper img {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
        object-position: center 25% !important;
        border-radius: 12px !important;
        display: block !important;
    }
}