/* JP-434 — mobile contact-box (#kontaktieren / #contact HubSpot module).
 *
 * The desktop contact row is `display:flex; flex-wrap:nowrap` with a fixed 350px
 * left column and the form in the right column; below lg it must WRAP so both
 * columns go full-width and the form has room. The rules below do that.
 *
 * SPECIFICITY NOTE: every selector is prefixed with `#app` on purpose. On boxes
 * still served the OLD id-scoped contact rules (`#kontaktieren .row .row.basic-br
 * { flex-wrap:nowrap !important }` in custom-clone.css, specificity 1,3,0) a bare
 * `.row.basic-br:has(.container-contact)` rule (0,3,0) loses even with !important,
 * so the row never wraps and the form collapses on mobile (prod, plentyone
 * comparison pages). `#app` raises this to 1,3,0 and wins on load order (overrides
 * load after custom-clone.css). Harmless where custom-clone.css was already
 * refactored to the language-neutral `.container-contact` selector (staging).
 */
@media (max-width: 991.98px) {

    /* Stack the two columns instead of the fixed 350px + 262px-gap desktop row. */
    #app .row.basic-br:has(.container-contact) {
        flex-wrap: wrap !important;
        padding-bottom: 0 !important;
    }
    #app .row.basic-br:has(.container-contact) > .col-lg-6:first-child,
    #app .row.basic-br:has(.container-contact) > .col-lg-6 {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Drop the desktop right-side light-blue band (leaves the stacked form over navy). */
    #app .row.basic-br:has(.container-contact)::before {
        display: none !important;
    }

    /* Full-bleed Light Blue form panel: negative 64px margins cancel the card's
       64px horizontal padding so the panel reaches the rounded card edges. */
    #app .row.basic-br:has(.container-contact) > .col-lg-6.container-contact {
        position: relative !important;
        overflow: visible !important;
        background-color: #89D2FF !important;
        flex: 0 0 auto !important;
        width: calc(100% + 128px) !important;
        max-width: none !important;
        margin-left: -64px !important;
        margin-right: -64px !important;
        padding-left: 64px !important;
        padding-right: 64px !important;
        padding-bottom: 8px !important;
        border-radius: 0 !important;
    }

    /* Horizontal curved top edge for the Light Blue panel (navy -> light-blue). */
    #app .row.basic-br:has(.container-contact) > .col-lg-6.container-contact::before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: calc(-20vw + 1px) !important;
        height: 20vw !important;
        background-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20viewBox%3D%220%200%201000%20204%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%2C204%20L37%2C184%20L74%2C163%20L110%2C143%20L147%2C122%20L184%2C102%20L220%2C82%20L257%2C61%20L294%2C43%20L331%2C29%20L367%2C16%20L404%2C8%20L441%2C2%20L478%2C0%20L514%2C0%20L551%2C2%20L588%2C8%20L625%2C14%20L661%2C27%20L698%2C39%20L735%2C57%20L771%2C78%20L808%2C98%20L845%2C118%20L882%2C139%20L918%2C159%20L955%2C180%20L992%2C202%20L1000%2C204%20Z%22%20fill%3D%22%2389D2FF%22%2F%3E%3C%2Fsvg%3E") !important;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
        pointer-events: none !important;
    }

    /* Form copy is navy on the Light Blue panel (default form text is light). */
    #app .row.basic-br:has(.container-contact) > .col-lg-6.container-contact label,
    #app .row.basic-br:has(.container-contact) > .col-lg-6.container-contact legend,
    #app .row.basic-br:has(.container-contact) > .col-lg-6.container-contact p,
    #app .row.basic-br:has(.container-contact) > .col-lg-6.container-contact .hs-richtext,
    #app .row.basic-br:has(.container-contact) > .col-lg-6.container-contact .hs-field-desc {
        color: #0B1B45 !important;
    }
}