/* FAKTIVE sektion 4 2026: "Ansvaret" som tre opslag.
   Hører sammen med assets/sektion4-2026.js. Teksten er uændret fra originalen;
   uden JavaScript står sektionen, som den gjorde før.
   De to første situationer er opslag med fotoet ud til hver sin skærmkant,
   og svaret er ét bredt foto med teksten ovenpå.
   Farverne er valgt efter målt kontrast: brødtekst 6,5:1, lovtekst 5,2:1,
   kobber til småtekst 4,8:1, rubrik 10,7:1. */
#ansvar.s4c{padding:0 !important;background:#FDF8F2 !important;position:relative}
.s4c{position:relative}

/* ---- indledningen ---- */
.s4c-top{max-width:1200px;margin:0 auto;padding:clamp(76px,7.6vw,118px) 32px clamp(46px,4.6vw,72px)}
.s4c-eye{margin:0 0 20px;font-family:var(--font-mono,monospace);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:#B23F14;font-weight:600}
.s4c-h2{margin:0;font-family:var(--font-display);font-stretch:112%;font-weight:600;
  font-size:clamp(31px,3.6vw,56px);line-height:1.15;color:#3C2A44;letter-spacing:-.015em;max-width:15em}
.s4c-lede{margin:26px 0 0;font-size:18.5px;line-height:1.7;color:#5C4F48;font-weight:300;max-width:33em}
.s4c-regel{margin-top:clamp(40px,4vw,64px);height:1px;background:rgba(60,42,68,.2);
  transform:scaleX(0);transform-origin:left center;transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
.s4c-top.vist .s4c-regel{transform:none}

/* ---- de to første opslag: billedet går helt ud til skærmkanten ---- */
.s4c-opslag{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.s4c-opslag + .s4c-opslag{border-top:1px solid rgba(60,42,68,.14)}
.s4c-foto{position:relative;overflow:hidden;margin:0;min-height:clamp(440px,54vw,720px);background:#E7DACF}
.s4c-lag{position:absolute;inset:0;overflow:hidden;transform:scale(1.12);
  transition:transform 1.9s cubic-bezier(.16,1,.3,1) .08s}
.s4c-opslag.vist .s4c-lag,.s4c-svar.vist .s4c-lag{transform:none}
.s4c-foto img{position:absolute;left:0;top:-5%;width:100%;height:110%;object-fit:cover;display:block;
  will-change:transform}

/* dugen: en cremeflade der trækkes væk og afdækker billedet, med en kobberkant forrest */
.s4c-dug{position:absolute;inset:-1px;z-index:3;background:#FDF8F2;pointer-events:none;
  transition:transform 1.25s cubic-bezier(.76,0,.24,1)}
.s4c-opslag.venstre .s4c-dug{border-right:2px solid #E45724}
.s4c-opslag.venstre.vist .s4c-dug{transform:translate3d(-101%,0,0)}
.s4c-opslag.hoejre .s4c-dug{border-left:2px solid #E45724}
.s4c-opslag.hoejre.vist .s4c-dug{transform:translate3d(101%,0,0)}
.s4c-krop{position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(52px,5.6vw,96px) clamp(30px,4.2vw,68px)}
.s4c-opslag.venstre .s4c-krop{padding-right:max(32px,calc((100vw - 1200px)/2 + 32px))}
.s4c-opslag.hoejre .s4c-foto{order:2}
.s4c-opslag.hoejre .s4c-krop{order:1;padding-left:max(32px,calc((100vw - 1200px)/2 + 32px))}

/* tallet ligger som et vandmærke bag teksten og driver langsomt */
.s4c-ind{position:relative;z-index:1;max-width:33em}

/* situationsmærket sættes som kapitelmærket i menuen */
.s4c-k{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;
  font-family:var(--font-text);font-stretch:100%;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:#B23F14;font-weight:600}
.s4c-k b{color:#6B5D55;font-weight:600}
.s4c-h3{margin:0 0 18px;font-family:var(--font-display);font-stretch:108%;font-weight:600;
  font-size:clamp(24px,2.3vw,33px);line-height:1.22;color:#3C2A44;letter-spacing:-.011em}
.s4c-p{margin:0 0 15px;font-size:16.5px;line-height:1.74;color:#5C4F48;font-weight:300}
/* lovnoten står i samme skrift som brødteksten ovenover, bare i kursiv */
.s4c-law{margin-top:26px;padding:4px 0 4px 18px;border-left:2px solid rgba(178,63,20,.45);
  font-family:var(--font-text);font-stretch:100%;font-style:italic;font-weight:300;
  font-size:15.5px;line-height:1.7;color:#6B5D55;max-width:32em}
.s4c-law b{color:#3C2A44;font-weight:600;font-style:italic}

/* ---- svaret: ét bredt billede med teksten ovenpå ---- */
.s4c-svar{position:relative;display:flex;flex-direction:column;overflow:hidden;
  min-height:clamp(600px,88svh,940px)}
.s4c-svar .s4c-foto{position:absolute;inset:0;min-height:0}
.s4c-svar .s4c-foto img{left:-5%;width:110%;top:-6%;height:112%}
.s4c-slor{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(33,22,40,.92) 0%,rgba(33,22,40,.72) 22%,rgba(33,22,40,0) 46%),
    linear-gradient(266deg,rgba(38,26,45,.94) 0%,rgba(41,28,48,.88) 32%,rgba(45,31,52,.55) 60%,rgba(45,31,52,.24) 100%);
  transition:opacity 1.2s ease}
.s4c-svar .s4c-krop{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;flex:1;
  display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:clamp(56px,6vw,92px) 32px clamp(40px,4vw,64px)}
.s4c-svar .s4c-ind{max-width:31em;margin-left:auto}
.s4c-svar .s4c-k{color:#F2A17E}
.s4c-svar .s4c-k b{color:rgba(242,231,220,.6)}
.s4c-svar .s4c-h3{color:#FDF8F2;font-size:clamp(27px,2.7vw,40px)}
.s4c-svar .s4c-p{color:#E2D5CC;font-size:17px}
.s4c-svar .s4c-law{color:#C9B6AB;border-left-color:rgba(242,161,126,.5)}
.s4c-svar .s4c-law b{color:#FDF8F2}

/* ---- FAKTIVEs linje: slutlinje langs billedets underkant ----
   En tynd linje tegner sig ind fra venstre. Sætningen står samlet nederst til venstre:
   første sætning stort i sidens rubrikskrift, fortsættelsen lige under i let brødtekst
   med samme venstrekant, så den læses i ét stræk. Blokken holder sig i venstre halvdel,
   fri af svarets spalte. Creme og lys kobber mod det mørke slør: over 7:1. */
.s4c-baand{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;
  padding:0 32px clamp(44px,4.6vw,72px)}
.s4c-baand-regel{display:block;height:1px;background:rgba(242,231,220,.26);
  transform:scaleX(0);transform-origin:left center;transition:transform 1.4s cubic-bezier(.16,1,.3,1) .2s}
.s4c-svar.vist .s4c-baand-regel{transform:none}
.s4c-close{margin:clamp(24px,2.4vw,34px) 0 0;max-width:34em;font-size:17px}
.s4c-close-hoved{display:block;font-family:var(--font-display);font-stretch:125%;font-weight:520;
  font-size:clamp(30px,3.5vw,52px);line-height:1.04;letter-spacing:-.02em;color:#FDF8F2;text-wrap:balance}
.s4c-close-rest{display:block;margin-top:clamp(12px,1.2vw,16px);font-size:17.5px;line-height:1.6;font-weight:300;
  color:#E8DDD5;text-wrap:pretty}
.s4c-close-rest em{font-style:normal;font-weight:500;color:#F2A17E}

/* ---- indgang: hvert lag kommer for sig, med hver sin kurve ---- */
.s4c-anim{opacity:0;transform:translateY(22px)}
.s4c-anim.vist{opacity:1;transform:none}
.s4c-k.s4c-anim{transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.s4c-h3.s4c-anim{transition:opacity .8s ease .06s,transform .95s cubic-bezier(.16,1,.3,1) .06s}
.s4c-p.s4c-anim{transition:opacity .8s ease .14s,transform .9s cubic-bezier(.22,1,.36,1) .14s}
.s4c-law.s4c-anim{transition:opacity .9s ease .24s,transform 1s cubic-bezier(.22,1,.36,1) .24s}
.s4c-eye.s4c-anim,.s4c-h2.s4c-anim,.s4c-lede.s4c-anim{
  transition:opacity .85s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.s4c-close.s4c-anim{transition:opacity .9s ease .34s,transform 1s cubic-bezier(.22,1,.36,1) .34s}
.s4c-h2.s4c-anim{transition-delay:.05s}
.s4c-lede.s4c-anim{transition-delay:.12s}

/* ---- mobil: billedet over teksten, men bevægelsen bliver ---- */
@media (max-width:900px){
  .s4c-top{padding:64px 24px 34px}
  .s4c-h2{font-size:clamp(27px,7.2vw,37px)}
  .s4c-lede{font-size:17.5px;margin-top:20px}
  .s4c-regel{margin-top:32px}
  .s4c-opslag{grid-template-columns:1fr}
  .s4c-foto{min-height:0;aspect-ratio:4/3}
  .s4c-opslag.hoejre .s4c-foto{order:0}
  .s4c-opslag.hoejre .s4c-krop{order:1;padding-left:24px}
  .s4c-opslag.venstre .s4c-krop{padding-right:24px}
  .s4c-krop{padding:34px 24px 48px}
  /* svarets spalte står til venstre under 900px, ligesom slutlinjen under den */
  .s4c-svar .s4c-ind{margin-left:0}
  .s4c-ind,.s4c-law{max-width:none}
  .s4c-svar{min-height:0}
  /* svarets foto er baggrund for hele svaret; 4:3-udsnittet gælder kun opslagenes fotos */
  .s4c-svar .s4c-foto{aspect-ratio:auto}
  .s4c-svar .s4c-krop{padding:56px 24px 64px}
  .s4c-slor{background:linear-gradient(180deg,rgba(38,26,45,.72) 0%,rgba(41,28,48,.9) 46%,rgba(41,28,48,.95) 100%)}
  .s4c-baand{padding:0 24px 56px}
  .s4c-close{max-width:none}
  .s4c-close-hoved{font-size:clamp(28px,7.4vw,36px)}
}
@media (prefers-reduced-motion:reduce){
  .s4c-anim{opacity:1 !important;transform:none !important;transition:none !important}
  .s4c-regel,.s4c-baand-regel{transform:none !important;transition:none}
  .s4c-foto img,.s4c-lag{transform:none !important;transition:none}
  .s4c-dug{display:none}
}