/*
 * Die Zertifikatsuebersichten auf schmalen Schirmen.
 *
 * GeneratePress stellt die Beitraege in Spalten dar (Desktop 3, Tablet 2) -
 * mobil aber fest in EINER, und dafuer gibt es keine Einstellung, die Klasse
 * "mobile-grid-100" ist im Theme verdrahtet. Mit 36 Zertifikaten, jedes mit
 * grossem Siegel und Anriss, ergab das gemessene 29 Bildschirme Scrollen fuer
 * den Hauptkatalog der Website. Zwei Spalten machen daraus 9.
 *
 * Nur unterhalb des Umschaltpunkts, den das Theme selbst benutzt (768 px) -
 * Tablet und Desktop bleiben unangetastet.
 */

/*
 * Die Ueberschrift der Uebersicht.
 *
 * Absichtlich ohne Theme-Klasse aufgebaut (siehe darstellung.php) und deshalb
 * hier mit dem Noetigsten versehen: Schriftart, -groesse und Farbe kommen
 * weiter vom Theme, nur Ausrichtung und Abstand stehen hier.
 */
.strukturpflug-katalogkopf {
    margin: 0 0 1.2em;
    text-align: center;
}

.strukturpflug-katalogkopf h1 {
    margin: 0;
}

@media (max-width: 768px) {

    /*
     * Flex statt der Float-Spalten des Themes: bei Floats haengt die naechste
     * Kachel an der hoechsten der vorigen Reihe fest, und weil die Titel
     * unterschiedlich lang umbrechen, franste das Raster sichtbar aus.
     */
    .generate-columns-container {
        display: flex;
        flex-wrap: wrap;
        /*
         * Echter Spaltenabstand statt Innenabstand an der Kachel: ein padding
         * auf .inside-article hatte ich zuerst, das Theme ueberschreibt es
         * aber (gemessen kam 0 0 30px an, nicht der eigene Wert) - die beiden
         * Spalten stiessen mit exakt 0 px aneinander. gap kann das Theme nicht
         * ueberschreiben, weil es die Eigenschaft gar nicht setzt.
         */
        gap: 0.8em 1.4em;
    }

    .generate-columns-container > .generate-columns.mobile-grid-100 {
        /* 2 x (50% - 0.7em) + 1.4em gap = 100% */
        width: calc(50% - 0.7em);
        float: none;
        display: flex;
    }

    .generate-columns-container > .generate-columns .inside-article {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .generate-columns-container .post-image {
        margin-bottom: 0.6em;
    }

    .generate-columns-container .post-image img {
        max-width: 100%;
        height: auto;
    }

    .generate-columns-container .entry-title {
        font-size: 1.02em;
        line-height: 1.2;
    }

    /*
     * KEIN line-clamp hier. Das stand zuerst drin (3 Zeilen) und war ein
     * Fehler: gemessen bei 200 % Vergroesserung auf 390 px blieben davon zwei
     * bis drei WOERTER uebrig - rund 60 % des Textes waren weg, ohne
     * Kuerzungszeichen, und der "Mehr"-Link lag ausserhalb der sichtbaren Box.
     * Wer die Schrift vergroessert, braucht MEHR Platz, nicht weniger.
     *
     * Gekuerzt wird stattdessen an der Quelle: die Auszugslaenge steht in den
     * Theme-Einstellungen auf 20 Woerter. Was dasteht, steht ganz da.
     */
    .generate-columns-container .entry-summary p {
        font-size: 0.88em;
        margin-bottom: 0;
    }
}