/*
 * Event page (single-event.php), 2026 redesign (EventDetail.dc.html).
 * Loaded after event-details-pdd2026.css and event-sections.css: the hero is
 * new (.evd-hero); the other sections keep their markup and get the
 * redesign's fonts (Sora headings, Manrope text), colours and card shapes
 * here, scoped to main.evd. Ends with "More from the Chapter" (.evd-more).
 */

.evd {
  color: var(--ink-strong);
  font-family: var(--font-ui);
}

.evd .wrap {
  width: min(var(--max-wide), calc(100% - 42px));
}

.evd > section {
  padding: 96px 0;
  background: #fff;
}

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

/* ==========================================================================
   Hero
   ========================================================================== */
.evd > .evd-hero {
  overflow: hidden;
  padding: 40px 0 96px;
  background: var(--surface-soft);
}

.evd-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.evd-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 72px;
}

.evd-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.evd-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.evd-pill {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--purple-tint-ui);
  color: var(--purple);
  font-size: var(--text-ui-xs);
  font-weight: 700;
  line-height: 1.4;
}

.evd .evd-pill.ev-status {
  padding: 6px 14px;
  font-size: var(--text-ui-xs);
}

.evd-hero h1 {
  max-width: none;
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.evd-hero h1.is-long {
  font-size: var(--text-hero-long);
  line-height: 1.1;
  letter-spacing: -.03em;
}

.evd-lead {
  max-width: 560px;
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-xl);
  line-height: 1.6;
}

.evd-ended {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 560px;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: #fff;
  color: var(--muted-ui);
  font-size: var(--text-ui);
  line-height: 1.5;
}

.evd-ended strong {
  color: var(--ink-strong);
}

.evd-ended a {
  color: var(--purple);
  font-weight: 700;
}

.evd-ended-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  background: var(--held-wash);
  color: var(--muted-ui);
}

.evd-ended-icon svg {
  width: 18px;
  height: 18px;
}

.evd-hero-aside {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.evd-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 520px;
  padding: 28px;
}

.evd-card-main {
  display: flex;
  align-items: center;
  gap: 18px;
}

.evd-date {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 100px;
  border-radius: var(--radius-ui);
  background: var(--join);
  color: var(--night-deep);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

.evd-date span {
  font-size: var(--text-ui-3xs);
  text-transform: uppercase;
}

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

.evd-date b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-ui-tile-xl);
  line-height: 1;
  white-space: nowrap;
}

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

.evd-facts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.evd-facts li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--ink-strong);
  font-size: var(--text-ui);
  font-weight: 600;
  line-height: 1.4;
}

.evd-facts svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--purple);
}

.evd-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.evd-actions .pill-button {
  justify-content: center;
  width: 100%;
}

.evd-actions .pill-button svg {
  width: 15px;
  height: 15px;
}

.evd-secondary {
  height: var(--ds-button-md);
  border-color: var(--line-control);
  background: rgba(255, 255, 255, .85);
  color: var(--ink-strong);
  font-size: var(--text-ui);
}

.evd-secondary svg {
  color: var(--purple);
}

.evd-secondary:hover {
  border-color: var(--purple);
  color: var(--ink-strong);
}

.evd-note {
  margin: 0;
  color: var(--muted-strong);
  font-size: var(--text-ui-2xs);
  line-height: 1.5;
  text-align: center;
}

/* ==========================================================================
   Sections: shared type
   ========================================================================== */
.evd .eyebrow {
  display: block;
  margin: 0 0 14px;
  color: var(--purple);
  font-family: var(--font-ui);
  font-size: var(--text-ui-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.evd .event-section-title {
  max-width: 820px;
  margin: 0 0 32px;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-section);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.evd .event-rich p,
.evd .event-rich li,
.evd .story p {
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
  line-height: 1.7;
}

.evd .event-rich strong {
  color: var(--ink-strong);
}

.evd .event-rich a {
  color: var(--purple);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.evd .event-rich h2,
.evd .event-rich h3 {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.evd .event-rich h2 { font-size: var(--text-ui-panel); }
.evd .event-rich h3 { font-size: var(--text-ui-step); }

/* The story's headings are its section titles (EventDetail.dc.html "About the event"): same
   size and spacing as the other section titles; a sub-heading below them is 24px. */
.evd .story .event-rich h2 {
  margin: 0 0 20px;
  font-size: var(--text-section);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.evd .story .event-rich h3 {
  margin: 28px 0 12px;
  font-size: var(--text-ui-panel);
  line-height: 1.25;
}

/* ==========================================================================
   Story + side panel
   ========================================================================== */
.evd .story {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 72px;
}

/* Nothing for the side panel: the story alone, at reading width. */
.evd .story:not(:has(> .info)) {
  grid-template-columns: minmax(0, 860px);
}

.evd .event-block + .event-block {
  margin-top: 40px;
}

.evd .event-quote {
  margin: 36px 0;
  padding: 24px 28px;
  border-left: 4px solid var(--purple);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  background: var(--surface-soft);
}

.evd .event-quote p {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-step);
  font-style: normal;
  font-weight: 600;
  line-height: 1.45;
}

.evd .event-quote cite {
  color: var(--muted-strong);
  font-size: var(--text-ui-sm);
  font-style: normal;
  font-weight: 600;
}

.evd .event-feature-image img {
  border-radius: var(--radius-xl);
}

.evd .info {
  top: calc(var(--nav-height) + 24px);
  padding: 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.evd .info div {
  border-bottom-color: var(--line-soft);
}

.evd .info small {
  margin-bottom: 4px;
  color: var(--muted-strong);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  letter-spacing: .12em;
}

.evd .info b {
  color: var(--ink-strong);
  font-size: var(--text-ui);
}

/* The event's own link (e.g. "Explore the Summit ↗") at the end of the panel:
   a full-width standard secondary pill, not the panel's underlined text links. */
.evd .info .info-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
}

.evd .info-cta p {
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-sm);
  line-height: 1.55;
}

.evd .info .info-cta .pill-button {
  width: 100%;
  color: var(--ink-strong);
  text-decoration: none;
}

.evd .info .info-cta .pill-button:hover {
  color: var(--purple);
}

.evd .info-person-name {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-weight: 700;
}

.evd .info-people-grid .speaker-tag,
.evd .speaker-tag {
  background: var(--purple-tint-ui);
  color: var(--purple);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-ui-3xs);
  letter-spacing: .08em;
}

/* ==========================================================================
   Recap
   ========================================================================== */
.evd .event-card-panel {
  padding: 32px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.evd .event-card-panel h2 {
  margin: 0 0 16px;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-panel);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}

/* A second heading in the card ("Key themes" after the takeaways) keeps its distance from the list above. */
.evd .event-card-panel ul + h2 {
  margin-top: 28px;
}

/* The theme chips have no bullets, so they line up with the heading (no list indent). */
.evd .event-card-panel .theme-chips {
  padding-left: 0;
}

.evd .event-card-panel li {
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
  line-height: 1.6;
}

.evd .event-card-panel li::marker {
  color: var(--purple);
}

.evd .event-card-panel.is-dark {
  border: 0;
  background: var(--night-deep);
  box-shadow: none;
}

.evd .event-card-panel.is-dark .eyebrow {
  color: var(--cyan-light);
}

.evd .event-card-panel.is-dark h2 {
  color: #fff;
}

.evd .event-card-panel.is-dark p {
  color: var(--on-night);
  font-size: var(--text-ui-md);
  line-height: 1.7;
}

.evd .theme-chips li {
  padding: 6px 14px;
  border-color: var(--line-soft);
  background: var(--surface-soft);
  color: var(--ink-strong);
  font-size: var(--text-ui-xs);
  font-weight: 600;
}

/* ==========================================================================
   Speakers
   ========================================================================== */
.evd > .event-speakers,
.evd > .event-gallery {
  background: var(--surface-soft);
}

.evd .speaker-card {
  padding: 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.evd .speaker-card h3 {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-xl);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.evd .speaker-role {
  color: var(--purple);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

.evd .speaker-session {
  color: var(--ink-strong);
  font-size: var(--text-ui-sm);
  font-weight: 600;
}

.evd .speaker-session span {
  color: var(--purple);
  font-family: var(--font-display);
}

.evd .speaker-card .event-rich p {
  font-size: var(--text-ui);
  line-height: 1.6;
}

.evd .speaker-link,
.evd .speaker-more {
  color: var(--purple);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

.evd .sponsor-card:target,
.evd .speaker-card:target {
  outline-color: var(--focus-ring);
}

/* ==========================================================================
   Agenda (EventDetail.dc.html rows: time | session · speaker)
   ========================================================================== */
.evd > .event-agenda {
  padding-top: 96px;
}

.evd .agenda-table {
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  font-size: var(--text-ui);
}

.evd .agenda-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.evd .agenda-table td,
.evd .agenda-table tbody th {
  padding: 18px 20px 18px 0;
  border-top: 0;
  border-bottom: 1px solid var(--line-soft);
}

.evd .agenda-table tbody tr:nth-child(even) {
  background: none;
}

.evd .agenda-table td:first-child {
  width: 140px;
  color: var(--purple);
  font-family: var(--font-display);
  font-weight: 700;
}

.evd .agenda-table tbody th {
  color: var(--ink-strong);
  font-weight: 600;
}

.evd .agenda-table td:last-child {
  padding-right: 0;
  color: var(--muted-strong);
  font-weight: 400;
}

.evd .agenda-table tr.is-break th,
.evd .agenda-table tr.is-break td {
  color: var(--muted-strong);
  font-weight: 500;
}

/* ==========================================================================
   Partners, propose a talk, gallery
   ========================================================================== */
.evd .partner-group-title {
  color: var(--muted-strong);
  font-family: var(--font-ui);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.evd .sponsor-card {
  padding: 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.evd .sponsor-card .sponsor-name {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-xl);
  font-weight: 700;
}

.evd .sponsor-card p {
  color: var(--muted-strong);
  font-size: var(--text-ui);
  line-height: 1.6;
}

.evd .sponsor-links a {
  color: var(--purple);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

.evd .sponsor-logo {
  border-radius: var(--radius-ui);
}

.evd > .propose-talk {
  padding-top: 0;
}

.evd .propose-box {
  padding: 28px 32px;
  border: 1px solid var(--line-soft);
  border-left: 0;
  border-radius: var(--radius-xl);
  background: var(--purple-wash-hover);
}

.evd .propose-box b {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-step);
}

.evd .propose-box p {
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
}

.evd .mosaic-tile,
.evd .mosaic-tile img {
  border-radius: var(--radius-xl);
}

.evd .mosaic-more {
  font-family: var(--font-display);
  font-weight: 700;
}

/* Videos added with the photos (single-event.php): a player each above the photo rows, at the video's own shape
   (--ar = width / height), as wide as the section at most and no taller than most screens; rounded as the photos. */
.evd .event-video {
  max-width: min(100%, calc(72vh * var(--ar)));
  margin: 8px auto 0;
}

.evd .event-video + .event-video,
.evd .event-video + .mosaic {
  margin-top: 28px;
}

/* Phones: the photo strip centres wide pictures in its 300px height, which already adds space above them. */
@media (max-width: 760px) {
  .evd .event-video + .mosaic {
    margin-top: 4px;
  }
}

.evd .event-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar);
  border-radius: var(--radius-xl);
  background: var(--ink-strong);
  box-shadow: var(--shadow-card);
}

.evd .event-video figcaption {
  margin-top: 10px;
  color: var(--muted-ui);
  font-size: var(--text-ui-sm);
  line-height: 1.55;
  text-align: center;
}

/* ==========================================================================
   Slides & recording and "How to claim your PDUs" (single-event.php). They
   follow another section, so they only keep its spacing below.
   ========================================================================== */
.evd > .event-materials,
.evd > .event-pdus {
  padding-top: 0;
}

/* The two boxes belong together: a smaller gap between them. */
.evd > .event-materials:has(+ .event-pdus),
.evd > .event-pdus:has(+ .event-materials) {
  padding-bottom: 32px;
}

.evd-materials {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  border: 1px solid var(--line-soft);
  border-radius: var(--ds-radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.evd-materials-icon {
  display: grid;
  place-items: center;
  width: var(--ds-icon-lg);
  height: var(--ds-icon-lg);
  border-radius: var(--radius-round);
  background: var(--purple-tint-ui);
  color: var(--purple);
}

.evd-materials-icon svg {
  width: 26px;
  height: 26px;
}

.evd .evd-materials .eyebrow {
  margin-bottom: 6px;
}

.evd-materials h2 {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-panel);
  font-weight: 700;
  line-height: 1.25;
}

.evd-materials p {
  margin: 6px 0 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
}

.evd-materials-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.evd-materials-actions svg {
  width: 16px;
  height: 16px;
}

.evd-materials-meta {
  font-weight: 600;
  opacity: .8;
}

/* PDUs: the night panel (total, PMI Talent Triangle® split, activity number) beside the steps. */
.evd-pdu {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--ds-radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.evd-pdu-summary {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  background: var(--night-deep);
  color: var(--on-night);
}

.evd .evd-pdu-summary .eyebrow {
  margin: 0;
  color: var(--cyan-light);
}

.evd-pdu-summary h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-ui-panel);
  font-weight: 700;
  line-height: 1.25;
}

.evd-pdu-total {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
  font-weight: 700;
}

.evd-pdu-total b {
  font-size: 54px;
  line-height: 1;
  letter-spacing: -.03em;
}

.evd-pdu-total span {
  color: var(--on-night);
  font-family: var(--font-ui);
  font-size: var(--text-ui-sm);
  font-weight: 600;
}

.evd-pdu-split {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.evd-pdu-split li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 255, 255, .08);
  font-size: var(--text-ui-sm);
  font-weight: 600;
}

.evd-pdu-split li::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-round);
  background: var(--violet);
}

.evd-pdu-split li.is-ways::before { background: var(--highlight); }
.evd-pdu-split li.is-power::before { background: var(--join); }

.evd-pdu-split b {
  margin-left: auto;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-ui-md);
}

.evd-pdu-activity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  font-size: var(--text-ui-sm);
  font-weight: 600;
}

.evd-pdu-activity code {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--night-deep);
  font-size: var(--text-ui-sm);
  font-weight: 700;
  letter-spacing: .04em;
  user-select: all; /* One click selects the whole number, ready to copy into CCRS. */
}

/* A Chapter event without its activity number or pillar split yet: how to claim anyway. */
.evd-pdu-missing {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed rgba(255, 255, 255, .28);
  border-radius: var(--radius-ui);
  color: var(--on-night);
  font-size: var(--text-ui-sm);
  line-height: 1.5;
}

.evd-pdu-missing a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.evd-pdu-steps {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 32px;
}

.evd-pdu-steps ol {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: evd-pdu;
}

.evd-pdu-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 54px;
  counter-increment: evd-pdu;
}

.evd-pdu-steps li::before {
  content: counter(evd-pdu);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-round);
  background: var(--purple);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
}

.evd-pdu-steps li b {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-step);
}

.evd-pdu-steps li span {
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
  line-height: 1.6;
}

.evd-pdu-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding-left: 54px;
}

.evd-pdu-guide {
  color: var(--purple);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

@media (max-width: 1000px) {
  .evd-materials {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .evd-materials-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .evd-pdu {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .evd-materials,
  .evd-pdu-summary,
  .evd-pdu-steps {
    padding: 22px;
  }

  .evd-materials {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .evd-materials-icon {
    display: none;
  }

  .evd-materials-actions .pill-button {
    justify-content: center;
    width: 100%;
  }

  .evd-pdu-total b {
    font-size: 44px;
  }

  .evd-pdu-steps li {
    padding-left: 48px;
  }

  .evd-pdu-actions {
    padding-left: 0;
  }

  .evd-pdu-actions .pill-button {
    justify-content: center;
    width: 100%;
  }
}

/* ==========================================================================
   Folded sections (speakers, agenda, partners): native <details>, closed by
   default. The label + heading are the clickable header; a "Show / Hide"
   pill with a chevron sits on the right. Closed, the section is compact.
   The space above the header is the same open or closed, so the header stays
   where it was when clicked; only the space below it changes.
   ========================================================================== */
.evd > section:has(> .wrap > .evd-fold) {
  padding-top: 48px;
}

/* Two white sections in a row (the story or recap, then the recap, agenda or partners): the space below the first
   is enough, so the second adds none above. Without this, a missing section left a doubled white band. */
.evd > section:is(.evd-story, .event-recap) + section:is(.event-recap, .event-agenda, .event-partners) {
  padding-top: 0;
}

.evd > section:has(> .wrap > .evd-fold:not([open])) {
  padding-bottom: 48px;
}

.evd > section:has(> .wrap > .evd-fold) + section:has(> .wrap > .evd-fold) {
  border-top: 1px solid var(--line-soft);
}

.evd-fold-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  list-style: none;
}

.evd-fold-head::-webkit-details-marker {
  display: none;
}

.evd-fold-head:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 6px;
  border-radius: var(--radius-ui);
}

.evd-fold-titles {
  min-width: 0;
}

.evd .evd-fold-head .event-section-title {
  margin-bottom: 0;
}

.evd-fold-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--ds-button-sm);
  padding: 0 8px 0 18px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink-strong);
  font-size: var(--text-ui-sm);
  font-weight: 700;
  transition: border-color .15s ease, color .15s ease;
}

.evd-fold-head:hover .evd-fold-toggle {
  border-color: var(--purple);
  color: var(--purple);
}

.evd-fold-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-round);
  background: var(--purple-wash);
  color: var(--purple);
  transition: transform .2s ease;
}

.evd-fold-icon svg {
  width: 16px;
  height: 16px;
}

.evd-fold[open] .evd-fold-icon {
  transform: rotate(180deg);
}

.evd-fold .is-open,
.evd-fold[open] .is-closed {
  display: none;
}

.evd-fold[open] .is-open {
  display: inline;
}

.evd-fold-body {
  margin-top: 32px;
}

@media (prefers-reduced-motion: reduce) {
  .evd-fold-icon {
    transition: none;
  }
}

@media (max-width: 767px) {
  .evd > section:has(> .wrap > .evd-fold) {
    padding-top: 28px;
  }

  .evd > section:has(> .wrap > .evd-fold:not([open])) {
    padding-bottom: 28px;
  }

  .evd-fold-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .evd-fold-toggle {
    height: 40px;
    font-size: var(--text-ui-xs);
  }

  .evd-fold-body {
    margin-top: 20px;
  }
}
/* ==========================================================================
   More from the Chapter
   ========================================================================== */
.evd > .evd-more {
  padding: 96px 0;
  border-top: 1px solid var(--line-soft);
}

.evd-more .wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.evd-more-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.evd-more h2 {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-strip);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.evd-more-all {
  flex-shrink: 0;
  color: var(--purple);
  font-size: var(--text-ui);
  font-weight: 700;
}

.evd-more-all:hover {
  color: var(--purple-press);
}

.evd-more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* The event cards keep their own title size over the older stylesheets' h3 rules. */
.evd-more .ev-title {
  margin: 0;
  font-size: var(--text-card-title);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .evd-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .evd-hero-aside {
    justify-content: flex-start;
  }
}

@media (max-width: 1000px) {
  .evd .story,
  .evd .story:not(:has(> .info)) {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .evd .info {
    position: static;
  }
}

@media (max-width: 767px) {
  .evd > section,
  .evd > .event-agenda,
  .evd > .evd-more {
    padding: 40px 0;
  }

  .evd > .evd-hero {
    padding: 24px 0 36px;
  }

  .evd-hero-inner {
    gap: 16px;
  }

  .evd-hero-grid {
    gap: 24px;
  }

  .evd-hero-text {
    gap: 16px;
  }

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

  .evd-hero h1,
  .evd-hero h1.is-long {
    line-height: 1.08;
    letter-spacing: -.03em;
  }

  /* The mobile prototype colours the accent words without the underline. */
  .evd-hero .hero-accent svg {
    display: none;
  }

  .evd-lead {
    font-size: var(--text-ui-md);
  }

  .evd-ended {
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    font-size: var(--text-ui-sm);
  }

  .evd-ended-icon {
    width: 36px;
    height: 36px;
  }

  .evd-card {
    gap: 16px;
    padding: 20px;
    border-radius: var(--radius-xl);
  }

  .evd-card-main {
    gap: 14px;
  }

  .evd-date {
    width: 72px;
    height: 84px;
  }

  .evd-date span {
    font-size: var(--text-ui-3xs); /* 11px: the smallest size for uppercase labels. */
  }

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

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

  .evd-facts {
    gap: 6px;
  }

  .evd-facts li {
    font-size: var(--text-ui-sm);
  }

  .evd-actions .pill-button--primary {
    height: var(--ds-button-md); /* One of the three button heights (was 52px; uniformity review, 2026-10-29). */
  }

  .evd .event-section-title,
  .evd .story .event-rich h2 {
    margin-bottom: 20px;
    font-size: var(--text-section-sm);
    line-height: 1.2;
  }

  .evd .story .event-rich h3 {
    font-size: var(--text-ui-step);
  }

  .evd .eyebrow {
    margin-bottom: 10px;
    font-size: var(--text-ui-3xs);
  }

  .evd .event-rich p,
  .evd .event-rich li,
  .evd .story p {
    font-size: var(--text-ui);
    line-height: 1.65;
  }

  .evd .event-card-panel,
  .evd .speaker-card,
  .evd .sponsor-card {
    padding: 20px;
  }

  .evd .agenda-table td:first-child {
    width: auto;
  }

  .evd .propose-box {
    padding: 22px;
  }

  .evd-more-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .evd-more-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .evd-more .ev-title {
    font-size: var(--text-ui-md);
  }
}

/* Text links and table headers: the prototype's heaviest weight is 700. */
.evd .story a,
.evd .agenda-table thead th {
  font-weight: 700;
}