/* wa-lint: skip */
/* Stand-specific UI for Udstillere — phone mockup with exhibitor cards.
   Shared layout (.hero, .ask, .scrollcue, .info-section, .reveal) lives
   in cd-stand-shared.css; cursor/replay in cd-hero-anim.css. */

/* ─── Stage layout: ask + phone stacked, top-aligned så headline starter
   tæt på topbar og ikke flyder midt i et tomt cream-felt. ─── */
.stand-cd-udstillere .hero { min-height: 0; }
.stand-cd-udstillere .stage-only {
  position: relative;
  background: linear-gradient(180deg, var(--cream) 0%, rgb(255, 255, 255) 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 40px 80px;
  gap: 24px;
}

/* ─── Phone-skærm-content (bezel/frame ligger i cd-devices.css) ─── */
.phone__statusbar {
  height: 36px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px;
  font-size: 13px; font-weight: 700;
  color: var(--ink);
}
.phone__statusbar svg { width: 14px; height: 14px; }
.phone__head { padding: 14px 20px 8px; flex: 0 0 auto; }
.phone__head h2 {
  font-size: 24px; font-weight: 700; margin: 0; color: var(--primary);
}
.phone__head .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.phone__searchwrap {
  margin: 14px 20px;
  background: rgb(240, 244, 245);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ink);
  flex: 0 0 auto;
}
.phone__searchwrap svg { width: 16px; height: 16px; color: var(--muted); }
.phone__searchwrap .q { flex: 1; min-width: 0; }
.phone__searchwrap .caret {
  display: inline-block; width: 2px; height: 1em; background: var(--accent);
  vertical-align: -3px;
  animation: blink 0.7s steps(2, start) infinite;
}
.phone__searchwrap .caret.hidden { display: none; }

.phone__chips {
  margin: 0 20px 8px;
  display: flex; gap: 6px; flex: 0 0 auto;
  overflow-x: hidden;
}
.phone__chips .chip {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgb(240, 244, 245);
  border: 1px solid transparent;
  font-size: 12px; font-weight: 600;
  color: var(--brand-30);
  white-space: nowrap;
  transition: all .3s ease;
  flex: 0 0 auto;
}
.phone__chips .chip.active { background: var(--accent); color: rgb(255, 255, 255); }
.phone__chips .chip.fade { opacity: 0.3; }

.phone__list {
  padding: 6px 14px 14px;
  overflow: hidden;
  flex: 1 1 auto;
  position: relative;
}

/* ─── Exhibitor cards inside phone list ─── */
.ex-card {
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
  display: flex; gap: 10px; align-items: center;
  position: relative;
  font-size: 13px;
  transition: max-height .35s ease, opacity .25s ease, padding .35s ease, margin .35s ease, border-color .25s ease;
  overflow: hidden;
}
.ex-card.hidden {
  max-height: 0 !important;
  opacity: 0;
  padding-top: 0; padding-bottom: 0;
  margin-bottom: 0;
  border-color: transparent;
  pointer-events: none;
}
.ex-card__logo {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: rgb(240, 233, 227);
  color: rgb(107, 74, 46);
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
}
.h-cat-mad .ex-card__logo    { background: rgb(253, 231, 214); color: rgb(184, 71, 12); }
.h-cat-lyd .ex-card__logo    { background: rgb(230, 223, 250); color: rgb(79, 58, 155); }
.h-cat-design .ex-card__logo { background: rgb(249, 239, 184); color: rgb(122, 94, 16); }
.h-cat-tech .ex-card__logo   { background: rgb(200, 239, 217); color: rgb(23, 109, 78); }

.ex-card__name { font-weight: 700; }
.ex-card__meta { font-size: 11px; color: var(--muted); margin-top: 1px; }
.ex-card__cat {
  font-size: 10px;
  font-weight: 700;
  margin-top: 4px; line-height: 1.3;
}
.ex-card > div:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.h-cat-mad .ex-card__cat { color: rgb(184, 71, 12); }
.h-cat-lyd .ex-card__cat { color: rgb(79, 58, 155); }
.h-cat-design .ex-card__cat { color: rgb(122, 94, 16); }
.h-cat-tech .ex-card__cat { color: rgb(23, 109, 78); }

.ex-card .heart {
  position: absolute; top: 12px; right: 12px;
  width: 16px; height: 16px;
  color: rgb(203, 213, 216);
  transition: all .3s;
}
.ex-card.faved .heart { color: var(--accent); fill: var(--accent); }
.ex-card.target {
  border-color: var(--accent);
}