/* ============================================================
   TCEU SUMMIT PAGE (tce-summit widget) — 15 Oct 2026
   The client's pick of the options: the top of "Middle" (headline,
   the morning as a proportional timeline, key facts) and the
   programme of "Plain" (every session shows who is speaking).
   Paper page inside the site's dark header and footer. Everything
   is scoped to .tces; sizes follow the widget's own width
   (container queries), so it holds up in any column.
   Digits in 'Hagrid X' are served from Expressway at the font
   level (design.css), so times can sit in the display face.
   ============================================================ */

.tces {
  --paper: #F7F3F0; --paper2: #E4DDD7; --ink: #101021; --blue: #0472FD; --orange: #FF4F00;
  --pink: #E703AA; --green: #008433; --yellow: #F6AC08;
  --soft: rgba(16, 16, 33, .66); --rule: rgba(16, 16, 33, .14);
  --display: 'Hagrid X', 'Arial Black', sans-serif;
  --label: 'Expressway X', 'Segoe UI', sans-serif;      /* bold labels only */
  /* Running text in the system face, as in the approved mock-ups: the site's regular Expressway
     (expresswayfree.ttf) snaps its letters to uneven heights at text sizes (15 Oct). */
  --text: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --gut: clamp(16px, 5vw, 96px);
  --head: 64px;                              /* the theme's fixed header */
  --ease: cubic-bezier(.2, .7, .2, 1);
  container: tces / inline-size;
  background: var(--paper);
  color: var(--ink);
  font: 400 19px/1.55 var(--text);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.tces *, .tces *::before, .tces *::after { box-sizing: border-box; }
.tces a { color: inherit; }
.tces .nw { white-space: nowrap; }   /* e.g. "e-mobility": never "e-" at a line end */
.tces p { text-wrap: pretty; }        /* no lone last word (the widget also joins each paragraph's last two words) */
.tces img { display: block; max-width: none; }

/* Elementor sizes a widget in a column container from its content, and .tces's inline-size containment
   makes that content zero-wide: on phones the wrapper came out 8,000px taller than the page. A definite
   width lets the content be measured at its real width. */
.elementor-widget.elementor-widget-tce-summit { width: 100%; }

/* On this page the site header sits over paper, so it goes solid. */
body:has(.tces) header { background: color-mix(in srgb, #101021 96%, transparent); }

.tces .tces-wrap { width: 100%; max-width: calc(1248px + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }

/* session colours (timeline blocks, programme swatches, card dots) */
.tces .c-paper  { background: var(--paper2); color: var(--ink); }
.tces .c-ink    { background: var(--ink); color: #fff; }
.tces .c-blue   { background: var(--blue); color: #fff; }
.tces .c-orange { background: var(--orange); color: #fff; }
.tces .c-pink   { background: var(--pink); color: #fff; }
.tces .c-green  { background: var(--green); color: #fff; }
.tces .c-yellow { background: var(--yellow); color: var(--ink); }

.tces .tces-btn {
  display: inline-block; white-space: nowrap; text-decoration: none;
  font: 700 17px/1 var(--label); padding: 17px 28px; border-radius: 999px;
  background: var(--orange); color: #fff;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.tces .tces-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px var(--orange); color: #fff; }
.tces .tces-btn.on-blue { background: #fff; color: var(--ink); }
.tces .tces-btn.on-blue:hover { color: var(--ink); box-shadow: 0 10px 22px -10px rgba(16, 16, 33, .5); }
.tces .ini { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;
  font: 900 1em/1 var(--display); color: var(--blue); background: var(--paper2); }

/* ------------------------------------------------ top: kicker, headline, introduction */
.tces .tces-top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 24px 64px; align-items: end;
  padding-top: calc(var(--head) + clamp(40px, 6cqi, 88px));
}
.tces .tces-k { font: 700 19px/1.3 var(--label); color: var(--blue); }
.tces .tces-h1 {
  /* MAKING / EV HISTORY: two lines that never wrap; the size follows the column (EV HISTORY is ~6.3em wide) */
  font: 900 min(124px, calc((100cqi - 2 * var(--gut)) / 6.5))/.88 var(--display);
  text-transform: uppercase; letter-spacing: -.025em; margin: 20px 0 0; color: var(--ink);
}
.tces .ln { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.tces .ln > span { display: inline-block; white-space: nowrap; }
.tces .tces-lede { font-size: 21px; line-height: 1.45; color: var(--soft); margin: 0; padding-bottom: 12px; }

/* ------------------------------------------------ the morning: a proportional timeline */
.tces .tces-tl { margin-top: clamp(44px, 6cqi, 72px); }
.tces .tces-ticks { position: relative; height: 38px; }
.tces .tces-ticks span { position: absolute; top: 0; transform: translateX(-50%); font: 900 20px/1 var(--display); }
.tces .tces-ticks span::after { content: ''; position: absolute; left: 50%; top: 28px; width: 2px; height: 10px; margin-left: -1px; background: var(--ink); }
.tces .tces-track { position: relative; }
.tces .tces-bar {
  display: flex; height: 230px; margin: 0; padding: 0; list-style: none; border-radius: 18px; overflow: hidden;
  background: repeating-linear-gradient(135deg, #ECE6E1 0 10px, #F2EDE9 10px 20px);   /* any unscheduled time shows hatched */
}
.tces .tces-bar > li { position: relative; flex: 0 0 var(--w); min-width: 0; margin: 0; container: blk / inline-size; }
.tces .tces-blk + .tces-blk { box-shadow: inset 2px 0 0 var(--paper); }
.tces .tces-blk > a {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: 18px 16px; text-decoration: none; color: inherit;
}
.tces .tces-blk > a:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.tces .tces-blk .tx { display: block; }
.tces .tces-blk b { display: block; font: 900 26px/1 var(--display); }
.tces .tces-blk .lbl { display: block; margin-top: 8px; font: 700 15px/1.25 var(--label); }
.tces .tces-blk .av { display: flex; }
.tces .tces-blk .av > span { flex: 0 0 auto; width: 40px; height: 40px; margin-right: -10px; border-radius: 50%; overflow: hidden;
  border: 2px solid currentColor; background: var(--paper); font-size: 13px; }
.tces .tces-blk .av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 47.5%; }
/* a block too small for three faces at full size takes them smaller */
@container blk (max-width: 135px) {
  .tces .tces-bar .tces-blk .av > span { width: 30px; height: 30px; margin-right: -8px; }
}
/* a short slot (15 minutes is about 70px wide): its time and title run up the block, like a book's spine */
@container blk (max-width: 84px) {
  .tces .tces-bar .tces-blk > a { padding: 16px 0; align-items: center; justify-content: flex-start; }
  .tces .tces-bar .tces-blk .tx { writing-mode: vertical-rl; transform: rotate(180deg); text-align: end; height: 100%; }
  .tces .tces-bar .tces-blk b { font-size: 21px; }
  .tces .tces-bar .tces-blk .lbl { margin: 0 6px 0 0; font-size: 14px; }
}
@container blk (max-width: 48px) {
  .tces .tces-bar .tces-blk b { font-size: 16px; }
  .tces .tces-bar .tces-blk .lbl { margin-right: 4px; font-size: 12px; }
}

.tces .tces-ph { position: absolute; top: 0; height: 230px; left: 0; width: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .4s; }
.tces .tces-ph.on { opacity: 1; }
.tces .tces-ph b { position: absolute; top: -8px; bottom: -8px; left: -2px; width: 4px; background: var(--ink); border-radius: 2px; }
.tces .tces-ph span { position: absolute; top: calc(100% + 14px); left: 0; transform: translateX(-50%); white-space: nowrap;
  background: var(--ink); color: var(--paper); font: 900 16px/1 var(--display); padding: 7px 10px; border-radius: 7px; }

/* ------------------------------------------------ key facts */
.tces .tces-facts { margin-top: 40px; }
.tces .tces-f3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 30px; border-top: 4px solid var(--ink); }
.tces .tces-f { padding-top: 26px; }
.tces .tces-f .l { font: 700 15px/1.3 var(--label); color: var(--soft); }
.tces .tces-f .v { font: 900 30px/1.15 var(--display); margin-top: 10px; overflow-wrap: break-word; }
.tces .tces-f .v small { display: block; font: 400 17px/1.4 var(--text); color: var(--soft); margin-top: 8px; }
.tces .tces-f .tces-btn { margin-top: 20px; }
.tces .tces-cd { margin-top: 14px; font: 700 15px var(--label); color: var(--blue); }
.tces .tces-cd b { font: 900 17px var(--display); color: var(--ink); }

/* ------------------------------------------------ section headings (programme, speakers) */
.tces .tces-prog, .tces .tces-spk { padding-top: clamp(80px, 10cqi, 120px); }
.tces .tces-sh { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px 24px;
  border-top: 4px solid var(--ink); padding-top: 22px; }
.tces .tces-sh h2 { font: 900 clamp(40px, 6.2cqi, 72px)/1 var(--display); text-transform: uppercase; letter-spacing: -.01em; margin: 0; color: var(--ink); }
.tces .tces-sh p { font: 700 18px/1.3 var(--label); color: var(--soft); margin: 0; }
.tces .tces-sh p a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tces .tces-sh p a:hover { color: var(--blue); }

/* ------------------------------------------------ programme: one row per session, with who is speaking */
.tces .tces-row {
  display: grid; grid-template-columns: 6px 180px minmax(0, 1fr) 100px; gap: 0 30px;
  padding: 32px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--head) + 24px);
}
.tces .tces-row .sw { border-radius: 3px; }
.tces .tces-row .t { font: 900 44px/1 var(--display); color: var(--blue); }
.tces .tces-row .t span { display: block; margin-top: 10px; font: 700 16px/1.3 var(--label); color: var(--soft); }
.tces .tces-row .t em { display: none; font-style: normal; }
.tces .tces-row h3 { font: 900 34px/1.1 var(--display); letter-spacing: -.01em; margin: 0 0 10px; color: var(--ink); }
.tces .tces-row p { margin: 0; max-width: 780px; color: var(--soft); }
.tces .tces-row .d { text-align: right; padding-top: 10px; font: 700 16px/1.3 var(--label); color: var(--soft); }
.tces .tces-row.is-break .t, .tces .tces-row.is-break h3 { color: var(--soft); }
.tces .tces-row.is-break h3 { font-size: 28px; }
.tces .tces-who { display: flex; flex-wrap: wrap; gap: 18px 34px; margin-top: 22px; }
.tces .tces-p { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.tces .tces-p .ph { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--paper2); font-size: 18px; }
/* the 4:5 portrait in a circle: centred a little high puts the eyes at 40%, as in the cards */
.tces .tces-p .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 47.5%; }
.tces .tces-p b { display: block; font: 700 17px/1.2 var(--label); }
.tces .tces-p small { display: block; margin-top: 3px; max-width: 330px; font: 400 15px/1.35 var(--text); color: var(--soft); }
.tces a.tces-p:hover b { color: var(--blue); }

/* ------------------------------------------------ speakers: mid-sized portraits, framed alike */
.tces .tces-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.tces .tces-card {
  display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 24px; align-items: start;
  padding: 28px 0; border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--head) + 24px);
}
.tces .tces-grid > .tces-card:nth-child(-n+3) { border-top-width: 0; }
.tces .tces-card .ph { aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--paper2); font-size: 48px; }
.tces .tces-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.tces .tces-card .tx { padding-top: 6px; }
.tces .tces-card h3 { font: 900 24px/1.1 var(--display); letter-spacing: -.01em; margin: 0 0 10px; color: var(--ink); overflow-wrap: anywhere; hyphens: manual; }
.tces .tces-card p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--soft); }
.tces .tces-card .tag { display: inline-block; margin-top: 14px; padding: 6px 12px; border-radius: 999px;
  font: 700 14px/1.2 var(--label); color: #fff; background: var(--blue); }
.tces .tces-card .s { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; text-decoration: none;
  font: 700 14px/1.3 var(--label); color: var(--ink); }
.tces .tces-card .s i { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; }
.tces .tces-card .s:hover { color: var(--blue); }
.tces .tces-credits { margin: 24px 0 0; font-size: 13px; line-height: 1.5; color: var(--soft); max-width: 900px; }

/* ------------------------------------------------ closing band, full bleed */
.tces .tces-end { margin-top: clamp(80px, 10cqi, 120px); background: var(--blue); color: #fff; }
.tces .tces-end .tces-wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 36px 64px; align-items: end;
  padding-block: clamp(56px, 7cqi, 88px); }
.tces .tces-end h2 { font: 900 clamp(38px, 5.6cqi, 76px)/.95 var(--display); text-transform: uppercase; letter-spacing: -.015em; margin: 0; color: #fff; }
.tces .tces-end p { margin: 0 0 26px; font-size: 20px; line-height: 1.5; color: rgba(255, 255, 255, .92); }

/* anchors land below the fixed header, and the target flashes once */
.tces [id] { scroll-margin-top: calc(var(--head) + 24px); }
.tces .flash { animation: tces-flash 1.8s ease; }
@keyframes tces-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(4, 114, 253, 0); background-color: transparent; }
  15%, 55% { box-shadow: 0 0 0 12px rgba(4, 114, 253, .12); background-color: rgba(4, 114, 253, .12); }
}

/* ------------------------------------------------ narrower: tablets, small laptops */
@container tces (max-width: 1099px) {
  .tces .tces-top { grid-template-columns: minmax(0, 1fr); }
  .tces .tces-lede { max-width: 640px; padding-bottom: 0; margin-top: 14px; }
  .tces .tces-bar, .tces .tces-ph { height: 210px; }
  .tces .tces-blk > a { padding: 16px 12px; }
  .tces .tces-blk b { font-size: 22px; }
  .tces .tces-blk .lbl { font-size: 14px; }
  .tces .tces-row { grid-template-columns: 6px 140px minmax(0, 1fr) 80px; gap: 0 24px; }
  .tces .tces-row .t { font-size: 36px; }
  .tces .tces-row h3 { font-size: 30px; }
}

/* speakers: two columns below 1280 (three would shrink the portraits); an odd last card takes the whole row */
@container tces (max-width: 1279px) {
  .tces .tces-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
  .tces .tces-grid > .tces-card:nth-child(3) { border-top-width: 1px; }
  .tces .tces-grid > .tces-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container tces (max-width: 999px) {
  .tces .tces-blk .av { display: none; }          /* the faces are in the programme just below */
  .tces .tces-f .v { font-size: 24px; }           /* three columns of about 210px: "confirmation" must fit */
  .tces .tces-card { grid-template-columns: 140px minmax(0, 1fr); gap: 18px; }
  .tces .tces-card h3 { font-size: 22px; }
}

/* ------------------------------------------------ phones: the morning runs down the page */
@container tces (max-width: 759px) {
  .tces > section { font-size: 17px; }   /* a container can't restyle itself; its sections can */
  .tces .tces-lede { font-size: 18px; }
  .tces .tces-ticks, .tces .tces-ph { display: none; }
  .tces .tces-bar { flex-direction: column; height: auto; border-radius: 14px; }
  .tces .tces-bar > li { flex: 0 0 auto; height: max(52px, calc(var(--m) * 1.6px)); }
  .tces .tces-blk + .tces-blk { box-shadow: inset 0 2px 0 var(--paper); }
  .tces .tces-blk > a { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; }
  .tces .tces-blk .tx { display: flex; align-items: baseline; gap: 12px; }
  .tces .tces-blk b { font-size: 20px; }
  .tces .tces-blk .lbl { margin: 0; font-size: 15px; }
  .tces .tces-blk .av { display: flex; }
  .tces .tces-blk .av > span { width: 34px; height: 34px; margin-right: -9px; }

  .tces .tces-f3 { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .tces .tces-f { border-top: 4px solid var(--ink); padding: 20px 0 26px; }
  .tces .tces-f + .tces-f { border-top-width: 1px; border-color: var(--rule); }
  .tces .tces-f .v { font-size: 26px; }

  .tces .tces-row { grid-template-columns: 5px minmax(0, 1fr); gap: 0 18px; padding: 24px 0; }
  .tces .tces-row .sw { grid-row: 1 / span 2; }
  .tces .tces-row .t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 28px; }
  .tces .tces-row .t span { margin: 0; font-size: 15px; }
  .tces .tces-row .t em { display: inline; }
  .tces .tces-row .c { grid-column: 2; margin-top: 12px; }
  .tces .tces-row .d { display: none; }
  .tces .tces-row h3 { font-size: 24px; }
  .tces .tces-row.is-break h3 { font-size: 22px; }
  .tces .tces-who { flex-direction: column; gap: 14px; margin-top: 18px; }
  .tces .tces-p .ph { flex-basis: 52px; width: 52px; height: 52px; }
  .tces .tces-p b { font-size: 16px; }
  .tces .tces-p small { font-size: 14px; }

  .tces .tces-grid { grid-template-columns: minmax(0, 1fr); }
  .tces .tces-grid > .tces-card:nth-child(n+2) { border-top-width: 1px; }
  .tces .tces-grid > .tces-card:last-child:nth-child(odd) { grid-column: auto; }
  .tces .tces-card { grid-template-columns: 120px minmax(0, 1fr); gap: 18px; padding: 22px 0; }
  .tces .tces-card h3 { font-size: 22px; }
  .tces .tces-card p { font-size: 15px; }

  .tces .tces-end .tces-wrap { grid-template-columns: minmax(0, 1fr); }
  .tces .tces-end p { font-size: 18px; }
}

/* ------------------------------------------------ motion (summit.js adds .is-live; never in the editor) */
@media (prefers-reduced-motion: no-preference) {
  .tces.is-live [data-r] { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
  .tces.is-live [data-r].in { opacity: 1; transform: none; }
  .tces.is-live .ln > span { transform: translateY(108%); animation: tces-up 1.05s var(--ease) forwards; animation-delay: var(--d, 0s); }
  .tces.is-live .tces-ticks { opacity: 0; animation: tces-fade .7s ease forwards .35s; }
  .tces.is-live .tces-blk { clip-path: inset(0 100% 0 0); animation: tces-wipe 1s var(--ease) forwards; animation-delay: calc(.6s + var(--k) * .2s); }
  .tces.is-live .tces-blk .av > span { opacity: 0; transform: scale(.5); animation: tces-pop .5s cubic-bezier(.2, .9, .3, 1.5) forwards; animation-delay: calc(1.2s + var(--k) * .2s); }
  .tces.is-live .tces-row .sw { transform-origin: top; transform: scaleY(0); transition: transform .9s var(--ease) .25s; }
  .tces.is-live .tces-row.in .sw { transform: none; }
  @container tces (max-width: 759px) {
    .tces.is-live .tces-blk { clip-path: inset(0 0 100% 0); animation-name: tces-drop; animation-delay: calc(.5s + var(--k) * .12s); }
  }
}
@keyframes tces-up { to { transform: none; } }
@keyframes tces-fade { to { opacity: 1; } }
@keyframes tces-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes tces-drop { to { clip-path: inset(0 0 0 0); } }
@keyframes tces-pop { to { opacity: 1; transform: none; } }