/**
 * jp-556-versandsoftware.css — /de/versandsoftware/ (page id 233046)
 * Client feedback C15 (review 2026-06-02), entry #109, JP-556.
 *
 * Page:   https://dev-jtl-nguyenvtk.betterscale.dev/de/versandsoftware/
 * Widget: CompaniesGallery → `.product-payments-section.green`
 *         ("Out-of-the-box versandbereit: Alle Versanddienstleister in einem System")
 *
 * Two client findings on this one section, both page-scoped here.
 *
 * ── Finding 1: headline breaks badly (desktop / xl only) ─────────────────────
 * The navy-curve 2-column layout only exists at ≥1200px, where the headline sits
 * in a `col-xl-5` column (≈40% of the card). This page's headline is far longer
 * than the other instances of this widget, and the bold first line
 * "Out-of-the-box versandbereit:" (Kurdis-Wide 32px ≈ 622px) does not fit the
 * narrow column, so it wraps mid-phrase → "Out-of-the-box" / "versandbereit:"
 * and the whole block becomes 5 ragged lines.
 *   Below 1200px the columns are `col-lg-12` (stacked, full width), so the
 *   headline already has room and renders fine — no change needed there.
 * Fix (≥1200 only): widen the headline column to 56% and drop the gallery's
 * `offset-xl-2`, so the headline gets the empty light-blue space that sits left
 * of where the navy S-curve starts. The bold phrase still cannot hold 32px at
 * 1200px (only ~495px of clear width before the curve there, vs ~614px at 1440),
 * so size it fluidly 25px→31px across 1200→1440 and trim letter-spacing to 0:
 * the bold phrase then fits on one line at every desktop width and the
 * {br}-authored structure renders as the intended 3 clean lines.
 *
 * ── Finding 2: logos arranged badly (≥768) ──────────────────────────────────
 * jp-440-lagerverwaltung.css added a GLOBAL ≥768px grid for
 * `.product-payments-section` that hardcodes a 5-tile "3-over-2" layout
 * (nth-child(4)/(5) explicitly pinned to row 2). This page has SIX logos, so the
 * 6th tile is left unplaced and auto-flows to a lone 3rd row → the grid reads
 * 3 / 2 / 1. Release the row-2 pins so all six tiles span two columns of the
 * 6-col grid and fill a balanced 3-over-3.
 */

/* ── Finding 2 — logos 3-over-3 (wherever jp-440's grid runs) ──────────────── */
@media (min-width: 768px) {
    body.page-id-233046 .product-payments-section.green
        .container-product-payments-card .product-payments-section__gallery-item:nth-child(4),
    body.page-id-233046 .product-payments-section.green
        .container-product-payments-card .product-payments-section__gallery-item:nth-child(5) {
        grid-column: span 2 !important;
        grid-row: auto !important;
    }
}

/* ── Finding 1 — headline column + fluid size (xl 2-col layout only) ───────── */
@media (min-width: 1200px) {
    /* The card row has exactly two columns: [0] headline, [1] gallery. */
    body.page-id-233046 .product-payments-section.green
        .container-product-payments-card .card-body > .row.no-gutters > div:first-child {
        flex: 0 0 56% !important;
        max-width: 56% !important;
    }
    body.page-id-233046 .product-payments-section.green
        .container-product-payments-card .card-body > .row.no-gutters > div:nth-child(2) {
        flex: 0 0 44% !important;
        max-width: 44% !important;
        margin-left: 0 !important; /* drop offset-xl-2 */
    }

    /* Fluid 25px→31px so the bold phrase clears the navy curve on one line at
       every width in the xl band (≈495px clear at 1200, ≈614px at 1440). */
    body.page-id-233046 .product-payments-section.green .product-payments-section__title {
        font-size: clamp(25px, calc(25px + (100vw - 1200px) * 0.025), 31px) !important;
        letter-spacing: 0 !important;
    }
}