/* ================================================================
   Event Speaker Cards — oe/bs-event-speaker-cards
   All values come from --oe-* tokens. Font size / weight come from
   the framework classes in the markup (oe-text-*, oe-text-bold,
   oe-text-500); circles from oe-border-circle.
   Breakpoints: mobile < 768px, tablet 768–1024px, desktop ≥ 1025px.
   ================================================================ */

/* ---- Tokens ---- */

.oe-block-event-speaker-cards {
  --oe-speaker-cards-bg:          var(--oe-color-background-trans-overlay);
  --oe-speaker-cards-name:        var(--oe-color-base);
  --oe-speaker-cards-position:    var(--oe-color-secondary);
  --oe-speaker-cards-icon:        var(--oe-color-base);
  --oe-speaker-cards-focus:       var(--oe-color-secondary);
  --oe-speaker-cards-avatar:      var(--oe-sizing-xlarge);
  --oe-speaker-cards-gap:         var(--oe-spacing-medium);
  --oe-speaker-cards-control:     var(--oe-sizing-large);
  /* Controls match the site's GenerateBlocks carousels: sky-blue line
     arrows on a transparent button, hollow sky-blue dots. */
  --oe-speaker-cards-accent:      var(--oe-color-primary);
  --oe-speaker-cards-control-hover-bg: var(--oe-color-background-trans-overlay);
  --oe-speaker-cards-control-disabled: var(--oe-color-trans-dark-10);
  --oe-speaker-cards-dot-size:    calc(var(--oe-spacing-xsmall) + var(--oe-spacing-3xsmall));
  --oe-speaker-cards-track:       var(--oe-color-trans-dark-10);
  --oe-speaker-cards-photo-border: var(--oe-color-primary-4);
  --oe-speaker-cards-duration:    var(--oe-card-hover-duration);
  --oe-speaker-cards-ease:        var(--oe-card-hover-ease);
  --oe-speaker-cards-cols:        var(--oe-speaker-cards-cols-m, 1);
}

@media (min-width: 768px) {
  .oe-block-event-speaker-cards {
    --oe-speaker-cards-cols: var(--oe-speaker-cards-cols-t, 2);
  }
}

@media (min-width: 1025px) {
  .oe-block-event-speaker-cards {
    --oe-speaker-cards-cols: var(--oe-speaker-cards-cols-d, 4);
  }
}

/* Column counts per breakpoint (from the Display Options fields) */
.oe-block-event-speaker-cards--d-1 { --oe-speaker-cards-cols-d: 1; }
.oe-block-event-speaker-cards--d-2 { --oe-speaker-cards-cols-d: 2; }
.oe-block-event-speaker-cards--d-3 { --oe-speaker-cards-cols-d: 3; }
.oe-block-event-speaker-cards--d-4 { --oe-speaker-cards-cols-d: 4; }
.oe-block-event-speaker-cards--d-5 { --oe-speaker-cards-cols-d: 5; }
.oe-block-event-speaker-cards--d-6 { --oe-speaker-cards-cols-d: 6; }
.oe-block-event-speaker-cards--t-1 { --oe-speaker-cards-cols-t: 1; }
.oe-block-event-speaker-cards--t-2 { --oe-speaker-cards-cols-t: 2; }
.oe-block-event-speaker-cards--t-3 { --oe-speaker-cards-cols-t: 3; }
.oe-block-event-speaker-cards--t-4 { --oe-speaker-cards-cols-t: 4; }
.oe-block-event-speaker-cards--m-1 { --oe-speaker-cards-cols-m: 1; }
.oe-block-event-speaker-cards--m-2 { --oe-speaker-cards-cols-m: 2; }

/* Card backgrounds — apply to every layout */
.oe-block-event-speaker-cards--white {
  --oe-speaker-cards-bg: var(--oe-color-primary-4);
  /* A white ring would vanish on a white card, so use a faint grey one */
  --oe-speaker-cards-photo-border: var(--oe-color-trans-dark-10);
}

.oe-block-event-speaker-cards--muted {
  --oe-speaker-cards-bg: var(--oe-color-muted);
}

.oe-block-event-speaker-cards--blue {
  --oe-speaker-cards-bg:          var(--oe-color-heritage-blue);
  --oe-speaker-cards-name:        var(--oe-color-primary-4);
  --oe-speaker-cards-position:    var(--oe-color-primary);
  --oe-speaker-cards-icon:        var(--oe-color-primary-4);
  --oe-speaker-cards-focus:       var(--oe-color-primary-4);
  /* Primary Blue is for dark sections: sky blue still reads well on navy;
     only the hover tint and disabled/track tones switch to light versions. */
  --oe-speaker-cards-control-hover-bg: var(--oe-color-trans-light-10);
  --oe-speaker-cards-control-disabled: var(--oe-color-trans-light-10);
  --oe-speaker-cards-track:       var(--oe-color-trans-light-10);
  --oe-speaker-cards-photo-border: var(--oe-color-trans-light-10);
}

/* ---- List: grid ---- */

.oe-block-event-speaker-cards__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.oe-block-event-speaker-cards--grid .oe-block-event-speaker-cards__list {
  display: grid;
  grid-template-columns: repeat(var(--oe-speaker-cards-cols), minmax(0, 1fr));
  gap: var(--oe-speaker-cards-gap);
}

/* ---- List: carousel (native horizontal scroll-snap) ---- */

.oe-block-event-speaker-cards__carousel {
  display: flex;
  flex-direction: column;
  gap: var(--oe-spacing-base);
}

.oe-block-event-speaker-cards__stage {
  position: relative;
}

.oe-block-event-speaker-cards__viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.oe-block-event-speaker-cards__viewport::-webkit-scrollbar {
  display: none;
}

.oe-block-event-speaker-cards--carousel .oe-block-event-speaker-cards__list {
  display: flex;
  gap: var(--oe-speaker-cards-gap);
}

.oe-block-event-speaker-cards--carousel .oe-block-event-speaker-cards__card {
  flex: 0 0 calc((100% - (var(--oe-speaker-cards-cols) - 1) * var(--oe-speaker-cards-gap)) / var(--oe-speaker-cards-cols));
  scroll-snap-align: start;
}

/* ---- Card ---- */

.oe-block-event-speaker-cards__card {
  display: flex;
  align-items: flex-start;
  gap: var(--oe-spacing-base);
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: var(--oe-spacing-small);
  background-color: var(--oe-speaker-cards-bg);
  border-radius: var(--oe-border-radius-base);
}

/* Stacked layout: photo, then name, then job title */
.oe-block-event-speaker-cards--stacked {
  --oe-speaker-cards-avatar: var(--oe-width-fixed-3xsmall);
}

.oe-block-event-speaker-cards--stacked .oe-block-event-speaker-cards__card {
  flex-direction: column;
  align-items: center;
  gap: var(--oe-spacing-small);
  padding: var(--oe-spacing-medium) var(--oe-spacing-base);
  text-align: center;
}

.oe-block-event-speaker-cards--stacked .oe-block-event-speaker-cards__name-row {
  justify-content: center;
}

/* ---- Photo ---- */

.oe-block-event-speaker-cards__media {
  flex-shrink: 0;
}

.oe-block-event-speaker-cards__image,
.oe-block-event-speaker-cards__avatar {
  display: block;
  width: var(--oe-speaker-cards-avatar);
  height: var(--oe-speaker-cards-avatar);
}

.oe-block-event-speaker-cards__avatar {
  overflow: hidden;
  color: var(--oe-speaker-cards-name);
}

.oe-block-event-speaker-cards__avatar svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Subtle ring + shadow (oe-box-shadow-small) so photos lift off the card.
   Shape comes from oe-border-circle (default) or oe-radius-base (square). */
.oe-block-event-speaker-cards__photo {
  box-sizing: border-box;
  border: var(--oe-spacing-3xsmall) solid var(--oe-speaker-cards-photo-border);
  background-color: var(--oe-speaker-cards-photo-border);
}

/* ---- Text ---- */

.oe-block-event-speaker-cards__body {
  flex: 1;
  min-width: 0;
}

.oe-block-event-speaker-cards--stacked .oe-block-event-speaker-cards__body {
  flex: 0 1 auto;
  width: 100%;
}

.oe-block-event-speaker-cards__name-row {
  display: flex;
  align-items: center;
  gap: var(--oe-spacing-2xsmall);
}

.oe-block-event-speaker-cards__name,
.oe-block-event-speaker-cards__position {
  margin: 0;
  line-height: var(--oe-line-height-large);
}

.oe-block-event-speaker-cards__name {
  color: var(--oe-speaker-cards-name);
}

.oe-block-event-speaker-cards__position {
  margin-top: var(--oe-spacing-2xsmall);
  color: var(--oe-speaker-cards-position);
}

/* ---- Shared button reset (info, arrows, dots, close) ---- */

.oe-block-event-speaker-cards__info-btn,
.oe-block-event-speaker-cards__arrow,
.oe-block-event-speaker-cards__dot,
.oe-block-event-speaker-cards__dialog-close {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.oe-block-event-speaker-cards__info-btn:focus-visible,
.oe-block-event-speaker-cards__arrow:focus-visible,
.oe-block-event-speaker-cards__dot:focus-visible,
.oe-block-event-speaker-cards__dialog-close:focus-visible {
  outline: var(--oe-spacing-3xsmall) solid var(--oe-speaker-cards-focus);
  outline-offset: var(--oe-spacing-3xsmall);
}

/* ---- Info button (24px target for WCAG 2.5.8) ---- */

.oe-block-event-speaker-cards__info-btn {
  width: var(--oe-sizing-medium);
  height: var(--oe-sizing-medium);
  border-radius: var(--oe-border-radius-small);
  color: var(--oe-speaker-cards-icon);
}

.oe-block-event-speaker-cards__info-btn:hover,
.oe-block-event-speaker-cards__info-btn:focus {
  background: none;
  color: var(--oe-speaker-cards-icon);
}

.oe-block-event-speaker-cards__info-btn svg {
  width: var(--oe-spacing-base);
  height: var(--oe-spacing-base);
}

/* ---- Carousel controls ----
   Matches the site's GenerateBlocks carousels: 32px transparent buttons
   with 20px sky-blue line arrows and a subtle hover tint; 10px hollow
   sky-blue dots that fill when active. */

.oe-block-event-speaker-cards__controls {
  display: flex;
  align-items: center;
  gap: var(--oe-spacing-base);
}

.oe-block-event-speaker-cards__nav {
  display: flex;
  align-items: center;
  gap: var(--oe-spacing-xsmall);
}

.oe-block-event-speaker-cards__nav:empty {
  display: none;
}

.oe-block-event-speaker-cards__arrows {
  display: flex;
  gap: var(--oe-spacing-2xsmall);
}

/* Below - arrows at the edges, dots centred (default, as on the news carousel) */
.oe-block-event-speaker-cards--arrows-bottom-spread .oe-block-event-speaker-cards__controls {
  justify-content: space-between;
}

.oe-block-event-speaker-cards--arrows-bottom-spread .oe-block-event-speaker-cards__arrows,
.oe-block-event-speaker-cards--arrows-bottom-center .oe-block-event-speaker-cards__arrows {
  display: contents;
}

.oe-block-event-speaker-cards--arrows-bottom-spread .oe-block-event-speaker-cards__arrow--prev,
.oe-block-event-speaker-cards--arrows-bottom-center .oe-block-event-speaker-cards__arrow--prev {
  order: -1;
}

/* Below - arrows either side of the dots, all centred */
.oe-block-event-speaker-cards--arrows-bottom-center .oe-block-event-speaker-cards__controls,
.oe-block-event-speaker-cards__controls:not(:has(.oe-block-event-speaker-cards__arrows)) {
  justify-content: center;
}

/* Below / Above - arrows on the right, dots on the left */
.oe-block-event-speaker-cards--arrows-bottom-right .oe-block-event-speaker-cards__controls,
.oe-block-event-speaker-cards--arrows-top-right .oe-block-event-speaker-cards__controls {
  justify-content: space-between;
}

.oe-block-event-speaker-cards--arrows-bottom-right .oe-block-event-speaker-cards__arrows,
.oe-block-event-speaker-cards--arrows-top-right .oe-block-event-speaker-cards__arrows {
  margin-left: auto;
}

.oe-block-event-speaker-cards--arrows-top-right .oe-block-event-speaker-cards__controls {
  order: -1;
}

/* Arrow + pause buttons */
.oe-block-event-speaker-cards__arrow,
.oe-block-event-speaker-cards__pause {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--oe-sizing-large);
  height: var(--oe-sizing-large);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--oe-border-radius-base);
  background-color: transparent;
  color: var(--oe-speaker-cards-accent);
  cursor: pointer;
  transition:
    background-color var(--oe-speaker-cards-duration) var(--oe-speaker-cards-ease),
    color var(--oe-speaker-cards-duration) var(--oe-speaker-cards-ease);
}

.oe-block-event-speaker-cards__arrow svg {
  width: calc(var(--oe-spacing-medium) - var(--oe-spacing-2xsmall));
  height: calc(var(--oe-spacing-medium) - var(--oe-spacing-2xsmall));
}

.oe-block-event-speaker-cards__pause svg {
  width: var(--oe-spacing-base);
  height: var(--oe-spacing-base);
}

.oe-block-event-speaker-cards__arrow:hover,
.oe-block-event-speaker-cards__arrow:focus,
.oe-block-event-speaker-cards__pause:hover,
.oe-block-event-speaker-cards__pause:focus {
  background-color: transparent;
  color: var(--oe-speaker-cards-accent);
}

.oe-block-event-speaker-cards__arrow:hover:not([disabled]),
.oe-block-event-speaker-cards__pause:hover {
  background-color: var(--oe-speaker-cards-control-hover-bg);
}

.oe-block-event-speaker-cards__arrow:focus-visible,
.oe-block-event-speaker-cards__pause:focus-visible {
  outline: var(--oe-spacing-3xsmall) solid var(--oe-speaker-cards-accent);
  outline-offset: var(--oe-spacing-3xsmall);
}

.oe-block-event-speaker-cards__arrow[disabled] {
  color: var(--oe-speaker-cards-control-disabled);
  cursor: default;
}

/* Pause / play icon swap */
.oe-block-event-speaker-cards__icon-play,
.oe-block-event-speaker-cards--paused .oe-block-event-speaker-cards__icon-pause {
  display: none;
}

.oe-block-event-speaker-cards--paused .oe-block-event-speaker-cards__icon-play {
  display: block;
}

/* Side arrows, vertically centred on the cards */
.oe-block-event-speaker-cards__stage > .oe-block-event-speaker-cards__arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
}

.oe-block-event-speaker-cards__stage > .oe-block-event-speaker-cards__arrow--prev {
  left: var(--oe-spacing-xsmall);
}

.oe-block-event-speaker-cards__stage > .oe-block-event-speaker-cards__arrow--next {
  right: var(--oe-spacing-xsmall);
}

/* Over the cards they need a backing so they stay visible on photos/tints */
.oe-block-event-speaker-cards--arrows-sides-inside .oe-block-event-speaker-cards__stage > .oe-block-event-speaker-cards__arrow,
.oe-block-event-speaker-cards--arrows-sides-outside .oe-block-event-speaker-cards__stage > .oe-block-event-speaker-cards__arrow {
  background-color: var(--oe-color-primary-4);
}

@media (min-width: 768px) {
  .oe-block-event-speaker-cards--arrows-sides-outside .oe-block-event-speaker-cards__stage > .oe-block-event-speaker-cards__arrow {
    background-color: transparent;
  }

  .oe-block-event-speaker-cards--arrows-sides-outside .oe-block-event-speaker-cards__stage > .oe-block-event-speaker-cards__arrow--prev {
    left: calc(-1 * (var(--oe-sizing-large) + var(--oe-spacing-xsmall)));
  }

  .oe-block-event-speaker-cards--arrows-sides-outside .oe-block-event-speaker-cards__stage > .oe-block-event-speaker-cards__arrow--next {
    right: calc(-1 * (var(--oe-sizing-large) + var(--oe-spacing-xsmall)));
  }
}

/* Side arrows are hidden at the ends (nothing to click) rather than greyed out */
.oe-block-event-speaker-cards__stage > .oe-block-event-speaker-cards__arrow[disabled] {
  visibility: hidden;
}

/* Dots — one per speaker (up to 6). 24px targets around a 10px dot. */
.oe-block-event-speaker-cards__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.oe-block-event-speaker-cards__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--oe-sizing-medium);
  height: var(--oe-sizing-medium);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.oe-block-event-speaker-cards__dot:hover,
.oe-block-event-speaker-cards__dot:focus {
  background: none;
}

.oe-block-event-speaker-cards__dot::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: var(--oe-speaker-cards-dot-size);
  height: var(--oe-speaker-cards-dot-size);
  border: var(--oe-spacing-5xsmall) solid var(--oe-speaker-cards-accent);
  border-radius: var(--oe-border-radius-badge);
  background-color: transparent;
  transition: background-color var(--oe-speaker-cards-duration) var(--oe-speaker-cards-ease);
}

.oe-block-event-speaker-cards__dot:hover::before,
.oe-block-event-speaker-cards__dot[aria-current="true"]::before {
  background-color: var(--oe-speaker-cards-accent);
}

.oe-block-event-speaker-cards__dot:focus-visible {
  outline: var(--oe-spacing-3xsmall) solid var(--oe-speaker-cards-accent);
  outline-offset: calc(-1 * var(--oe-spacing-3xsmall));
  border-radius: var(--oe-border-radius-badge);
}

/* Progress bar — replaces the dots when there are more than 6 speakers */
.oe-block-event-speaker-cards__progress {
  position: relative;
  flex: 0 1 var(--oe-width-fixed-xsmall);
  width: var(--oe-width-fixed-xsmall);
  height: var(--oe-spacing-2xsmall);
  overflow: hidden;
  border-radius: var(--oe-border-radius-badge);
  background-color: var(--oe-speaker-cards-track);
}

.oe-block-event-speaker-cards__progress-thumb {
  --oe-speaker-cards-thumb-size: 100%;
  --oe-speaker-cards-thumb-start: 0%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--oe-speaker-cards-thumb-start);
  width: var(--oe-speaker-cards-thumb-size);
  border-radius: var(--oe-border-radius-badge);
  background-color: var(--oe-speaker-cards-accent);
}

/* Everything fits: the script adds this and hides the controls */
.oe-block-event-speaker-cards--static .oe-block-event-speaker-cards__controls,
.oe-block-event-speaker-cards--static .oe-block-event-speaker-cards__stage > .oe-block-event-speaker-cards__arrow {
  display: none;
}

/* Screen-reader-only live region for the carousel */
.oe-block-event-speaker-cards__sr {
  position: absolute;
  width: var(--oe-spacing-5xsmall);
  height: var(--oe-spacing-5xsmall);
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Biography popup (native <dialog>) ---- */

.oe-block-event-speaker-cards__dialog {
  box-sizing: border-box;
  width: min(var(--oe-width-fixed-large), calc(100% - (2 * var(--oe-spacing-base))));
  max-width: none;
  max-height: calc(100dvh - (2 * var(--oe-spacing-large)));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: var(--oe-spacing-5xsmall) solid var(--oe-color-trans-dark-10);
  border-radius: var(--oe-border-radius-large);
  background-color: var(--oe-color-primary-4);
  color: var(--oe-color-base);
}

.oe-block-event-speaker-cards__dialog[open] {
  display: flex;
  flex-direction: column;
  animation: oe-speaker-cards-fade-in var(--oe-speaker-cards-duration) var(--oe-speaker-cards-ease);
}

.oe-block-event-speaker-cards__dialog::backdrop {
  background-color: color-mix(in srgb, var(--oe-color-secondary) 70%, transparent);
}

.oe-block-event-speaker-cards__dialog-close {
  position: absolute;
  z-index: 1;
  top: var(--oe-spacing-small);
  right: var(--oe-spacing-small);
  width: var(--oe-sizing-large);
  height: var(--oe-sizing-large);
  border-radius: var(--oe-border-radius-badge);
  color: var(--oe-color-secondary);
  --oe-speaker-cards-focus: var(--oe-color-secondary);
}

.oe-block-event-speaker-cards__dialog-close:hover,
.oe-block-event-speaker-cards__dialog-close:focus {
  background-color: var(--oe-color-muted);
  color: var(--oe-color-secondary);
}

.oe-block-event-speaker-cards__dialog-close svg {
  width: var(--oe-spacing-medium);
  height: var(--oe-spacing-medium);
}

.oe-block-event-speaker-cards__dialog-content {
  overflow-y: auto;
  padding: var(--oe-spacing-large);
}

.oe-block-event-speaker-cards__dialog-header {
  display: flex;
  align-items: center;
  gap: var(--oe-spacing-base);
  margin-bottom: var(--oe-spacing-medium);
  padding-right: var(--oe-sizing-large);
  padding-bottom: var(--oe-spacing-medium);
  border-bottom: var(--oe-spacing-5xsmall) solid var(--oe-color-trans-dark-10);
}

.oe-block-event-speaker-cards__dialog-image,
.oe-block-event-speaker-cards__dialog-header .oe-block-event-speaker-cards__avatar {
  flex-shrink: 0;
  width: var(--oe-width-fixed-4xsmall);
  height: var(--oe-width-fixed-4xsmall);
  color: var(--oe-color-base);
}

.oe-block-event-speaker-cards__dialog-title {
  margin: 0;
  color: var(--oe-color-secondary);
  line-height: var(--oe-line-height-medium-large);
}

.oe-block-event-speaker-cards__dialog-position {
  margin: var(--oe-spacing-2xsmall) 0 0;
  color: var(--oe-color-secondary);
  line-height: var(--oe-line-height-large);
}

.oe-block-event-speaker-cards__dialog-bio {
  font-size: var(--oe-font-size-base);
  line-height: var(--oe-line-height-large);
}

.oe-block-event-speaker-cards__dialog-bio > :first-child {
  margin-top: 0;
}

.oe-block-event-speaker-cards__dialog-bio > :last-child {
  margin-bottom: 0;
}

.oe-block-event-speaker-cards__dialog-bio p,
.oe-block-event-speaker-cards__dialog-bio ul,
.oe-block-event-speaker-cards__dialog-bio ol {
  margin: 0 0 var(--oe-spacing-base);
}

/* Stop the page scrolling behind the open popup */
html:has(.oe-block-event-speaker-cards__dialog[open]) {
  overflow: hidden;
}

@keyframes oe-speaker-cards-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .oe-block-event-speaker-cards__viewport {
    scroll-behavior: auto;
  }

  .oe-block-event-speaker-cards__dialog[open],
  .oe-block-event-speaker-cards__arrow,
  .oe-block-event-speaker-cards__pause,
  .oe-block-event-speaker-cards__dot::before {
    animation: none;
    transition: none;
  }
}

/* ---- Editor-only states ---- */

.oe-block-event-speaker-cards__empty {
  margin: 0;
  padding: var(--oe-spacing-small);
  border-radius: var(--oe-border-radius-base);
  background-color: var(--oe-speaker-cards-bg);
  color: var(--oe-color-neutral);
  font-size: var(--oe-font-size-small);
  font-style: italic;
}

.oe-block-event-speaker-cards__placeholder {
  color: var(--oe-color-neutral);
  font-style: italic;
  font-weight: normal;
}