/* Events (#178): the event card the calendar, a project's events list and the event page share (styled like the
   project and product cards), the /events calendar (filters, month table, list) and the tag list. Phones get the
   list only: the month table is hidden under 700px, and the list below it carries every event. */
.ecards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.ecard { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: start; height: 100%; padding: 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s; }
.ecard:hover, .ecard:focus-within { border-color: var(--accent); }
.ecard-date { display: grid; place-items: center; align-content: center; width: 72px; height: 72px; border-radius: calc(var(--radius) + 4px);
  text-decoration: none; color: #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 70%, #000), color-mix(in srgb, var(--accent-2, var(--accent)) 45%, #000)); }
.ecard-date span { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.ecard-date strong { font-family: var(--display); font-size: 1.7rem; line-height: 1; }
.ecard-body { display: grid; gap: 6px; min-width: 0; align-content: start; }
.ecard-name { margin: 0; font-size: 1.1rem; line-height: 1.25; }
.ecard-name a { color: inherit; display: inline-block; padding-block: 2px; }
.ecard-when, .ecard-where, .ecard-by { margin: 0; font-size: .9rem; color: var(--muted); }
.ecard-when { color: var(--text); }
.ecard-where:empty { display: none; }
.ecard-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ecard .btn.small { min-height: 40px; padding: 6px 14px; font-size: .85rem; width: auto; flex: none; }
.tz { color: var(--muted); font-size: .85em; }

.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.tag-list li { padding: 2px 8px; font-size: .75rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.release-info .tag-list, .event .tag-list { margin-block: 12px; }
.event-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.event .facts { margin-top: 12px; }

.cal-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; margin-bottom: 18px; padding: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.cal-filters label { display: grid; gap: 4px; font-size: .85rem; color: var(--muted); min-width: 140px; flex: 1 1 140px; }
.cal-filters input, .cal-filters select { min-height: 44px; padding: 6px 10px; font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius); }
.cal-filters .btn { min-height: 44px; flex: none; }
.cal-following { flex-basis: 100%; }
.cal-following label { display: inline-flex; align-items: center; gap: 8px; color: var(--text); min-width: 0; }
.cal-following input { min-height: 0; width: 20px; height: 20px; }
.cal-views { margin: 0 0 12px; }
.cal-views [aria-current="page"] { font-weight: 700; color: var(--text); text-decoration: none; }
.cal-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cal-nav h2 { margin: 0; }

.cal-month { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: 28px; }
.cal-month th { padding: 6px; font-size: .8rem; text-align: left; color: var(--muted); }
.cal-month th abbr { text-decoration: none; }
.cal-month td { height: 96px; padding: 6px; vertical-align: top; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.cal-month td:focus { outline: 3px solid var(--accent); outline-offset: -3px; }
.cal-month td.cal-out { background: transparent; }
.cal-month td.cal-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-day { display: block; font-size: .85rem; font-weight: 700; }
.cal-today .cal-day time { color: var(--accent); }
.cal-month ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; }
.cal-month li a { display: block; padding: 2px 6px; font-size: .78rem; line-height: 1.3; border-radius: 4px; text-decoration: none; color: var(--text);
  background: color-mix(in srgb, var(--accent) 22%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-month li a:hover, .cal-month li a:focus { background: color-mix(in srgb, var(--accent) 40%, transparent); }
.cal-list-head { margin: 8px 0 14px; font-size: 1.2rem; }

@media (max-width: 700px) {
  .cal-month { display: none; }
  .cal-nav h2 { flex-basis: 100%; order: -1; }
}
@media (max-width: 600px) {
  .ecard { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .ecard-date { width: 56px; height: 56px; }
  .ecard .btn.small { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .ecard { transition: none; } }