/* ==========================================================================
   soulmate.de — termine.inc.css
   Regeln, die ausschliesslich die Terminseite braucht.
   Wird nach assets/css/style.css eingebunden.

   .event--past wird zur Laufzeit von assets/js/termine.inc.js gesetzt.
   ========================================================================== */

.events {
  display: grid;
  gap: var(--sp-s);
  list-style: none;
  margin: 0;
  padding: 0;
}

.event {
  display: grid;
  gap: var(--sp-s);
  align-items: center;
  padding: var(--sp-m) clamp(1.25rem, 3vw, 2rem);
  background: var(--c-white);
  border: 1px solid var(--c-sand);
  border-radius: var(--r-l);
}

@media (min-width: 52rem) {
  .event {
    grid-template-columns: 9rem 1fr auto;
    gap: var(--sp-m);
  }
}

.event__date {
  font-family: var(--font-display);
  line-height: 1.1;
}

.event__day {
  display: block;
  font-size: 2.5rem;
  color: var(--c-ink);
}

.event__month {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-olive);
  margin-top: 0.3rem;
}

.event__body h3 {
  margin-bottom: var(--sp-3xs);
}

.event__body p {
  margin: 0;
  font-size: 0.9375rem;
}

.event__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  list-style: none;
  margin: var(--sp-2xs) 0 0;
  padding: 0;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
}

.event--past {
  background: transparent;
  border-style: dashed;
  border-color: var(--c-taupe);
  opacity: 0.72;
}

.event--past .event__day,
.event--past h3 {
  color: var(--c-ink-soft);
}

.event__status {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--c-sand);
  color: var(--c-brown);
}