/* ==========================================================================
   Toppen på papir (arbejdskopien /forside3, kladde)
   Emil, 3.10.2026. Bygges af scripts/byg-forside3.js.

   Toppen er den nuværende top (.hp3a-hero.hp3a-compact i nyt-site/style-v3.css) med
   præcis samme opstilling, mål og luft: to spalter, overskrift og knapper til venstre,
   seks statics i kaskade til højre. Denne fil lægger kun tre ting oveni:
     - prikket papir som baggrund
     - sidste linje i overskriften i orange og linket "Se resultater" med streg under
     - en håndskrevet linje under knapperne, hvor den nuværende top har sin lille grå linje
   Under toppen står logo-striben på samme papir med en håndskrevet linje over sig.

   Papiret, prikkerne, blækfarven og håndskriften (Caveat) findes ikke i grundsættet
   endnu og står som egne variabler. Papiret er det samme som på /resultater
   (resultater7.css).
   ========================================================================== */

.heropap, .heropap-logoer, .heropap-vaeg {
  --heropap-papir: #F4F3EF;
  --heropap-prik: #D9D6CE;
  --heropap-linje: #CFCCC4;
  --heropap-blaek: #1F2D4A;        /* mørkeblå kuglepen til det håndskrevne i toppen */
  --heropap-daempet: #6E6B64;
  --heropap-haand: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive;
  background-color: var(--heropap-papir);
  background-image: radial-gradient(var(--heropap-prik) 1.1px, transparent 1.3px);
  background-size: 22px 22px;
}

/* --- Toppen ------------------------------------------------------------------- */
/* Billederne i toppen har bredde og højde i koden; højden skal stadig følge bredden. */
.heropap .hp3a-casc img { height: auto; }
.heropap .hp3a-h1 span { display: block; color: var(--orange); }
/* Forsidens overskrift må højst fylde 46 % af skærmens bredde, fordi den deler rækken med statics. Under
   1200 px står toppen i én spalte, og så klemmer den grænse overskriften sammen på fire korte linjer. */
@media (max-width: 1200px) { .heropap .hp3a-h1 { max-width: none; } }
.heropap .hp3a-hero-ctas { align-items: center; column-gap: 1.5rem; }
.heropap__link { font: 600 calc(15px * var(--grow-sm))/1.2 'Poppins', sans-serif; color: var(--ink); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1.5px; }
.heropap__link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* Den håndskrevne linje står, hvor den nuværende top har .hp3a-trust, med samme afstand til knapperne. */
.heropap .heropap__haand { margin: 21px 0 0; font: 700 clamp(1.375rem, 1.15rem + .7vw, 1.75rem)/1 var(--heropap-haand); color: var(--heropap-blaek); transform: rotate(-2deg); transform-origin: 0 50%; }

/* --- Logo-striben under toppen ------------------------------------------------ */
/* Trukket lidt op i toppens nederste luft, så striben står højere på første skærm. */
.heropap-logoer { position: relative; margin-top: -1.75rem; padding: 0 0 clamp(2.75rem, 5vw, 4.5rem); background-color: transparent; background-image: none; }
.heropap-logoer::after { content: ""; position: absolute; inset: 1.75rem 0 0; z-index: -1; background-color: var(--heropap-papir); background-image: radial-gradient(var(--heropap-prik) 1.1px, transparent 1.3px); background-size: 22px 22px; background-position: 0 0; }
.heropap-logoer .heropap-logoer__over { margin: 0 0 clamp(1.25rem, 3.4vh, 2.25rem); padding-inline: 1.25rem; text-align: center; text-wrap: balance; display: flex; align-items: flex-end; justify-content: center; gap: .625rem; font: 700 clamp(1.375rem, 1.1rem + .8vw, 1.75rem)/1 var(--heropap-haand); color: var(--heropap-daempet); transform: rotate(-1deg); }
.heropap-logoer__over svg { flex: none; width: 2.75rem; height: 1.875rem; margin-bottom: -.75rem; overflow: visible; }
.heropap-logoer__over path { fill: none; stroke: var(--heropap-daempet); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* På telefonen står linjen på to linjer, og pilen peger ikke på noget: den vises ikke. */
@media (max-width: 700px) { .heropap-logoer__over svg { display: none; } }
/* Striben selv er forsidens (.hp3a-logomarquee). Her får den stiplede streger over og under,
   og kanterne toner ud med en maske i stedet for de hvide felter, som ikke passer til papiret. */
.heropap-logoer .hp3a-logomarquee { padding: 1.125rem 0; border-top: 1px dashed var(--heropap-linje); border-bottom: 1px dashed var(--heropap-linje);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.heropap-logoer .hp3a-logomarquee-fade { display: none; }
/* Striben er lige så bred som på forsiden (ingen egen maksbredde). Logoerne er lidt større og mørkere. */
.heropap-logoer .hp3a-logomarquee img { max-height: 2.5rem; max-width: 9rem; }
.heropap-logoer .hp3a-logomarquee img.is-lowercase-mark { max-height: 2rem; }
.heropap-logoer .hp3a-logomarquee.is-muted img { opacity: .8; }
/* Lidt mere luft mellem logoerne og lidt hurtigere end forsidens stribe (64px og 55s). Mellemrum og
   højre-polstring skal være ens, ellers hopper striben, når den starter forfra. */
.heropap-logoer .hp3a-logomarquee-set { gap: 5.5rem; padding-right: 5.5rem; }
.heropap-logoer .hp3a-logomarquee-track { animation-duration: 46s; }
@media (max-width: 700px) {
  .heropap-logoer .hp3a-logomarquee img { max-height: 1.875rem; max-width: 6.5rem; }
  .heropap-logoer .hp3a-logomarquee-set { gap: 3.75rem; padding-right: 3.75rem; }
}

/* --- Statics-slideren under logo-striben ---------------------------------------- */
/* Slideren selv er forsidens (.hp3a-masonry-*, sat ind af scripts/statics-vaeg.js). Her står den på
   papiret: ingen luft over (logo-striben har sin egen under sig), og kanterne toner ud med en maske
   i stedet for de hvide felter, som ikke passer til papiret. */
.hp3a .heropap-vaeg { padding: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.heropap-vaeg .hp3a-masonry-wrapper { margin-top: 0; padding-bottom: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.heropap-vaeg .hp3a-masonry-fade-left, .heropap-vaeg .hp3a-masonry-fade-right { display: none; }
/* Rækkerne skal have plads til, at et kort vokser lidt, når musen er over det. */
.heropap-vaeg .hp3a-masonry-row { padding-block: 4px; }
/* Tættere på logo-striben: stribens egen luft under sig er for stor, når slideren følger lige efter. */
.heropap-logoer:has(+ .heropap-vaeg) { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
/* Billederne en anelse større end forsidens (215px, 200px på smalle skærme). */
.heropap-vaeg .hp3a-masonry-item.tall, .heropap-vaeg .hp3a-masonry-item.wide { height: 240px; }
@media (max-width: 700px) { .heropap-vaeg .hp3a-masonry-item.tall, .heropap-vaeg .hp3a-masonry-item.wide { height: 215px; } }
/* Række 2 glider den modsatte vej. Forsidens script (masonry-scroll.js) flytter altid sporet mod venstre,
   så rækken er spejlvendt, og hvert kort er spejlvendt tilbage: bevægelsen vender, billederne gør ikke. */
.heropap-vaeg .hp3a-masonry-row:nth-child(2) { transform: scaleX(-1); }
.heropap-vaeg .hp3a-masonry-row:nth-child(2) .hp3a-masonry-item { transform: scaleX(-1); }
.heropap-vaeg .hp3a-masonry-row:nth-child(2) .hp3a-masonry-item:hover { transform: scale(-1.03, 1.03); }

/* --- Arket med resultaterne under toppen ------------------------------------------ */
/* scripts/resultater-op.js lægger resultaternes ark lige under logo-striben og statics-slideren, som står
   på samme prikkede papir: de skal læses som ét ark, så arkets revne overkant vises ikke.
   (.hf-logoer er logo-striben på /forside4.) */
.heropap-logoer + .papir > .papir__kant:not(.papir__kant--bund),
.heropap-vaeg + .papir > .papir__kant:not(.papir__kant--bund),
.hf-logoer + .papir > .papir__kant:not(.papir__kant--bund) { display: none; }