/* ==========================================================================
   TRAKTOR I HEROEN + SNE
   --------------------------------------------------------------------------
   Selvkilende: paletten ligger her, fordi forsiden ikke indlaeser
   ydelser.css.

   PLADSEN ER ABSOLUT. Skalaen laes i JS og sættes paa left og height,
   fordi tomrummet mellem tekst og video flytter sig med skærmbredden.

   Billedet skal have gennemsigtig baggrund (PNG). Derfor er der ingen
   baggrundsfarve paa selve knappen - kun glod og tekst.
   ========================================================================== */
:root{
  --jd-tr-ink:#203943;
  --jd-tr-sand:#eeeae1;
  --jd-tr-guld:#876b39;
  --jd-tr-linje:#dcd8ce;
  --jd-tr-hvid:#fffefa;
}

/* ==========================================================================
   DET HER VAR FEJLEN
   --------------------------------------------------------------------------
   .jd-home-visual har overflow:hidden, fordi kortet har runde hjoerner.
   Det klipper OGSA alt uden for kortets egen boks - ogsaa traektoren, der
   med vilje haenger 20 px til venstre for kassen.

   Det er derfor den aldrig har kunnet vaere synlig, selvom den laag i DOM
   med rigtig stoerelse og et indlaest billede. getBoundingClientRect()
   rapporterer fuldstaendig position og stoerelse OGSA for et element der
   faktisk er klippet vaek - saa man kan maale "alt er i orden" paa et
   element ingen kan se.

   Rettelsen: kun video-varianten slipper. Kortets runde hjoerner bevares
   ved at give VIDEO'en dem i stedet, og alt andet i kortet har ingen
   baggrund, der kaeldes mod kanten.
   ========================================================================== */
.jd-home-visual.jd-home-video{
  overflow:visible;
}
.jd-home-visual.jd-home-video video{
  border-radius:13px 13px 0 0;
}

.jd-traktor{
  /* Traktoren haenger paa VIDEOKASSEN, ikke paa heroen. Derfor er
     top:0 praecis toppen af kassen, uden at noget skal maales.
     Og right:calc(100% + 20px) laegger den 20 px til venstre for
     kassens kant - saa den flugter i toppen og holder en luft i siden.

     Det er hele pointen. Forrige blev den sat paa top:46%, hvilket er
     et gaet. Nu er den bundet til kanten, saa den ikke kan glide. */
  position:absolute;
  top:0;
  right:calc(100% + 20px);
  left:auto;
  transform:none;
  width:min(330px, 21vw);
  height:auto;
  display:block;
  text-decoration:none;
  z-index:6;
  border-radius:18px;
  transition:transform .22s ease;
  /* hele blokken er klikbar, saa trykfeltet er stort nok med det samme */
  padding:6px;
}
.jd-traktor:hover{transform:scale(1.035)}
.jd-traktor:focus-visible{
  outline:3px solid var(--jd-tr-guld);
  outline-offset:6px;
}

.jd-traktor-billede{
  display:block;
  width:100%;
  height:auto;
  border-radius:13px;
}

/* En blod glod bag ved traktoren, saa den ikke virker som et klip
   der er limt fast oven paa siden */
.jd-traktor-glod{
  position:absolute;
  inset:-16% -10% -6% -10%;
  background:radial-gradient(ellipse at 50% 62%,
    rgba(255,255,255,.72) 0%,
    rgba(226,238,247,.44) 38%,
    rgba(226,238,247,0) 68%);
  z-index:-1;
  pointer-events:none;
}

/* ---------------- tekst og knap ---------------- */
.jd-traktor-tekst{
  position:absolute;
  left:50%;
  bottom:-8px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}
.jd-traktor-prik{
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--jd-tr-ink);
  background:rgba(255,254,250,.92);
  border:1px solid var(--jd-tr-linje);
  border-radius:999px;
  padding:5px 14px;
  box-shadow:0 2px 10px rgba(32,57,67,.10);
}
.jd-traktor-knap{
  font-size:15px;
  font-weight:700;
  color:var(--jd-tr-hvid);
  background:var(--jd-tr-ink);
  border:1px solid var(--jd-tr-ink);
  border-radius:999px;
  padding:11px 22px;
  min-height:44px;              /* trykfeltkrav */
  display:inline-flex;
  align-items:center;
  box-shadow:0 3px 14px rgba(32,57,67,.22);
  transition:background .12s ease;
}
.jd-traktor:hover .jd-traktor-knap{
  background:var(--jd-tr-guld);
  border-color:var(--jd-tr-guld);
}
.jd-traktor:hover .jd-traktor-prik{color:var(--jd-tr-gold)}

/* ---------------- sne ---------------- */
.jd-traktor-sne{
  position:absolute;
  left:0;
  top:0;
  width:var(--jd-traktor-bredde, 100%);
  height:100%;
  overflow:visible;
  pointer-events:none;          /* sne skal aldrig blokerere klik */
  z-index:2;
}
.jd-traktor-fnug{
  position:absolute;
  top:-14px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff 0%, #dce9f2 70%, #c3d8e6 100%);
  box-shadow:0 0 5px rgba(255,255,255,.85);
  animation-name:jd-traktor-fald;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  will-change:transform;
}

@keyframes jd-traktor-fald{
  0%   { transform:translateY(-16px) translateX(0) scale(1) rotate(0deg); }
  25%  { transform:translateY(28%) translateX(7px)  scale(1) rotate(90deg); }
  50%  { transform:translateY(58%) translateX(-5px) scale(1) rotate(180deg); }
  75%  { transform:translateY(82%) translateX(6px)  scale(1) rotate(270deg); }
  100% { transform:translateY(115%) translateX(0)   scale(1) rotate(360deg); }
}

/* Den, der har bedt om mindre bevægelse, faar et statisk fnug-lag */
@media (prefers-reduced-motion:reduce){
  .jd-traktor,
  .jd-traktor-knap{transition:none}
  .jd-traktor:hover{transform:none}
  .jd-traktor-fnug{animation:none;top:auto;bottom:6px}
}

/* Paa lille skaerm er teksten og knappen for brede til at staa
   under traktoren, saa de flyttes op over den */
@media (max-width:1300px){
  .jd-traktor-tekst{gap:5px}
  .jd-traktor-prik{font-size:11.5px;padding:4px 11px}
  .jd-traktor-knap{font-size:13.5px;padding:9px 17px}
}

/* Sikkerhedsnet. JS'en maeler det faktiske tomrum og skjuler
   traektoren, naar der ikke er plads. Men hvis JS'en af en grund
   ikke faar lov at køre, maa den ikke staa og dække brødteksten.
   Derfor samme tærskel som MIN_BREDDE i traktor.js, hærdet i CSS.
   Bemærk !important: placer() sætter display:none som inline-style,
   og inline-style vinder over almindelig CSS. !important vinder
   over inline-style, hvilket er præcis her den skal. */
@media (max-width:1100px){
  .jd-traktor{display:none !important}
}

/* Og under 900 px bliver gitteret én kolonne, saa der er slet ingen
   luft ved siden af kassen. */
@media (max-width:900px){
  .jd-home-visual.jd-home-video{overflow:hidden}
  .jd-home-visual.jd-home-video video{border-radius:0}
}