/* ---------------------------------------------------------------------------
   THE HOME GROUP LIST   /members/home-groups/

   The cards `[tcf_home_groups]` renders, and nothing else. Who may see them is
   settled in plugin/tcf-church/includes/home-groups.php, which returns an empty
   string to anyone not signed in; nothing here is load-bearing for that and
   nothing here should ever become so.

   WHY THIS IS A FILE. `member-*` is the only prefix theme/tcf-child/functions.php
   scopes to the member area, and the enqueue comment there explains what it cost
   to learn that: interior-b.css ships to every visitor on the site, and a card
   that can only ever render behind a login has no business in it. Being named
   correctly is the whole of the scoping.

   COMPONENT-SCOPED, NOT BODY-SCOPED, the same choice css/member-directory.css
   makes and for the same reason - the styling has to travel with the shortcode,
   which is not tied to one page. It is doubly right here: page 53 is
   `/members/home-groups/` and page 25 is `/life-together/home-groups/`, and
   WordPress gives BOTH the body class `page-home-groups`. A body-scoped rule
   would have painted the public page too.

   WHAT IT IS NOT. It is not a second card component. `.tcf-mb-panel` in
   interior-b.css §9 already draws this exact card - 26px inside a hairline on
   paper, a display-face title - and these rules are that shape with a list
   semantics on top and a grid that counts columns rather than fixing them at
   two. The panels are two prose blocks side by side; this is a set of short,
   equal, near-identical cards, and at 1440 two columns of "Craw-Hahn group /
   Wednesdays, 7:00 pm · Hamburg" is half a screen of paper.
   --------------------------------------------------------------------------- */


/* ---- the list -------------------------------------------------------------

   It sits inside `.tcf-mb-docs__list`, which supplies the hairline under the
   section heading. That rule was drawn for a document list whose first row
   carries its own 18px of padding; a grid has none, so the top space is bought
   here.
   --------------------------------------------------------------------------- */
.tcf-hg {
  padding-top: var(--tcf-space-5);
}

/* `auto-fill` rather than a column count, because the number of home groups a
   church has is not a number this stylesheet gets to know. 300px is chosen to
   give THREE columns in the 1280 container rather than four: four tracks are
   288px, which is narrow enough that "Smith-Jones-Cook group" takes two lines,
   and a row of four short cards reads as a broken grid rather than a list.

   `min(300px, 100%)` and not a bare 300px. A bare minimum larger than the
   container does not collapse - it forces the track and pushes the page sideways,
   and the container at 320 is 280. This is the whole of the no-horizontal-scroll
   guarantee at that width.

   Rows stretch (the grid default, and why there is no `align-items` here). These
   cards differ by one short line at most, so equal heights across a row is the
   difference between a list and a ragged edge - and a card with no meta line at
   all, which is the state every group starts in, is exactly the one that would
   sit short. */
.tcf-hg__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--tcf-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tcf-hg__card {
  margin: 0;
  padding: 26px;
  border: 1px solid var(--tcf-rule);
  background-color: var(--tcf-page);
  /* A leader whose own surname is hyphenated produces "Smith-Jones-Cook group",
     which the naming rule in home-groups.php deliberately allows. Hyphens give
     the browser a break opportunity; this is the guarantee for the case that
     does not, so nothing can push the card past its track at 320. */
  overflow-wrap: break-word;
}

.tcf-hg__name {
  margin: 0;
  max-width: none;   /* the card is the measure; 68ch of display face is not */
  font-family: var(--tcf-font-display);
  font-size: var(--tcf-text-card);
  font-weight: 400;
  line-height: var(--tcf-leading-card);
  letter-spacing: var(--tcf-tracking-heading);
  color: var(--tcf-ink);
}

/* `muted`, not `tertiary`. The note beside the palette says tertiary is 3.62:1
   on paper and is for a 14px label; this is not a label, it is the two facts a
   member came to the page to read. Muted at 14px measures 5.9:1. */
.tcf-hg__meta {
  margin: 8px 0 0;
  max-width: none;
  font-size: var(--tcf-text-meta);
  line-height: 1.4;
  color: var(--tcf-muted);
}

/* Either half of the line can be absent - a group with no night recorded, or the
   commoner case of one with no part of town yet - and the PHP emits the
   separator only between two facts that both exist. So this is spacing and
   nothing more: there is no rule here holding up an empty line, because there is
   never an empty line to hold up. */
.tcf-hg__sep {
  margin-inline: 0.5em;
}


/* ---- the note under the list ----------------------------------------------

   What a card does not carry, and who to write to instead. Set at body-small on
   the prose measure so it reads as a footnote to the list rather than as another
   card. The link keeps the site's prose treatment from style.css - brick and
   underlined - which is what §1.1 asks for and is why there is no link rule in
   this file.
   --------------------------------------------------------------------------- */
.tcf-hg__note {
  margin: var(--tcf-space-5) 0 0;
  max-width: 720px;
  font-size: var(--tcf-text-body-sm);
  line-height: var(--tcf-leading-sm);
  color: var(--tcf-muted);
}


/* ---- phones ---------------------------------------------------------------

   767px is the breakpoint interior-b.css already uses for this page's bands, so
   the card padding steps down at the same width the section padding does rather
   than at one of its own. 20px keeps the 24px title off the hairline at 320
   while giving the line back 12px it needs there.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .tcf-hg {
    padding-top: var(--tcf-space-4);
  }
  .tcf-hg__card {
    padding: 20px;
  }
  .tcf-hg__note {
    margin-top: var(--tcf-space-4);
  }
}

/* WHO IS IN THE GROUP ------------------------------------------------------

   Jay, 2026-08-10, asked to be able to see which families are in which group.
   The households are rendered by `tcf_home_group_households()`, which routes
   through the directory's own entry builder so that a member who opted out of
   the directory is absent here too.

   A plain list, not a comma-run: these are proper names, several of them contain
   a hyphen already ("The Craw-Hahn Family"), and a comma-separated run of
   hyphenated surnames is genuinely hard to parse at a glance. One per line also
   means a group of twelve households and a group of two look like the same
   component rather than one paragraph and one wall.

   `--tcf-text-meta` matches the fact line above it rather than body size: this
   is supporting detail inside a card, and setting it at body size would make the
   membership shout louder than the group's own name. Ink, not muted, because
   unlike the fact line these ARE the thing being looked up. */
.tcf-hg__who {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--tcf-text-meta);
  line-height: 1.55;
  color: var(--tcf-ink);
}
.tcf-hg__who > li {
  margin: 0;
  padding: 0;
}

/* Muted, and phrased about the LIST rather than the GROUP - a group can be
   fully subscribed and still show this line if everyone in it has asked to stay
   out of the directory. Same size as the list it replaces so the card does not
   change height when the first household appears. */
.tcf-hg__who-empty {
  margin: 12px 0 0;
  max-width: none;
  font-size: var(--tcf-text-meta);
  line-height: 1.55;
  color: var(--tcf-muted);
}