/* SFF 2026 - Speaker Rail. Scoped to .sff26-spk; rules are written as
   ".sff26-spk .sff26-spk__x" so they outrank the theme's element rules.
   The only !important is phone typography (see the phone block). */

.sff26-spk {
  --sff26-muted: #cfcfcf;
  --sff26-amber: #FCB316;
  --sff26-ease: cubic-bezier(.22, .8, .24, 1);
  --sff26-gut: 20px;
  --sff26-max: var(--forum-content-max, 1416px);
  --sff26-r: 16px;
  box-sizing: border-box;
  position: relative;
  padding: 120px 0 0;
  color: #fff;
  font-family: var(--forum-font, "Open Sans", Arial, sans-serif);
}

/* From tablets up the content lines up with the site header and footer: the
   forum skin's --forum-content-max and --forum-gutter (these fallbacks without it) */
@media (min-width: 768px) {
  .sff26-spk { --sff26-gut: var(--forum-gutter, 40px); }
}
.sff26-spk *,
.sff26-spk *::before,
.sff26-spk *::after { box-sizing: border-box; }

.sff26-spk .sff26-spk__note {
  max-width: calc(var(--sff26-max) + 2 * var(--sff26-gut));
  margin: 0 auto 24px;
  padding: 10px 20px;
  border-radius: 8px;
  background: #3a2a00;
  color: #ffd98a;
  font-size: 14px;
  line-height: 1.5;
}

/* Heading pattern: heading and lead on the left, arrows and link on the right */
.sff26-spk .sff26-spk__w {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "hd acts";
  column-gap: 48px;
  align-items: end;
  max-width: calc(var(--sff26-max) + 2 * var(--sff26-gut));
  margin: 0 auto;
  padding: 0 var(--sff26-gut);
}
.sff26-spk .sff26-spk__hd { grid-area: hd; }
.sff26-spk .sff26-spk__acts { grid-area: acts; display: flex; align-items: center; gap: 28px; }
.sff26-spk .sff26-spk__h2 {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.018em;
  color: #fff;
  text-transform: none;
  text-wrap: balance;
}
/* Letter spans added by module.js; the legacy SFF CSS paints "h2 span" amber */
.sff26-spk .sff26-spk__h2 .sff26-spk__wd,
.sff26-spk .sff26-spk__h2 .sff26-spk__ch { color: inherit; }
.sff26-spk .sff26-spk__wd { white-space: nowrap; }
.sff26-spk .sff26-spk__ch { display: inline-block; }
.sff26-spk .sff26-spk__lead {
  max-width: 56ch;
  margin: 18px 0 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--sff26-muted);
}

.sff26-spk .sff26-spk__nav { display: flex; align-items: center; gap: 12px; }
.sff26-spk .sff26-spk__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 1px solid #5c5c5c;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .15s ease;
}
.sff26-spk .sff26-spk__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sff26-spk .sff26-spk__btn:hover { background: var(--sff26-amber); border-color: var(--sff26-amber); color: #141414; }
.sff26-spk .sff26-spk__btn:active { transform: scale(.94); }
.sff26-spk .sff26-spk__btn[disabled] { opacity: .3; cursor: default; background: transparent; border-color: #5c5c5c; color: #fff; }

/* Text link: amber, arrow, an underline that draws in on hover */
.sff26-spk .sff26-spk__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--forum-highlight, var(--sff26-amber));
  text-decoration: none;
}
.sff26-spk .sff26-spk__link::after {
  content: "";
  position: absolute;
  left: 0;
  /* Runs under the text AND the arrow; on hover it draws in over the same
     .3s ease as the arrow stretches (scaleX 1.3 from its left, so the tip
     moves 7.2px past the link box), ending exactly at the stretched tip. */
  right: calc(24px * -0.3);
  bottom: 8px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s ease;
}
.sff26-spk .sff26-spk__link:hover,
.sff26-spk .sff26-spk__link:focus-visible { color: var(--forum-highlight, var(--sff26-amber)); text-decoration: none; }
.sff26-spk .sff26-spk__link:hover::after,
.sff26-spk .sff26-spk__link:focus-visible::after { transform: scaleX(1); }
/* Same arrow as the primary CTA (theme .cta-arrow): 24x12, stretches from its
   left edge on hover */
.sff26-spk .sff26-spk__link-ic {
  flex: none;
  display: block;
  width: 24px;
  height: 12px;
  transform-origin: left center;
  transition: transform .3s ease;
}
.sff26-spk .sff26-spk__link:hover .sff26-spk__link-ic,
.sff26-spk .sff26-spk__link:focus-visible .sff26-spk__link-ic { transform: scaleX(1.3); }

.sff26-spk a:focus-visible,
.sff26-spk button:focus-visible,
.sff26-spk .sff26-spk__rail:focus-visible { outline: 2px solid var(--sff26-amber); outline-offset: 3px; }

/* The rail: its box starts on the content's left edge (cards moving left are
   cut off there, in line with the heading) and runs off the right of the screen */
.sff26-spk .sff26-spk__rail {
  --sff26-edge: max(var(--sff26-gut), calc((100% - var(--sff26-max)) / 2));
  margin: 48px 0 0 var(--sff26-edge);
  padding: 10px 0 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.sff26-spk .sff26-spk__rail::-webkit-scrollbar { display: none; }
.sff26-spk .sff26-spk__rail.sff26-spk__rail--drag { cursor: grabbing; scroll-snap-type: none; }
/* Dragging the rail must never pick up a headshot or a link instead: no
   native image/link drag, no text selection, and the grab cursor shows over
   the cards too (a click without moving still opens the speaker). */
.sff26-spk .sff26-spk__rail,
.sff26-spk .sff26-spk__row { -webkit-user-select: none; user-select: none; }
.sff26-spk .sff26-spk__rail a,
.sff26-spk .sff26-spk__row a { cursor: inherit; -webkit-user-drag: none; }
.sff26-spk .sff26-spk__ph img { -webkit-user-drag: none; pointer-events: none; }
.sff26-spk .sff26-spk__rail.sff26-spk__rail--drag a { pointer-events: none; }
.sff26-spk .sff26-spk__track {
  display: flex;
  gap: 20px;
  width: max-content;
  margin: 0;
  padding: 0 var(--sff26-edge) 0 0;
  list-style: none;
}

/* One speaker card */
.sff26-spk .sff26-spk__c {
  flex: none;
  width: 272px;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: normal;
  scroll-snap-align: start;
}
.sff26-spk .sff26-spk__c::before,
.sff26-spk .sff26-spk__c::marker { content: none; }
.sff26-spk .sff26-spk__c a { display: block; color: #fff; text-decoration: none; }
.sff26-spk .sff26-spk__c a:focus-visible { outline-offset: 6px; border-radius: calc(var(--sff26-r) + 4px); }
/* The portrait (user decisions 30 Sep, one look on every page): the headshot in
   its own colour, multiplied over a light wash of the card's brand colour (the
   photos have white backgrounds, which take the wash), with the brand colour
   rising from the foot of the card and fading out below the face. On hover or
   keyboard focus the photo shows in its true colours: the wash fades to white
   (a photo multiplied over white is unchanged), and the filter and fade go. */
.sff26-spk .sff26-spk__ph {
  position: relative;
  isolation: isolate;
  display: block;
  aspect-ratio: 1 / 1.1;
  overflow: hidden;
  border-radius: var(--sff26-r);
  background: var(--sff26-c);
  background: color-mix(in srgb, var(--sff26-c) 40%, #fff);
  transition: background-color .45s ease;
}
.sff26-spk .sff26-spk__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, var(--sff26-c) 0%, var(--sff26-c) 2%, color-mix(in srgb, var(--sff26-c) 55%, transparent) 10%, transparent 20%);
  transition: opacity .45s ease;
}
.sff26-spk .sff26-spk__ph img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: contrast(1.03) saturate(1.05);
  mix-blend-mode: multiply;
  transform: scale(1.01);
  transition: filter .45s ease, transform .6s var(--sff26-ease);
}
.sff26-spk .sff26-spk__c a:hover .sff26-spk__ph,
.sff26-spk .sff26-spk__c a:focus-visible .sff26-spk__ph { background: #fff; }
.sff26-spk .sff26-spk__c a:hover .sff26-spk__ph::after,
.sff26-spk .sff26-spk__c a:focus-visible .sff26-spk__ph::after { opacity: 0; }
.sff26-spk .sff26-spk__c a:hover .sff26-spk__ph img,
.sff26-spk .sff26-spk__c a:focus-visible .sff26-spk__ph img { filter: none; transform: scale(1.06); }
.sff26-spk .sff26-spk__n {
  margin: 18px 0 0;
  padding: 0;
  font-family: inherit;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
  text-transform: none;
  transition: color .25s ease;
}
.sff26-spk .sff26-spk__c a:hover .sff26-spk__n,
.sff26-spk .sff26-spk__c a:focus-visible .sff26-spk__n { color: var(--sff26-c); }
/* the speaker's title in full, however long (user 12 Oct: "some speakers have extremely long titles ... we have to cater fully to them") */
.sff26-spk .sff26-spk__t {
  display: block;
  margin: 6px 0 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--sff26-muted);
}
.sff26-spk .sff26-spk__o { margin: 2px 0 0; padding: 0; font-size: 15px; line-height: 1.45; font-weight: 600; color: #fff; }

/* Progress bar under the rail */
.sff26-spk .sff26-spk__ft { max-width: calc(var(--sff26-max) + 2 * var(--sff26-gut)); margin: 30px auto 0; padding: 0 var(--sff26-gut); }
.sff26-spk .sff26-spk__bar { position: relative; height: 3px; overflow: hidden; border-radius: 3px; background: #2e2e2e; }
.sff26-spk .sff26-spk__bar span { position: absolute; top: 0; bottom: 0; left: 0; width: 25%; border-radius: 3px; background: var(--sff26-amber); transition: transform .15s linear; }

/* The phone rows are built for phones only */
.sff26-spk .sff26-spk__rows { display: none; }

/* Phones: heading, three drifting rows, then the link */
@media (max-width: 767px) {
  .sff26-spk { display: flex; flex-direction: column; padding-top: 72px; }
  .sff26-spk .sff26-spk__w { display: contents; }
  .sff26-spk .sff26-spk__note { order: 0; margin: 0 var(--sff26-gut) 16px; }
  .sff26-spk .sff26-spk__hd { order: 1; padding: 0 var(--sff26-gut); }
  .sff26-spk .sff26-spk__acts { order: 4; justify-content: space-between; margin-top: 30px; padding: 0 var(--sff26-gut); }
  .sff26-spk .sff26-spk__nav,
  .sff26-spk .sff26-spk__rail,
  .sff26-spk .sff26-spk__ft { display: none; }
  .sff26-spk .sff26-spk__h2 { font-size: 32px; line-height: 1.12; }
  .sff26-spk .sff26-spk__lead { margin-top: 12px; font-size: 16px; }

  .sff26-spk .sff26-spk__rows {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 28px;
    container-type: inline-size;
  }
  .sff26-spk .sff26-spk__row {
    --sff26-sc: calc((100cqw - 2 * var(--sff26-gut) - 36px) / 2);
    padding-left: var(--sff26-gut);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
  }
  .sff26-spk .sff26-spk__row::-webkit-scrollbar { display: none; }
  .sff26-spk .sff26-spk__row.sff26-spk__row--drag { cursor: grabbing; }
  .sff26-spk .sff26-spk__rtrack { display: flex; width: max-content; }
  .sff26-spk .sff26-spk__set { display: flex; gap: 12px; margin: 0; padding: 0 var(--sff26-gut) 0 0; list-style: none; }
  .sff26-spk .sff26-spk__rows .sff26-spk__c { width: var(--sff26-sc); }

  /* Phone type. The theme's main.css and the homepage's own head styles set
     h2 / h3 / p sizes and weights on phones with !important, so these must
     be !important too (phone typography only). */
  .sff26-spk .sff26-spk__h2 { font-size: 32px !important; line-height: 1.12 !important; font-weight: 600 !important; }
  .sff26-spk .sff26-spk__lead { font-size: 16px !important; line-height: 1.5 !important; }
  .sff26-spk .sff26-spk__n { margin-top: 12px; font-size: 16px !important; line-height: 1.3 !important; font-weight: 600 !important; }
  .sff26-spk .sff26-spk__t,
  .sff26-spk .sff26-spk__o { font-size: 13px !important; line-height: 1.4 !important; }
}

/* Entrances, once each. module.js adds --armed only when it can also reveal,
   so without JavaScript or with reduced motion nothing is hidden: heading
   letters rise in, and the portraits wipe up one after another. */
.sff26-spk.sff26-spk--armed .sff26-spk__ch {
  transition: opacity .45s ease, transform .6s var(--sff26-ease);
  transition-delay: calc(var(--sff26-ci, 0) * 16ms);
}
.sff26-spk.sff26-spk--armed .sff26-spk__h2:not(.sff26-spk__h2--in) .sff26-spk__ch { opacity: 0; transform: translateY(.4em); }
.sff26-spk.sff26-spk--armed .sff26-spk__ph { transition: clip-path 1s var(--sff26-ease) calc(var(--sff26-i, 0) * 70ms); }
.sff26-spk.sff26-spk--armed:not(.sff26-spk--in) .sff26-spk__ph { clip-path: inset(100% 0 0 0 round 16px); }
.sff26-spk.sff26-spk--armed.sff26-spk--in .sff26-spk__ph { clip-path: inset(0 0 0 0 round 16px); }

@media (prefers-reduced-motion: reduce) {
  .sff26-spk .sff26-spk__ph,
  .sff26-spk .sff26-spk__ph::after,
  .sff26-spk .sff26-spk__ph img,
  .sff26-spk .sff26-spk__btn,
  .sff26-spk .sff26-spk__link::after,
  .sff26-spk .sff26-spk__link-ic,
  .sff26-spk .sff26-spk__bar span,
  .sff26-spk.sff26-spk--armed .sff26-spk__ph,
  .sff26-spk.sff26-spk--armed .sff26-spk__ch { transition: none; }
  .sff26-spk.sff26-spk--armed:not(.sff26-spk--in) .sff26-spk__ph { clip-path: none; }
  .sff26-spk.sff26-spk--armed .sff26-spk__h2:not(.sff26-spk__h2--in) .sff26-spk__ch { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Other forums (12 Oct, user: "globalise the new modules to be used on other forums"). Everything below applies only
   OFF SFF (".sff26-spk:not(.skin-sff *)"), so SFF keeps exactly the values above. The module reads the forum skin's tokens
   (the bss.css contract: --forum-text, --forum-text-body, --forum-text-muted, --forum-text-faint, --forum-surface,
   --forum-surface-raised, --forum-line, --forum-highlight, --forum-dark, the brand palette --forum-gold / -accent /
   -orchid / -teal) and the BSS layout (--bss-max, --bss-gutter), each falling back to SFF's value. A light edition
   (BSS Cambodia) sets --forum-highlight-text to its text colour: brand colours never as small text on a light page.
   BSS forces p / li to var(--forum-text-body) !important, so each text role sets that token to its own colour.
   The portraits keep their wash and fade in the card's colour (a photo, on any page), in the forum's palette.
   --------------------------------------------------------------------------------------------------------------- */
.sff26-spk:not(.skin-sff *) {
  --sff26-gut: 15px; /* BSS's phone gutter (from 768px: --bss-gutter, below) */
  --sff26-max: var(--forum-content-max, var(--bss-max, 1416px));
  --sff26-amber: var(--forum-highlight, #FCB316);
  --sff26-amber-ink: var(--forum-dark, #141414); /* fallback for browsers without relative colours */
  --sff26-hl-text: var(--forum-highlight-text, var(--forum-highlight, #FCB316));
  --sff26-fg: var(--forum-text, #fff);
  --sff26-muted: var(--forum-text-muted, #cfcfcf);
  --sff26-pal-amber: var(--forum-gold, var(--forum-highlight, #FCB316));
  --sff26-pal-red: var(--forum-highlight, #E53935);
  --sff26-pal-blue: var(--forum-accent, #3399FF);
  --sff26-pal-pink: var(--forum-orchid, #FF88A2);
  --sff26-pal-green: var(--forum-teal, #76C893);
  /* a light edition without --forum-highlight-text (BSS India today): its text colour. It names --forum-page, which
     only a light edition sets, so on a dark page it is invalid and the card's own colour shows */
  --sff26-light-text: color-mix(in srgb, var(--forum-text) 100%, var(--forum-page) 0%);
  --forum-text-body: var(--sff26-muted);
  color: var(--sff26-fg);
}
@supports (color: oklch(from red l c h)) {
  .sff26-spk:not(.skin-sff *) {
    /* ink on the highlight fill: white on a dark fill, a near-black on a light one (River Stone's oklch) */
    --sff26-amber-ink: oklch(from var(--sff26-amber) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
  }
}
@media (min-width: 768px) {
  .sff26-spk:not(.skin-sff *) { --sff26-gut: var(--forum-gutter, var(--bss-gutter, 40px)); }
}
.sff26-spk:not(.skin-sff *) .sff26-spk__h2,
.sff26-spk:not(.skin-sff *) .sff26-spk__c a,
.sff26-spk:not(.skin-sff *) .sff26-spk__n { color: var(--sff26-fg); }
/* the organisation: the strong line under the title, as on SFF (a p, so the token too) */
.sff26-spk:not(.skin-sff *) .sff26-spk__o { --forum-text-body: var(--sff26-fg); color: var(--sff26-fg); }
/* the name on hover, in the card's colour; the text colour where the edition keeps brand colours off text */
.sff26-spk:not(.skin-sff *) .sff26-spk__c a:hover .sff26-spk__n,
.sff26-spk:not(.skin-sff *) .sff26-spk__c a:focus-visible .sff26-spk__n { color: var(--forum-highlight-text, var(--sff26-light-text, var(--sff26-c))); }
/* the arrows: a hairline circle the page's faint text colour, filled in the highlight on hover */
.sff26-spk:not(.skin-sff *) .sff26-spk__btn { border-color: var(--forum-text-faint, #5c5c5c); color: var(--sff26-fg); }
.sff26-spk:not(.skin-sff *) .sff26-spk__btn:hover { background: var(--sff26-amber); border-color: var(--sff26-amber); color: var(--sff26-amber-ink); }
.sff26-spk:not(.skin-sff *) .sff26-spk__btn[disabled] { background: transparent; border-color: var(--forum-text-faint, #5c5c5c); color: var(--sff26-fg); }
.sff26-spk:not(.skin-sff *) .sff26-spk__link,
.sff26-spk:not(.skin-sff *) .sff26-spk__link:hover,
.sff26-spk:not(.skin-sff *) .sff26-spk__link:focus-visible { color: var(--sff26-hl-text); }
.sff26-spk:not(.skin-sff *) .sff26-spk__bar { background: var(--forum-line, #2e2e2e); }