/* ==========================================================================
   KF Elements — Event List
   --------------------------------------------------------------------------
   REDRAWN by w2.kfe-data.1 (ADR-0004's dated section; the widget is on
   `develop` only, so decision 7 permits it). A month heading as a rule line,
   then a grid of event cards: a date badge, a city, two meta lines and a
   sign-up link. The column count comes from the widget's responsive control;
   the two media queries at the end are the safety net for pages saved before
   it existed (see steps.css).

   THREE SWITCHES, each defaulting to what this widget drew before:
   `date-solid` fills the badge in the accent instead of the deeper surface,
   `month-inline` moves the group count beside the month instead of to the far
   end of the heading, and `cta_style=link` draws the sign-up as an underlined
   text link instead of the outline button. The anchor's three data-* are the
   same either way.

   THE CARD'S LIFT IS ITS OWN and does not read `--kfe-card-lift`: that token
   is the shared card hover, and a site that sets it to `none` still wants the
   event cards to lift, which is what the reference draws (spec §1.2).

   Tokens only: every colour reads a --kfe-* custom property from base.css with
   today's value as its fallback (ADR-0004 decision 2), except the
   rgba(255,255,255,…) flips inside a .kfe-dark rule and the rgba(0,0,0,…)
   shadow, which are the pack's two idioms (feature-grid.css).
   ========================================================================== */

.kfe .kfe-event-list .head { margin-bottom: 40px; text-align: var(--kfe-head-align, start); }
.kfe .kfe-event-list .head .kfe-event-list-title {
  font-family: var(--kfe-font-heading);
  font-weight: var(--kfe-heading-weight);
  color: var(--kfe-heading, var(--kfe-primary));
  letter-spacing: -0.01em;
  margin: 0;
  font-size: var(--kfe-title-size, var(--kfe-h2-size, clamp(1.8rem, 3.4vw, 2.7rem)));
  line-height: 1.22;
}
.kfe .kfe-event-list.kfe-dark .head .kfe-event-list-title { color: #fff; }
/* NO measure on the intro: the reference's lead-in runs the wrap's full width
   (strip 17-cmp-1), and this widget's earlier 62ch cap turned its two lines
   into three in the read pair. */
.kfe .kfe-event-list .intro { color: var(--kfe-body, var(--kfe-muted)); font-size: var(--kfe-body-size, 17px); margin-bottom: 48px; }
.kfe .kfe-event-list .intro p + p { margin-top: 16px; }
.kfe .kfe-event-list .intro ul, .kfe .kfe-event-list .intro ol { margin: 16px 0 0; padding-inline-start: var(--kfe-list-indent); }
.kfe .kfe-event-list .intro li + li { margin-top: 6px; }
.kfe .kfe-event-list .intro a { color: var(--kfe-link, var(--kfe-accent)); }
.kfe .kfe-event-list .empty { color: var(--kfe-body, var(--kfe-muted)); font-size: 16px; }
.kfe .kfe-event-list .empty p + p { margin-top: 16px; }

.kfe .kfe-event-list .month { margin-top: 30px; }
.kfe .kfe-event-list .month + .month { margin-top: 52px; }
.kfe .kfe-event-list .month-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  border-bottom: 2px solid var(--kfe-line);
  padding-bottom: 12px;
  margin-bottom: 22px;
  font-size: 21px;
}
/* `month-inline`: the count sits beside the month rather than at the far end. */
.kfe .kfe-event-list.month-inline .month-h { justify-content: flex-start; }
.kfe .kfe-event-list .month-h em {
  font-style: normal;
  color: var(--kfe-muted);
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

.kfe .kfe-event-list-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.kfe .kfe-event-list .event {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--kfe-white);
  border: 1px solid var(--kfe-line);
  border-radius: var(--kfe-radius-card, 14px);
  padding: 26px 24px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* Its OWN lift — not var(--kfe-card-lift) — see the file header. */
/* `--kfe-shadow-card` with this sheet's own shadow as its fallback (#81): the
   event row's is a shallower 10/24 AND a different ink — plain black, not the
   pack's rgba(10, 14, 28) — which is why the token is read and not declared. */
.kfe .kfe-event-list .event:hover { transform: translateY(-2px); box-shadow: var(--kfe-shadow-card, 0 10px 24px rgba(0, 0, 0, 0.1)); }

.kfe .kfe-event-list .event .date {
  flex: 0 0 56px;
  border-radius: 12px;
  background: var(--kfe-surface-deep);
  padding: 9px 0;
  text-align: center;
  line-height: 1.05;
}
.kfe .kfe-event-list .event .date .d {
  display: block;
  font-family: var(--kfe-font-heading);
  font-size: 22px; font-weight: 700;
  color: var(--kfe-primary);
}
.kfe .kfe-event-list .event .date .m {
  display: block;
  margin-top: 2px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--kfe-accent);
}
/* `date-solid`: the badge is filled in the accent and its type turns white. */
.kfe .kfe-event-list.date-solid .event .date { background: var(--kfe-accent); }
.kfe .kfe-event-list.date-solid .event .date .d { color: #fff; }
.kfe .kfe-event-list.date-solid .event .date .m { color: #fff; opacity: 0.85; }

.kfe .kfe-event-list .event .body { min-width: 0; }
.kfe .kfe-event-list .event h3 {
  font-size: 18px;
  margin: 2px 0 6px;
  line-height: 1.25;
}
.kfe .kfe-event-list .event .meta { color: var(--kfe-muted); font-size: 13px; margin-bottom: 8px; }
.kfe .kfe-event-list .event .spk { color: var(--kfe-body, var(--kfe-ink)); font-size: 13.5px; margin-bottom: 12px; }
.kfe .kfe-event-list .event .kfe-btn { margin-top: 4px; padding: 12px 26px; font-size: 12px; }

/* `cta_style=link`: the reference's underlined text link, drawn as .kfe-more
   is drawn in base.css — a 2px rule mixed to 35% where color-mix() exists, and
   solid on hover. */
.kfe .kfe-event-list .event .kfe-event-list-cta {
  display: inline-block;
  color: var(--kfe-link, var(--kfe-accent));
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 1px;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .kfe .kfe-event-list .event .kfe-event-list-cta { border-bottom-color: color-mix(in srgb, var(--kfe-link, var(--kfe-accent)) 35%, transparent); }
}
.kfe .kfe-event-list .event .kfe-event-list-cta:hover,
.kfe .kfe-event-list .event .kfe-event-list-cta:focus-visible {
  color: var(--kfe-accent-deep, var(--kfe-link, var(--kfe-accent)));
  border-bottom-color: currentColor;
}

/* dark-ground treatment, in the pack's idiom (steps.css / feature-grid.css) */
.kfe .kfe-event-list.kfe-dark .intro,
.kfe .kfe-event-list.kfe-dark .empty { color: var(--kfe-on-dark); }
.kfe .kfe-event-list.kfe-dark .intro a { color: #fff; }
.kfe .kfe-event-list.kfe-dark .month-h { border-bottom-color: rgba(255, 255, 255, 0.14); }
.kfe .kfe-event-list.kfe-dark .month-h em { color: var(--kfe-on-dark-soft); }
.kfe .kfe-event-list.kfe-dark .event {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
.kfe .kfe-event-list.kfe-dark .event:hover { border-color: var(--kfe-highlight); background: rgba(255, 255, 255, 0.07); }
.kfe .kfe-event-list.kfe-dark .event .date { background: rgba(255, 255, 255, 0.08); }
.kfe .kfe-event-list.kfe-dark .event .date .d { color: #fff; }
.kfe .kfe-event-list.kfe-dark .event .date .m { color: var(--kfe-highlight); }
.kfe .kfe-event-list.kfe-dark.date-solid .event .date { background: var(--kfe-accent); }
.kfe .kfe-event-list.kfe-dark.date-solid .event .date .m { color: #fff; }
.kfe .kfe-event-list.kfe-dark .event h3 { color: #fff; }
.kfe .kfe-event-list.kfe-dark .event .meta { color: var(--kfe-on-dark); }
.kfe .kfe-event-list.kfe-dark .event .spk { color: rgba(255, 255, 255, 0.62); }
.kfe .kfe-event-list.kfe-dark .event .kfe-event-list-cta,
.kfe .kfe-event-list.kfe-dark .event .kfe-event-list-cta:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.5); }

/* pre-responsive-control safety net — see steps.css */
@media (max-width: 980px) {
  .kfe .kfe-event-list .kfe-event-list-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 560px) {
  .kfe .kfe-event-list .kfe-event-list-grid { grid-template-columns: 1fr; }
  .kfe .kfe-event-list .event { padding: 20px; gap: 16px; }
}

/* The triforce — the long note is in steps.css (kf-elements #118, 2026-09-20).
   This grid is two columns at the pack's DESKTOP default as well, so an orphan
   exists above 1024 too; the band stops at 1024 all the same, because a client
   that sets Columns to 3 there (wp-eedk's `event-months` does) would be moved
   wrongly and this rule cannot tell the two apart. The three limits and the
   `kfe-no-triforce` opt-out are in that note too; this widget exposes no Gap
   control, so limit (c) does not reach it. */
@media (min-width: 768px) and (max-width: 1024px) {
  /* 12px is half of this grid's own 24px gap (:69). */
  .kfe .kfe-event-list .kfe-event-list-grid > :last-child:nth-child(2n + 1):not(:first-child) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 12px);
  }
  .kfe-no-triforce .kfe .kfe-event-list .kfe-event-list-grid > :last-child:nth-child(2n + 1):not(:first-child) {
    grid-column: auto;
    justify-self: auto;
    width: auto;
  }
}