/* ─────────────────────────────────────────────────────────────────────────
 * jp-693-finanzbuchhaltung-logo-grid.css
 *   Page: body.page-id-232998  /de/finanzbuchhaltung-software/
 *
 * QA JP-693: the "Native Schnittstellen für deine Steuern und Zahlungen" logo
 * panel renders its 4 logos (DATEV, Amazon Pay, PayPal, Mollie) scattered as
 * 3-over-1 (the 4th tile pushed left) instead of an aligned grid.
 *
 * Root cause — the same cascade LEAK from jp-440-lagerverwaltung.css as JP-666.
 * That (un-page-scoped) file builds a 5-logo "3-over-2 centred" layout on a
 * 6-column grid: every tile spans 2 cols and tiles 4 & 5 are explicitly placed
 * on row 2. Here there are 4 logos → tiles 1-3 fill row 1 (3 × span-2 = 6 cols)
 * and tile 4 (Mollie) is placed at col 2 / span 2 of the 6-col grid → it sits
 * off-centre. (jp-440 should itself be page-scoped to Lagerverwaltung — flagged
 * as tech-debt in JP-666.)
 *
 * Fix (page-scoped, desktop only — matches jp-440's `@media (min-width:768px)`
 * leak; mobile already uses the widget's flex layout): a 3-column grid with the
 * leaked per-tile spans cleared, so logos 1-3 fill the top row and the 4th
 * (Mollie) is placed in the CENTRE column of row 2 → "3 up, 1 centred below".
 * Base rules: body:is(page-id) + 3 classes = (0,4,1) beats jp-440's wrapper
 * (0,3,0); the nth-child(4) centring = (0,5,1) beats jp-440's nth-child (0,4,0).
 * ───────────────────────────────────────────────────────────────────────── */

/* Scoped to both the DE page (232998) and its EN translation
 * (262889 /en/.../financial-accounting-software/) — same widget, same logos,
 * same jp-440 leak. */
@media (min-width: 768px) {
    body:is(.page-id-232998, .page-id-262889) .product-payments-section .container-product-payments-card .product-payments-section__gallery-wrapper {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
    }
    body:is(.page-id-232998, .page-id-262889) .product-payments-section .container-product-payments-card .product-payments-section__gallery-item {
        grid-column: auto !important;   /* clear jp-440's `span 2` */
        grid-row: auto !important;
    }
    /* 4th logo (Mollie) → centre column of row 2 */
    body:is(.page-id-232998, .page-id-262889) .product-payments-section .container-product-payments-card .product-payments-section__gallery-item:nth-child(4) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
}