/* Felles "Ta kontakt"-CTA med malt penselstrøk-uttrykk (én kilde for alle sider).
   Lenkes i <head> ETTER sidens <style>, slik at disse reglene vinner over
   sidens enkle .cta-regler i kaskaden. Bruker fargevariablene som allerede er
   definert i :root på hver side (--oransje, --skog, --blek, --krem).

   KANTFARGER: bunnkantens <path fill> er alltid var(--skog) (footeren er skog
   på alle sider). Toppkantens <path fill> settes INLINE i markupen per side og
   skal være bakgrunnsfargen til seksjonen som ligger rett over CTA-en
   (index: --blek, om-oss: --krem, bakgrunn: --hvit, for-familien: --blek).
   Endres seksjonsrekkefølgen på en side, må toppkant-fillen endres der.

   Alt det oransje (fyll, tekstur, kant-SVG-er) ligger i .cta-paint, slik at
   hele "malingen" kan klippes samlet av strøk-animasjonen i assets/cta.js. */

.cta{position:relative;overflow:hidden;color:#3a2a06;text-align:center;background:var(--krem)}
.cta-paint{position:absolute;inset:0;z-index:0;
  background:linear-gradient(178deg,#f0a63a 0%,var(--oransje) 45%,#e8971f 100%)}
.cta-paint::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(-8deg,
    rgba(150,90,10,0.05) 0 2px, transparent 2px 10px);
  mix-blend-mode:multiply;opacity:.5}
.cta .brush-edge{position:absolute;left:0;width:100%;height:46px;z-index:1;pointer-events:none;display:block;overflow:visible}
.cta .brush-edge.topp{top:-1px}
.cta .brush-edge.bunn{bottom:-1px}

/* "kost-glimt": smalt, mykt bånd som følger avdekkingsfronten under strøket */
.cta-glint{position:absolute;top:-8%;bottom:-8%;left:0;width:44px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,246,230,.9),rgba(255,255,255,0));
  filter:blur(6px);mix-blend-mode:soft-light;opacity:0;transform:translateX(-60px)}

.cta .wrap{position:relative;z-index:2;padding:clamp(3.5rem,7vw,5.5rem) clamp(1.25rem,4vw,2.5rem)}

/* starttilstand for strøk-animasjonen — gated bak .js-anim (settes av det lille
   inline-scriptet i <head>; cta.js fjerner klassen hvis GSAP mangler), så siden
   uten JS viser CTA-en fullt fra start */
.js-anim .cta-paint{clip-path:inset(0 100% 0 0)}
.js-anim .cta .wrap{opacity:0}

@media(max-width:860px){
  .cta .brush-edge{height:30px}
  .cta .wrap{padding-top:4rem;padding-bottom:4rem}
}
@media(prefers-reduced-motion:reduce){
  .js-anim .cta-paint{clip-path:none}
  .js-anim .cta .wrap{opacity:1}
}
