/* ==========================================================================
   Component: Eventfull badge-scan mockup (.cm-ef-badge)
   Sample-badge-with-live-scanline visual for the lead retrieval / data
   collection page's intro section. Same "generated, clearly-labelled
   mockup" spirit as the homepage's sample badge (element.badge equivalent
   for this page), reskinned onto this theme's own tokens.
   ========================================================================== */

/* Matches the original mockup's white-card-on-tinted-page contrast for this
   page's feature cards specifically -- scoped to these blocks' own section
   ids rather than changing the shared .cm-feature-card component used
   elsewhere on the site. */
#cm-ef-choose .cm-feature-card,
#cm-ef-capture .cm-feature-card,
#cm-ef-teams .cm-feature-card {
  background: #fff;
}

/* Small accent-coloured label above a card's title (e.g. "Their own
   device" / "Supplied hardware") -- the original mockup's ".kicker",
   reskinned onto the site's own red accent token. */
.cm-ef-kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cm-red);
  margin-bottom: 4px;
}

.cm-ef-badge {
  width: 280px;
  max-width: 100%;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-card);
  padding: 24px 22px 20px;
  position: relative;
  box-shadow: var(--cm-shadow);
}

.cm-ef-badge::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 16px;
  border: 3px solid var(--cm-hairline);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: var(--cm-paper);
}

.cm-ef-badge__eyebrow {
  font-size: 10px;
  font-weight: 700;
  color: var(--cm-muted-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cm-ef-badge__name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 10px 0 2px;
  color: var(--cm-ink);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.cm-ef-badge__role {
  font-size: 13px;
  color: var(--cm-muted);
  opacity: 0;
  transition: opacity 0.35s ease 0.05s;
}

.cm-ef-badge.revealed .cm-ef-badge__name,
.cm-ef-badge.revealed .cm-ef-badge__role {
  opacity: 1;
}

.cm-ef-badge__divider {
  height: 1px;
  background: var(--cm-hairline);
  margin: 16px 0 14px;
}

.cm-ef-badge__barcode {
  position: relative;
  height: 52px;
  overflow: hidden;
  border-radius: var(--cm-radius-insert);
  background: var(--cm-paper-2);
}

.cm-ef-badge__barcode svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cm-ef-badge__scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--cm-red);
  box-shadow: 0 0 8px 1px rgba(203, 19, 19, 0.55);
  animation: cm-ef-sweep 2.6s ease-in-out infinite;
}

@keyframes cm-ef-sweep {
  0% { top: 0; }
  45% { top: calc(100% - 2px); }
  50% { top: calc(100% - 2px); }
  95% { top: 0; }
  100% { top: 0; }
}

.cm-ef-badge__id {
  font-size: 11px;
  color: var(--cm-muted);
  margin-top: 10px;
  text-align: center;
}

.cm-ef-stamp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid rgba(241, 244, 247, 0.4);
  color: rgba(241, 244, 247, 0.9);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: var(--cm-radius-pill);
  margin-top: 20px;
}

.cm-ef-stamp__dot {
  width: 7px;
  height: 7px;
  background: currentColor;
  border-radius: 50%;
}

/* ==========================================================================
   Component: touchpoint stations (.cm-ef-stations)
   Numbered circular markers connected by a dashed line -- the original
   mockup's ".stations"/".station" journey timeline, reskinned onto this
   theme's own tokens. No equivalent exists in the shared component library,
   so it's a small bespoke addition rather than a mapping.
   ========================================================================== */
.cm-ef-stations {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  padding-top: 10px;
}

.cm-ef-stations::before {
  content: "";
  position: absolute;
  top: 29px;
  left: 12.5%;
  right: 12.5%;
  height: 0;
  border-top: 2px dashed var(--cm-hairline);
}

.cm-ef-station {
  text-align: center;
  position: relative;
}

.cm-ef-station__marker {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cm-paper);
  border: 2px solid var(--cm-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--cm-ink);
}

.cm-ef-station__label {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--cm-ink);
}

.cm-ef-station__sub {
  font-size: 13px;
  color: var(--cm-muted);
}

@media (max-width: 640px) {
  .cm-ef-stations {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 28px;
  }
  .cm-ef-stations::before {
    display: none;
  }
}

/* Plain bulleted list inside the "capture" cards -- a lighter-weight,
   glanceable list of specifics, distinct from the site's divided-row
   .cm-checklist (used instead for the organisers list further down, whose
   items are longer stand-alone claims that read better as their own row). */
.cm-ef-plain-list {
  margin: 0;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cm-muted);
  list-style: disc;
}
.cm-ef-plain-list li + li {
  margin-top: 6px;
}

/* Teams role-tag pill. Colour-coded with the theme's own accent pairing:
   the red tint/hover pair already used for tinted pills elsewhere, and the
   navy "statement" colour on a neutral paper tint for the second role --
   no colours invented outside tokens.css. */
.cm-ef-role-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--cm-radius-pill);
  margin-bottom: 16px;
}
.cm-ef-role-tag--exhibitor { background: var(--cm-red-tint); color: var(--cm-red-hover); }
.cm-ef-role-tag--staff { background: var(--cm-paper-3); color: var(--cm-navy); }

/* "use" rows inside each teams card -- same hairline-divided rhythm as
   .cm-checklist, so the block reads consistently with the rest of the site. */
.cm-ef-use {
  padding: 22px 0;
  border-bottom: 1px solid var(--cm-hairline);
}
.cm-ef-use:last-child {
  border-bottom: none;
}
.cm-ef-use__label {
  font-weight: 700;
  font-size: 16px;
  color: var(--cm-ink);
  margin: 0 0 6px;
}
.cm-ef-use__desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--cm-muted);
  margin: 0;
}

/* Organiser checklist: checkmark-circle + label/desc pairs, using the same
   tinted-pill convention as the role tags above (red tint background,
   red-hover mark) rather than an invented "success" green. */
.cm-ef-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 64ch;
}
.cm-ef-points li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.cm-ef-points .cm-ef-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: none;
  margin-top: 2px;
  background: var(--cm-red-tint);
  color: var(--cm-red-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.cm-ef-points .cm-ef-point-label {
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 4px;
  color: var(--cm-ink);
}
.cm-ef-points .cm-ef-point-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--cm-muted);
  margin: 0;
}
.cm-ef-points a {
  color: inherit;
  text-decoration: underline;
}

/* Data band: label/value rows with hairline dividers -- a compact list
   read alongside the theme's own .cm-stat-band (reused here for its
   full-bleed navy background/padding and its two-column grid, so the
   copy column and this list sit side by side exactly as in the original),
   following the same on-dark text opacity convention already used in
   stat-band.css/hero.css (0.66/0.7-ish for secondary text on navy). */
.cm-ef-trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
}
.cm-ef-trust-list li {
  padding: 14px 0;
  border-bottom: 1px solid rgba(241, 244, 247, 0.14);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--cm-on-dark);
}
.cm-ef-trust-list li span.cm-ef-trust-k {
  font-size: 13px;
  color: rgba(241, 244, 247, 0.66);
}

/* Full-bleed breakout: the shared block-wrapper template puts 12px of its
   own gutter padding around every placed block, which clips a full-width
   background band by that much on each side. Cancel it only on these
   specific full-bleed sections rather than touching the shared wrapper
   (used by every block on the site). */
#cm-ef-journey,
#cm-ef-teams,
#cm-ef-data {
  margin-inline: -12px;
  width: calc(100% + 24px);
}