/**
 * SRD speakers: the [srd_speakers] grid and the [srd_speakers_carousel] strip.
 *
 * Same visual world as the programme and the SRD26 exhibitor index: ruled,
 * no radius, no shadows, Outfit, and the red kept for the one hairline per
 * card and for focus. Tokens are copied from srd-schedule.css rather than
 * shared, because this file loads on pages where that one does not.
 *
 * Two themes, dark by default on both shortcodes. Dark matches /srd26/agenda/;
 * the dark carousel paints no background, so it sits on the homepage's navy
 * band. Light is for a white band. Either shortcode takes theme="light".
 *
 * NOTE: no container-type anywhere in this file. Inline-size containment inside
 * Elementor's flex wrappers collapses the element to width 0; that has already
 * broken the programme and the exhibitor grid once each.
 *
 * @package SRD_Schedule
 */

.srdspk,
.srdspc {
  --srds-red:      #ff4a3d;
  --srds-paper:    #041b2f;
  --srds-sunk:     #082741;
  --srds-plate:    #0b3050;
  --srds-ink:      #eaf1f6;
  --srds-ink-cool: #dcefff;
  --srds-ink-60:   #9fb3c4;
  --srds-ink-40:   #6d8598;
  --srds-rule:     #16405c;
  --srds-hover-bg: #0b3050;
  --srds-hover-ink: #ffffff;
  --srds-font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  font-family: var(--srds-font);
  color: var(--srds-ink);
}

.srdspk--light,
.srdspc--light {
  --srds-red:      #cc251c;
  --srds-paper:    #ffffff;
  --srds-sunk:     #f4f6f8;
  --srds-plate:    #e6ebef;
  --srds-ink:      #062846;
  --srds-ink-cool: #24476a;
  --srds-ink-60:   #4a5d70;
  --srds-ink-40:   #7a8b9b;
  --srds-rule:     #dce1e6;
  --srds-hover-bg: #062846;
  --srds-hover-ink: #ffffff;
}

.srdspk *,
.srdspk *::before,
.srdspk *::after,
.srdspc *,
.srdspc *::before,
.srdspc *::after { box-sizing: border-box; }

/* -- Neutralising the theme ------------------------------------------------
   hello-elementor's reset.css colours every link and button #c36 and gives
   buttons a radius and nowrap. Same layered scheme as srd-schedule.css:
   base (0,1,1), state (0,2,1), components (0,2,0) and up. */

.srdspk a,
.srdspk button,
.srdspc a,
.srdspc button {
  color: inherit;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  text-shadow: none;
  font-family: inherit;
  white-space: normal;
  -webkit-appearance: none;
  appearance: none;
}

.srdspk a:hover,
.srdspk a:focus,
.srdspk a:active,
.srdspc a:hover,
.srdspc a:focus,
.srdspc a:active,
.srdspc button:hover,
.srdspc button:focus,
.srdspc button:active {
  background-image: none;
  box-shadow: none;
  text-shadow: none;
}

.srdspk :focus-visible,
.srdspc :focus-visible {
  outline: 2px solid var(--srds-red);
  outline-offset: 2px;
}

.srdspk h2, .srdspk h3, .srdspk h4, .srdspk h5, .srdspk h6,
.srdspk p, .srdspk figure, .srdspk ul,
.srdspc p, .srdspc figure, .srdspc ul {
  margin: 0;
  padding: 0;
}

.srdspk img,
.srdspc img {
  display: block;
  max-width: none;
  border: 0;
  border-radius: 0;
}

/* ==========================================================================
   Grid
   ========================================================================== */

.srdspk {
  /* The biography's ceiling. A row of cards is as tall as its longest
     biography up to this, and anything longer scrolls inside its card. */
  --srdspk-bio-max: 14.5rem;
  --srdspk-pad: 1.15rem;
}

/* Rules are real borders, not 1px gaps over a coloured background: the last
   row is usually short, and a gap-ruled grid paints its empty cells in the
   rule colour.

   Cards per row come from Speakers > Page order as custom properties on the
   root (mobile, tablet, desktop). The widths are Elementor's default
   breakpoints; this site has no laptop breakpoint, so desktop is 1025px up. */
.srdspk .srdspk-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--srdspk-cols-m, 1), minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--srds-rule);
  border-left: 1px solid var(--srds-rule);
}

/* Five tracks per card on the parent's rows: photo, name with position, talk,
   biography, links. Subgrid is what lines them up across a row of cards
   whatever each card is missing. */
.srdspk .srdspk-card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  /* Photo column: half the card, never wider than 170px. */
  grid-template-columns: min(50%, 170px) minmax(0, 1fr);
  row-gap: 0;
  min-width: 0;
  padding-bottom: 1.3rem;
  background: var(--srds-paper);
  border-right: 1px solid var(--srds-rule);
  border-bottom: 1px solid var(--srds-rule);
  /* The carousel links to #speaker-slug; the site header is sticky. */
  scroll-margin-top: 7rem;
}

@media (min-width: 768px) {
  .srdspk .srdspk-grid { grid-template-columns: repeat(var(--srdspk-cols-t, 2), minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
  .srdspk .srdspk-grid { grid-template-columns: repeat(var(--srdspk-cols-d, 4), minmax(0, 1fr)); }
}

@supports not (grid-template-rows: subgrid) {
  .srdspk .srdspk-card {
    grid-row: auto;
    display: flex;
    flex-direction: column;
  }

  .srdspk .srdspk-photo { width: min(50%, 170px); }

  .srdspk .srdspk-bio { flex: 1 1 auto; }
}

.srdspk .srdspk-card:target {
  outline: 2px solid var(--srds-red);
  outline-offset: -2px;
}

.srdspk .srdspk-card > :not(.srdspk-photo) {
  padding-left: var(--srdspk-pad);
  padding-right: var(--srdspk-pad);
}

/* Photo, as uploaded, in a square. */
.srdspk .srdspk-photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--srds-plate);
  border-bottom: 1px solid var(--srds-rule);
}

.srdspk .srdspk-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.srdspk .srdspk-photo--none,
.srdspc .srdspc-photo--none {
  display: grid;
  place-items: center;
}

.srdspk-initials {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--srds-ink-40);
}

.srdspk .srdspk-head {
  padding-top: 1.05rem;
}

.srdspk .srdspk-name {
  font-family: inherit;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--srds-ink);
  text-wrap: balance;
}

.srdspk .srdspk-role {
  margin-top: .35rem;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .01em;
  color: var(--srds-ink-cool);
}

/* Every width: the photo (at most 170px) with the name and position beside
   it in the card's first row, then talk, biography and links across the
   whole card. The photo is top-aligned, so a long position that makes the row
   taller than the square does not stretch it. */
.srdspk .srdspk-photo {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  border-bottom: 0;
}

.srdspk .srdspk-card > .srdspk-head {
  grid-column: 2;
  grid-row: 1;
  padding: .85rem .9rem 0;
}

.srdspk .srdspk-card > .srdspk-talk,
.srdspk .srdspk-card > .srdspk-bio,
.srdspk .srdspk-card > .srdspk-links {
  grid-column: 1 / -1;
}

/* The one red hairline per card. */
.srdspk .srdspk-talk {
  margin-top: .95rem;
}

.srdspk .srdspk-talk:not(.srdspk-talk--none) {
  border-top: 1px solid var(--srds-red);
  padding-top: .55rem;
  /* The border must not run under the card's side padding. */
  margin-left: var(--srdspk-pad);
  margin-right: var(--srdspk-pad);
  padding-left: 0;
  padding-right: 0;
}

.srdspk .srdspk-label {
  display: block;
  margin-bottom: .2rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--srds-ink-40);
}

.srdspk .srdspk-talk-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--srds-ink);
  text-wrap: pretty;
}

/* Capped and scrolling. The script marks a biography that overflows with
   .is-scroll (and makes it focusable, so it scrolls from the keyboard), and
   with .is-end once it has been read to the bottom. The fade tells a reader
   there is more; it leaves a strip on the right unmasked so the scrollbar
   stays fully visible. */
/* No overscroll-behavior here. Chrome treats any overflow:auto box as a
   scroll container even when nothing overflows, and with `contain` a wheel
   over a short biography went nowhere instead of scrolling the page. */
.srdspk .srdspk-bio {
  margin-top: .95rem;
  max-height: var(--srdspk-bio-max);
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.6;
  color: var(--srds-ink-60);
  scrollbar-width: thin;
  scrollbar-color: var(--srds-rule) transparent;
}

/* Only a biography that really overflows keeps the wheel to itself. */
.srdspk .srdspk-bio.is-scroll {
  overscroll-behavior: contain;
  padding-right: calc(var(--srdspk-pad) - .35rem);
}

.srdspk .srdspk-bio.is-scroll:not(.is-end) {
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
  -webkit-mask-size: 14px 100%, 100% 100%;
  -webkit-mask-position: right top, left top;
  -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(#000, #000), linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
  mask-size: 14px 100%, 100% 100%;
  mask-position: right top, left top;
  mask-repeat: no-repeat;
}

.srdspk .srdspk-bio:focus-visible {
  outline-offset: -2px;
}

.srdspk .srdspk-bio p { margin: 0 0 .6em; }
.srdspk .srdspk-bio p:last-child { margin-bottom: 0; }

.srdspk .srdspk-bio a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

.srdspk .srdspk-bio a:hover { color: var(--srds-red); }

.srdspk .srdspk-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: .45rem 1.1rem;
  padding-top: 1.05rem;
}

.srdspk .srdspk-links--none { padding-top: 0; }

.srdspk .srdspk-links li { min-width: 0; }

.srdspk .srdspk-links a {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--srds-ink);
  border-bottom: 2px solid var(--srds-rule);
  padding-bottom: .1rem;
  transition: color .12s linear, border-color .12s linear;
}

.srdspk .srdspk-links a:hover {
  color: var(--srds-red);
  border-bottom-color: var(--srds-red);
}

.srdspk .srdspk-empty {
  padding: 2rem 0;
  font-size: 16px;
  color: var(--srds-ink-60);
}

/* ==========================================================================
   Carousel
   ========================================================================== */

.srdspc {
  /* About eight and a quarter tiles across a full-width strip on a large
     screen (12vw), never narrower than 10.5rem so a name still fits. */
  --srdspc-tile: clamp(10.5rem, 12vw, 15rem);
  --srdspc-cap-bg: var(--srds-paper);
}

/* Dark paints no background of its own, so the strip takes the colour of the
   band it sits in (navy on the homepage). */
.srdspc--dark {
  --srdspc-cap-bg: transparent;
  --srds-plate: rgba(255, 255, 255, .06);
  --srds-hover-bg: rgba(255, 255, 255, .08);
  --srds-rule: rgba(255, 255, 255, .16);
}

.srdspc .srdspc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem 10px;
  border-top: 1px solid var(--srds-rule);
}

@media (min-width: 768px) {
  .srdspc .srdspc-bar { padding-left: 20px; padding-right: 20px; }
}

@media (min-width: 1025px) {
  .srdspc .srdspc-bar { padding-left: 40px; padding-right: 40px; }
}

.srdspc .srdspc-count {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--srds-ink-60);
}

.srdspc .srdspc-ctl { display: flex; gap: .15rem; }
.srdspc .srdspc-ctl[hidden] { display: none; }

/* Quiet controls: no fill, no frame until hovered, the icon in the muted ink. */
.srdspc .srdspc-btn {
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--srds-ink-60);
  cursor: pointer;
  transition: color .12s linear, border-color .12s linear;
}

.srdspc .srdspc-btn[hidden] { display: none; }

.srdspc .srdspc-btn svg {
  width: 13px;
  height: 13px;
  display: block;
}

.srdspc .srdspc-btn:hover {
  background-color: transparent;
  border-color: var(--srds-rule);
  color: var(--srds-ink);
}

.srdspc .srdspc-btn:focus-visible {
  position: relative;
  z-index: 1;
  outline-offset: 1px;
}

/* (0,3,0) and up, to outrank `.srdspc .srdspc-btn svg { display: block }`
   (0,2,1); at (0,2,0) both icons showed at once. */
.srdspc .srdspc-btn .srdspc-ico-play { display: none; }
.srdspc .srdspc-btn[aria-pressed="true"] .srdspc-ico-pause { display: none; }
.srdspc .srdspc-btn[aria-pressed="true"] .srdspc-ico-play { display: block; }

/* Without the script this is a strip scrolled by hand. */
.srdspc .srdspc-viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--srds-rule) transparent;
  border-top: 1px solid var(--srds-rule);
  border-bottom: 1px solid var(--srds-rule);
}

.srdspc.is-live .srdspc-viewport {
  overflow: hidden;
  scroll-snap-type: none;
}

.srdspc .srdspc-track {
  position: relative;
  display: flex;
  width: max-content;
}

.srdspc.is-live .srdspc-track { will-change: transform; }

.srdspc .srdspc-list {
  list-style: none;
  display: flex;
}

.srdspc .srdspc-list[hidden] { display: none; }

.srdspc .srdspc-tile {
  flex: none;
  width: var(--srdspc-tile);
  border-right: 1px solid var(--srds-rule);
  scroll-snap-align: start;
}

.srdspc .srdspc-tile-in {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.srdspc a.srdspc-tile-in:focus-visible { outline-offset: -2px; }

.srdspc .srdspc-photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--srds-plate);
}

.srdspc .srdspc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.srdspc .srdspc-photo .srdspk-initials { font-size: 2rem; }

.srdspc .srdspc-cap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .75rem .8rem 1rem;
  background-color: var(--srdspc-cap-bg);
  transition: background-color .2s ease, color .2s ease;
}

.srdspc .srdspc-name {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

.srdspc .srdspc-role {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--srds-ink-60);
}

.srdspc .srdspc-talk {
  margin-top: .45rem;
  padding-top: .5rem;
  border-top: 1px solid var(--srds-rule);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
}

.srdspc a.srdspc-tile-in:hover .srdspc-cap,
.srdspc a.srdspc-tile-in:focus-visible .srdspc-cap {
  background-color: var(--srds-hover-bg);
  color: var(--srds-hover-ink);
}

.srdspc a.srdspc-tile-in:hover .srdspc-role,
.srdspc a.srdspc-tile-in:focus-visible .srdspc-role {
  color: rgba(255, 255, 255, .74);
}

.srdspc a.srdspc-tile-in:hover .srdspc-talk,
.srdspc a.srdspc-tile-in:focus-visible .srdspc-talk {
  border-top-color: var(--srds-red);
}

@media (prefers-reduced-motion: reduce) {
  .srdspk *,
  .srdspc * { transition: none !important; }
}

@media print {
  .srdspk .srdspk-bio {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .srdspc { display: none; }
}