/* ==========================================================================
   RH FORM GRID
   Flexbox-Spaltensystem für Contao-Formulare

   Verwendung:

   <div class="rh-form-grid rh-grid-2">
       ...
   </div>

   <div class="rh-form-grid rh-grid-3">
       ...
   </div>

   <div class="rh-form-grid rh-grid-4">
       ...
   </div>

   Desktop:
   2 / 3 / 4 Spalten

   Tablet:
   maximal 2 Spalten

   Smartphone:
   1 Spalte
   ========================================================================== */


/* ==========================================================================
   1. GRUNDEINSTELLUNGEN
   ========================================================================== */

.rh-form-grid {

    --rh-form-grid-gap: 24px;

    display: flex;
    flex-wrap: wrap;

    column-gap: var(--rh-form-grid-gap);

    width: 100%;

}


/*
 * TAO verwendet bei Formular-Widgets "clear: both".
 * Innerhalb des RH-Grids wird dies aufgehoben.
 *
 * Die vertikalen Abstände entsprechen:
 *
 * margin-top: 0.3em;
 * margin-bottom: 0.3em;
 */

.main-content .rh-form-grid > .widget {

    clear: none;

    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100%;

    min-width: 0;

    margin-top: 0.3em;
    margin-bottom: 0.3em;

    box-sizing: border-box;

}


/* ==========================================================================
   2. ZWEI SPALTEN
   ========================================================================== */

.rh-form-grid.rh-grid-2 > .widget {

    flex-basis:
        calc(
            (100% - var(--rh-form-grid-gap))
            / 2
        );

}


/* ==========================================================================
   3. DREI SPALTEN
   ========================================================================== */

.rh-form-grid.rh-grid-3 > .widget {

    flex-basis:
        calc(
            (100% - (2 * var(--rh-form-grid-gap)))
            / 3
        );

}


/* ==========================================================================
   4. VIER SPALTEN
   ========================================================================== */

.rh-form-grid.rh-grid-4 > .widget {

    flex-basis:
        calc(
            (100% - (3 * var(--rh-form-grid-gap)))
            / 4
        );

}


/* ==========================================================================
   5. FORMULARFELDER AUF SPALTENBREITE

   TAO setzt normale Formularfelder im Hauptinhalt auf 75 % Breite.
   Innerhalb des RH-Grids verwenden sie die ganze Spaltenbreite.
   ========================================================================== */

.main-content .rh-form-grid > .widget > input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),

.main-content .rh-form-grid > .widget > textarea,

.main-content .rh-form-grid > .widget > select,

.main-content .rh-form-grid > .widget > fieldset {

    width: 100%;

    box-sizing: border-box;

}


/* ==========================================================================
   6. OPTIONAL: EIN FELD ÜBER VOLLE BREITE

   Dem Formularfeld die CSS-Klasse

   rh-grid-full

   geben.
   ========================================================================== */

.rh-form-grid > .widget.rh-grid-full {

    flex-basis: 100%;

}


/* ==========================================================================
   7. TABLET

   3- und 4-Spalten-Gruppen werden zweispaltig.
   ========================================================================== */

@media screen and (min-width: 600px) and (max-width: 900px) {

    .rh-form-grid.rh-grid-3 > .widget,
    .rh-form-grid.rh-grid-4 > .widget {

        flex-basis:
            calc(
                (100% - var(--rh-form-grid-gap))
                / 2
            );

    }

}


/* ==========================================================================
   8. SMARTPHONE

   Alle Grid-Gruppen werden einspaltig.
   ========================================================================== */

@media screen and (max-width: 599px) {

    .rh-form-grid.rh-grid-2 > .widget,
    .rh-form-grid.rh-grid-3 > .widget,
    .rh-form-grid.rh-grid-4 > .widget {

        flex-basis: 100%;

    }

}