/**
 * MTB de Zeeleeuw — programs & terrain components (v2.1.24)
 *
 * New for the 2026 redesign direction: the club trains on three terrains
 * (duin = home terrain, weg = conditioning, strand = conditional bonus,
 * gated by the tide) rather than riding a set of fixed named routes. This
 * file holds the small, reusable label/data components that make that
 * terrain taxonomy and schedule data visible wherever a training/clinic
 * is described — in an "Eigen HTML" layout-builder block today, and in
 * the com_eventbooking theme override that will render real registration
 * data through the same classes later (see NOTES.md).
 *
 * v2.1.26: the capacity/status-pill widget mentioned above as a future
 * step now has a real, if modest, first use — see the "v2.1.25 exception"
 * note below and NOTES.md. Still no full com_eventbooking theme override
 * (that's the events *detail* page and category/list views, untouched);
 * this only covers the one sidebar module that was already live.
 *
 * v2.1.25 exception: the live site (armandjansen.nl) already runs
 * mod_eb_events (the "improved" tmpl variant — .ebm-upcoming-events-
 * improved) in the sidebar, rendering real events with zero template
 * styling — plain stacked <div>s, since this template deliberately
 * doesn't load Bootstrap (see index.php) and the module's own markup
 * leans on Bootstrap grid classes (.row/.col-md-3/.col-md-9) that do
 * nothing here. That's a real, currently-live component (not a future
 * "Eigen HTML" block), so it gets real CSS now rather than waiting for
 * the full theme-override step — scoped to .sidebar-module so it only
 * touches this one module position, not every possible EventBooking
 * view/layout across the site.
 */
.sidebar-module .ebm-upcoming-events {
  display: flex;
  flex-direction: column;
}

.sidebar-module .up-event-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-top: 1px solid var(--z-line);
}

.sidebar-module .up-event-item:first-child {
  border-top: none;
  padding-top: 0;
}

.sidebar-module .up-event-item .col-md-9 {
  min-width: 0;
  padding-top: 2px;
}

/* v2.1.26: the html/mod_eb_events/improved.php override adds an optional
   terrain tag and capacity readout under the title — same data
   EventbookingHelperFormatter/event_properties.php already computes for
   the full event-detail view (event_capacity, total_registrants), now
   surfaced in the compact sidebar module too. Guarded in the override to
   only render when the event actually has a capacity set, so a free/
   unlimited event (most club trainings) just shows the title, nothing
   more. */
.eb-event-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.capacity {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.capacity .cap-track {
  flex: 1;
  min-width: 40px;
  height: 5px;
  border-radius: 999px;
  background: var(--z-line);
  overflow: hidden;
}

.capacity .cap-fill {
  height: 100%;
  border-radius: 999px;
}

.capacity .cap-fill.ok { background: #1F8F52; }
.capacity .cap-fill.warn { background: var(--z-gold); }
.capacity .cap-fill.full { background: var(--z-pink); }

.capacity .cap-text {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--z-ink-soft);
  font-variant-numeric: tabular-nums;
}

.sidebar-module .ebm-event-date {
  width: 44px;
  flex: none;
  text-align: center;
  background: var(--z-navy);
  color: #fff;
  border-radius: var(--radius-sm);
  padding-block: 6px 4px;
  font-family: var(--font-mono);
  line-height: 1.1;
}

.sidebar-module .ebm-event-month {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.75;
}

.sidebar-module .ebm-event-day {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sidebar-module .ebm-event-link {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-sm);
  color: var(--z-ink);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.sidebar-module .ebm-event-link:hover {
  color: var(--z-accent);
}

.card-tags {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

/* Terrain label — which of the three terrains (duin/weg/strand) a
   training or clinic belongs to. Color mapping is deliberate, not
   decorative: blue = duin (the club's home terrain), pink = weg
   (conditioning), gold = strand (conditional, tide-gated bonus) — the
   same mapping used for the hero-panel icons and the terrain feature-card
   variants in hero.css, so it reads consistently across the whole site. */
.terrain-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.terrain-tag svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
}

.terrain-tag.duin { color: var(--z-blue); }
.terrain-tag.weg { color: var(--z-pink); }
.terrain-tag.strand { color: #8a6d00; }

/* On a dark/.hero-style surface, the default terrain colors above don't
   have enough contrast — lighter tints instead, same hue family. */
.section-dark .terrain-tag.duin,
.hero-panel .terrain-tag.duin { color: #fff; }
.section-dark .terrain-tag.strand,
.hero-panel .terrain-tag.strand { color: var(--z-gold); }

/* Level/difficulty label — instap/gemiddeld/pittig. Separate from the
   terrain tag (a training's terrain and its level are two different
   facts), sits in the same .card-tags row. */
.diff-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--step-xs);
  font-weight: 700;
  padding: 4px var(--space-3);
  border-radius: 999px;
  width: fit-content;
}

.diff-tag .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.diff-instap { background: var(--z-gold-soft); color: #7A5E00; }
.diff-instap .dot { background: var(--z-gold); }
.diff-gemiddeld { background: var(--z-paper); color: var(--z-blue); border: 1px solid var(--z-line); }
.diff-gemiddeld .dot { background: var(--z-blue); }
.diff-pittig { background: var(--z-pink-soft); color: #9A1E58; }
.diff-pittig .dot { background: var(--z-pink); }

.section-dark .diff-tag,
.hero-panel .diff-tag { background: rgba(255, 255, 255, 0.14); color: #fff; }
.section-dark .diff-tag .dot,
.hero-panel .diff-tag .dot { background: var(--z-gold); }

/* Week strip — which day(s) of the week a recurring training falls on
   (Ma t/m Zo, active day(s) highlighted). More informative than a
   decorative graphic for something that repeats weekly; pass an
   active-navy / active-pink / active-gold class per active day to match
   the card's terrain. */
.week-strip {
  display: flex;
  gap: 6px;
  margin-block: var(--space-3) var(--space-1);
}

.week-strip .wd {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  background: var(--z-paper);
  border: 1px solid var(--z-line);
  color: var(--z-ink-soft);
}

.section-dark .week-strip .wd,
.hero-panel .week-strip .wd {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.55);
}

.week-strip .wd.active-navy { background: var(--z-blue); border-color: var(--z-blue); color: #fff; }
.week-strip .wd.active-pink { background: var(--z-pink); border-color: var(--z-pink); color: #fff; }
.week-strip .wd.active-gold { background: var(--z-gold); border-color: var(--z-gold); color: var(--z-navy); }

/* Status pill — a small state badge (e.g. terrain/trail condition). Green
   by default ("open"/"good"); .warn and .full modifiers cover the
   in-between and unavailable states. Semantic color, kept separate from
   the brand accent on purpose. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--z-green-soft);
  color: #1F8F52;
  font-weight: 700;
  font-size: var(--step-xs);
  padding: 4px var(--space-3);
  border-radius: 999px;
  width: fit-content;
}

.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #1F8F52; }

.status-pill.warn { background: var(--z-gold-soft); color: #7A5E00; }
.status-pill.warn .dot { background: #7A5E00; }
.status-pill.full { background: var(--z-pink-soft); color: #9A1E58; }
.status-pill.full .dot { background: var(--z-pink); }
.status-pill.muted { background: var(--z-paper); color: var(--z-ink-soft); }
.status-pill.muted .dot { background: var(--z-ink-soft); }

/* A small conditional note tied to the tide/strand terrain — e.g. "alleen
   2-3u rond laagtij" on the strand clinic card. Pink to match the strand
   clinic's conditional nature standing out from the surrounding text. */
.tide-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  font-size: 12.5px;
  color: #9A1E58;
  font-weight: 600;
}

.tide-note svg {
  width: 13px;
  height: 13px;
  stroke: #9A1E58;
  fill: none;
  flex: none;
}