/*
 * NetxRow – Gutenberg Column Device Wrap Controls
 * Author: Gremers Media Studio
 * Version: 1.1.0
 */

.gms-netxrow-panel__intro,
.gms-netxrow-panel__note {
    color: #475569;
    font-size: 12px;
    line-height: 1.45;
    margin: 0 0 14px;
}

.gms-netxrow-panel__note {
    border-left: 3px solid #2563eb;
    padding-left: 10px;
    margin-top: 8px;
}

.wp-block-columns.gms-netxrow-columns,
.wp-block-columns.gms-netxrow-columns > .wp-block-column,
.wp-block-columns.gms-netxrow-columns > .wp-block-column[class*="gms-netxrow-"] {
    box-sizing: border-box;
}

/*
 * Wichtig:
 * Die Spalte, die auf dem aktiven Gerät in die nächste Reihe soll,
 * bekommt order: 50 und 100% Breite.
 * Alle übrigen Spalten bekommen flex: 1 1 0 und füllen dadurch automatisch
 * die frei gewordene Reihe gleichmäßig auf.
 */

@media (max-width: 767px) and (orientation: portrait) {
    .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-mobile-portrait {
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }

    .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-mobile-portrait > .wp-block-column:not(.gms-netxrow-mobile-portrait) {
        order: 0 !important;
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-mobile-portrait > .wp-block-column.gms-netxrow-mobile-portrait {
        order: 50 !important;
        flex: 0 0 100% !important;
        flex-basis: 100% !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        max-width: 100% !important;
        min-width: 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 932px) and (orientation: landscape) {
    .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-mobile-landscape {
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }

    .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-mobile-landscape > .wp-block-column:not(.gms-netxrow-mobile-landscape) {
        order: 0 !important;
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-mobile-landscape > .wp-block-column.gms-netxrow-mobile-landscape {
        order: 50 !important;
        flex: 0 0 100% !important;
        flex-basis: 100% !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        max-width: 100% !important;
        min-width: 100% !important;
        width: 100% !important;
    }
}

@media (min-width: 768px) and (max-width: 1180px) and (orientation: portrait) {
    .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-tablet-portrait {
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }

    .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-tablet-portrait > .wp-block-column:not(.gms-netxrow-tablet-portrait) {
        order: 0 !important;
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-tablet-portrait > .wp-block-column.gms-netxrow-tablet-portrait {
        order: 50 !important;
        flex: 0 0 100% !important;
        flex-basis: 100% !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        max-width: 100% !important;
        min-width: 100% !important;
        width: 100% !important;
    }
}

@media (min-width: 933px) and (max-width: 1180px) and (orientation: landscape) {
    .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-tablet-landscape {
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }

    .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-tablet-landscape > .wp-block-column:not(.gms-netxrow-tablet-landscape) {
        order: 0 !important;
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-tablet-landscape > .wp-block-column.gms-netxrow-tablet-landscape {
        order: 50 !important;
        flex: 0 0 100% !important;
        flex-basis: 100% !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        max-width: 100% !important;
        min-width: 100% !important;
        width: 100% !important;
    }
}

@media (min-width: 1181px) and (max-width: 1512px) {
    .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-laptop-14 {
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }

    .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-laptop-14 > .wp-block-column:not(.gms-netxrow-laptop-14) {
        order: 0 !important;
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-laptop-14 > .wp-block-column.gms-netxrow-laptop-14 {
        order: 50 !important;
        flex: 0 0 100% !important;
        flex-basis: 100% !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        max-width: 100% !important;
        min-width: 100% !important;
        width: 100% !important;
    }
}

@media (min-width: 1513px) {
    .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-desktop-large {
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }

    .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-desktop-large > .wp-block-column:not(.gms-netxrow-desktop-large) {
        order: 0 !important;
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-desktop-large > .wp-block-column.gms-netxrow-desktop-large {
        order: 50 !important;
        flex: 0 0 100% !important;
        flex-basis: 100% !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        max-width: 100% !important;
        min-width: 100% !important;
        width: 100% !important;
    }
}

/* JS-Fallback: falls der Browser/Editor die Ausrichtung nicht sauber per Media Query erkennt. */
html.gms-netxrow-active-mobile-portrait .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-mobile-portrait,
html.gms-netxrow-active-mobile-landscape .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-mobile-landscape,
html.gms-netxrow-active-tablet-portrait .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-tablet-portrait,
html.gms-netxrow-active-tablet-landscape .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-tablet-landscape,
html.gms-netxrow-active-laptop-14 .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-laptop-14,
html.gms-netxrow-active-desktop-large .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-desktop-large {
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

html.gms-netxrow-active-mobile-portrait .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-mobile-portrait > .wp-block-column:not(.gms-netxrow-mobile-portrait),
html.gms-netxrow-active-mobile-landscape .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-mobile-landscape > .wp-block-column:not(.gms-netxrow-mobile-landscape),
html.gms-netxrow-active-tablet-portrait .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-tablet-portrait > .wp-block-column:not(.gms-netxrow-tablet-portrait),
html.gms-netxrow-active-tablet-landscape .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-tablet-landscape > .wp-block-column:not(.gms-netxrow-tablet-landscape),
html.gms-netxrow-active-laptop-14 .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-laptop-14 > .wp-block-column:not(.gms-netxrow-laptop-14),
html.gms-netxrow-active-desktop-large .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-desktop-large > .wp-block-column:not(.gms-netxrow-desktop-large) {
    order: 0 !important;
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}

html.gms-netxrow-active-mobile-portrait .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-mobile-portrait > .wp-block-column.gms-netxrow-mobile-portrait,
html.gms-netxrow-active-mobile-landscape .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-mobile-landscape > .wp-block-column.gms-netxrow-mobile-landscape,
html.gms-netxrow-active-tablet-portrait .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-tablet-portrait > .wp-block-column.gms-netxrow-tablet-portrait,
html.gms-netxrow-active-tablet-landscape .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-tablet-landscape > .wp-block-column.gms-netxrow-tablet-landscape,
html.gms-netxrow-active-laptop-14 .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-laptop-14 > .wp-block-column.gms-netxrow-laptop-14,
html.gms-netxrow-active-desktop-large .wp-block-columns.gms-netxrow-columns.gms-netxrow-has-desktop-large > .wp-block-column.gms-netxrow-desktop-large {
    order: 50 !important;
    flex: 0 0 100% !important;
    flex-basis: 100% !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    max-width: 100% !important;
    min-width: 100% !important;
    width: 100% !important;
}

/* Editor: Gutenberg nutzt zusätzliche Wrapper. Diese Regeln sorgen dafür, dass die Vorschau ebenfalls sauber reagiert. */
.editor-styles-wrapper .wp-block-columns.gms-netxrow-columns > .block-editor-inner-blocks > .block-editor-block-list__layout {
    box-sizing: border-box;
}

@media (max-width: 767px) and (orientation: portrait) {
    .editor-styles-wrapper .wp-block-columns.gms-netxrow-has-mobile-portrait > .block-editor-inner-blocks > .block-editor-block-list__layout {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }
    .editor-styles-wrapper .wp-block-columns.gms-netxrow-has-mobile-portrait > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-column:not(.gms-netxrow-mobile-portrait) {
        order: 0 !important;
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    .editor-styles-wrapper .wp-block-columns.gms-netxrow-has-mobile-portrait > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-column.gms-netxrow-mobile-portrait {
        order: 50 !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 932px) and (orientation: landscape) {
    .editor-styles-wrapper .wp-block-columns.gms-netxrow-has-mobile-landscape > .block-editor-inner-blocks > .block-editor-block-list__layout {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }
    .editor-styles-wrapper .wp-block-columns.gms-netxrow-has-mobile-landscape > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-column:not(.gms-netxrow-mobile-landscape) {
        order: 0 !important;
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    .editor-styles-wrapper .wp-block-columns.gms-netxrow-has-mobile-landscape > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-column.gms-netxrow-mobile-landscape {
        order: 50 !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        width: 100% !important;
    }
}

@media (min-width: 768px) and (max-width: 1180px) and (orientation: portrait) {
    .editor-styles-wrapper .wp-block-columns.gms-netxrow-has-tablet-portrait > .block-editor-inner-blocks > .block-editor-block-list__layout {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }
    .editor-styles-wrapper .wp-block-columns.gms-netxrow-has-tablet-portrait > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-column:not(.gms-netxrow-tablet-portrait) {
        order: 0 !important;
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    .editor-styles-wrapper .wp-block-columns.gms-netxrow-has-tablet-portrait > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-column.gms-netxrow-tablet-portrait {
        order: 50 !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        width: 100% !important;
    }
}

@media (min-width: 933px) and (max-width: 1180px) and (orientation: landscape) {
    .editor-styles-wrapper .wp-block-columns.gms-netxrow-has-tablet-landscape > .block-editor-inner-blocks > .block-editor-block-list__layout {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }
    .editor-styles-wrapper .wp-block-columns.gms-netxrow-has-tablet-landscape > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-column:not(.gms-netxrow-tablet-landscape) {
        order: 0 !important;
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    .editor-styles-wrapper .wp-block-columns.gms-netxrow-has-tablet-landscape > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-column.gms-netxrow-tablet-landscape {
        order: 50 !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        width: 100% !important;
    }
}

@media (min-width: 1181px) and (max-width: 1512px) {
    .editor-styles-wrapper .wp-block-columns.gms-netxrow-has-laptop-14 > .block-editor-inner-blocks > .block-editor-block-list__layout {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }
    .editor-styles-wrapper .wp-block-columns.gms-netxrow-has-laptop-14 > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-column:not(.gms-netxrow-laptop-14) {
        order: 0 !important;
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    .editor-styles-wrapper .wp-block-columns.gms-netxrow-has-laptop-14 > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-column.gms-netxrow-laptop-14 {
        order: 50 !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        width: 100% !important;
    }
}

@media (min-width: 1513px) {
    .editor-styles-wrapper .wp-block-columns.gms-netxrow-has-desktop-large > .block-editor-inner-blocks > .block-editor-block-list__layout {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }
    .editor-styles-wrapper .wp-block-columns.gms-netxrow-has-desktop-large > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-column:not(.gms-netxrow-desktop-large) {
        order: 0 !important;
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    .editor-styles-wrapper .wp-block-columns.gms-netxrow-has-desktop-large > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-column.gms-netxrow-desktop-large {
        order: 50 !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        width: 100% !important;
    }
}