/* wa-lint: skip */
/* ============ INTERACTIVE STANDKORT (ugdk-9ch) ==========================
   Cream blueprint with gridlines, colored områder, grey stande, red "you-are-
   here" dot with strong pulse, dashed accent paths on hover, search filter.

   Usage:
   - As overlay: wrapped in .palette / .palette__backdrop / .palette__stage
     (markup in base.njk). The .standkort element sits at z-index 5 on top.
   - As scene: rendered directly inside a full-viewport container at /standkort/.
   Tokens come from cd-app.css.
========================================================================== */

/* R7-fix: hover/touch device-detection for vejledningstekst.
   Default = vis hover-variant; @media (hover: none) skifter til touch-variant. */

/* ── Outer overlay sizing — overrides .palette__stage default 960×680. */
.palette--standkort .palette__stage {
  width: min(98vw, 1500px);
  height: min(96vh, 960px);
  background: var(--cream, rgb(246, 241, 232));
  border-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(255,255,255,0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  transform: scale(0.96);
  opacity: 0;
  transition: transform .35s cubic-bezier(.2,.7,.3,1.2), opacity .3s ease;
}
.palette--standkort.is-open .palette__stage {
  transform: scale(1);
  opacity: 1;
}

.palette--standkort .palette__close-btn {
  position: absolute;
  top: 14px; right: 14px;
  width: 38px; height: 38px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.92);
  color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  cursor: pointer;
  z-index: 30;
  transition: background .15s, transform .1s;
  box-shadow: 0 6px 18px -6px rgba(49,79,89,0.25);
}
.palette--standkort .palette__close-btn:hover { background: rgb(255, 255, 255); transform: scale(1.05); }
.palette--standkort .palette__close-btn:active { transform: scale(0.94); }
.palette--standkort .palette__close-btn svg { width: 18px; height: 18px; }

/* ── Standkort root — fills its container (overlay stage or scene) ── */
.standkort {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 18px 22px 14px;
  background:
    radial-gradient(ellipse 80% 50% at 50% 25%, rgba(127,190,198,0.08), transparent 60%),
    var(--cream, rgb(246, 241, 232));
  position: relative;
  font-family: var(--font);
  color: var(--ink);
}

/* ── Header copy ── */
.standkort__head {
  flex: 0 0 auto;
  text-align: center;
  margin-bottom: 8px;
}
.standkort__lede {
  font-size: clamp(17px, 1.9vw, 22px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--primary);
  margin: 0 0 6px;
  line-height: 1.25;
  text-align: center;
}
/* "Du er her." — bold accent, per design guide. */
.standkort__lede-strong {
  font-weight: 700;
  color: var(--accent);
}

/* ── Stage / SVG ──
   Locked to viewBox aspect-ratio (100/70) and centered. Without this, a wide
   container leaves big empty cream margins inside the stage because the SVG's
   xMidYMid meet preserves the 1.43:1 content aspect — instead, we let the
   stage itself match that aspect so it grows to whichever dimension is the
   binding constraint. */
.standkort__stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  align-self: center;
  width: auto;
  max-width: 100%;
  aspect-ratio: 100 / 70;
  border: 1px solid rgba(49,79,89,0.12);
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(rgba(49,79,89,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49,79,89,0.04) 1px, transparent 1px),
    var(--cream, rgb(246, 241, 232));
  background-size: 28px 28px, 28px 28px, auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
}
.standkort__svg {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
}

/* Områder — soft pastel "floor tiles". The zone fill is non-interactive
   but the title-label inside is clickable (jumps to the område-landing). */
.standkort__omraade { pointer-events: none; }
.standkort__omraade-rect {
  fill-opacity: 0.55;
  stroke: rgba(49,79,89,0.10);
  stroke-width: 0.12;
  transition: fill-opacity .25s ease;
  filter: drop-shadow(0 0.4px 0 rgba(49,79,89,0.04))
          drop-shadow(0 1.2px 1.6px rgba(49,79,89,0.05));
}
/* Editorial small-caps treatment: 500 weight + tracking, no bold. */
.standkort__omraade-label {
  font-family: var(--font);
  font-weight: 500;
  font-size: 1.9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill-opacity: 0.78;
}
.standkort__omraade-title {
  pointer-events: auto;
  cursor: pointer;
  outline: none;
}
.standkort__omraade-title:focus-visible {
  outline: 2px solid var(--brand-accent, rgb(184, 90, 58));
  outline-offset: 2px;
}
.standkort__omraade-title:hover .standkort__omraade-label,
.standkort__omraade-title:focus-visible .standkort__omraade-label {
  fill-opacity: 1;
}
.standkort__omraade-title:hover ~ .standkort__omraade-rect,
.standkort__omraade:hover .standkort__omraade-rect {
  fill-opacity: 0.72;
}

/* Entrance decoration — purely visual, lives at the boundary of hovedindgang */

/* Stande — booth-grid. Default: white card with thin wall. Adjacent stands
   share walls (data is positioned to touch), so we use sharp corners and
   thin strokes that read as "internal partitions" rather than "rounded
   floating tiles". Drop-shadow stays minimal so the cluster reads as one
   physical row of booths. */
.standkort__stand { cursor: pointer; outline: none; }
.standkort__stand:focus-visible {
  outline: 2px solid var(--brand-accent, rgb(184, 90, 58));
  outline-offset: 2px;
}
.standkort__stand-rect {
  fill: rgb(255, 255, 255);
  stroke: rgba(49,79,89,0.20);
  stroke-width: 0.12;
  transition: stroke .18s ease, fill .18s ease;
  filter: drop-shadow(0 0.4px 0.6px rgba(49,79,89,0.05));
}
.standkort__stand-label {
  fill: var(--primary, rgb(49, 79, 89));
  font-family: var(--font);
  font-weight: 500;
  font-size: 1.2px;
  letter-spacing: 0.005em;
  pointer-events: none;
  transition: opacity .18s, fill .18s;
}
/* Hover: only stroke goes accent. No fill change, no scale, no shadow lift. */
.standkort__stand:hover .standkort__stand-rect,
.standkort__stand:focus-visible .standkort__stand-rect {
  stroke: var(--accent);
  stroke-width: 0.28;
}

/* ── kind-variants ── */

/* SCENE (Hovedscenen) — dark filled named-zone, like ølfestival's
   "OMRÅDE FOR BEER TALKS" block. White text, larger label, "▶"-glyph,
   small live-pulse-dot. Spans full width of its row. */
@keyframes standkortLivePulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* LOUNGE (Kaffebar) — warm sand fill, dark text, small cup glyph. Reads
   as a "rest spot", not a sales booth. */
.standkort__stand--lounge .standkort__stand-rect {
  fill: var(--sand, rgb(239, 230, 214));
  stroke: rgba(122,58,34,0.28);
  stroke-width: 0.14;
  stroke-dasharray: 0.5 0.4;
}
.standkort__stand--lounge .standkort__stand-label {
  fill: rgb(122, 58, 34);
  font-weight: 500;
  font-style: italic;
}
/* Lounge glyph er nu FA mug-hot fra sprite (se standkort.njk). Cross-document
   <use> arver fill fra parent kun for filled glyphs uden eksplicit fill; FA's
   path har ingen fill-attribut, så denne fill propagerer korrekt. */
.standkort__stand--lounge .standkort__stand-glyph {
  fill: rgb(122, 58, 34);
}
.standkort__stand--lounge:hover .standkort__stand-rect {
  stroke-dasharray: none;
  stroke: var(--accent);
}

/* DEMO (Prøv det selv) — accent corner-tag "PRØV" + accent stroke. White
   fill but with a confident accent border so it pops without screaming. */
.standkort__stand--demo .standkort__stand-rect {
  fill: rgb(255, 255, 255);
  stroke: var(--accent, rgb(184, 90, 58));
  stroke-width: 0.22;
}
.standkort__stand--demo .standkort__stand-tag {
  fill: var(--accent, rgb(184, 90, 58));
}
.standkort__stand--demo .standkort__stand-tag-text {
  fill: rgb(255, 255, 255);
  font-family: var(--font);
  font-size: 0.75px;
  font-weight: 700;
  letter-spacing: 0.12em;
  pointer-events: none;
}
.standkort__stand--demo .standkort__stand-label {
  font-weight: 600;
}
.standkort__stand--demo:hover .standkort__stand-rect {
  stroke-width: 0.34;
}

/* INFO (Infobod) — cream fill, "i"-glyph, label aligned right of glyph */
.standkort__stand--info .standkort__stand-rect {
  fill: rgb(251, 247, 239);
  stroke: rgba(49,79,89,0.24);
  stroke-width: 0.14;
}
.standkort__stand--info .standkort__stand-glyph {
  fill: var(--primary, rgb(49, 79, 89));
}
[data-theme="dark"] .standkort__stand--info .standkort__stand-glyph {
  fill: rgb(255, 255, 255);
}
.standkort__stand--info .standkort__stand-label {
  font-weight: 500;
}
.standkort__stand--info:hover .standkort__stand-rect {
  stroke: var(--accent);
}

/* NOT-BUILT — sider markeret med "*" i labelen er endnu ikke genereret.
   Dæmpet stipling, lav opacity, italic label så det er tydeligt at dem her
   ikke fører til en rigtig side endnu (peger evt. på placeholder). */

/* Search-match highlight: keep the white card, accent the border. First
   match gets a confident scale-in, then settles to a slow breathe. */
.standkort__stand.is-match .standkort__stand-rect {
  stroke: var(--accent);
  stroke-width: 0.32;
}
.standkort__stand.is-match.is-first-match .standkort__stand-rect {
  stroke: var(--accent);
  stroke-width: 0.5;
  animation: standkortMatchBreathe 2.4s ease-in-out infinite;
}
.standkort__stand.is-match .standkort__stand-label {
  fill: var(--accent);
  font-weight: 600;
}
@keyframes standkortMatchBreathe {
  0%, 100% { filter: drop-shadow(0 0.4px 0.6px rgba(49,79,89,0.14)); }
  50%      { filter: drop-shadow(0 0 2.4px rgba(184,90,58,0.45)); }
}
.standkort__stand.is-dimmed .standkort__stand-rect {
  fill: rgba(255,255,255,0.5);
  stroke: rgba(49,79,89,0.10);
}
.standkort__stand.is-dimmed .standkort__stand-label { opacity: 0.32; }

/* Currently active stand (where you are) */
.standkort__stand.is-current .standkort__stand-rect {
  fill: rgba(184,90,58,0.10);
  stroke: var(--accent);
  stroke-width: 0.36;
  stroke-dasharray: 1.2 0.8;
}
/* On the current stand, the pulsing "Du er her"-dot sits in the middle and
   would overlap the label. Hide the label — the dashed border + pulse is
   already a stronger "you are here" signal than a name tag. */
.standkort__stand.is-current .standkort__stand-label { opacity: 0; }

/* "Her er du"-prik — RØD, kraftig pulse-glow */
.standkort__you-here { pointer-events: none; }
.standkort__you-dot {
  fill: var(--accent, rgb(184, 90, 58));
  stroke: rgb(255, 255, 255);
  stroke-width: 0.4;
}
.standkort__you-pulse {
  fill: var(--accent, rgb(184, 90, 58));
  fill-opacity: 0.55;
  transform-box: fill-box;
  transform-origin: center;
  animation: standkortYouPulse 1.8s ease-out infinite;
}
.standkort__you-pulse--2 {
  animation-delay: -0.9s;
  fill-opacity: 0.4;
}
@keyframes standkortYouPulse {
  0%   { transform: scale(0.5); opacity: 0.85; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Hover paths — Manhattan route around obstacles, drawn as a sequence of
   footstep dots that appear one-after-another. Each dot has its own
   animation-delay set in JS (~22ms apart) so the route reads as if
   someone is walking it. Quick: ~30 dots × 22ms ≈ 660ms total. */
.standkort__paths { pointer-events: none; }
@keyframes standkortFootstep {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0.78; transform: scale(1); }
}

/* Tooltip — follows hovered stand */

/* ── Footer: search + legend ── */
.standkort__foot {
  flex: 0 0 auto;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Mobil reflow er skjult på desktop; SVG-planen ejer det store layout.
   Under 720px (responsive-blokken) byttes de om. */
.standkort__mobile { display: none; }
.standkort__search {
  width: min(420px, 100%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 18px -8px rgba(49,79,89,0.18);
  transition: border-color .15s, box-shadow .15s;
}
.standkort__search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 6px 22px -8px rgba(184,90,58,0.4);
}
.standkort__search svg {
  width: 18px; height: 18px;
  color: var(--muted);
  flex-shrink: 0;
}
.standkort__search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  padding: 2px 0;
  min-width: 0;
}
.standkort__search-input:focus-visible {
  outline: 2px solid var(--brand-accent, rgb(184, 90, 58));
  outline-offset: 2px;
  border-radius: 2px;
}
.standkort__search-input::placeholder { color: var(--muted); }
.standkort__search-hint {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.standkort__legend {
  display: inline-flex;
  gap: 14px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin: 0;
  flex-wrap: wrap;
  justify-content: center;
  text-transform: uppercase;
  font-weight: 600;
}
.standkort__legend span { display: inline-flex; align-items: center; gap: 6px; }
.standkort__legend i {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
}
.standkort__legend .standkort__legend-dot {
  background: var(--accent);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px rgba(184,90,58,0.3);
}
.standkort__legend .standkort__legend-stand { background: rgba(49,79,89,0.42); }
.standkort__legend .standkort__legend-area  { background: var(--brand-90, rgb(179, 218, 224)); }

/* ── Body lock when standkort overlay is open ── */
body.standkort-open { overflow: hidden; }

/* ── Scene mode: full-viewport scene at /standkort/ ──
   Two-column layout: intro (kicker, title, lede, legend) on the left, the
   interactive kort on the right. This lets the SVG take nearly full viewport
   height instead of being squeezed by an intro row above it. */
/* Scene already has its own intro on the left — hide the duplicate lede
   inside the standkort component (keep the legend, it carries the colour key). */

/* On narrow screens, stack instead of two-column. */

/* ── Dark theme tweaks ── */
[data-theme="dark"] .palette--standkort .palette__stage {
  background: rgb(20, 34, 42);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .standkort {
  background:
    radial-gradient(ellipse 80% 50% at 50% 25%, rgba(127,190,198,0.06), transparent 60%),
    rgb(20, 34, 42);
  color: var(--ink);
}
[data-theme="dark"] .standkort__stage {
  background:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    rgb(26, 43, 49);
  background-size: 28px 28px, 28px 28px, auto;
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .standkort__bg { fill: rgb(26, 43, 49); }
[data-theme="dark"] .standkort__lede { color: var(--ink); }
[data-theme="dark"] .standkort__stand-rect { fill: rgba(255,255,255,0.18); stroke: rgba(255,255,255,0.28); }
[data-theme="dark"] .standkort__stand-label { fill: rgba(255,255,255,0.95); }
[data-theme="dark"] .standkort__search {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .standkort__search-input { color: var(--ink); }
[data-theme="dark"] .palette--standkort .palette__close-btn {
  background: rgba(255,255,255,0.08);
  color: var(--ink);
  border-color: rgba(255,255,255,0.12);
}

/* ── Reduced motion: kill animations + transitions ── */
@media (prefers-reduced-motion: reduce) {
  .palette--standkort .palette__stage,
  .palette--standkort.is-open .palette__stage,
  .standkort__you-pulse,
  .standkort__you-pulse--2,
  .standkort__stand.is-match.is-first-match .standkort__stand-rect,
  .standkort__stand-rect,
  .standkort__stand-label,
  .standkort__mzone-chev {
    animation: none !important;
    transition: none !important;
  }
  .palette--standkort .palette__stage {
    transform: none;
    opacity: 1;
  }
  .standkort__you-pulse,
  .standkort__you-pulse--2 {
    opacity: 0;
  }
}

/* ── Responsive ──
   Under 720px erstattes den nedskalerede SVG-plan (ulæselige ~1.7px labels)
   af mobil-reflow'en: hver zone som et kort med sin egen mini-messeplan. */
@media (max-width: 720px) {
  .palette--standkort .palette__stage {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
  /* Stak: titel → søg → zone-kort. SVG-stage og legend skjules.
     I overlay-mode er .palette__stage 100dvh/overflow:hidden, så .standkort
     (flex:1; min-height:0) skal selv scrolle — ellers klippes de nederste
     zoner af på korte viewports. Luk-knappen sidder fast på stagen. */
  .standkort {
    display: flex;
    flex-direction: column;
    padding: 56px 14px 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .standkort__lede { font-size: 17px; }
  .standkort__legend { display: none; }
  .standkort__search-hint { display: none; }
  .standkort__stage { display: none; }            /* skjul SVG-planen */
  .standkort__head { order: 0; margin-bottom: 10px; }
  .standkort__foot { order: 1; margin-top: 0; }    /* søg op under titlen */
  .standkort__mobile { display: block; order: 2; margin-top: 12px; }

  /* Zone-kort */
  .standkort__mzone {
    margin: 10px 0;
    background: rgb(255, 255, 255);
    border: 1px solid rgba(49,79,89,0.08);
    border-radius: 14px;
    overflow: hidden;
  }
  .standkort__mzone-head {
    list-style: none;
    min-height: 56px;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; cursor: pointer;
    border-left: 5px solid var(--zc, var(--border));
  }
  .standkort__mzone-head::-webkit-details-marker { display: none; }
  .standkort__mzone-dot { flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--zc, rgb(204, 204, 204)); }
  .standkort__mzone-name {
    flex: 1; font-size: 16px; font-weight: 600; letter-spacing: 0.01em;
    color: var(--primary); text-transform: uppercase;
  }
  .standkort__mzone-count { font-size: 12px; color: var(--muted); font-weight: 500; }
  .standkort__mzone-chev { flex: none; width: 20px; height: 20px; color: var(--muted); transition: transform .2s ease; }
  .standkort__mzone[open] .standkort__mzone-chev { transform: rotate(180deg); }
  .standkort__mzone-body { padding: 10px 12px 16px; display: flex; justify-content: center; }

  /* Mini-messeplan: zone-farvet "hal" med rumligt placerede stande */
  .standkort__mplan {
    position: relative;
    width: 100%; max-width: 320px;
    background: var(--zc, var(--cream));
    border-radius: 8px;
    background-image:
      linear-gradient(rgba(49,79,89,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(49,79,89,0.06) 1px, transparent 1px);
    background-size: 14px 14px;
  }
  .standkort__mbooth {
    position: absolute;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    text-align: center; overflow: hidden;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(49,79,89,0.18);
    border-radius: 5px;
    color: var(--primary); text-decoration: none;
    font-size: clamp(11px, 3.4vw, 14px); font-weight: 600; line-height: 1.1;
    padding: 2px 5px;
  }
  .standkort__mbooth:active { background: rgb(255, 255, 255); border-color: var(--accent); }
  .standkort__mbooth-label { overflow: hidden; }
  .standkort__mbooth--demo { border-color: rgba(184,90,58,0.5); box-shadow: inset 0 0 0 1px rgba(184,90,58,0.25); }
  .standkort__mbooth--lounge { background: rgba(255,255,255,0.7); font-style: italic; }
  .standkort__mbooth-badge {
    flex: none; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 2px 5px; border-radius: 999px; background: rgba(184,90,58,0.14); color: var(--accent);
  }
  .standkort__mbooth.is-not-built { font-style: italic; color: var(--muted); border-style: dashed; }
  /* Søge-tilstande (drevet af standkort.js — samme klasser som SVG-stande) */
  .standkort__mbooth.is-dimmed { opacity: 0.22; }
  .standkort__mbooth.is-first-match { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(184,90,58,0.35); }
  .standkort__mzone.is-empty { display: none; }
  /* "Du er her" — markér den aktuelle stand */
  .standkort__mbooth.is-current {
    background: var(--accent); color: rgb(255, 255, 255); border-color: var(--accent);
  }
}

/* Mobil zone-kort i dark theme */
[data-theme="dark"] .standkort__mzone { background: rgb(26, 43, 49); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .standkort__mzone-name { color: var(--ink); }
[data-theme="dark"] .standkort__mbooth {
  background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); color: var(--ink);
}
[data-theme="dark"] .standkort__mbooth--lounge { background: rgba(255,255,255,0.06); }
@media (max-width: 480px) {
  .standkort__head { margin-bottom: 8px; }
  .standkort__lede { font-size: 15px; }
}