/* ==========================================================================
   Home page — the panels a signed-in student lands on, and the block about
   the organization that closes the page for everybody.

   Almost nothing here: the page is built out of .list-panel, .line-item and
   .list-empty, which already exist. What is left is the two places the home
   page uses one of them slightly differently, plus the separation the site
   block needs now that it sits under a stack of panels.

   LOAD ORDER — `stylesheet_link_tag :app` sorts logical paths alphabetically,
   so this file loads BEFORE line-items, list-blocks, main and utilities.
   Everything here that has to beat one of those wins on specificity:
   `.list-panel-header h2 a` (0,2,1) over main.css's bare `a` (0,0,1).
   ========================================================================== */


/* A panel heading that is itself a link. The class blocks have no button in
   their header — a student has nothing to *do* to a class — so the title
   carries the way into the class, and the footer carries the one labelled
   destination. Same treatment .card-title a already gets: inherits the heading
   colour, and only turns blue under the cursor.

   The three inherits are not belt and braces. line-items.css styles
   `.list-panel-header a` for the header's ACTION SLOT — 15px, medium, nowrap —
   and a link inside the h2 is one of those as far as that selector is
   concerned, so without these the class title came out at body size in the
   body face, and a long one would refuse to wrap on a phone. */
.list-panel-header h2 a {
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
  white-space: inherit;
}

.list-panel-header h2 a:hover {
  color: var(--color-link);
  text-decoration: underline;
}

/* .list-panel + .list-panel supplies the gap between two panels; a panel
   following the empty state has no rule of its own to fall back on. */
.list-empty + .list-panel {
  margin-top: var(--space-6);
}


/* --------------------------------------------------------------------------
   THE SITE BLOCK — the organization's own biography, at the foot of the page.

   Unpanelled on purpose: it is about the school rather than about the reader,
   and a fourth white card would file it alongside the three that are. The rule
   above it is what separates the two halves of the page instead.
   -------------------------------------------------------------------------- */

.site-about {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.site-about h2 {
  margin-bottom: var(--space-4);
}

/* Prose, so it takes a reading measure rather than the full content width of a
   page whose other blocks are panels. The container, not the paragraphs: the
   biography is rich text, and one written before the editor swap is still
   <div> per paragraph, not <p>, until it is next saved. Type size and rhythm
   are left alone — the body defaults are what every other piece of rich text
   on the site reads at. */
.site-about .lexxy-content {
  max-width: 62ch;
}