/*
 * A webinar series as a grid of cards with a wire running through them in
 * reading order — across each row, then down and back to the start of the
 * next. The wire is an SVG measured from the cards themselves (see buildWire),
 * so it follows whatever the column count and the row heights turn out to be
 * rather than assuming a fixed geometry.
 *
 * It sits behind the grid: the route lives in the gutters and tucks under the
 * card edges at each end, which is why the endpoints can sit exactly on the
 * edges without a seam.
 *
 * Colours arrive per-card as --c, sampled from one brand ramp across the
 * series; the wire's gradient runs through the same three stops.
 */

.e0aa4VTz8hhy8_xs04Ag {
  /* Overridden inline by the theme props. */
  --bg: #ffffff;
  --surface: #ffffff;
  --ink: #000d30;
  --muted: #4e4e4e;
  --line: #e3e8f1;
  --cardBorder: #cdcdcd;
  --cardBorderHover: #f4f6fb;
  --ctaBg: #34a0da;
  --upNext: #17699a;
  --upNextBg: #e8f4fc;
  --glow: #34a0da;
  --ctaInk: #ffffff;
  --label: #34a0da;
  --wire: #34a0da;
  --radius: 16px;
  --maxw: 80rem;
  --cols: 3;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Per-card, overridden inline. */
  --c: #0066ff;
  --i: 0;

  --colGap: 32px;
  --rowGap: 52px;

  box-sizing: border-box;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;

  /*
   * The breakpoints below measure this element, not the window. A code
   * component has no say in how wide the section it is dropped into turns
   * out to be — half a two-column layout, a sidebar, a padded container on
   * a large screen — and a viewport query reads all of those as "desktop"
   * and lays three columns into space that fits one.
   *
   * Named so a consumer nesting this inside their own container cannot
   * capture these queries by accident.
   */
  container: wfWebinarSeries / inline-size;
}

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

.FyTQW44JQkchSXxQBhOR {
  position: relative;
}

/* ---------- the wire ---------- */

.o5beOlk6WhV76nUNMFoe {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.mkyoRwGFp0GxxROTmIm4,
.VMFgcG36wvCvZMFyrJug {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mkyoRwGFp0GxxROTmIm4 {
  stroke: var(--wire);
  opacity: 0.16;
}

/*
 * pathLength="1" normalises the whole route — every segment and every elbow —
 * to a single unit, so one dash covers it end to end and the offset animates
 * from 1 to 0 no matter how long the real path is at this width.
 */
.VMFgcG36wvCvZMFyrJug {
  stroke: var(--wire);
  opacity: 0.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.4s cubic-bezier(0.33, 0.1, 0.25, 1);
}

.avTEZ_wXVzAWR4KPnzPG .VMFgcG36wvCvZMFyrJug {
  stroke-dashoffset: 0;
}

/*
 * Dots travelling the wire. They are HTML rather than SVG because offset-path
 * is what carries them: it takes the same `d` buildWire measured, resolved
 * against .plot as the containing block, so the two never drift apart.
 *
 * The route is several subpaths with cards in between, so a dot leaves one
 * gutter and reappears in the next rather than sliding over a card — it reads
 * as the signal passing behind them.
 */
.U57GwRrxTA9mszBUpzlc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.gaAMOZyiLu3ZPE1AJS2i {
  /* Without offset-path the dot has no route and would sit in the corner, so
     it only exists where the property is supported. */
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wire);
  box-shadow: 0 0 9px 1px var(--wire);
  offset-anchor: center;
  offset-rotate: 0deg;
  animation: rWCOqd9Ag_j4USsywUD2 7.8s linear infinite;
}

@supports (offset-path: path("M 0 0 L 1 1")) {
  .gaAMOZyiLu3ZPE1AJS2i {
    display: block;
  }
}

@keyframes rWCOqd9Ag_j4USsywUD2 {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

/* ---------- grid ---------- */

.wxoHTuafnpv2WTY8Epjz {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--rowGap) var(--colGap);
}

/*
 * min-width: 0 on both: a grid column may be narrower than the card's
 * min-content width, and without this the card keeps its own width and
 * spills over its neighbours rather than shrinking into the cell.
 */
.O1NIvKk90A0O1JXQNOmC {
  display: flex;
  min-width: 0;
}

/* ---------- card ---------- */

.cp8Ag8yRNrUgn2ut7Ngf {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 30px 30px 28px;
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius);
  background: var(--surface);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s ease var(--d, 0ms),
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0ms),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  --d: calc(var(--i) * 90ms);
}

.XaoAqbp9iHc019sSPnsE .cp8Ag8yRNrUgn2ut7Ngf {
  opacity: 1;
  transform: none;
}

.gVhneUUPBzbhO2nfr7cg.XaoAqbp9iHc019sSPnsE .cp8Ag8yRNrUgn2ut7Ngf {
  opacity: 0.74;
}

/* The edge stays neutral on hover — off-white rather than the session's
   ramp sample, so nothing on the card changes colour under the pointer. */
.cp8Ag8yRNrUgn2ut7Ngf:hover,
.cp8Ag8yRNrUgn2ut7Ngf:focus-within {
  border-color: var(--cardBorderHover);
}

.gVhneUUPBzbhO2nfr7cg .cp8Ag8yRNrUgn2ut7Ngf:hover,
.gVhneUUPBzbhO2nfr7cg .cp8Ag8yRNrUgn2ut7Ngf:focus-within {
  opacity: 1;
}

/*
 * The next session on the calendar. A coloured edge and nothing else — the
 * card is already marked by the tag in its header, and a halo behind it only
 * made the row look uneven.
 */
.igpCzSwRavQTz_ysmB4w .cp8Ag8yRNrUgn2ut7Ngf {
  border-color: var(--glow);
}

/*
 * The featured card has to answer the pointer like every other card, and its
 * own rule above would otherwise win on order and leave it inert.
 */
.igpCzSwRavQTz_ysmB4w .cp8Ag8yRNrUgn2ut7Ngf:hover,
.igpCzSwRavQTz_ysmB4w .cp8Ag8yRNrUgn2ut7Ngf:focus-within {
  border-color: var(--cardBorderHover);
}

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

.pmvSRjzphx82XlbJsYYF {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wrg67Lmm3kQKvfzqqOek {
  color: var(--label);
}

.ijGTykrJvujCFnO93LTm {
  color: var(--muted);
  opacity: 0.75;
}

/*
 * Pushed to the far end of the kicker row rather than sitting against the
 * counter, so the status reads as the card's own marker instead of a
 * continuation of "Session 01 / 06". margin-left rather than
 * justify-content: the row wraps, and this keeps the tag trailing whether or
 * not it ends up on a line of its own.
 */
.G8Jdbrt0wOaPTTIWZkhR {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 5px 9px 4px;
  /* Transparent rather than none, so the tinted and outlined tags below are
     the same size and the row does not shift between them. */
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  background: var(--upNextBg);
  color: var(--upNext);
}

.m319IeOz8dz3sZhrYXdP {
  background: var(--line);
  color: var(--muted);
}

.r9KTedc8PqKjpvn9XQTH {
  width: 13px;
  height: 13px;
}

.plm0xrMZgrrXHslCVVsZ {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--muted);
}

/*
 * Only when a date actually precedes it: a session with the date cleared has
 * the title following the counter instead, which needs no extra room.
 */
.plm0xrMZgrrXHslCVVsZ + .DKXtudLK3eRpsRy0lPiH {
  margin-top: 6px;
}

.DKXtudLK3eRpsRy0lPiH {
  margin: 0;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.AOS0Gv1alDsZdYQU2V5O {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.eTKY1xsr74J_nviIlIJM {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- the full-series card ---------- */

/*
 * Spans the grid: at seven cards the last one would otherwise sit alone in a
 * row of three with two empty cells beside it. Full width also gives the
 * includes list and the button somewhere to sit beside the copy rather than
 * under it, which is what makes this read as the close of the series rather
 * than a seventh session.
 */
.KfefMQfAjVOg4kiEOedA {
  grid-column: 1 / -1;
}

.RbO3MPJSnxfVQoP4w3rg {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 30px 48px;
  padding: 34px 36px;
  border-color: var(--label);
}

.RbO3MPJSnxfVQoP4w3rg:hover,
.RbO3MPJSnxfVQoP4w3rg:focus-within {
  border-color: var(--cardBorderHover);
}

.pORz9Ei5sXh4gkeljArY {
  flex: 3 1 340px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lnjTNcyoUuetRGrpMQV4 {
  flex: 2 1 260px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.AFx_dEtlH7Yr5QBXS3JA {
  color: var(--label);
}

.g0XDMmxAs_6hDQaqt1Xg {
  font-size: 2.25rem;
}

.L_xzrt_LJGKXIi4aZkAB {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.PozK7JDTVCs5u3ykLSOe {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--muted);
}

/* Nudged down to sit on the first line of text rather than above it. */
.PozK7JDTVCs5u3ykLSOe svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--label);
}

/* ---------- speakers & audience ---------- */

.h3TCUT8Wh2PxIhxrD8WE {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 22px 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  margin-top: 6px;
}

.VdwtpzqkVkDfDFizS0nB {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kyMbMV6nERp4rJmlP1vx {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.85;
}

.hwTdIyhlfEbBNiFN6sxc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.YweYLqP18SFQVokZzE6p {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  line-height: 1.35;
}

/* Name over organisation, so each speaker reads as a single unit. */
.D_58PxgaG4vKjOCEkTvn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Portrait rows are taller than bullet rows; a little more air keeps a mixed
   list from looking cramped where the two meet. */
.RpgV25T5ddgn4INeVhyy + .RpgV25T5ddgn4INeVhyy {
  margin-top: 2px;
}

.lAGPRsZMrpZf6Yoh03uD {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--label);
}

.beuhHMmbqxxjeLcVO5Hv {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--line);
  object-fit: cover;
}

.eBQ5t8mBqWjO0Hig5EhZ {
  font-weight: 600;
  color: var(--ink);
}

.YtNMq6FlaAyzgUTmkltw {
  font-size: 0.875rem;
  color: var(--muted);
}

.BXdV4t5S7c_6MME7VXbw {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--muted);
}

/* ---------- register ---------- */

/* margin-top: auto pins the button to the bottom, so every card in a row ends
   on the same line however much copy sits above it. */
.XB8eFLMdg4S8PoXJMsRT {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: 16px;
}

.zOkduxu4SPTvrdXqAAow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--ctaBg);
  color: var(--ctaInk);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.25s ease;
}

.zOkduxu4SPTvrdXqAAow:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.zOkduxu4SPTvrdXqAAow:focus-visible {
  outline: 2px solid var(--ctaBg);
  outline-offset: 3px;
}

.zt_JMZZgqzHp4mUhvuPi {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.zOkduxu4SPTvrdXqAAow:hover .zt_JMZZgqzHp4mUhvuPi {
  transform: translateX(3px);
}

/*
 * Select mode. Outlined at rest and filled once picked, so a row of cards
 * shows at a glance which sessions are in: the fill is the state, the label
 * only confirms it.
 */
.cnL9_DT5AWn65UFSsoxi {
  background: transparent;
  color: var(--ctaBg);
  box-shadow: inset 0 0 0 1.5px var(--ctaBg);
}

.cnL9_DT5AWn65UFSsoxi.npORDHwvHwebllZl1dDJ {
  background: var(--ctaBg);
  color: var(--ctaInk);
  box-shadow: none;
}

.fkCyt_uM90l3QlEg8uum,
.cnL9_DT5AWn65UFSsoxi .r9KTedc8PqKjpvn9XQTH {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* Placeholder for a session whose registration link isn't set yet. */
.e0_8sdT0TRDwR0KtXP5c {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 20px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
  opacity: 0.6;
}

/* ---------- narrower ---------- */

/*
 * Thresholds are the component's own width. Three cards need roughly 900px
 * between them before the copy starts breaking up, two need roughly 600px;
 * below that the run reads better as a single column however wide the
 * window happens to be.
 */

/* Two across, whatever the desktop column count is. */
@container wfWebinarSeries (max-width: 900px) {
  .wxoHTuafnpv2WTY8Epjz {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container wfWebinarSeries (max-width: 600px) {
  .e0aa4VTz8hhy8_xs04Ag {
    --rowGap: 36px;
  }

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

  .cp8Ag8yRNrUgn2ut7Ngf {
    padding: 26px 22px 24px;
  }

  .RbO3MPJSnxfVQoP4w3rg {
    padding: 26px 22px;
    gap: 26px;
  }

  .g0XDMmxAs_6hDQaqt1Xg {
    font-size: 1.875rem;
  }

  .DKXtudLK3eRpsRy0lPiH {
    font-size: 1.625rem;
  }
}

/*
 * Without container query support the rules above never match and every
 * width would get the full column count, so the viewport queries stay on
 * as a fallback. They are wrong whenever the component is narrower than
 * the window, but a layout that only misreads nested placements beats one
 * that lays three columns out on a phone.
 */
@supports not (container-type: inline-size) {
  @media (max-width: 991px) {
    .wxoHTuafnpv2WTY8Epjz {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 639px) {
    .e0aa4VTz8hhy8_xs04Ag {
      --rowGap: 36px;
    }

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

    .cp8Ag8yRNrUgn2ut7Ngf {
      padding: 26px 22px 24px;
    }

    .RbO3MPJSnxfVQoP4w3rg {
      padding: 26px 22px;
      gap: 26px;
    }

    .g0XDMmxAs_6hDQaqt1Xg {
      font-size: 1.875rem;
    }

    .DKXtudLK3eRpsRy0lPiH {
      font-size: 1.625rem;
    }
  }
}

/* ---------- reduced motion ---------- */

.obL6v3yaYEUBlaEb_Gnd .cp8Ag8yRNrUgn2ut7Ngf,
.obL6v3yaYEUBlaEb_Gnd .VMFgcG36wvCvZMFyrJug {
  transition: none;
}

.obL6v3yaYEUBlaEb_Gnd .cp8Ag8yRNrUgn2ut7Ngf {
  opacity: 1;
  transform: none;
}

.obL6v3yaYEUBlaEb_Gnd .VMFgcG36wvCvZMFyrJug {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .U57GwRrxTA9mszBUpzlc {
    display: none;
  }

  .cp8Ag8yRNrUgn2ut7Ngf,
  .VMFgcG36wvCvZMFyrJug,
  .zOkduxu4SPTvrdXqAAow,
  .zt_JMZZgqzHp4mUhvuPi {
    transition: none;
  }

  .cp8Ag8yRNrUgn2ut7Ngf {
    opacity: 1;
    transform: none;
  }

  .VMFgcG36wvCvZMFyrJug {
    stroke-dashoffset: 0;
  }

  .zOkduxu4SPTvrdXqAAow:hover {
    transform: none;
  }
}