.accordion { margin-top: 32px; border-top: 1px solid var(--line) }
.accordion-item { border-bottom: 1px solid var(--line) }
.accordion-item h3 { margin: 0 }
.accordion-item button { width: 100%; padding: 20px 50px 20px 20px; margin-bottom: 20px; position: relative; border: 1; border-style: dotted ; border-color: #d3d3d3; background: #fff; color: var(--navy); cursor: pointer; font: inherit; font-weight: bold; text-align: left }
.accordion-item button::after { content: "+"; position: absolute; right: 20px; top: 50%; color: var(--blue); font-size: 24px; font-weight: normal; transform: translateY(-50%) }
.accordion-item button[aria-expanded="true"] { background: var(--pale) }
.accordion-item button[aria-expanded="true"]::after { content: "−" }
.accordion-panel { padding: 0 20px 20px; background: var(--pale) }
.accordion-panel p { margin: 0; line-height: 1.9 }
.accordion-panel > ul { margin: 0; padding: 16px 0 0 1.5em }
.event-accordion { margin-top: 24px }
.event-accordion .accordion-item button { padding: 22px 56px 22px 22px }
.event-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 9px }
.event-status { display: inline-block; padding: 3px 9px; border-radius: 999px; color: #fff; font-size: 11px; line-height: 1.5 }
.event-status.status-closed { background: #ad7720 }
.event-status.status-ended { background: #68717a }
.event-category { color: var(--blue); font-size: 12px }
.event-title, .event-meta { display: block }
.event-title { font-size: 17px; line-height: 1.6 }
.event-meta { margin-top: 7px; color: #3f4b57; font-size: 16px; font-weight: bold }
.event-panel.event-panel { padding: 24px 28px 28px }
.event-panel h4 { margin: 0 0 12px; color: var(--navy); font-size: 17px }
.event-detail-list { display: grid; grid-template-columns: 8em minmax(0, 1fr); margin: 22px 0; border-top: 1px solid #d4dce3 }
.event-detail-list dt, .event-detail-list dd { padding: 11px 12px; border-bottom: 1px solid #d4dce3; line-height: 1.7 }
.event-detail-list dt { color: var(--navy); font-weight: bold }
.event-detail-list dd { margin: 0; background: #fff }
.event-panel > .more-link {
  padding: 10px 18px;
  border: 1px solid var(--navy);
  border-radius: 6px;
  background: #fff;
  color: var(--navy);
  text-decoration: none
}
.event-panel > .more-link:hover,
.event-panel > .more-link:focus-visible {
  background: var(--navy);
  color: #fff
}
@media(max-width:760px) {
  .event-heading { align-items: flex-start; flex-direction: column; gap: 6px }
  .event-title { font-size: 15px }
  .event-meta { font-size: 14px }
  .event-detail-list { grid-template-columns: 1fr }
  .event-detail-list dt { padding-bottom: 3px; border-bottom: 0 }
  .event-detail-list dd { padding-top: 3px }
}