/**
 * jp-725-dealavo-detached-card.css — Price-Monitoring "Dealavo Repricing" section.
 *
 * Ticket: JP-725 — "Dealavo Repricing section does not match the design".
 * Pages:  https://b376u019-a.myrdbx.io/de/preismonitoring-software/  (page-id 233175)
 *         https://b376u019-a.myrdbx.io/en/price-monitoring-software/ (page-id 262979)
 * Figma:  JTL Website Modules → node 248:6706 ("Link-Box-Desktop").
 *
 * Styling already matched the redesign (JP-445/JP-674). The remaining gap is
 * LAYOUT: the shared PREISE module renders the highlight (cyan) card NESTED
 * inside a full-width navy card; Figma 248:6706 shows two DETACHED cards on the
 * light-sand background — a navy text card (~62%) and a separate highlight card
 * (fills the rest), 32px gap, both radius 46px, padding 46px, equal height.
 *
 * The cyan card is nested deep in the DOM (.card > .card-body > .row >
 * .col-lg-6), so CSS cannot re-parent it. Instead we shrink the navy .card to
 * ~62% (it keeps the eyebrow/title/body/CTA) and lift the cyan column OUT of the
 * card's flow with absolute positioning, dropping it on the sand to the right.
 * Page-scoped (the module stays nested on every other product page).
 *
 * Live DOM:
 *   section.product-support-section.green            (sand bg, pad 80 0)
 *     .container                                      (pad 64 60)
 *       .row.no-gutters > .col-lg-12
 *         .basic-card-widget.card                     (navy, r46, p64)
 *           .card-body (flex col)
 *             .product-support-section__title-wrapper (eyebrow + title)
 *             .row
 *               .col-lg-6               (body text + CTA)
 *               .col-lg-6.mt-8 …        (holds .product-subcard-widget = cyan)
 */

/* Positioning context = the .col-lg-12 that wraps the card, so the lifted cyan
   card's percentages/offsets are measured against the card's own track (lets us
   express the 24px inter-card gap exactly). Everything between it and the cyan
   column stays static so the anchor is col-lg-12. */
body:is(.page-id-233175, .page-id-262979)
    section.product-support-section.green .col-lg-12 {
    position: relative !important;
}
body:is(.page-id-233175, .page-id-262979)
    section.product-support-section.green .container,
body:is(.page-id-233175, .page-id-262979)
    section.product-support-section.green .row.no-gutters,
body:is(.page-id-233175, .page-id-262979)
    section.product-support-section.green .basic-card-widget.card,
body:is(.page-id-233175, .page-id-262979)
    section.product-support-section.green .basic-card-widget.card .card-body,
body:is(.page-id-233175, .page-id-262979)
    section.product-support-section.green .basic-card-widget.card .card-body > .row {
    position: static !important;
}

/* The inner .row ships Bootstrap's -15px side margins, which pulled the body
   copy + CTA 15px LEFT of the eyebrow/title (which sit in the title-wrapper, a
   plain block at the card's padding edge). Zero the row margins so the body copy
   and CTA left-align with the heading. */
body:is(.page-id-233175, .page-id-262979)
    section.product-support-section.green .basic-card-widget.card .card-body > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Navy card → left 62% track, padding 32px vertical / 40px horizontal.
   overflow visible so the detached card shows outside. */
body:is(.page-id-233175, .page-id-262979)
    section.product-support-section.green .basic-card-widget.card {
    width: 62% !important;
    max-width: 62% !important;
    margin: 0 !important;
    padding: 32px 40px !important;
    overflow: visible !important;
}

/* Left text column takes the full navy-card width (cyan column is now absolute). */
body:is(.page-id-233175, .page-id-262979)
    section.product-support-section.green .basic-card-widget.card .card-body > .row > .col-lg-6:first-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* Cyan column → lifted out of the navy card, dropped on the sand to the right.
   Anchored to .col-lg-12: left = navy width (62%) + 24px gap; right = 0 (card
   track edge); top/bottom = 0 so its height matches the navy card (equal-height). */
body:is(.page-id-233175, .page-id-262979)
    section.product-support-section.green .basic-card-widget.card .card-body > .row > .col-lg-6:last-child {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: calc(62% + 24px) !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
}

/* The highlight (cyan) sub-card fills the lifted column; padding 32/40, radius 46. */
body:is(.page-id-233175, .page-id-262979)
    section.product-support-section.green .basic-card-widget.card .product-subcard-widget {
    box-sizing: border-box !important;   /* so width:100% + 40px padding fits the column (no overflow / shift) */
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 32px 40px !important;
    border-radius: 46px !important;
    transform: none !important;   /* the instance style applies a translateX(~21px) that broke the 24px gap */
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Mobile / tablet: restore the normal stacked flow (Figma detach is desktop). */
@media (max-width: 991.98px) {
    body:is(.page-id-233175, .page-id-262979)
        section.product-support-section.green .basic-card-widget.card {
        width: 100% !important;
        max-width: 100% !important;
    }
    body:is(.page-id-233175, .page-id-262979)
        section.product-support-section.green .basic-card-widget.card .card-body > .row > .col-lg-6:last-child {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body:is(.page-id-233175, .page-id-262979)
        section.product-support-section.green .basic-card-widget.card .card-body > .row > .col-lg-6:first-child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}