/* ============================================================================
   jp-wawi-cloud-inbetriebnahme.css
   /de/warenwirtschaftssystem-software/jtl-warenwirtschaft-cloud/  (page-id 114415)
   Section: "Inbetriebnahme & Projektbegleitung" (section.product-support-section.orange)

   Complaint: in this two-column card the LEFT text sits in a 6/12 column of a
   FULL-WIDTH navy card, so the copy is cramped to ~50% while the right half looks
   empty — because the sky-blue sub-card ("Individuelle Hosting-Angebote") had
   turned navy (navy text on navy bg = invisible).

   This is the same PREISE two-card module handled on the einkauf/pim pages
   (preise-two-card-einkauf-pim.css, Figma 248:6706). This page never got the
   treatment. Apply the identical DETACHED two-card layout here, page-scoped, so:
     - the navy card shrinks to the left ~64% and the text spans its FULL width
       (no longer a cramped 6/12 column), and
     - the sub-card lifts out to a separate light-blue highlight card on the
       right ~33%.

   DOM (desktop): .container > .row.no-gutters > .col-lg-12 > .basic-card-widget
   (navy) > .card-body > .row > .col-lg-6 (text) + .col-lg-6 …pr-lg-5
   (.product-subcard-widget). Purely visual, page-scoped, reversible.
   ============================================================================ */

@media (min-width: 992px) {

  /* Outer row is the positioning context for the lifted sub-card. */
  body.page-id-114415 .product-support-section .container > .row.no-gutters {
      position: relative !important;
  }

  /* Neutralise intermediate positioning so the sub-card anchors to the outer row. */
  body.page-id-114415 .product-support-section .basic-card-widget,
  body.page-id-114415 .product-support-section .basic-card-widget .card-body,
  body.page-id-114415 .product-support-section .basic-card-widget .card-body > .row,
  body.page-id-114415 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6 {
      position: static !important;
  }

  /* Navy card shrinks to the left ~64%, padding 40, radius 46. */
  body.page-id-114415 .product-support-section .basic-card-widget {
      width: 64% !important;
      max-width: 64% !important;
      padding: 40px !important;
      border-radius: 46px !important;
      overflow: visible !important;
  }

  /* Kill the global .orange card-body 64px padding (custom-clone.css §12615) so it
     doesn't compound on the card's 40px (=104px inset, oversized card). */
  body.page-id-114415 .product-support-section .basic-card-widget .card-body {
      padding: 0 !important;
  }

  /* Text column spans the full width of the (narrower) navy card — the fix for
     "the left text is too narrow". */
  body.page-id-114415 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6:first-child {
      flex: 0 0 100% !important;
      max-width: 100% !important;
      padding-right: 0 !important;
  }
  body.page-id-114415 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6:first-child > div {
      max-width: 100% !important;
  }

  /* Lift the sub-card out to a full-height highlight card on the right ~33%. */
  body.page-id-114415 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6:nth-child(2) .product-subcard-widget {
      position: absolute !important;
      top: 0 !important;
      bottom: 0 !important;
      right: 0 !important;
      left: auto !important;
      width: 33% !important;
      max-width: 33% !important;
      min-width: 0 !important;
      margin: 0 !important;
      transform: none !important;
      border-radius: 46px !important;
      padding: 40px !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
  }
}

/* Sub-card colour: it had gone navy (#0b1b45) on navy = invisible. Restore the
   light-blue highlight look with dark text, page-scoped so no other .orange
   sub-card is touched (that colour is a known cross-page cascade minefield). */
body.page-id-114415 .product-support-section .product-subcard-widget {
    background: #89d2ff !important;
    background-color: #89d2ff !important;
}
body.page-id-114415 .product-support-section .product-subcard-widget,
body.page-id-114415 .product-support-section .product-subcard-widget p,
body.page-id-114415 .product-support-section .product-subcard-widget li,
body.page-id-114415 .product-support-section .product-subcard-widget h2,
body.page-id-114415 .product-support-section .product-subcard-widget h3,
body.page-id-114415 .product-support-section .product-subcard-widget h4,
body.page-id-114415 .product-support-section .product-subcard-widget strong,
body.page-id-114415 .product-support-section .product-subcard-widget a {
    color: #0b1b45 !important;
    -webkit-text-fill-color: #0b1b45 !important;
}

/* Mobile / tablet: restore the normal stacked flow (detach is desktop only). */
@media (max-width: 991.98px) {
    body.page-id-114415 .product-support-section .basic-card-widget {
        width: 100% !important;
        max-width: 100% !important;
    }
    body.page-id-114415 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6:nth-child(2) .product-subcard-widget {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
    }
}