/* ============================================================
   blog-hero/relevant-problem
   Reframe-animation: fra symptom (det du beder om) til det
   relevante problem (det du faktisk har brug for).

   Two-panel-slider, struktureret som blog-hero/it-vs-marketing.
   CSS-only: ingen JS-afhaengighed. Alle delanimationer deler
   --rp-loop og samme keyframe-procenter, saa de er synkrone.

   Tokens forventes fra design-token-laget; fallbacks holder
   komponenten selvstaendig hvis den vises isoleret.
   ============================================================ */

.ug-blog-hero-rp {
  /* Brand-tokens med fallback */
  --rp-primary: var(--primary, rgb(49 79 89));
  --rp-accent: var(--brand-accent, var(--accent, rgb(184 90 58)));
  --rp-success: var(--brand-success, var(--success, rgb(0 136 60)));
  --rp-amber: var(--warning, rgb(212 160 23));
  --rp-surface: var(--surface, rgb(255 255 255));
  --rp-line: var(--line, rgb(226 232 240));
  --rp-ink: var(--ink, rgb(29 35 39));
  --rp-muted: var(--muted, rgb(100 116 139));

  /* Animations-takt: én kilde, alle spor arver den */
  --rp-loop: 9s;
  --rp-ease: cubic-bezier(.4, .1, .3, .9);

  display: flex;
  justify-content: center;
  width: 100%;
}

/* ---- Kort-ramme (samme format som de andre blog-heroes) ---- */
.ug-blog-hero-rp__card {
  container-type: inline-size;
  container-name: rphero;
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 600 / 380;
  background: var(--rp-surface);
  border: 1px solid var(--rp-line);
  border-radius: 24px;
  box-shadow: 0 18px 50px -18px rgba(49, 79, 89, 0.28);
  padding: clamp(16px, 4.6cqw, 28px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 3cqw, 18px);
  overflow: hidden;
}

/* ============================================================
   Toggle: to tilstands-labels med en glidende pille
   ============================================================ */
.ug-blog-hero-rp__toggle {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: color-mix(in srgb, var(--rp-primary) 7%, transparent);
  border-radius: 999px;
  padding: 4px;
  isolation: isolate;
}

.ug-blog-hero-rp__toggle-pill {
  position: absolute;
  z-index: -1;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--rp-primary);
  box-shadow: 0 4px 14px -4px rgba(49, 79, 89, 0.5);
  animation: rp-pill var(--rp-loop) infinite;
}

.ug-blog-hero-rp__toggle-label {
  text-align: center;
  font-size: clamp(11px, 2.4cqw, 13px);
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 8px 6px;
  line-height: 1.15;
  white-space: nowrap;
  color: var(--rp-muted);
}
.ug-blog-hero-rp__toggle-label--a { animation: rp-label-a var(--rp-loop) infinite; }
.ug-blog-hero-rp__toggle-label--b { animation: rp-label-b var(--rp-loop) infinite; }

/* ============================================================
   Viewport + glidende track (two-panel-slider)
   ============================================================ */
.ug-blog-hero-rp__viewport {
  flex: 1 1 auto;
  overflow: hidden;
  border-radius: 16px;
}

.ug-blog-hero-rp__track {
  display: flex;
  width: 200%;
  height: 100%;
  animation: rp-slide var(--rp-loop) infinite;
}

.ug-blog-hero-rp__panel {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 2.6cqw, 13px);
  padding: clamp(12px, 3.4cqw, 18px);
  border-radius: 16px;
}
.ug-blog-hero-rp__panel--symptom {
  background: color-mix(in srgb, var(--rp-primary) 4%, var(--rp-surface));
  border: 1px solid var(--rp-line);
}
.ug-blog-hero-rp__panel--need {
  background: color-mix(in srgb, var(--rp-success) 6%, var(--rp-surface));
  border: 1px solid color-mix(in srgb, var(--rp-success) 22%, var(--rp-line));
}

/* ---- Badge ---- */
.ug-blog-hero-rp__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(9px, 1.9cqw, 11px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
}
.ug-blog-hero-rp__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.ug-blog-hero-rp__badge--symptom {
  color: var(--rp-amber);
  background: color-mix(in srgb, var(--rp-amber) 14%, transparent);
}
.ug-blog-hero-rp__badge--need {
  color: var(--rp-success);
  background: color-mix(in srgb, var(--rp-success) 14%, transparent);
}

/* ---- Liste af tilstande ---- */
.ug-blog-hero-rp__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 1.7cqw, 9px);
  flex: 1 1 auto;
}
.ug-blog-hero-rp__item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: clamp(11.5px, 2.7cqw, 14px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.ug-blog-hero-rp__item-mark {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.ug-blog-hero-rp__item-mark svg { width: 11px; height: 11px; display: block; }

.ug-blog-hero-rp__panel--symptom .ug-blog-hero-rp__item { color: var(--rp-muted); }
.ug-blog-hero-rp__panel--symptom .ug-blog-hero-rp__item-mark {
  border: 1.5px solid color-mix(in srgb, var(--rp-muted) 45%, transparent);
  color: var(--rp-muted);
}
.ug-blog-hero-rp__panel--need .ug-blog-hero-rp__item { color: var(--rp-ink); }
.ug-blog-hero-rp__panel--need .ug-blog-hero-rp__item-mark {
  background: var(--rp-success);
  color: rgb(255 255 255);
}

/* ---- Note i bunden ---- */
.ug-blog-hero-rp__note {
  margin: 0;
  font-size: clamp(10px, 2.2cqw, 12px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--rp-muted);
}
.ug-blog-hero-rp__note b { font-weight: 700; }
.ug-blog-hero-rp__note--warn b { color: var(--rp-amber); }
.ug-blog-hero-rp__note--ok { color: var(--rp-ink); }
.ug-blog-hero-rp__note--ok b { color: var(--rp-accent); }

/* ============================================================
   Keyframes - fælles procent-struktur:
   0-22%   hold symptom
   22-38%  reframe -> behov
   38-86%  hold behov (laengere: behovet er svaret)
   86-100% glid tilbage til symptom (saa loopet er somloest)
   ============================================================ */
@keyframes rp-slide {
  0%, 22%   { transform: translateX(0); }
  38%, 86%  { transform: translateX(-50%); }
  100%      { transform: translateX(0); }
}
@keyframes rp-pill {
  0%, 22%   { transform: translateX(0); }
  38%, 86%  { transform: translateX(100%); }
  100%      { transform: translateX(0); }
}
@keyframes rp-label-a {
  0%, 22%   { color: rgb(255 255 255); }
  38%, 86%  { color: var(--rp-muted); }
  100%      { color: rgb(255 255 255); }
}
@keyframes rp-label-b {
  0%, 22%   { color: var(--rp-muted); }
  38%, 86%  { color: rgb(255 255 255); }
  100%      { color: var(--rp-muted); }
}

/* All keyframe-overgange skal lette blødt */
.ug-blog-hero-rp__track,
.ug-blog-hero-rp__toggle-pill,
.ug-blog-hero-rp__toggle-label--a,
.ug-blog-hero-rp__toggle-label--b {
  animation-timing-function: var(--rp-ease);
}

/* ============================================================
   Dark mode - to ligestillede paths (eksplicit + OS-praeference)
   ============================================================ */
[data-theme="dark"] .ug-blog-hero-rp__card {
  background: var(--surface, rgb(36 52 64));
  border-color: var(--border, rgb(53 74 86));
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .ug-blog-hero-rp {
  --rp-primary: var(--primary, rgb(127 168 182));
  --rp-surface: var(--surface, rgb(36 52 64));
  --rp-line: var(--border, rgb(53 74 86));
  --rp-ink: var(--text, rgb(208 220 228));
  --rp-muted: var(--text-muted, rgb(168 181 196));
}
[data-theme="dark"] .ug-blog-hero-rp__toggle-pill {
  background: var(--primary, rgb(127 168 182));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ug-blog-hero-rp {
    --rp-primary: var(--primary, rgb(127 168 182));
    --rp-surface: var(--surface, rgb(36 52 64));
    --rp-line: var(--border, rgb(53 74 86));
    --rp-ink: var(--text, rgb(208 220 228));
    --rp-muted: var(--text-muted, rgb(168 181 196));
  }
  :root:not([data-theme="light"]) .ug-blog-hero-rp__card {
    background: var(--surface, rgb(36 52 64));
    border-color: var(--border, rgb(53 74 86));
    box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.5);
  }
  /* Samme pille + dark-label-keyframes som den eksplicitte path, så den
     aktive label ikke bliver hvid-på-lys-pille (kontrast-bug) ved OS-dark. */
  :root:not([data-theme="light"]) .ug-blog-hero-rp__toggle-pill {
    background: var(--primary, rgb(127 168 182));
  }
  :root:not([data-theme="light"]) .ug-blog-hero-rp__toggle-label--a { animation-name: rp-label-a-dark; }
  :root:not([data-theme="light"]) .ug-blog-hero-rp__toggle-label--b { animation-name: rp-label-b-dark; }
}

/* In dark mode the active label sits on a light pill -> dark text */
[data-theme="dark"] .ug-blog-hero-rp__toggle-label--a { animation-name: rp-label-a-dark; }
[data-theme="dark"] .ug-blog-hero-rp__toggle-label--b { animation-name: rp-label-b-dark; }
@keyframes rp-label-a-dark {
  0%, 22%   { color: rgb(24 32 40); }
  38%, 86%  { color: var(--rp-muted); }
  100%      { color: rgb(24 32 40); }
}
@keyframes rp-label-b-dark {
  0%, 22%   { color: var(--rp-muted); }
  38%, 86%  { color: rgb(24 32 40); }
  100%      { color: var(--rp-muted); }
}

/* ============================================================
   Mobil - den faste aspect-ratio gør kortet for lavt på smalle
   skærme og klipper indholdet. Lad højden være indholdsdrevet,
   og tillad toggle-labels at brydes til to linjer.
   ============================================================ */
@media (max-width: 560px) {
  .ug-blog-hero-rp__card {
    aspect-ratio: auto;
    gap: 14px;
  }
  .ug-blog-hero-rp__viewport,
  .ug-blog-hero-rp__track,
  .ug-blog-hero-rp__panel {
    height: auto;
  }
  .ug-blog-hero-rp__toggle-label {
    white-space: normal;
    font-size: 12px;
  }
}

/* ============================================================
   Reduced motion - stabil slut-tilstand (behovet), ingen bevaegelse
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ug-blog-hero-rp__track,
  .ug-blog-hero-rp__toggle-pill,
  .ug-blog-hero-rp__toggle-label--a,
  .ug-blog-hero-rp__toggle-label--b {
    animation: none;
  }
  .ug-blog-hero-rp__track { transform: translateX(-50%); }
  .ug-blog-hero-rp__toggle-pill { transform: translateX(100%); }
  .ug-blog-hero-rp__toggle-label--a { color: var(--rp-muted); }
  .ug-blog-hero-rp__toggle-label--b { color: rgb(255 255 255); }
  [data-theme="dark"] .ug-blog-hero-rp__toggle-label--b { color: rgb(24 32 40); }
}