/* ==========================================================================
   Resultaterne (arbejdskopien /forside2, kladde). Sektionen hed "Hvad har
   vores statics gjort?"; overskriften er taget af, klassenavnet .gjort står.
   Emil, 3.10.2026: resultatsektionen fra forside-udkastet "Papirskift", sat ind
   under de to tegnede sektioner. Bygges af scripts/byg-forside2.js.

   Sektionen har ingen baggrund selv. Den ligger på et ark prikket papir (Emil,
   3.10.2026); arket og dets revne kant står i /css/sektioner/papir.css.

   Samme to lag som i de tegnede sektioner (/css/sektioner/tegnet.css):
     - det trykte: sætningerne i sidens egen skrift
     - det håndlavede: kundetypen med håndskrift, én static tapet fast,
       tællestreger og én håndtegnet streg under ét tal

   Størrelser kommer fra grundsættet. Tapen, kuglepen-farven og håndskriften
   (Caveat) findes ikke i grundsættet endnu og står som egne variabler øverst.
   Bliver udtrykket valgt, skal de ind dér.
   ========================================================================== */

.gjort {
  --gjort-pen: #1B2A4A;                              /* håndskrift: kuglepen-blå */
  --gjort-tape: rgba(232,220,196,.95);               /* beige malertape */
  --gjort-haand: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive;
  /* Ekstra luft forneden, ned mod den revne kant og anmeldelserne (Emil, 3.10.2026). */
  position: relative; color: var(--text); padding-block: var(--section-space) calc(var(--section-space) + var(--space-xl));
}

/* --- Det trykte ---------------------------------------------------------------- */
.gjort__top { display: grid; gap: var(--stack-block); }
/* Knapperne er stillet op som i toppen (Emil, 3.10.2026): knappen Book demo og linket til alle resultater
   ved siden af hinanden. Knappen er toppens egen (.hp3a-hero-ctas inde i .hp3a-compact fra style-v3.css).
   Linket har samme mål som toppens (.heropap__link i hero-papir.css). */
.gjort__knapper .hp3a-hero-ctas { margin-top: 0; align-items: center; column-gap: 1.5rem; }
.gjort__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; }
.gjort__link:hover { color: var(--accent-strong); }
.gjort b { font-weight: var(--weight-semi); }

/* Casen: teksten til venstre, staticen til højre. Staticen fylder sin spalte helt ud til sidens højre kant. */
.gjort__case { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.gjort__tekst { display: grid; gap: var(--space-m); align-content: start; justify-items: start; min-width: 0; }
/* Overskrift og linjer er sat et trin op (Emil, 3.10.2026), så casen er lettere at læse. */
.gjort .gjort__stor { margin: 0; font-size: var(--type-h2); line-height: 1.2; letter-spacing: var(--tracking-h2); font-weight: var(--weight-semi); color: var(--text); text-wrap: balance; }
/* Den håndtegnede streg: højst under ét tal pr. sektion (samme streg som .tegn__streg). */
.gjort__streg { white-space: nowrap; padding-bottom: .1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 18 2.5, 34 8.5, 52 5.5 S 84 3, 98 6.5' fill='none' stroke='%23F97316' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M9 11 C 30 8.5, 58 12, 90 9.5' fill='none' stroke='%23F97316' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3C/svg%3E") no-repeat left bottom / 100% .26em; }
.gjort__linjer { display: grid; width: 100%; max-width: 40rem; }
.gjort .gjort__linjer p { margin: 0; padding-block: var(--space-s); border-top: 1px solid var(--line-strong); font-size: var(--text-2xl); line-height: 1.4; font-weight: var(--weight-medium); color: var(--text); }
.gjort .gjort__linjer p:last-child { padding-bottom: 0; }

/* De tre kunder: en sort streg over hver, og under den kundetypen, én sætning og én lille tegning. */
.gjort__kunder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); margin-top: var(--space-2xl); }
.gjort__kunde { display: grid; gap: var(--space-xs); align-content: start; justify-items: start; padding-top: var(--space-s); border-top: 2px solid var(--text); }
.gjort .gjort__s { margin: 0; font-size: var(--type-h3); line-height: var(--leading-title); letter-spacing: var(--tracking-h3); font-weight: var(--weight-semi); color: var(--text); }

/* --- Det håndlavede -------------------------------------------------------------- */
.gjort .gjort__hvem { margin: 0; font: 700 var(--text-3xl)/1.05 var(--gjort-haand); color: var(--gjort-pen); text-wrap: balance; }   /* fylder teksten to linjer, bliver de lige lange */

/* Staticen som polaroid, tapet fast. */
.gjort__foto { position: relative; display: block; padding: var(--space-2xs) var(--space-2xs) var(--space-m); background: var(--white); box-shadow: 0 14px 24px -16px rgb(10 11 13 / .5); transform: rotate(-2deg); }
.gjort .gjort__foto img { display: block; width: 100%; height: auto; }
.gjort__foto::before { content: ""; position: absolute; z-index: 1; top: calc(var(--space-xs) * -1); left: 50%; width: var(--space-3xl); height: var(--space-m); background: var(--gjort-tape); transform: translateX(-50%) rotate(-3deg); }

/* Den lille tegning under hver kundes sætning: blæk, blyant, skravering og orange tusch, med håndskrift. */
.gjort__lille { display: block; width: min(100%, calc(var(--space-xl) * 6.5)); height: auto; margin-top: var(--space-xs); overflow: visible; }
.gjort__lille .s-blaek { fill: none; stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gjort__lille .s-blyant { fill: none; stroke: #6E6B64; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 4 5; }
.gjort__lille .s-tusch { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
.gjort__lille .f-skrav { fill: url(#gjort-skrav); stroke: var(--text); stroke-width: 2; stroke-linejoin: round; }
.gjort__lille .f-tusch { fill: var(--accent); }
.gjort__lille .f-blaek { fill: var(--text); }
.gjort__lille text { font-family: var(--gjort-haand); font-weight: 700; fill: var(--text); }
.gjort__lille text.t-tusch { fill: var(--accent-strong); }
.gjort__defs { position: absolute; width: 0; height: 0; }

/* Smalle skærme: alt i én spalte. Under 860 px har .wrap ingen luft i siderne, så sektionen giver den selv. */
@media (max-width: 860px) {
  .gjort { padding-inline: var(--space-l); }
  .gjort__case, .gjort__kunder { grid-template-columns: minmax(0, 1fr); }
  /* På telefonen fylder de små tegninger hele bredden (Emil, 3.10.2026); ellers er de for små at læse. */
  .gjort__lille { width: 100%; }
}