/* Events hub (/events, /en/events). Loaded on top of brand-v2.css + content-v2.css.
   Card language follows the webinar visuals: logos on top, Spectral title,
   agenda with one owner dot per item. A partner's accent colour (--ev-accent)
   only tints the top bar and the partner dots, never text or buttons.
   Orange stays out of the cards: nothing here marks a missing requirement. */

.ev-section{padding:clamp(32px,5vw,56px) 0;background:var(--cvl-surface)}
.ev-section--past{padding-top:0}
.ev-section-title{
  font-family:var(--cvl-font-mono);font-size:var(--cvl-fs-label,11px);font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cvl-muted);
  margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--cvl-border)
}
.ev-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.ev-empty{color:var(--cvl-slate);font-size:15px;margin:8px 0 0}

/* ------------------------------------------------------------------ card */
.ev-card{
  --ev-accent:var(--cvl-blue);
  position:relative;display:flex;flex-direction:column;
  padding:26px 24px 22px;border:1px solid var(--cvl-border);border-radius:var(--cvl-radius-card);
  background:var(--cvl-white);overflow:hidden;
  scroll-margin-top:calc(var(--cvl-header-h,64px) + 16px);
  transition:border-color var(--cvl-dur-ui,.3s) var(--cvl-ease-ui,ease)
}
.ev-card:hover,.ev-card:target{border-color:var(--cvl-blue-200)}
/* Top bar: Cevelar blue; with a partner, the right half in the partner's colour. */
.ev-card::before,.ev-card.has-partner::after{content:"";position:absolute;top:0;height:4px}
.ev-card::before{left:0;right:0;background:var(--cvl-blue)}
.ev-card.has-partner::after{left:50%;right:0;background:var(--ev-accent)}

.ev-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.ev-logos{display:flex;align-items:center;gap:10px}
.ev-logo{display:inline-flex;align-items:center}
.ev-logo--cvl{gap:7px;font-family:var(--cvl-font-display);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--cvl-blue)}
.ev-logo--cvl .mark{width:20px;height:20px}
.ev-logo--partner img{display:block;height:20px;width:auto}
.ev-logo-name{font-weight:500;font-size:15px;color:var(--cvl-ink)}
.ev-x{font-size:13px;color:var(--cvl-muted)}
.ev-meta{font-family:var(--cvl-font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cvl-muted);margin:0}

.ev-head{display:flex;gap:16px;align-items:flex-start}
/* Date tile: the one filled block on the card. */
.ev-date{
  flex:0 0 auto;width:64px;padding:9px 0 8px;border-radius:var(--cvl-radius-card);
  background:var(--cvl-blue);color:var(--cvl-white);text-align:center;
  display:flex;flex-direction:column;gap:3px
}
.ev-day{font-family:var(--cvl-font-display);font-weight:600;font-size:28px;line-height:1;letter-spacing:-.02em}
.ev-mon{font-family:var(--cvl-font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cvl-blue-200)}
.ev-heading{min-width:0}
.ev-title{font-family:var(--cvl-font-display);font-weight:600;font-size:23px;line-height:1.15;letter-spacing:-.012em;color:var(--cvl-ink);margin:0}
.ev-subtitle{font-family:var(--cvl-font-display);font-weight:600;font-size:18px;line-height:1.2;color:var(--cvl-blue);margin:4px 0 0}
.ev-audience{font-size:13.5px;line-height:1.45;color:var(--cvl-slate);margin:8px 0 0}

.ev-when{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--cvl-font-mono);font-size:12.5px;color:var(--cvl-ink);margin:16px 0 0}
.ev-edition{
  font-family:var(--cvl-font-sans);font-size:11.5px;font-weight:500;
  padding:2px 8px;border-radius:var(--cvl-radius-control);background:var(--cvl-blue-50);color:var(--cvl-blue)
}

/* Agenda: number, item, owner dot. */
.ev-agenda{list-style:none;margin:14px 0 0;padding:0}
.ev-agenda li{
  display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:baseline;gap:8px;
  padding:8px 0;border-top:1px solid var(--cvl-hair)
}
.ev-n{font-family:var(--cvl-font-mono);font-size:11px;color:var(--cvl-muted)}
.ev-item{font-size:14.5px;font-weight:500;line-height:1.35;color:var(--cvl-ink)}
.ev-who{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--cvl-slate);white-space:nowrap}
.ev-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;display:inline-block;transform:translateY(-1px)}
.ev-dot--cevelar{background:var(--cvl-blue)}
.ev-dot--partner{background:var(--ev-accent)}
.ev-dot--joint{border:1px solid var(--cvl-slate);background:transparent}

.ev-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--cvl-hair)}
.ev-agenda + .ev-foot{margin-top:auto}
.ev-card > .ev-agenda{margin-bottom:16px}
.ev-speakers{font-size:13px;color:var(--cvl-slate);margin:0 0 12px}
.ev-speakers a{color:var(--cvl-ink);text-decoration:none;border-bottom:1px solid var(--cvl-blue-100)}
.ev-speakers a:hover{color:var(--cvl-blue);border-bottom-color:var(--cvl-blue)}
.ev-btns{display:flex;flex-wrap:wrap;gap:8px}
.ev-btns .btn{min-height:42px;padding:0 16px;font-size:14px}
.ev-btn-primary{background:var(--cvl-blue);color:var(--cvl-white)}
.ev-btn-primary:hover{background:var(--cvl-blue-700);color:var(--cvl-white)}
.ev-note{font-size:12px;color:var(--cvl-muted);margin:8px 0 0}

/* Past: quieter, no reservation or calendar action. */
.ev-card.is-past{background:var(--cvl-surface)}
.ev-card.is-past .ev-date{background:var(--cvl-slate)}
.ev-card.is-past .ev-register,.ev-card.is-past .ev-ics,.ev-card.is-past .ev-note{display:none}
.ev-card.is-past .ev-btns:empty{display:none}

.cvl-board .pass-list a.p-field{text-decoration:none;min-width:0}
.cvl-board .pass-list a.p-field:hover{color:var(--cvl-blue)}
.content-hero .cvl-board .pass-list .p-val{white-space:nowrap}

@media (max-width:900px){
  .ev-list{grid-template-columns:1fr}
}
@media (max-width:480px){
  .ev-card{padding:22px 18px 18px}
  .ev-top{flex-direction:column;align-items:flex-start;gap:8px}
  .ev-title{font-size:21px}
  .ev-agenda li{grid-template-columns:24px minmax(0,1fr)}
  .ev-who{grid-column:2;white-space:normal}
  .ev-btns .btn{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.ev-card{transition:none}}

/* ============================================================ registration
   Timing from the brand book: entrance 420-550ms, line drawing 550-750ms,
   state changes 300-500ms, all on --ev-ease. Only opacity, transform and
   stroke-dashoffset animate, except the two height reveals, which use the
   grid-rows technique so the card grows without measuring in JS. */
.ev-card{--ev-ease:cubic-bezier(.2,.7,.3,1);--ev-draw:cubic-bezier(.3,.8,.4,1)}

/* Height reveals: buttons collapse, form expands. */
.ev-btns-wrap,.ev-reg{display:grid;transition:grid-template-rows 480ms var(--ev-ease),opacity 320ms ease}
.ev-btns-wrap{grid-template-rows:1fr}
.ev-btns-wrap > .ev-btns{min-height:0;overflow:hidden}
.ev-reg{grid-template-rows:0fr;opacity:0}
.ev-reg-inner{min-height:0;overflow:hidden}
.ev-card.is-open .ev-btns-wrap{grid-template-rows:0fr;opacity:0}
.ev-card.is-open .ev-reg{grid-template-rows:1fr;opacity:1}
.ev-card.is-open .ev-btns-wrap .btn{visibility:hidden;transition:visibility 0s 320ms}
.ev-reg:not(:has(.ev-form)) {display:none}

.ev-form{padding:4px 1px 2px}
/* Rows come in one after another once the card opens. */
.ev-card.is-open .ev-fields > *,.ev-card.is-open .ev-check,.ev-card.is-open .ev-form-actions{
  animation:evRowIn 460ms var(--ev-ease) both;animation-delay:calc(120ms + var(--i,0) * 55ms)
}
@keyframes evRowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.ev-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.ev-field{position:relative}
.ev-field--full{grid-column:1 / -1}

/* Floating label inside a quiet box; a blue line draws in on focus. */
.ev-field input,.ev-field select{
  width:100%;height:50px;padding:20px 34px 6px 12px;
  font:400 15px/1.2 var(--cvl-font-sans);color:var(--cvl-ink);
  background:var(--cvl-white);border:1px solid var(--cvl-border-strong,#CBD3DD);border-radius:var(--cvl-radius-control);
  outline:none;appearance:none;-webkit-appearance:none;
  transition:border-color 300ms ease
}
.ev-field select{cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234C5766' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}
.ev-field select:not(:focus):invalid,.ev-field--select:not(.is-filled) select{color:var(--cvl-slate)}
.ev-field label{
  position:absolute;left:13px;top:16px;pointer-events:none;transform-origin:0 0;
  font-size:15px;line-height:1.2;color:var(--cvl-slate);
  transition:transform 240ms var(--ev-ease),color 240ms ease
}
.ev-field--select label{transform:translateY(-10px) scale(.78)}
.ev-field input:focus + label,.ev-field input:not(:placeholder-shown) + label{transform:translateY(-10px) scale(.78)}
.ev-field input:focus + label,.ev-field select:focus + label{color:var(--cvl-blue)}
.ev-opt{color:var(--cvl-muted)}
.ev-field input:focus,.ev-field select:focus{border-color:var(--cvl-blue-200)}
.ev-line{
  position:absolute;left:1px;right:1px;top:47px;height:2px;border-radius:0 0 3px 3px;
  background:var(--cvl-blue);transform:scaleX(0);transform-origin:left center;
  transition:transform 380ms var(--ev-draw)
}
.ev-field input:focus ~ .ev-line,.ev-field select:focus ~ .ev-line{transform:scaleX(1)}

/* A field that is complete draws its own small check. */
.ev-ok{position:absolute;right:11px;top:17px;width:16px;height:16px;pointer-events:none}
.ev-ok svg,.ev-box svg{width:100%;height:100%;display:block}
.ev-ok path,.ev-box path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16}
.ev-ok path{stroke:var(--cvl-blue);transition:stroke-dashoffset 320ms var(--ev-draw)}
.ev-field.is-ok .ev-ok path{stroke-dashoffset:0}

/* Missing input is a gap, so it is the one place orange appears. */
.ev-err{margin:5px 0 0;font-size:12.5px;line-height:1.35;color:var(--cvl-gap-text);min-height:0}
.ev-err:empty{display:none}
.ev-field.is-invalid input{border-color:var(--cvl-gap)}
.ev-field.is-invalid .ev-line{background:var(--cvl-gap)}
.ev-field.is-invalid .ev-ok{display:none}
.is-nudge{animation:evNudge 320ms var(--ev-ease)}
@keyframes evNudge{0%,100%{transform:none}25%{transform:translateX(-3px)}55%{transform:translateX(3px)}80%{transform:translateX(-1px)}}

/* Checkboxes: the box fills, the tick draws. */
.ev-check{position:relative;display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;
  font-size:13px;line-height:1.45;color:var(--cvl-slate);cursor:pointer;margin:0 0 10px}
.ev-check input{position:absolute;opacity:0;width:20px;height:20px;margin:0;cursor:pointer}
.ev-box{width:18px;height:18px;margin-top:1px;border:1px solid var(--cvl-border-strong,#CBD3DD);border-radius:4px;background:var(--cvl-white);
  display:grid;place-items:center;padding:2px;
  transition:background-color 220ms ease,border-color 220ms ease,transform 220ms var(--ev-ease)}
.ev-box path{stroke:var(--cvl-white);transition:stroke-dashoffset 260ms var(--ev-draw) 60ms}
.ev-check input:checked + .ev-box{background:var(--cvl-blue);border-color:var(--cvl-blue);animation:evPop 260ms var(--ev-ease)}
.ev-check input:checked + .ev-box path{stroke-dashoffset:0}
.ev-check input:focus-visible + .ev-box{outline:2px solid var(--cvl-blue-200);outline-offset:2px}
.ev-check.is-invalid .ev-box{border-color:var(--cvl-gap)}
.ev-check-text a{color:var(--cvl-blue)}
.ev-err--check{margin:-6px 0 10px 30px}
@keyframes evPop{0%{transform:scale(.86)}60%{transform:scale(1.06)}100%{transform:scale(1)}}

.ev-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Submit: the bar travels while the request runs, then a check draws. */
.ev-form-actions{display:flex;align-items:center;gap:14px;margin-top:14px}
.ev-submit{position:relative;overflow:hidden;min-width:168px;min-height:44px;justify-content:center;border:0;cursor:pointer}
.ev-submit:disabled{cursor:default}
.ev-submit-label{position:relative;z-index:1;transition:opacity 260ms ease,transform 300ms var(--ev-ease)}
.ev-submit-bar{position:absolute;inset:0;background:rgba(255,255,255,.16);transform:scaleX(0);transform-origin:left center}
.ev-form.is-sending .ev-submit-bar{transform:scaleX(.82);transition:transform 1600ms cubic-bezier(.1,.6,.2,1)}
.ev-form.is-sending .ev-submit-label{opacity:.75}
.ev-form.is-sent .ev-submit-bar{transform:scaleX(1);opacity:0;transition:transform 220ms ease-out,opacity 280ms ease 240ms}
.ev-form.is-sent .ev-submit-label{opacity:0;transform:translateY(-8px)}
.ev-submit-check{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
.ev-submit-check svg{width:22px;height:22px}
.ev-submit-check path{fill:none;stroke:var(--cvl-white);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset 420ms var(--ev-draw) 160ms}
.ev-form.is-sent .ev-submit-check path{stroke-dashoffset:0}
.ev-cancel{background:none;border:0;padding:6px 2px;font:inherit;font-size:13.5px;color:var(--cvl-slate);cursor:pointer;transition:color 200ms ease}
.ev-cancel:hover{color:var(--cvl-ink)}
.ev-form-msg{margin:10px 0 0;font-size:13px;color:var(--cvl-gap-text)}
.ev-form-msg:empty{display:none}

/* Success: the form steps back, the confirmation comes forward, the mark
   draws its ring and the dot travels into the gap once (brand book 02). */
.ev-card.is-registered .ev-form{display:none}
.ev-done[hidden]{display:none}
.ev-done{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:6px 0 2px;outline:none}
.ev-card.is-registered .ev-done{animation:evDoneIn 520ms var(--ev-ease) both}
@keyframes evDoneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ev-done-mark{width:44px;height:44px;overflow:visible}
.ev-done-ring{fill:none;stroke:var(--cvl-blue);stroke-width:4;stroke-dasharray:60;stroke-dashoffset:60}
.ev-done-dot{fill:#FF7514;opacity:0;transform:translateX(9px)}
.ev-card.is-registered .ev-done-ring{animation:evDraw 650ms var(--ev-draw) 160ms forwards}
.ev-card.is-registered .ev-done-dot{animation:evDot 420ms cubic-bezier(.2,.7,.3,1) 700ms forwards}
@keyframes evDraw{to{stroke-dashoffset:0}}
@keyframes evDot{to{opacity:1;transform:none}}
.ev-done-title{font-family:var(--cvl-font-display);font-weight:600;font-size:22px;line-height:1.15;color:var(--cvl-ink);margin:2px 0 6px}
.ev-done-text{font-size:13.5px;line-height:1.5;color:var(--cvl-slate);margin:0 0 12px}
.ev-done-text strong{color:var(--cvl-ink);font-weight:500;overflow-wrap:anywhere}
.ev-done-ics{min-height:40px;padding:0 14px;font-size:13.5px}

/* The card acknowledges once: a hairline ring leaves the date tile. */
.ev-date{position:relative}
.ev-date::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--cvl-blue);opacity:0;pointer-events:none}
.ev-card.is-registered .ev-date::after{animation:evPing 900ms var(--ev-ease) 520ms}
@keyframes evPing{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.28)}}
.ev-card.is-registered{border-color:var(--cvl-blue-200)}

/* The sticky booking bar would cover the form on phones. */
body.ev-form-open .sticky-mobile-cta{display:none !important}

@media (max-width:480px){
  .ev-fields{grid-template-columns:1fr}
  .ev-field input,.ev-field select{font-size:16px}
  .ev-form-actions{flex-direction:column;align-items:stretch}
  .ev-cancel{align-self:center}
}
@media (prefers-reduced-motion:reduce){
  .ev-card *,.ev-card *::before,.ev-card *::after,.ev-card::after{animation:none !important;transition:none !important}
  .ev-card.is-registered .ev-done-ring{stroke-dashoffset:0}
  .ev-card.is-registered .ev-done-dot{opacity:1;transform:none}
}