/**
 * KW Zubehör-Grid Block-Styles
 *
 * Grid-Container für zoom-cards die aus CPT zubehoer kommen.
 * Card-Look + Lightbox kommen aus blocks/zoom-card/style.css — diese Datei
 * regelt nur das Grid-Layout.
 *
 * Gregor 2026-06-02.
 */
/* Break-out aus constrained-Layout-Parents. Theme klemmt outer wp:groups auf
   860px (content-size), unsere .alignwide-Siblings nutzen einen .kw-container-
   Hack um auf 1200px zu kommen. Hier Viewport-Trick: Block positioniert sich
   relativ zur Page-Mitte, ignoriert Parent-Width. Gregor 2026-06-02. */

/* Page 2196 (Polterschild 2): white-bg Wrapper-Group enthält auch andere
   alignwide-Blocks (Details-Section). Theme constraint clamps sie auf 860 trotz
   wideSize-Attribute. Hard-Override für diese Page-id-Scope. */
body.page-id-2196 .wp-block-columns.alignwide {
    /* Viewport-Trick (wie .kw-zubehoer-grid): position-zentriert zur Page-Mitte,
       ignoriert Parent-Constraint von 860px. */
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(1200px, 100vw - 48px) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.kw-zubehoer-grid {
    display: grid;
    gap: 24px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100vw - 48px), 1200px) !important;
    max-width: none !important;
    padding: 0;
}
.kw-zubehoer-grid--cols-1 { grid-template-columns: 1fr; }
.kw-zubehoer-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.kw-zubehoer-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.kw-zubehoer-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.kw-zubehoer-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 980px) {
    .kw-zubehoer-grid--cols-3,
    .kw-zubehoer-grid--cols-4,
    .kw-zubehoer-grid--cols-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .kw-zubehoer-grid { padding: 0 16px; gap: 16px; }
    .kw-zubehoer-grid--cols-2,
    .kw-zubehoer-grid--cols-3,
    .kw-zubehoer-grid--cols-4,
    .kw-zubehoer-grid--cols-5 { grid-template-columns: 1fr; }
}