/* wa-lint: skip
   Filen indeholder bevidste hex-undtagelser:
   - macOS-vindue traffic-light farver (rgb(236, 106, 94)/rgb(245, 191, 79)/rgb(98, 197, 84)) til kort-chrome
   - stand-kategori-farver (rgb(90, 139, 150)/rgb(139, 111, 190)/rgb(196, 168, 117)) som er mock-kategorier
     scoped til denne side, ikke brand-tokens
   - rgb(255, 255, 255) til tekst på mørke booth/pill-baggrunde hvor kontrast kraever det
   Alle er dokumenteret med kommentar in-line. Alt andet bruger --tokens. */
/* /produkter/standkort/ marketing-side · page-scoped CSS.
   Spec: docs/superpowers/specs/2026-05-25-standkort-marketing-side-design.md
   Source: docs/superpowers/specs/2026-05-25-standkort-source.html */

/* Sections get inline-padding (clamp'd til viewport) så content ikke
   touchr viewport-edge på mobile. Inner content (grid + headings) bliver
   constrained til 1200px via max-width på selve content-blocks (head,
   compare, customers, features, connect, behind, pricing) nedenfor. */

/* Centrér og constrain inner content-blocks i sections. */

/* =========================================================================
   01 · HERO
   Port fra docs/superpowers/specs/2026-05-25-standkort-source.html
   linje 1458-1767 (standkort-hero + standkort-map-* + standkort-booth + standkort-popover + standkort-hud).
   Token-substitutioner per chunk-plan; cat-a/b/c-farver er hardcoded
   stand-kategori-farver scoped til denne mock (ikke brand-tokens).
   ========================================================================= */

/* Hero 2-kolonne layout - chunk-plan addition (erstatter source-grid). */

/* ---------- Animated floorplan preview ---------- */
/* macOS-vindue traffic-lights (rød/gul/grøn) - kosmetiske browser-chrome-prikker,
   ikke brand-farver. */

.standkort-map-canvas {
  position: absolute; inset: 38px 0 0 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(127,190,198,0.18), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(224,122,95,0.07), transparent 55%),
    var(--cream);
  overflow: hidden;
}
.standkort-map-canvas::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(49,79,89,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49,79,89,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* Booth-grid: cat-a/b/c/d er stand-kategori-farver scoped til denne mock.
   Det er IKKE brand-tokens - de illustrerer messe-kategorier som forlag,
   magasiner, foreninger, scener. Beholdes hardcoded med kommentar. */
.standkort-booth {
  position: absolute;
  background: var(--primary);
  border-radius: var(--radius-xs, 4px);
  box-shadow: 0 1px 2px rgba(49,79,89,0.18);
  color: rgb(255, 255, 255); /* hardcoded hvid for læsbar tekst på mørk booth-baggrund */
  font-size: 8px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
}
.standkort-booth.cat-a { background: rgb(90, 139, 150); }    /* skønlitteratur - mock-kategori, ikke brand-token */
.standkort-booth.cat-b { background: var(--primary); }
.standkort-booth.cat-c { background: rgb(139, 111, 190); }    /* foreninger-lilla - mock-kategori, ikke brand-token */
.standkort-booth.cat-d { background: var(--brand-40); }
.standkort-booth.large { font-size: 10px; }
.standkort-booth.dim { opacity: 0.12; }
.standkort-booth.fav { background: var(--accent) !important; box-shadow: 0 0 0 3px rgba(224,122,95,0.25); }
.standkort-booth.pulse { animation: skPulse 1.6s ease-in-out infinite; }
.standkort-booth.legend-off { opacity: 0.08; }

@keyframes skPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(224,122,95,0.25); }
  50%      { box-shadow: 0 0 0 8px rgba(224,122,95,0.05); }
}

/* boothFade/boothFavorite kept for parity med playground - bruges af JS hvis
   booths spawnes dynamisk i andre scener (perspective-tabs etc.) */
@keyframes boothFade {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 0.9; }
}
@keyframes boothFavorite {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(224,122,95,0.5); }
  50% { transform: scale(1.15); box-shadow: 0 0 0 10px rgba(224,122,95,0); }
}
@keyframes pinDrop {
  0% { transform: rotate(-45deg) translateY(-30px); opacity: 0; }
  100% { transform: rotate(-45deg) translateY(0); opacity: 1; }
}
/* pulse-dot reused fra hero eyebrow-status-dot, parity med source playground */
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 0 4px rgba(0,136,60,0.18); }
  50%     { box-shadow: 0 0 0 8px rgba(0,136,60,0.05); }
}

/* Fake cursor til 'Vis/skjul kategorier'-scene. Animeres af JS:
   transition smoother bevægelsen, 'clicking'-class trigger pulse. */
@keyframes skCursorRipple {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.0); opacity: 0; }
}

/* Tooltip popover over a booth */

/* HUD-paneler oven på kortet */

/* Søgefelt INDE i standkort-hud--filter (kun aktivt i scene 'Søg & filtrér'). */
@keyframes skCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* standkort-chip styling (markup er <wa-button class="standkort-chip">) - chip-look layer.
   wa-button bevarer fokus/keyboard-tilstand; vores klasse styrer farve/aktiv. */
.standkort-chip {
  font-size: 11px; font-weight: 600;
  --wa-color-neutral-fill-loud: var(--cream);
  --wa-form-control-padding-block: 4px;
  --wa-form-control-padding-inline: 9px;
}
.standkort-chip.on::part(base) { background: var(--accent); color: rgb(255, 255, 255); border-color: var(--accent); }

/* =========================================================================
   02 · HVORFOR ET KORT (compare-row)
   Port fra source linje 1770-1840 + 2577-2650.
   Token-substitutioner per chunk-plan.
   ========================================================================= */
/* Stand-kategori-farver: lilla og accent for fake row-swatches.
   rgb(139, 111, 190) er en mock-kategori-farve scoped til denne side (samme
   undtagelses-rationale som cat-c i hero, ikke et brand-token). */

/* mini-map */
/* alt2 = lilla mock-kategori (samme rationale som sw--purple ovenfor). */

/* =========================================================================
   03 · PERSPEKTIVER (perspective band)
   Port fra source linje 1843-1930 + 2652-2733.
   standkort-section--dark fra chunk-1 leverer brand-50 baggrund + hvid tekst;
   .standkort-persp tilføjer radial-gradient-overlay + inner-block-styling.
   ========================================================================= */

/* Accent-orange er læselig nok mod brand-50 og giver konsistent brand-CTA-
   farve på tværs af lys/mørk sektioner (matcher final-CTA-headingens fix). */

/* wa-tab-group tokens-override for dark perspektiv-section.
   Tabs nav-rækken er auto-rendered af wa-tab-group; vi tilpasser kun
   farverne via ::part(). Tabs panel-indhold styles direkte. */

/* Grid: panes + visual */

/* Visual side */

/* Mindre/mørk variant af standkort-map-frame (chunk-1 default-frame har hvid baggrund
   + box-shadow; her vil vi have transparent over mørk sektion). */

/* ================== 04 · KUNDE-CASES ================== */

/* ================== 05 · FEATURE GRID ================== */

/* ── 06 · Connect ────────────────────────────────────────────── */

/* ── 07 · Bag kortet ─────────────────────────────────────────── */

/* ── 08 · Pricing ────────────────────────────────────────────── */

/* ── 09 · Final CTA ──────────────────────────────────────────── */

/* CTA-overrides for /produkter/standkort/.
   WA's default 'appearance="accent" variant="brand"' giver brand-50 teal,
   som forsvinder mod den mørke .standkort-final-cta-baggrund og ikke afspejler
   sidens accent-orange brand-CTA. To-knaps-system her:
   - .standkort-cta--accent: orange-filled, virker på lys OG mørk baggrund
   - .standkort-cta--inverse: hvid-outlined, kun til mørk baggrund (secondary) */