/*
 * sfs-events.css — layout for the OpenMeet widget (docs/js/sfs-events.js).
 *
 * The widget ships classed markup and deliberately leaves all spacing to
 * this file. Colours come from the Material theme's own custom properties
 * rather than hard-coded values, so light and dark schemes both work.
 *
 * Registered under extra_css in mkdocs.yml.
 */

.om-events {
  list-style: none;
  margin: 1.2em 0;
  padding: 0;
}

.om-event {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2em 1em;
  padding: 0.7em 0.9em;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.om-event:first-child {
  border-top: 0;
}

/*
 * Wide enough for two columns: the date gets a fixed-width track so dates
 * line up vertically and the archive scans as a column rather than a wall
 * of prose. Everything else shares the second track and wraps under itself.
 */
@media screen and (min-width: 45em) {
  .om-event {
    grid-template-columns: 11em 1fr;
    align-items: baseline;
  }
}

.om-when {
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  color: var(--md-default-fg-color--light);
  white-space: nowrap;
}

/* Title, venue and headcount sit on one row, separated by gaps. */
.om-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15em 0.6em;
  min-width: 0;
}

.om-title {
  font-weight: 600;
}

.om-where,
.om-who {
  font-size: 0.85em;
  color: var(--md-default-fg-color--light);
}

/*
 * Imminent or just-started: a fixed-width bar reads in both schemes,
 * unlike a background tint which would need a second dark-mode value.
 */
.om-soon {
  box-shadow: inset 3px 0 0 var(--md-accent-fg-color);
}

.om-empty {
  color: var(--md-default-fg-color--light);
}

.om-foot {
  margin-top: 1.2em;
  font-size: 0.8em;
  color: var(--md-default-fg-color--light);
}