/* ==========================================================================
   The event page. Currently /somatic-unwind only.

   A file of its own rather than twenty lines bolted onto therapy.css, because
   therapy.css says in its own opening comment that it is the template for the
   seven therapy pages, and this is not one of them.

   Everything else on the page comes from base.css, therapy.css and
   pricing.css. Only the bits below have no existing class.

   Every colour here is a --rw-* token. There are no hand written colour
   values outside tokens.css.
   ========================================================================== */

/* ------------------------------------------------------------- the dates --- */

/* An ordered list because the sessions run in order, but the numbers are
   suppressed: the dates ARE the sequence, and "1. Saturday 3 October" reads
   like a ranking. */
.evdates {
  list-style: none;
  margin-top: var(--rw-s-6);
  margin-bottom: var(--rw-s-5);
  padding: 0;
}

.evdates__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rw-s-2) var(--rw-s-4);
  padding-block: var(--rw-s-3);
  border-top: var(--rw-rule-w) solid var(--rw-border);
}

.evdates__item:last-child {
  border-bottom: var(--rw-rule-w) solid var(--rw-border);
}

/* Inherits --rw-text, so it is navy on a light section and cream on a dark
   one. It sits on a dark section today. */
.evdates__d { color: var(--rw-text); }

/* Muted is mist on dark (5.61, AA) and slate on light (5.25, AA). Both clear
   AA at this size, which matters because check.mjs measures every text node
   against its painted background. */
.evdates__t { color: var(--rw-text-muted); }

/* A session that has been. Set by site.js, never in the markup.

   Muted rather than faded: opacity would change the MEASURED contrast of the
   text against its background, and check.mjs measures what is painted, so a
   half transparent cream on navy would fail the gate even though the token
   it names is fine. */
.evdates__item--past .evdates__d,
.evdates__item--past .evdates__t { color: var(--rw-text-muted); }

.evdates__item--past .evdates__d { text-decoration: line-through; }

/* ----------------------------------------------------- next session card --- */

/* The card's focal line is a DATE, not a price, so it cannot use the
   figure--xl that a price gets: "Saturday 3 October" is eighteen characters of
   mono and at the xl clamp it runs off the card at 375.

   figure--md tops out at 28px, and the line height and wrapping below let it
   break onto a second line cleanly when it needs to rather than overflowing.
   An overflowing card is an OVERFLOW line in check.mjs, not a cosmetic issue. */
.evnext {
  line-height: 1.15;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* --------------------------------------------------------- safety note --- */

/* Contraindications, and they sit ABOVE the final call to action rather than
   in small print at the foot of the page. Same rule fathers-day.html set: if
   it matters enough to write down, it matters enough to be read before the
   button, not after it.

   Raised surface so it reads as set apart from the body copy without needing
   a second colour. On a light section that is white, and --rw-text on white
   measures 11.31, AAA. */
.evnote {
  margin-top: var(--rw-s-7);
  padding: var(--rw-s-5);
  background: var(--rw-bg-raised);
  border-left: var(--rw-rule-w) solid var(--rw-text);
  border-radius: 0 var(--rw-r-md) var(--rw-r-md) 0;
  max-width: var(--rw-measure);
}

.evnote strong { color: var(--rw-text-strong); }