/* =====================================================================
   Groups discovery — the styles for the server-rendered Group fragment
   (GR-J-001).

   A Group card is a doorway into a gathering, not a listing row: the
   Group's name, what brings its people together and what is alive now
   lead, and the practical facts follow without being hidden. Current
   life, way of taking part and language are always words as well as
   tone, so no meaning rests on colour alone.

   LIF-REVIEW-GR001-005 — the page head, filter form, criteria strip,
   section head, prototype marking and badge base below are repeated
   from events.css rather than promoted into components.css. Promoting
   them was attempted and reverted: these rules have already diverged
   between pages, so moving them changes an approved appearance.
   `.lif-section-head__title` is set in the interface face on Events and
   in the reading face on the Dashboard, and `.lif-section-head` itself
   carries a different gap and margin in each; the Dashboard fragment
   uses both classes, so a shared definition silently restyles
   DB-J-019. Reconciling them is a LiF visual decision, not a refactor,
   and belongs to a dedicated shared-foundation journey. Nothing here
   changes any page that was already built.

   Tokens only; no colour or font literal lives here.
   ===================================================================== */

/* ---- Page head: welcome and purpose before any list ---- */
.lif-page-head { display: flex; flex-direction: column; gap: var(--lif-space-3); }
.lif-page-head__title {
  font-size: var(--lif-size-xxl);
  color: var(--lif-accent-deep);
  max-width: var(--lif-measure);
}
.lif-page-head__orientation { font-size: var(--lif-size-lg); }

/* ---- The prototype marking every unapproved fragment carries ---- */
.lif-prototype-banner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lif-space-2) var(--lif-space-3);
  align-items: baseline;
  padding: var(--lif-space-2) var(--lif-space-4);
  border: 1px dashed var(--lif-status-attention);
  border-radius: var(--lif-radius);
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-xs);
  color: var(--lif-ink-soft);
}
.lif-prototype-banner__status { font-weight: 700; letter-spacing: 0.04em; color: var(--lif-status-attention); }

/* ---- Filter form ---- */
.lif-filters {
  padding: var(--lif-space-5);
  border: 1px solid var(--lif-hairline);
  border-radius: var(--lif-radius-lg);
  background: var(--lif-surface);
  display: flex;
  flex-direction: column;
  gap: var(--lif-space-4);
}
.lif-filters__title { font-family: var(--lif-font-ui); font-size: var(--lif-size-lg); }
.lif-filters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--lif-space-4);
}
.lif-filters__actions { display: flex; flex-wrap: wrap; gap: var(--lif-space-3); }

.lif-field { display: flex; flex-direction: column; gap: var(--lif-space-1); }
.lif-field__label { font-family: var(--lif-font-ui); font-size: var(--lif-size-sm); font-weight: 600; }
.lif-field__control {
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-sm);
  padding: var(--lif-space-2) var(--lif-space-3);
  border: 1px solid var(--lif-hairline);
  border-radius: var(--lif-radius-sm);
  background: var(--lif-surface-raised);
  color: var(--lif-ink);
  min-width: 0;
}
.lif-field__hint { font-family: var(--lif-font-ui); font-size: var(--lif-size-xs); color: var(--lif-ink-soft); }
.lif-button--primary {
  background: var(--lif-accent-deep);
  border-color: var(--lif-accent-deep);
  color: var(--lif-accent-ink);
  font-weight: 600;
}
.lif-button--primary:hover { background: var(--lif-accent-deep); text-decoration: underline; }

/* ---- Section head inside the rendered fragment ---- */
.lif-section-head { display: flex; flex-direction: column; gap: var(--lif-space-2); }
.lif-section-head__title { font-family: var(--lif-font-ui); font-size: var(--lif-size-xl); }
.lif-section-head__orientation { color: var(--lif-ink-soft); max-width: var(--lif-measure); }

/* ---- What the member is looking at, said in words ---- */
.lif-criteria {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lif-space-2) var(--lif-space-4);
  align-items: baseline;
  padding: var(--lif-space-3) var(--lif-space-4);
  border-radius: var(--lif-radius);
  background: var(--lif-surface);
  border: 1px solid var(--lif-hairline);
}
.lif-criteria__title { font-family: var(--lif-font-ui); font-size: var(--lif-size-xs); color: var(--lif-ink-soft); }
.lif-criteria__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--lif-space-2); }
.lif-criteria__item {
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-xs);
  padding: var(--lif-space-1) var(--lif-space-3);
  border-radius: var(--lif-radius-lg);
  background: var(--lif-accent-quiet);
}
.lif-criteria__label { color: var(--lif-ink-soft); }
.lif-criteria__value { font-weight: 600; }

/* ---- Badge base. The word carries the meaning; the tone supports it. ---- */
.lif-badge {
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-xs);
  font-weight: 600;
  padding: var(--lif-space-1) var(--lif-space-3);
  border-radius: var(--lif-radius-lg);
  border: 1px solid var(--lif-hairline);
  background: var(--lif-surface);
  color: var(--lif-ink);
}

/* ---- The fragment ---- */
.lif-groups { display: flex; flex-direction: column; gap: var(--lif-space-5); }

.lif-groups__results { display: flex; flex-direction: column; gap: var(--lif-space-5); }
.lif-groups__count { font-family: var(--lif-font-ui); font-size: var(--lif-size-sm); }
.lif-groups__showing { color: var(--lif-ink-soft); }

/* An online Group has no place on the Map, so it is counted here. */
.lif-groups__online {
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-sm);
  padding: var(--lif-space-3) var(--lif-space-4);
  border-radius: var(--lif-radius);
  border: 1px solid var(--lif-hairline);
  border-left: 4px solid var(--lif-accent);
  background: var(--lif-surface);
}
.lif-groups__online-label { font-weight: 600; }

.lif-groups__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: var(--lif-space-5);
}
.lif-groups__pages { display: flex; flex-wrap: wrap; gap: var(--lif-space-3); }
.lif-groups__routes { display: flex; flex-wrap: wrap; gap: var(--lif-space-3); }

/* ---- One Group ---- */
.lif-group {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--lif-hairline);
  border-radius: var(--lif-radius-lg);
  background: var(--lif-surface-raised);
  box-shadow: var(--lif-shadow);
  transition: box-shadow var(--lif-motion-calm) var(--lif-motion-ease);
}
.lif-group:hover { box-shadow: var(--lif-shadow), 0 0 0 1px var(--lif-accent); }
.lif-group__image { display: block; width: 100%; height: 10rem; object-fit: cover; }
.lif-group__body {
  display: flex;
  flex-direction: column;
  gap: var(--lif-space-3);
  padding: var(--lif-space-5);
}
.lif-group__title { font-size: var(--lif-size-lg); }
.lif-group__link { color: var(--lif-accent-deep); text-decoration: none; }
.lif-group__link:hover { text-decoration: underline; }

.lif-group__state { display: flex; flex-wrap: wrap; gap: var(--lif-space-2); align-items: baseline; }
.lif-group__state-note { font-family: var(--lif-font-ui); font-size: var(--lif-size-xs); color: var(--lif-ink-soft); }

/* Purpose and what is alive now lead the card, so they are given room
   to breathe and are set in the reading face rather than the interface
   face. Neither is a metadata row. */
.lif-group__purpose,
.lif-group__focus { display: flex; flex-direction: column; gap: var(--lif-space-1); }
.lif-group__purpose-label,
.lif-group__focus-label {
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lif-ink-soft);
}
.lif-group__purpose-body { max-width: var(--lif-measure); }
.lif-group__focus {
  padding: var(--lif-space-3) var(--lif-space-4);
  border-radius: var(--lif-radius);
  border-left: 4px solid var(--lif-accent-quiet);
  background: var(--lif-surface);
}
.lif-group__focus-body { max-width: var(--lif-measure); }

/* How taking part begins. Never a control: entry is Request Access or an
   authorized invitation, and both belong to later Journey Jobs. */
.lif-group__entry {
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-sm);
  font-weight: 600;
  color: var(--lif-accent-deep);
}
.lif-group__invitation { font-family: var(--lif-font-ui); font-size: var(--lif-size-sm); color: var(--lif-ink-soft); }

/* ---- Current life. The word carries the meaning. ---- */
.lif-badge--active { border-color: var(--lif-status-restful); color: var(--lif-status-restful); }
.lif-badge--quiet { border-color: var(--lif-status-quiet); color: var(--lif-status-quiet); }
.lif-badge--paused,
.lif-badge--closing { border-color: var(--lif-status-attention); color: var(--lif-status-attention); }
.lif-badge--archived { border-color: var(--lif-status-quiet); color: var(--lif-status-quiet); }
.lif-badge--unrecorded { border-color: var(--lif-hairline); color: var(--lif-ink-soft); }

.lif-group__facts { display: flex; flex-direction: column; gap: var(--lif-space-2); margin: 0; }
.lif-group__fact {
  display: grid;
  grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
  gap: var(--lif-space-3);
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-sm);
}
.lif-group__fact dt { color: var(--lif-ink-soft); }
.lif-group__fact dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
.lif-group__areas { list-style: none; display: flex; flex-wrap: wrap; gap: var(--lif-space-1); }
.lif-group__area {
  font-size: var(--lif-size-xs);
  padding: var(--lif-space-1) var(--lif-space-2);
  border-radius: var(--lif-radius-sm);
  background: var(--lif-accent-quiet);
}
.lif-group__area-none { color: var(--lif-ink-soft); }
.lif-group__actions { margin-top: auto; padding-top: var(--lif-space-2); }

/* A Group that is resting is shown calmly and honestly, never as a
   failure and never as though it were busy. */
.lif-group[data-state="paused"],
.lif-group[data-state="closing"] { border-left: 4px solid var(--lif-status-attention); }
.lif-group[data-state="quiet"],
.lif-group[data-state="archived"] { border-left: 4px solid var(--lif-status-quiet); }

/* ---- Responsive ---- */
@media (max-width: 60rem) {
  .lif-groups__list { grid-template-columns: minmax(0, 1fr); }
  .lif-filters { padding: var(--lif-space-4); }
  .lif-group__fact { grid-template-columns: minmax(0, 1fr); gap: var(--lif-space-1); }
}