/* dc-events.css — the public events list on the WordPress NEWS & LIVE page
   (data: /events/upcoming.php). Uses the tokens in dc-tokens.css, which loads
   first; never dc.css, whose base rules would restyle the WordPress theme.
   Every rule is scoped to .dc-events; the font is the theme's. */

.dc-events { color: var(--ink); margin: 0 0 var(--space-6); }

/* The language switch sits on the list's top edge, so it reads as part of
   the list, not of the page. */
.dc-events__bar { display: flex; justify-content: flex-end; }
.dc-events__switch { display: inline-flex; border: 1px solid var(--control-border);
  border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; overflow: hidden; }
.dc-events__switch a, .dc-events__switch span { font-size: 13px; line-height: 20px;
  padding: var(--space-1) var(--space-3); color: var(--ink); text-decoration: none; box-shadow: none; }
.dc-events__switch span[aria-current="true"] { background: var(--fill-primary); color: var(--on-fill-primary); font-weight: 600; }
.dc-events__switch a:hover { background: var(--surface-200); color: var(--brand-blue-text); }

.dc-events__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--control-border); }
.dc-events__item { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4); align-items: center;
  margin: 0; padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
.dc-events__item::before { content: none; }

.dc-events__date { text-align: center; line-height: 1.2; }
.dc-events__year { font-size: 0.8em; color: var(--ink-muted); }
.dc-events__day { font-size: 1.2em; font-weight: 700; }
.dc-events__weekday { font-size: 0.9em; }

.dc-events__name { font-weight: 700; color: var(--ink); text-decoration: none; box-shadow: none; }
a.dc-events__name:hover { color: var(--brand-blue-text); text-decoration: underline; text-underline-offset: 3px; }
.dc-events__meta { margin: 2px 0 0; font-size: 0.9em; color: var(--ink-muted); }

/* The design system's secondary button. */
.dc-events__ticket { display: inline-block; white-space: nowrap; font-weight: 600; font-size: 0.9em;
  color: var(--ink); text-decoration: none; box-shadow: none;
  border: 1px solid var(--control-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); }
.dc-events__ticket:hover { background: var(--surface-200); color: var(--brand-blue-text); }

.dc-events a:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 2px; border-radius: 4px; }
.dc-events__empty { padding: var(--space-4) 0; color: var(--ink-muted); }

/* Phones: the ticket button drops below the text, aligned with the name. */
@media (max-width: 560px) {
  .dc-events__item { grid-template-columns: 5.5em minmax(0, 1fr); }
  .dc-events__action { grid-column: 2; justify-self: start; }
}