/* =====================================================================
   Events discovery — the page head, the filter form and the styles for
   the server-rendered gathering fragment.

   A gathering card is a doorway into relationship, not a listing row: the
   invitation and the title lead, and the logistics follow without being
   hidden. Availability, access and language are always words as well as
   colour. 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); }

/* ---- 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; }

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

.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); }

.lif-events__results { display: flex; flex-direction: column; gap: var(--lif-space-5); }
.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); }
.lif-events__count { font-family: var(--lif-font-ui); font-size: var(--lif-size-sm); }
.lif-events__showing { color: var(--lif-ink-soft); }

/* 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; }

/* Online gatherings have no place on the Map, so they are counted here. */
.lif-events__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-events__online-label { font-weight: 600; }

.lif-events__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: var(--lif-space-5);
}
.lif-events__pages { display: flex; flex-wrap: wrap; gap: var(--lif-space-3); }
.lif-events__routes { display: flex; flex-wrap: wrap; gap: var(--lif-space-3); }

/* ---- One gathering ---- */
.lif-event {
  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-event:hover { box-shadow: var(--lif-shadow), 0 0 0 1px var(--lif-accent); }
.lif-event__image { display: block; width: 100%; height: 10rem; object-fit: cover; }
.lif-event__body {
  display: flex;
  flex-direction: column;
  gap: var(--lif-space-3);
  padding: var(--lif-space-5);
}
.lif-event__title { font-size: var(--lif-size-lg); }
.lif-event__link { color: var(--lif-accent-deep); text-decoration: none; }
.lif-event__link:hover { text-decoration: underline; }
.lif-event__invitation { font-family: var(--lif-font-ui); font-size: var(--lif-size-sm); color: var(--lif-ink-soft); }

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

/* The word carries the meaning; the tone only 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);
}
.lif-badge--open { border-color: var(--lif-status-restful); color: var(--lif-status-restful); }
.lif-badge--waitlist, .lif-badge--full { border-color: var(--lif-status-attention); color: var(--lif-status-attention); }
.lif-badge--closed { border-color: var(--lif-status-quiet); color: var(--lif-status-quiet); }
.lif-badge--cancelled { border-color: var(--lif-status-problem); color: var(--lif-status-problem); }

.lif-event__facts { display: flex; flex-direction: column; gap: var(--lif-space-2); margin: 0; }
.lif-event__fact {
  display: grid;
  grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr);
  gap: var(--lif-space-3);
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-sm);
}
.lif-event__fact dt { color: var(--lif-ink-soft); }
.lif-event__fact dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
.lif-event__zone { display: block; font-size: var(--lif-size-xs); color: var(--lif-ink-soft); }
.lif-event__areas { list-style: none; display: flex; flex-wrap: wrap; gap: var(--lif-space-1); }
.lif-event__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-event__area-none { color: var(--lif-ink-soft); }
.lif-event__recording { font-family: var(--lif-font-ui); font-size: var(--lif-size-xs); color: var(--lif-ink-soft); }
.lif-event__actions { margin-top: auto; padding-top: var(--lif-space-2); }

/* A gathering the Host cancelled is still explained, never quietly dropped. */
.lif-event[data-availability="cancelled"] { border-left: 4px solid var(--lif-status-problem); }

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