/*
 * Stapel und Fläche einer Reihe.
 *
 * Gemeinsam.
 * Die Zahl im Namen ist die Ladereihenfolge — bei CSS zählt sie.
 */

/*
 * Ein Stapel ist reine Struktur: er ordnet seine Reihen untereinander und
 * bringt selbst keinen Abstand mit — den setzen die Reihen über .spo-grid.
 * Deshalb sieht ein Stapel in einer Spalte genauso aus wie vorher die Reihe,
 * die dort unmittelbar lag; der zusätzliche Rahmen ändert nichts.
 */
.spo-group {
    width: 100%;
    /*
     * Und schmaler als die Mindestbreite wird er nicht.
     *
     * Die Zahl ist dieselbe, die seine Reihen als Schwelle zum Umbrechen
     * benutzen (ColumnMinWidth, als `--spo-column-min` inline am Stapel): wer
     * sagt „eine Spalte darf nicht unter 160px", meint den Stapel darin mit.
     * Bis hierher galt sie nur den Zellen einer umbrechenden Reihe — an einem
     * Stapel in einer schmalen Zelle tat die Einstellung nichts, und sein Inhalt
     * wurde zusammengedrückt.
     *
     * Die Zahl allein und kein `min(100%, …)`: in einer Zelle ist `100%` die
     * Breite dieser Zelle, und `min(90px, 160px)` wären wieder 90px — die
     * Schwelle täte nichts, gerade in dem Fall, für den sie da ist (gemessen:
     * 89px in einer 90px-Zelle). Dafür kann der Stapel jetzt über eine zu
     * schmale Zelle hinausstehen; das ist die Bedeutung der Einstellung: lieber
     * ein Stapel, der sichtbar nicht passt, als einer, dessen Inhalt
     * zusammengedrückt wird.
     */
    min-width: var(--spo-column-min, 160px);
}

/*
 * Die Hülle einer Spalte — es gibt sie nur, wo die Spalte ein Mass trägt
 * (MenuElements/Column). Im Regelfall ist der Baustein selbst die Rasterzelle,
 * und daran ändert sich nichts.
 *
 * Sie gibt ihre Breite weiter und nimmt sich als Untergrenze nichts vor: eine
 * Rasterzelle bringt sonst die Breite ihres Inhalts als Minimum mit, und ein
 * langes Wort zöge die Spalte auf. `flex` am Kind, damit es die Hülle in der
 * Breite ausfüllt — die Höhe bleibt seine eigene, und genau darum geht es hier:
 * die Decke gehört der Spalte, nicht dem Baustein.
 *
 * Was über die Decke hinausragt, steht sichtbar darüber hinaus. Kein
 * `overflow`: eine Decke ist eine Angabe über die Fläche und keine Entscheidung
 * darüber, was mit dem Rest passiert — wer abschneiden oder rollen will, sagt
 * das eigens.
 */
.spo-column {
    display: flex;
    min-width: 0;
}

.spo-column > * {
    flex: 1 1 auto;
    min-width: 0;
}

/*
 * Senkrechte Ausrichtung der Reihen (GroupAlign).
 *
 * Als Flex-Spalte, weil ein Block kein Mittel hat, seine Kinder in der eigenen
 * Höhe zu verschieben. „Oben" bekommt deshalb auch keine Klasse: dort stehen sie
 * als Block schon, und eine Regel dafür wäre eine Umstellung ohne Wirkung.
 *
 * Freien Platz gibt es nur, wo der Stapel höher ist als sein Inhalt — in einer
 * Zelle mit Höhe oder in einer Ebene, die er füllt (.spo-group--fills). Dort
 * verteilt `justify-content` ihn; sonst ist die Angabe wirkungslos, und das ist
 * richtig so.
 */
.spo-group--middle,
.spo-group--bottom {
    display: flex;
    flex-direction: column;
}

.spo-group--middle {
    justify-content: center;
}

.spo-group--bottom {
    justify-content: flex-end;
}

/*
 * Fläche einer Reihe. Breite und Ausrichtung kommen als Inline-CSS aus
 * ColumnsMaxWidth und ColumnsAlign, hier steht nur, was für alle gilt.
 */
/*
 * Der Abstand trennt Reihen voneinander, steht also zwischen ihnen und nicht
 * vor der ersten — sonst rückte jeder Stapel als Ganzes nach unten, und
 * verschachtelte Stapel summierten den Versatz mit jeder Ebene.
 */
.spo-columns {
    width: 100%;
    margin-top: 10px;
}

.spo-columns:first-child {
    margin-top: 0;
}

/*
 * Volle Höhe: die Reihe nimmt die Fläche, in der sie liegt.
 *
 * Drei Angaben, und alle drei sind nötig, weil eine Höhe in Prozent gegen das
 * Elternteil rechnet — und das hatte bis hierher selbst keine. Von außen nach
 * innen:
 *
 * Der Stapel wird zum Flex-Baustein, der den Rest seiner Ebene nimmt. Die Ebene
 * ist schon eine Flex-Spalte (`.spo-sheet-inner`, 10-overlay.css), im Editor
 * dieselbe; damit ist `flex: 1` genau „was übrig ist, nach den anderen Reihen".
 * Er wird dabei selbst eine Flex-Spalte, damit dieselbe Rechnung eine Ebene
 * tiefer weitergeht.
 *
 * Die Fläche der Reihe nimmt daraus ihren Teil. Ohne `min-height: 0` wäre die
 * Untergrenze ihr Inhalt: ein Flex-Baustein schrumpft nicht unter `min-content`,
 * und eine Reihe mit einer hohen Kachel wüchse damit über die Ebene hinaus,
 * statt in ihr zu bleiben.
 *
 * Das Raster selbst bekommt `height: 100%` als Custom Property von der Reihe
 * (ColumnsHeight::Full) — hier steht dazu nichts, weil das Maß der Redaktion
 * gehört und nicht dem Stylesheet.
 *
 * Nur mit Klasse, nie allgemein: ein Stapel, in dem keine Reihe die volle Höhe
 * will, bleibt so hoch wie sein Inhalt. Sonst hätte jedes Menü unter seiner
 * letzten Reihe eine gedehnte Fläche, in der ein Klick ins Leere ginge.
 */
.spo-group--fills {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.spo-columns--fills {
    flex: 1 1 auto;
    min-height: 0;
}

/*
 * Überschrift über einer Reihe – im Design die Zeile über der
 * Personen-Auswahl ("ICH ERLEBE ST. PETER-ORDING & EIDERSTEDT").
 */
.spo-columns-title {
    margin-top: 20px;
    font-size: calc(11px - var(--spo-text-shrink));
    font-weight: 700;
    letter-spacing: .15em;
    /*
     * Kein `text-transform`: die Großbuchstaben des Designs gehören der
     * Aufschrift. Wer die Zeile in Versalien will, tippt sie so — und wer eine
     * gemischte will, bekommt sie und nicht das Geschrei des Stylesheets.
     */
    color: var(--spo-blue-dark);
    /*
     * Derselbe weiße Schein wie hinter dem Logo (10-overlay.css) und aus
     * demselben Grund: die Zeile liegt als einziger Text unmittelbar auf dem
     * Sand-Glas, und dessen Deckkraft ist einstellbar (MenuAppearance) — steht
     * sie niedrig, kommt das Foto der Seite durch, und Dunkelblau auf Dunkel
     * ist weg. Die Aufschriften der Bausteine brauchen ihn nicht: Kachel,
     * Störer und Meldung bringen ihre eigene Fläche mit.
     *
     * `text-shadow` und nicht `filter: drop-shadow`: eine Liste, keine Kette —
     * beide Schatten kommen von der Schrift selbst, nicht der zweite vom
     * Ergebnis des ersten. Die Reihenfolge ist hier also gleichgültig.
     *
     * Enger als am Logo (6px statt 8px, .7 statt .75): das hier sind 11px
     * Versalien mit dünnen Strichen und weiter Sperrung — ein breiter Hof legt
     * sich zwischen die Buchstaben und macht die Zeile milchig statt lesbar.
     */
    text-shadow:
        0 0 2px rgba(255, 255, 255, .95),
        0 0 6px rgba(255, 255, 255, .7);
}

.spo-columns-title + .spo-grid {
    margin-top: 9px;
}