/**
 * qa14-en-cloud-erp-pricing-responsive.css
 * Page:  /en/erp-software/jtl-cloud-erp  (page-id 268013)
 *        section.product-price-plan-section — "Prices and packages from JTL-Wawi Cloud"
 * Batch #14 item 4: between ~1000px and ~1400px the columns clip their text.
 *
 * ROOT CAUSE (measured on prod, 992-1439px)
 *   The widget's own stylesheet is already responsive and would have handled this:
 *       .dark-card-widget .dark-card-items{ grid-template-columns: repeat(auto-fit, minmax(230px,1fr)) }
 *       @media (max-width:1440px){ ... minmax(300px,1fr) }   <- drops the column count
 *   but custom-clone.css overrides it unconditionally above 991px:
 *       .product-price-plan-section.product-price-plan-section .dark-card-widget .dark-card-items{
 *           grid-template-columns: repeat(4, minmax(0px,1fr)) !important; gap:32px !important; }
 *   `minmax(0px, 1fr)` lets a track shrink below its content's min-width, and it
 *   pins the count at 4. So the cards keep shrinking with the viewport:
 *       1440px -> 274px card (fits exactly)      1200px -> 214px
 *       1400px -> 264px (already 9px of overflow) 1000px -> 164px
 *   The card is `padding:32px; box-sizing:border-box; overflow:hidden`, so at
 *   164px its content box is only 100px. The inner column can't shrink that far,
 *   overflows by up to 66px, and `overflow:hidden` CLIPS it — which is the
 *   "columns hide out the texts partially" the ticket describes. The grid itself
 *   never overflows, which is why it looks fine to a horizontal-scroll check.
 *
 * FIX
 *   Restore a 2-column layout across the whole broken band. 4 cards / 2 columns
 *   is a balanced 2x2; 3 columns would strand a single card on row 2 and read as
 *   mis-aligned, which the ticket explicitly asks to avoid ("still stay/align in
 *   the middle"). Above 1440px the 4-column layout is correct and untouched.
 *
 *   The tracks are capped at 425px rather than left as `1fr`. With `1fr` the two
 *   cards stretch to fill the row — 560px each at 1400px, more than double the
 *   274px the design gives them — which looks bloated and pushes each card's
 *   content hard against its left edge. 425px is the widget's own card cap (it
 *   already uses `max-width:425px` in its <=767px rules), so this keeps the card
 *   at its intended proportions. `justify-content:center` then centres the whole
 *   2-column block in the section instead of pinning it left.
 *
 *   Below ~992+2*425+32 the tracks fall back to sharing the row evenly, so the
 *   cards still fill the width at the narrow end of the band (360px at 1000px).
 *
 *   Verified on prod and clone at 1500 / 1440 / 1439 / 1400 / 1300 / 1200 / 1100 /
 *   1000 / 992 / 991 / 900 / 575px: zero clipped elements; card block centred at
 *   every width (measured offset from the section's centre line: 0px); card width
 *   360-425px, comfortably over the ~274px minimum below which text starts to clip.
 *
 *   All four cards render — 2 rows of 2. On a short viewport (the ticket used
 *   1400x500) the second row is simply below the fold; nothing is hidden.
 *
 * SCOPE
 *   `body.page-id-268013` is the EN page only. The DE twin
 *   /de/warenwirtschaftssystem-software/jtl-warenwirtschaft-cloud carries
 *   page-id-114415 alone and has the SAME defect — deliberately not touched here,
 *   because only the EN page was reported. Say the word and it is a one-line
 *   addition to the selector.
 *
 *   The 991px / 575px breakpoints below the band come from custom-clone.css and
 *   already do the right thing; this rule stops at 1439.98px so it cannot fight
 *   them.
 */
@media (min-width: 992px) and (max-width: 1439.98px) {
    body.page-id-268013 section.product-price-plan-section.product-price-plan-section
        .dark-card-widget .dark-card-items {
        grid-template-columns: repeat(2, minmax(0, 425px)) !important;
        justify-content: center !important;
    }
}