/* Speakers */
.hp4u-sv-speakers,
.hp4u-sv-speakers *,
.hp4u-sv-profile-popup,
.hp4u-sv-profile-popup * { box-sizing: border-box; }

.hp4u-sv-speakers {
  --_speaker-name-size: var(--hp4u-type-body-lg);
  --_speaker-row-gap: calc(var(--hp4u-space-grid) + var(--hp4u-space-2xs));
  width: 100%;
  max-width: var(--hp4u-layout-section);
  margin-inline: auto;
  color: var(--hp4u-color-text);
  font-family: var(--hp4u-font-body);
}
.hp4u-sv-speakers-header { margin-bottom: var(--hp4u-space-lg); }
#page .hp4u-sv-speakers .hp4u-sv-speakers-heading { margin: 0 !important; }
.hp4u-sv-speakers-intro {
  max-width: var(--hp4u-layout-reading);
  margin: 0;
}
.hp4u-sv-speakers-heading + .hp4u-sv-speakers-intro { margin-top: var(--hp4u-space-sm); }
.hp4u-sv-speakers-intro p { margin: 0 0 var(--hp4u-paragraph-gap); }
.hp4u-sv-speakers-intro p:last-child { margin-bottom: 0; }
.hp4u-sv-speakers-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--_speaker-row-gap) var(--hp4u-layout-column-gap);
}
/* Speaker names */
#page .hp4u-sv-speakers .hp4u-sv-speaker {
  display: grid;
  grid-template-rows: auto auto;
  gap: var(--hp4u-space-2xs);
  align-content: start;
  align-items: start;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--hp4u-color-text);
  background: transparent;
  box-shadow: none;
  font: inherit;
  text-align: left;
  text-transform: none;
  text-decoration: none;
  letter-spacing: normal;
  white-space: normal;
}
#page .hp4u-sv-speaker--interactive { cursor: pointer; }
#page .hp4u-sv-speaker--interactive:disabled { cursor: default; opacity: 1; }
.hp4u-sv-speaker-portrait {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--hp4u-radius-card);
  margin-bottom: var(--hp4u-space-2xs);
  background: var(--hp4u-color-surface-soft);
}
.hp4u-sv-speaker-image,
.hp4u-sv-speaker-missing {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hp4u-sv-speaker-missing svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--hp4u-color-card-border);
}
.hp4u-sv-speaker-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--hp4u-space-2xs);
  align-items: start;
  width: 100%;
  /* Icon alignment */
  padding-inline: var(--hp4u-space-2xs);
}
.hp4u-sv-speaker-name {
  color: var(--hp4u-color-heading);
  font-family: var(--hp4u-font-heading);
  font-size: var(--_speaker-name-size);
  font-weight: var(--hp4u-font-weight-bold);
  line-height: var(--hp4u-leading-heading);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
/* Disclosure icon */
.hp4u-sv-speaker-plus {
  display: grid;
  place-items: center;
  width: var(--hp4u-disclosure-icon-size);
  height: calc(var(--_speaker-name-size) * var(--hp4u-leading-heading));
  color: var(--hp4u-color-link);
}
.hp4u-sv-speaker-plus::before,
.hp4u-sv-speaker-plus::after {
  content: "";
  grid-area: 1 / 1;
}
.hp4u-sv-speaker-plus::before {
  width: var(--hp4u-disclosure-icon-size);
  height: 0;
  border-top: var(--hp4u-border-width) solid currentColor;
}
.hp4u-sv-speaker-plus::after {
  width: 0;
  height: var(--hp4u-disclosure-icon-size);
  border-left: var(--hp4u-border-width) solid currentColor;
}
#page .hp4u-sv-speaker--interactive:focus-visible {
  outline: var(--hp4u-border-width) solid var(--hp4u-color-heading);
  outline-offset: var(--hp4u-focus-offset);
  border-radius: var(--hp4u-radius-card);
}
.hp4u-sv-speakers-editor-note { margin-top: var(--hp4u-space-sm); font-size: var(--hp4u-type-xs); }

/* Profile popup */
.pum-overlay.hp4u-sv-profile-popup { background-color: color-mix(in srgb, var(--hp4u-color-surface-dark) 45%, transparent) !important; }
.hp4u-sv-profile-popup .pum-container {
  width: calc(100% - 2 * var(--hp4u-space-xs)) !important;
  max-width: var(--hp4u-layout-narrow) !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin-bottom: var(--hp4u-space-lg) !important;
  padding: var(--hp4u-space-lg) !important;
  border: 0 !important;
  border-radius: var(--hp4u-radius-card) !important;
  background: var(--hp4u-color-surface) !important;
  box-shadow: none !important;
  color: var(--hp4u-color-text) !important;
  font: var(--hp4u-font-weight-regular) var(--hp4u-type-body) / var(--hp4u-leading-body) var(--hp4u-font-body) !important;
}
.hp4u-sv-profile-popup .pum-title { display: none !important; }
/* Popup content stacking */
.hp4u-sv-profile-popup .pum-content {
  position: relative !important;
  z-index: 0 !important;
  overflow: visible !important;
}
.hp4u-sv-profile-controls {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  cursor: default;
  margin: calc(-1 * var(--hp4u-space-lg)) calc(-1 * var(--hp4u-space-lg)) 0;
  padding: var(--hp4u-space-xs) var(--hp4u-space-lg);
  border-radius: var(--hp4u-radius-card) var(--hp4u-radius-card) 0 0;
  background: var(--hp4u-color-surface);
}
.hp4u-sv-profile {
  width: 100%;
  max-width: var(--hp4u-layout-reading);
  margin-inline: auto;
  padding-top: var(--hp4u-space-sm);
  color: var(--hp4u-color-text);
  overflow-wrap: anywhere;
}
.hp4u-sv-profile-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: var(--hp4u-space-sm);
  align-items: center;
  margin-bottom: var(--hp4u-space-lg);
}
.hp4u-sv-profile-portrait { aspect-ratio: 1; overflow: hidden; border-radius: var(--hp4u-radius-card); }
.hp4u-sv-profile-popup .hp4u-sv-profile-name {
  margin: 0 0 var(--hp4u-space-2xs);
  color: var(--hp4u-color-heading);
  font: var(--hp4u-font-weight-bold) var(--hp4u-type-h2) / var(--hp4u-leading-h2) var(--hp4u-font-heading);
  text-wrap: balance;
  letter-spacing: normal;
  text-transform: none;
}
.hp4u-sv-profile-role { margin: 0; font-size: var(--hp4u-type-xs); line-height: var(--hp4u-leading-body); }
.hp4u-sv-profile-popup .hp4u-sv-profile-bio p,
.hp4u-sv-profile-popup .hp4u-sv-profile-bio li {
  color: inherit;
  font: var(--hp4u-font-weight-regular) var(--hp4u-type-body) / var(--hp4u-leading-body) var(--hp4u-font-body);
}
.hp4u-sv-profile-bio p { margin: 0 0 var(--hp4u-paragraph-gap); }
.hp4u-sv-profile-bio strong,
.hp4u-sv-profile-bio b { font-weight: var(--hp4u-font-weight-bold); }
.hp4u-sv-profile-bio h3,
.hp4u-sv-profile-bio h4 {
  margin: var(--hp4u-space-sm) 0 var(--hp4u-space-xs);
  color: var(--hp4u-color-heading);
  font-family: var(--hp4u-font-heading);
  font-weight: var(--hp4u-font-weight-bold);
  line-height: var(--hp4u-leading-heading);
}
.hp4u-sv-profile-bio h3 { font-size: var(--hp4u-type-h3); }
.hp4u-sv-profile-bio h4 { font-size: var(--hp4u-type-h4); }
.hp4u-sv-profile-bio ul,
.hp4u-sv-profile-bio ol { margin: 0 0 var(--hp4u-space-xs); padding-inline-start: var(--hp4u-space-sm); }
.hp4u-sv-profile-bio li + li { margin-top: var(--hp4u-space-2xs); }
.hp4u-sv-profile-links { display: flex; flex-wrap: wrap; gap: var(--hp4u-space-xs) var(--hp4u-space-sm); list-style: none; padding: 0; margin: var(--hp4u-space-sm) 0; }
.hp4u-sv-profile-popup a,
.hp4u-sv-profile-popup a:visited {
  color: var(--hp4u-color-link);
  text-decoration: underline;
  text-underline-offset: var(--hp4u-space-3xs);
}
.hp4u-sv-profile-popup a:hover { color: var(--hp4u-color-link-hover); text-decoration-thickness: var(--hp4u-border-width); }
/* Popup close control */
.hp4u-sv-profile-popup .pum-close {
  position: static !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--hp4u-control-min-size);
  width: var(--hp4u-control-min-size) !important;
  height: var(--hp4u-control-min-size) !important;
  min-width: var(--hp4u-control-min-size) !important;
  min-height: var(--hp4u-control-min-size) !important;
  padding: 0 !important;
  margin: 0 !important;
  inset: auto !important;
  border: 0 !important;
  border-radius: var(--hp4u-radius-round) !important;
  color: var(--hp4u-color-text-inverse) !important;
  background: var(--hp4u-color-surface-dark) !important;
  box-shadow: none !important;
  font: var(--hp4u-font-weight-regular) var(--hp4u-type-subhead) / var(--hp4u-leading-tight) var(--hp4u-font-body) !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer;
  pointer-events: auto;
}
.hp4u-sv-profile-popup button:focus-visible,
.hp4u-sv-profile-popup a:focus-visible { outline: var(--hp4u-border-width) solid var(--hp4u-color-heading); outline-offset: var(--hp4u-focus-offset); }
.hp4u-sv-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
@media (max-width: 1099px) {
  .hp4u-sv-speakers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .hp4u-sv-speakers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--_speaker-row-gap) var(--hp4u-space-xs); }
  .hp4u-sv-profile-popup .pum-container { padding: var(--hp4u-space-sm) !important; }
  .hp4u-sv-profile-controls {
    margin-inline: calc(-1 * var(--hp4u-space-sm));
    margin-top: calc(-1 * var(--hp4u-space-sm));
    padding-inline: var(--hp4u-space-sm);
  }
  .hp4u-sv-profile-header { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--hp4u-space-xs); }
}
@media (max-width: 359px) {
  .hp4u-sv-speakers-grid { grid-template-columns: minmax(0, 1fr); }
  .hp4u-sv-profile-header { grid-template-columns: minmax(0, 1fr); }
  .hp4u-sv-profile-portrait { width: 33.333%; }
}