/* EBT Training Dates widget. Scoped to .ebt-dates. Values mirror Site Constants colors and the
   EMDR Basic Training page CSS (#ebt). Keep both in sync if the palette changes. */

.ebt-dates,
.ebt-dates *,
.ebt-dates *::before,
.ebt-dates *::after { box-sizing: border-box; }

.ebt-dates {
  --dark: #23242a;
  --cream: #FAF9F7;
  --white: #ffffff;
  --pink: #d61f69;
  --pink-hover: #b01857;
  --body: #3d3d3a;
  --muted: #6b6b6b;
  --border: #e8e8e4;
  --font-head: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --content-width: 1140px;

  font-family: var(--font-body);
  color: var(--body);
  background: var(--cream);
  border-top: 1px solid var(--border);
  padding: 64px 32px;
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

.ebt-dates__inner { max-width: var(--content-width); margin: 0 auto; }

.ebt-dates :where(h2, p, ul, li) { margin: 0; padding: 0; margin-block-end: 0 !important; }
.ebt-dates a { color: var(--pink); }
.ebt-dates a:hover { color: var(--pink-hover); }
.ebt-dates :focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 2px; }

.ebt-dates .sec-eyebrow {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 8px !important;
}
.ebt-dates h2 {
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 28px !important;
}
.ebt-dates .lede { font-size: 17px; max-width: 760px; margin-bottom: 32px !important; }

.ebt-dates .event-group + .event-group { margin-top: 40px; }
.ebt-dates .event-group-label {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px !important;
}
.ebt-dates .event-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.ebt-dates__list > .event-group:last-child > .event-row:last-child { border-bottom: none; }
.ebt-dates .event-date {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
  flex: 0 0 190px;
}
.ebt-dates .event-loc { flex: 1 1 240px; min-width: 0; }
.ebt-dates .event-loc-name {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
  display: block;
}
.ebt-dates .event-loc-meta {
  font-size: 12.5px;
  color: var(--muted);
  display: block;
  margin-top: 2px;
}
.ebt-dates .badge {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
  background: var(--border);
  color: var(--body);
  white-space: nowrap;
}
.ebt-dates .badge-inperson { background: #fef0f5; color: var(--pink); }
.ebt-dates .badge-virtual { background: #eceef2; color: #46506b; }

.ebt-dates .btn {
  display: inline-block;
  background: var(--pink);
  color: var(--white) !important;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 9px 18px;
  border-radius: 4px;
  transition: background 0.15s;
  margin-left: auto;
}
.ebt-dates .btn:hover { background: var(--pink-hover); color: var(--white) !important; }

.ebt-dates .event-note { font-size: 13px; color: var(--muted); margin-top: 18px !important; }
.ebt-dates__empty { font-size: 15px; color: var(--muted); }

/* Editor-only helpers */
.ebt-dates .event-row.is-past { opacity: 0.45; }
.ebt-dates .ebt-dates__past-flag { color: #8a1f1f; font-weight: 600; }
.ebt-dates__problems {
  background: #fff4f4;
  border: 1px solid #e3b4b4;
  border-radius: 4px;
  color: #8a1f1f;
  font-size: 13px;
  padding: 12px 16px;
  margin-bottom: 24px;
}
.ebt-dates__problems ul { margin: 6px 0 0 18px; list-style: disc; }

@media (max-width: 767px) {
  .ebt-dates { padding: 44px 20px; }
  .ebt-dates h2 { font-size: 24px; }
  .ebt-dates .event-row { gap: 10px; }
  .ebt-dates .event-date,
  .ebt-dates .event-loc { flex: 1 1 100%; }
  .ebt-dates .btn { margin-left: 0; }
}