Polish home page: clamp tile teasers, balance hero heading, fix embed gap

Elternbeirat.Web/Features/Home/Home.razor.css

@@ -38,8 +38,10 @@
 
 /* On the gradient everything is white: the global heading colour is a blue that
    would vanish here. */
+/* balance evens out the lines, so a short last word ("IGMH") never wraps alone. */
 .hero h1 {
     color: var(--color-on-header);
+    text-wrap: balance;
 }
 
 /* The intro is editor Markdown, rendered without scope attributes, so it is reached
@@ -289,14 +291,23 @@
         align-self: start;
     }
 
+    /* The teaser is a whole sentence; the tile cuts it visually after three lines,
+       so the tiles of a row keep a similar height whatever the editor wrote. The
+       -webkit- box is the form every current browser supports for line-clamp. */
     .tile-text {
-        display: block;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;
+        line-clamp: 3;
+        overflow: hidden;
     }
 }
 
 /* --- Embeds -------------------------------------------------------------------
    The blocks the home page opts into (posts, events) sit side by side from desktop
-   width, so the start page shows both without a long scroll. One column below. */
+   width, so the start page shows both without a long scroll. One column below.
+   In the grid the blocks' own top margin no longer collapses with the margin of
+   the tiles above, so it is dropped there; otherwise the gap would be doubled. */
 @media (min-width: 64rem) {
     .home-embeds {
         display: grid;
@@ -304,4 +315,8 @@
         gap: var(--space-5);
         align-items: start;
     }
+
+    .home-embeds ::deep .embed {
+        margin-top: 0;
+    }
 }