section {
  padding:82px 0;
}

.head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:30px;
}

.head h2 {
  margin:7px 0 0;
  color:var(--purple-deep);
  font-size:var(--text-h2);
  line-height:1.04;
  letter-spacing:var(--tracking-tighter);
}

.head p {
  margin:0;
  max-width:480px;
  color:var(--muted);
}

.event-switch {
  display:flex;
  gap:8px;
  margin-top:25px;
}

.event-switch a {
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  color:var(--purple);
  font-size:var(--text-xs);
  font-weight: 700;
}

.event-switch a.current {
  background:var(--purple);
  border-color:var(--purple);
  color:#fff;
}

.detail-hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:60px 0 74px;
  background:var(--purple-deep);
  color:#fff;
}

.detail-hero:after {
  content:"";
  position:absolute;
  z-index:-1;
  width:510px;
  height:510px;
  right:-180px;
  top:-290px;
  border:64px solid var(--cyan);
  border-radius:var(--radius-round);
}

.back {
  display:inline-block;
  margin-bottom:27px;
  color:var(--cyan);
  font-size:var(--text-sm);
  font-weight: 700;
}

.detail-grid {
  display:grid;
  grid-template-columns:1fr 325px;
  gap:45px;
  align-items:end;
}

.detail-hero .eyebrow {
  color:var(--cyan);
}

.detail-hero h1 {
  margin:10px 0 16px;
  font-size:var(--text-display);
  line-height:.98;
  letter-spacing:var(--tracking-tighter);
}

.detail-hero p {
  max-width:690px;
  margin:0;
  color:var(--on-dark);
  font-size:var(--text-lead);
}

.detail-date {
  padding:23px;
  border-radius:var(--radius-lg);
  background:var(--orange);
  color:#fff;
}

.detail-date b {
  display:block;
  font-size:var(--text-3xl);
  line-height:1;
}

.detail-date span {
  display:block;
  margin-top:9px;
  font-size:var(--text-sm);
  font-weight: 700;
}

.details {
  display:grid;
  grid-template-columns:1fr 330px;
  gap:56px;
}

.copy h2 {
  color:var(--purple-deep);
  font-size:var(--text-3xl);
  letter-spacing:var(--tracking-tighter);
}

.copy p {
  color:var(--muted);
}

.side-card {
  padding:24px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--mist);
}

.side-card h2 {
  margin:0 0 14px;
  color:var(--purple-deep);
  font-size:var(--text-lg);
}

.side-card dl {
  margin:0;
}

.side-card div {
  padding:11px 0;
  border-top:1px solid var(--line);
}

.side-card dt {
  color:var(--muted);
  font-size:var(--text-2xs);
  font-weight: 700;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
}

.side-card dd {
  margin:3px 0 0;
  color:var(--purple-deep);
  font-size:var(--text-md);
  font-weight: 700;
}

.agenda {
  display:grid;
  gap:10px;
}

.agenda > div {
  display:grid;
  grid-template-columns:80px 1fr;
  gap:18px;
  padding:15px 0;
  border-top:1px solid var(--line);
}

.agenda time {
  color:var(--purple);
  font-size:var(--text-xs);
  font-weight: 700;
}

.agenda b {
  color:var(--purple-deep);
}

.agenda p {
  margin:3px 0 0;
  font-size:var(--text-sm);
}

.partners {
  background:var(--mist);
}

.partner-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

.partner {
  padding:21px;
  border-radius:var(--radius-md);
  background:#fff;
  border:1px solid var(--line);
}

.partner span {
  display:block;
  color:var(--muted);
  font-size:var(--text-2xs);
  font-weight: 700;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
}

.partner b {
  display:block;
  margin-top:7px;
  color:var(--purple-deep);
  font-size:var(--text-lead);
}

@media(max-width:900px) {
  .details {
    gap:30px;
  }
}

@media(max-width:760px) {
  .details,.detail-grid {
    grid-template-columns:1fr;
  }
  
  .head {
    display:block;
  }
  
  .head p {
    margin-top:15px;
  }
  
  .partner-grid {
    grid-template-columns:1fr;
  }
  
  section {
    padding:60px 0;
  }
  
  .detail-hero {
    padding:49px 0 57px;
  }
}

@media(max-width:460px) {
  .event-switch {
    flex-wrap:wrap;
  }
  
  .detail-hero h1 {
    font-size:var(--text-4xl);
  }
}

/* Editorial spacing and accessible contrast within the supplied event design. */
.actions { margin-top: 0; }
.button { min-height: 47px; font-size: var(--text-md); }
.detail-date { color: var(--ink); }
.cta { padding: 58px 0; background: var(--purple); color: #fff; }
.cta .head h2 { color: #fff; }
.cta .head p { color: var(--on-dark); }
.cta .eyebrow { color: var(--cyan); }
.cta .actions { margin-top: 25px; }
[id] { scroll-margin-top: 105px; }
:focus-visible { outline-color: var(--purple); box-shadow: 0 0 0 3px #fff; }
@media (max-width: 1000px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 28px; }
}
@media (max-width: 760px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .agenda > div { grid-template-columns: 1fr; gap: 6px; }
  [id] { scroll-margin-top: 85px; }
}

/* ---------------------------------------------------------------------------
   Hero (2026 redesign, Events.dc.html), both views. Base layout: .page-hero in
   components.css; here the Upcoming / Past switch and the "Next up" /
   "Latest recap" card.
   --------------------------------------------------------------------------- */
@media (min-width: 1181px) {
  .page-hero--events .page-hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

.page-hero-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.ev-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: #fff;
}

.ev-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-button-sm);
  padding: 0 22px;
  border-radius: var(--radius-pill);
  color: var(--ink-strong);
  font-size: var(--text-ui);
  font-weight: 700;
  text-decoration: none;
  transition: background-color .18s, color .18s;
}

.ev-tabs a:hover {
  background: var(--purple-wash);
  color: var(--purple);
}

.ev-tabs a[aria-current] {
  background: var(--purple);
  color: #fff;
}

.ev-hero-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 560px;
}

.ev-hero-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ev-hero-card .ev-status {
  padding: 5px 12px;
  font-size: var(--text-ui-2xs);
}

.ev-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.ev-hero-date {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 92px;
  height: 104px;
  border-radius: var(--ds-radius-md);
  background: var(--join);
  color: var(--night-deep);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.ev-hero-date span {
  font-size: var(--text-ui-2xs); /* 12px, the minimum for small labels (UI/UX review: 11px). */
}

.ev-hero-date span:first-child {
  font-size: var(--text-ui-2xs);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ev-hero-date b {
  font-family: var(--font-display);
  font-size: var(--text-ui-tile-lg);
  line-height: 1;
  white-space: nowrap;
}

/* A date range (21–24) is too wide for the tile at full size. */
.ev-hero-date.is-range b {
  font-size: var(--text-ui-tile);
}

.ev-hero-text {
  min-width: 0;
}

.ev-hero-text h2 {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-tile);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.ev-hero-text p:not(.visually-hidden) {
  margin: 8px 0 0;
  color: var(--muted-ui);
  font-size: var(--text-ui);
  line-height: 1.55;
}

.ev-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ev-hero-chips li {
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .8);
  color: var(--ink-strong);
  font-size: var(--text-ui-xs);
  font-weight: 700;
  line-height: 1.3;
}

.ev-hero-actions {
  display: flex;
  gap: 12px;
}

.ev-hero-actions .pill-button {
  min-height: var(--ds-button-lg);
}

.ev-hero-actions .pill-button--primary {
  flex: 1;
}

.ev-hero-actions .pill-button svg {
  width: 16px;
  height: 16px;
}

/* "Claim PDUs ↗" (past events): the standard secondary pill (white, outlined;
   components.css). It was a see-through white pill with no visible edge on
   the frosted card (UI/UX audit). */
.ev-hero-pdus {
  padding: 0 20px;
  font-size: var(--text-ui);
}

@media (max-width: 767px) {
  .ev-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-self: stretch;
  }

  .ev-tabs a {
    padding: 0 12px;
    font-size: var(--text-ui-sm);
  }

  .ev-hero-card {
    gap: 16px;
    padding: 22px;
    border-radius: var(--ds-radius-md);
  }

  /* "Next up" / "Latest recap": 12px, not the shared card's 11px on phones (UI/UX review). */
  .ev-hero-card .glass-card-label {
    font-size: var(--text-ui-2xs);
  }

  .ev-hero-main {
    gap: 16px;
  }

  .ev-hero-date {
    width: 72px;
    height: 84px;
    border-radius: var(--ds-radius-sm);
  }

  .ev-hero-date span,
  .ev-hero-date span:first-child {
    font-size: var(--text-ui-2xs); /* 12px, the minimum for small labels (UI/UX review: 11px). */
  }

  .ev-hero-date b {
    font-size: var(--text-ui-tile);
  }

  .ev-hero-date.is-range b {
    font-size: var(--text-ui-tile-sm);
  }

  .ev-hero-text h2 {
    font-size: var(--text-ui-lg);
  }

  /* A compact card (UI/UX review: a screen tall, the list starting ~1,000px down, the same event again in it):
     label, date, title and the button; the summary and the facts are in the list just below. */
  .ev-hero-text p:not(.visually-hidden),
  .ev-hero-chips {
    display: none;
  }

  .ev-hero-actions {
    flex-direction: column;
  }

  .ev-hero-actions .pill-button {
    min-height: var(--ds-button-md);
  }
}
/* Every section below the hero uses the redesign's content width, so the lists
   line up with the hero and header. */
main > section:not(.page-hero) > .wrap {
  width: min(var(--max-wide), calc(100% - 42px));
}
/* ---------------------------------------------------------------------------
   Upcoming and past lists (Events.dc.html #list): eyebrow + Sora heading, the
   source filter pills, then rows (template-parts/card-event.php row layout,
   styled in components.css).
   --------------------------------------------------------------------------- */
.ev-list {
  padding: 96px 0;
  background: #fff;
  color: var(--ink-strong);
  font-family: var(--font-ui);
}

.ev-list .ev-list-head {
  margin-bottom: 32px;
}

.ev-list-head .eyebrow {
  color: var(--purple);
  font-family: var(--font-ui);
  font-size: var(--text-ui-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ev-list-head h2 {
  margin: 14px 0 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-section);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.ev-list-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ev-list-empty {
  margin: 0;
  padding: 36px;
  border: 1.5px dashed var(--line-control);
  border-radius: var(--radius-xl);
  color: var(--muted-strong);
  font-size: var(--text-ui-md);
  text-align: center;
}

.ev-list-empty a {
  color: var(--purple);
  font-weight: 700;
}

/* The upcoming list's end: the way to the past events (UI/UX review: only in the hero before). */
.ev-list-more {
  margin: 32px 0 0;
  color: var(--muted-strong);
  font-size: var(--text-ui-md);
  text-align: center;
}

.ev-list-more a,
.ev-results a {
  color: var(--purple);
  font-weight: 700;
}

.ev-list-more a:hover,
.ev-results a:hover {
  color: var(--ink-strong);
}

/* Past list: the heading on the left, the search on the right (under it on phones). */
.ev-list .ev-list-head:has(.ev-search) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
}

/* The field at the design system's large height, its button at the small one (UI/UX review: a 36px button). */
.ev-search {
  width: min(380px, 100%);
  height: var(--ds-button-lg);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 16px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-pill);
  background: #fff;
  font-family: var(--font-ui);
}

.ev-search:focus-within {
  border-color: var(--purple);
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.ev-search svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--muted-strong);
}

.ev-search input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-strong);
  font: inherit;
  font-size: var(--text-ui);
}

.ev-search input[type="search"]:focus {
  outline: none;
}

.ev-search button {
  flex-shrink: 0;
  height: var(--ds-button-sm);
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--purple-wash);
  color: var(--purple);
  font: inherit;
  font-size: var(--text-ui-sm);
  font-weight: 700;
  cursor: pointer;
}

.ev-search button:hover {
  background: var(--purple-tint-ui);
}

/* "3 past events match "AI". Clear search" */
.ev-results {
  margin: 0 0 20px;
  color: var(--muted-strong);
  font-size: var(--text-ui);
}

/* Closing panel after the list (both views): the About / Learning pages' soft violet panel, three soft blurs,
   label + heading + text beside two stacked buttons. Sizes and colours as about.css's .about-close. */
.ev-close {
  padding: 0 0 96px;
  background: #fff;
  color: var(--ink-strong);
  font-family: var(--font-ui);
}

.ev-close-inner {
  width: min(var(--max-wide), calc(100% - 42px));
}

.ev-close-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  padding: 64px;
  border-radius: var(--radius-card);
  background: var(--purple-wash-hover);
}

.ev-blur {
  position: absolute;
  border-radius: var(--radius-round);
  filter: blur(80px);
  pointer-events: none;
}

.ev-blur.is-violet {
  left: -40px;
  top: -60px;
  width: 320px;
  height: 320px;
  background: var(--violet);
  opacity: .45;
}

.ev-blur.is-orange {
  right: 120px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  background: var(--join);
  opacity: .35;
}

.ev-blur.is-cyan {
  right: -60px;
  top: -40px;
  width: 240px;
  height: 240px;
  background: var(--highlight);
  opacity: .4;
}

.ev-close-text {
  position: relative;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ev-close-label {
  color: var(--purple);
  font-size: var(--text-ui-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ev-close-text h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-cta);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.ev-close-text p {
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
  line-height: 1.6;
}

.ev-close-actions {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 260px;
}

.ev-close-actions .pill-button {
  justify-content: center;
}

.ev-close-actions .pill-button svg {
  width: 18px;
  height: 18px;
}

.ev-close :focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

@media (max-width: 1000px) {
  .ev-close-panel {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding: 48px;
  }

  .ev-close-actions {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
  }
}

@media (max-width: 767px) {
  .ev-close {
    padding: 0 0 40px;
  }

  .ev-close-panel {
    padding: 28px 22px;
    border-radius: var(--radius-xl);
  }

  .ev-close-label {
    font-size: var(--text-ui-2xs); /* 12px, the minimum for small labels (UI/UX review: 11px). */
  }

  .ev-close-actions {
    flex-direction: column;
    align-self: stretch;
  }
}

@media (max-width: 767px) {
  .ev-list {
    padding: 40px 0;
  }

  .ev-list .ev-list-head,
  .ev-list .event-switch.source-filter {
    margin-bottom: 16px;
  }

  .ev-list-head .eyebrow {
    font-size: var(--text-ui-2xs);
  }

  .ev-list-head h2 {
    margin-top: 12px;
  }

  .ev-list-rows {
    gap: 12px;
  }

  .ev-list-empty {
    padding: 24px;
    font-size: var(--text-ui-sm);
  }

  .ev-search {
    width: 100%;
  }

  /* Phones: the past cards' picture area at 2:1 (UI/UX review: a long page; 16:9 full-width pictures). */
  .ev-recaps .ev-recap-visual {
    aspect-ratio: 2 / 1;
  }

  .ev-list-more {
    margin-top: 24px;
    font-size: var(--text-ui);
  }
}