/* FAKTIVE sektion 3 2026: "Hvorfor nu" som opslag — teksten til venstre,
   mødet med kunden i fuld bredde til højre. Hører sammen med assets/sektion3-2026.js.
   Teksten er uændret fra originalen; uden JS står sektionen som den gjorde før. */
/* ===== SEKTION 3 · "Hvorfor nu" (testside) =====
   Redaktionel opstilling: tekst i venstre spalte, foto helt ud til højre kant.
   Intet skjules. NIS2-afsnittet står som fodnote, hvor de tre vigtigste led lyser op,
   mens man læser. Teksten er ordret som i originalen. */
.c3{position:relative;overflow:hidden;min-height:86svh;display:flex;align-items:center;
  padding:clamp(70px,9vh,120px) 0}
.c3-in{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;padding:0 32px}
.c3-txt{max-width:min(52%,600px)}
.c3-eye{color:#E45724;font-weight:700;font-size:19px;margin:0 0 18px;font-family:var(--font-text)}
.c3-h2{font-family:var(--font-display);font-stretch:125%;font-weight:520;letter-spacing:-.02em;
  font-size:clamp(30px,3.4vw,54px);line-height:1.16;color:#fff;margin:0 0 32px}
.c3-citat{margin:0;border-left:3px solid #E45724;padding:4px 0 4px 24px;
  font-size:clamp(18px,2.1vw,26px);font-weight:300;line-height:1.45;color:#EADDD2;max-width:26em}

/* NIS2-afsnittet som fodnote: de tre vigtigste led lyser op ét ad gangen */
.c3-note{margin:26px 0 0;padding-top:20px;border-top:1px solid rgba(242,231,220,.16);
  font-size:15.5px;line-height:1.8;color:#8E7C73;max-width:42em}
.c3-note em{font-style:normal;color:#8E7C73;transition:color .9s ease}
.c3-note em.on{color:#F2E7DC}
/* lysere sandfarve: 5,4:1 på aubergine (før 2,6:1), mobil-gennemgangen 2026-10 */
.c3-fod{margin:14px 0 0;font-size:13px;line-height:1.6;color:#B5A398;max-width:42em}

/* fotoet går ud til skærmens kant */
.c3-foto{position:absolute;right:0;top:0;bottom:0;width:clamp(340px,58vw,1000px);overflow:hidden;z-index:1;margin:0}
/* samme kamera som "Svaret" i sektion 4: laget zoomer fra 112 % ud til 100 %, når sektionen kommer
   frem, og fotoet er lidt større end rammen, så det kan panorere og drive uden at vise kanter */
.c3-lag{position:absolute;inset:0;overflow:hidden;transform:scale(1.12);
  transition:transform 1.9s cubic-bezier(.16,1,.3,1) .08s}
.c3.vist .c3-lag{transform:none}
.c3-foto img{position:absolute;left:-5%;top:-6%;width:110%;height:112%;object-fit:cover;display:block;will-change:transform}
.c3-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#3C2A44 0%,rgba(60,42,68,.88) 12%,rgba(60,42,68,.42) 30%,rgba(60,42,68,.14) 46%,rgba(60,42,68,.3) 100%)}

/* rolig indgang */
.c3-eye,.c3-h2,.c3-citat,.c3-note,.c3-fod{opacity:0;transform:translateY(18px);
  transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.c3.vist .c3-eye,.c3.vist .c3-h2,.c3.vist .c3-citat,.c3.vist .c3-note,.c3.vist .c3-fod{opacity:1;transform:none}
.c3.vist .c3-h2{transition-delay:.09s}
.c3.vist .c3-citat{transition-delay:.20s}
.c3.vist .c3-note{transition-delay:.30s}
.c3.vist .c3-fod{transition-delay:.38s}

@media (max-width:900px){
  .c3{display:block;min-height:0;padding:0 0 56px}
  .c3-foto{position:relative;width:100%;height:46vh;margin-bottom:30px}
  .c3-foto::after{background:linear-gradient(180deg,rgba(60,42,68,.25),rgba(60,42,68,.85))}
  .c3-in{padding:0 24px}
  .c3-txt{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .c3-eye,.c3-h2,.c3-citat,.c3-note,.c3-fod{transition:none;opacity:1;transform:none}
  .c3-note em{transition:none}
  .c3-foto img,.c3-lag{transform:none !important;transition:none}
}
/* fotovælger (kun testside) */
.c3p{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:9999;display:flex;gap:6px;padding:6px;
  border-radius:12px;background:rgba(255,255,255,.96);border:1px solid #E7DCD2;box-shadow:0 14px 40px rgba(30,20,30,.16);
  font:12.5px/1.2 -apple-system,BlinkMacSystemFont,sans-serif;color:#3C2A44}
.c3p button{all:unset;cursor:pointer;padding:8px 12px;border-radius:8px;min-height:40px;display:flex;align-items:center;white-space:nowrap}
.c3p button:hover{background:#F6EFE8}
.c3p button[aria-pressed="true"]{background:#3C2A44;color:#fff}