/* =========================================================
   JMV & EFTERÅRSHIKE – TILMELDING / LEDERBREV
   RWD: 320px → 1920px+
========================================================= */

*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0}

html{width:100%;overflow-x:hidden;scroll-behavior:smooth}

body{
  width:100%;
  min-height:100vh;
  overflow-x:hidden;
  background:#5F8CB4;
  color:#fff;
  font-family:Arial,sans-serif;
  line-height:1.6;
}

/* =========================================================
   LINKS
========================================================= */

a{color:#fff}

.link{
  color:#FF733C;
  font-weight:600;
  text-decoration:underline;
  transition:.2s ease;
}

.link:hover{color:#003255}

/* =========================================================
   HORIZONTAL LINE
========================================================= */

hr{
  width:100%;
  margin:20px auto;
  border:0;
  border-top:5px solid #fff;
}

/* =========================================================
   IMAGES
========================================================= */

.image-container{
  width:min(100% - 30px,1400px);
  margin:25px auto;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(15px,4vw,60px);
  flex-wrap:wrap;
}

.pic3,
.left-image,
.right-image{
  display:block;
  width:100%;
  max-width:450px;
  height:auto;
  border-radius:8px;
  object-fit:contain;
  transition:transform .25s ease;
}

.pic3:hover,
.left-image:hover,
.right-image:hover{transform:scale(1.02)}

.right-image{margin-bottom:30px}

/* =========================================================
   MAIN CONTENT
========================================================= */

main{width:100%}

.content-section{
  width:min(calc(100% - 30px),1200px);
  margin:30px auto 60px;
  padding:clamp(20px,3vw,40px);
  background:rgba(0,50,85,.15);
  border-radius:12px;
}

.content-section h1,
.content-section h2,
.content-section h3{
  margin:0 0 15px;
  line-height:1.25;
  color:#fff;
}

.content-section h1{font-size:clamp(1.7rem,3vw,3rem)}
.content-section h2{font-size:clamp(1.3rem,2.3vw,2.2rem);margin-top:30px}
.content-section h3{font-size:clamp(1.1rem,2vw,1.4rem);margin-top:25px}

.content-section p{margin:0 0 15px}

.content-section ul{
  margin:0 0 20px;
  padding-left:25px;
}

.content-section li{margin-bottom:7px}

.content-section strong{color:#fff}

/* =========================================================
   NOTE / INFO
========================================================= */

.note{
  margin:20px 0;
  padding:15px 18px;
  border-left:4px solid #FF733C;
  background:rgba(255,255,255,.12);
  border-radius:6px;
}

/* =========================================================
   DOWNLOAD
========================================================= */

.download{
  width:min(calc(100% - 30px),850px);
  margin:35px auto;
  padding:clamp(20px,4vw,40px);
  text-align:center;
  border-radius:12px;
}

.download h2{
  margin-bottom:10px;
  color:#fff;
  font-size:clamp(1.5rem,3vw,2.2rem);
}

.download h3{
  margin-bottom:8px;
  color:#fff;
  font-size:clamp(1rem,2vw,1.2rem);
}

.download p{
  margin-bottom:15px;
  color:#fff;
}

/* =========================================================
   BUTTONS
========================================================= */

.button-container{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:clamp(10px,2vw,25px);
  width:100%;
}

.cta-button,
.cta-button-1,
.cta-button-2,
.download-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:12px clamp(16px,2vw,30px);
  border:0;
  border-radius:10px;
  color:#fff;
  text-align:center;
  text-decoration:none;
  font-size:clamp(13px,1.1vw,17px);
  font-weight:600;
  cursor:pointer;
  transition:background .25s ease,transform .2s ease,box-shadow .25s ease;
}

.cta-button{background:#4678C8}
.cta-button:hover{
  background:#7D878C;
  transform:translateY(-2px);
  box-shadow:0 5px 15px rgba(0,0,0,.2);
}

.cta-button-1{background:linear-gradient(90deg,#7D878C,#FF733C)}
.cta-button-1:hover{
  background:linear-gradient(90deg,#FF733C,#003255);
  transform:translateY(-2px);
  box-shadow:0 5px 15px rgba(0,0,0,.2);
}

.cta-button-2{background:linear-gradient(90deg,#FF733C,#7D878C)}
.cta-button-2:hover{
  background:linear-gradient(90deg,#7D878C,#4678C8);
  transform:translateY(-2px);
  box-shadow:0 5px 15px rgba(0,0,0,.2);
}

.download-btn{
  background:#4678C8;
  border-radius:6px;
}

.download-btn:hover{
  background:#7D878C;
  transform:translateY(-2px);
}

.cta-button:active,
.cta-button-1:active,
.cta-button-2:active,
.download-btn:active{transform:scale(.98)}

/* =========================================================
   TABLET – 768px+
========================================================= */

@media (min-width:768px){
  .image-container{flex-wrap:nowrap}

  .pic3,
  .left-image,
  .right-image{
    max-width:30%;
  }

  .button-container{flex-direction:row}

  .content-section{
    width:min(90% - 20px,1100px);
  }
}

/* =========================================================
   DESKTOP – 1280px+
========================================================= */

@media (min-width:1280px){
  .content-section{width:min(85%,1200px)}

  .pic3,
  .left-image,
  .right-image{
    max-width:25%;
  }

  .download{width:min(70%,850px)}
}

/* =========================================================
   LARGE DESKTOP – 1600px+
========================================================= */

@media (min-width:1600px){
  .content-section{width:min(80%,1300px)}

  .image-container{gap:60px}

  .pic3,
  .left-image,
  .right-image{
    max-width:300px;
  }
}

/* =========================================================
   1920px+
========================================================= */

@media (min-width:1920px){
  .content-section{width:min(75%,1400px)}

  .download{width:min(60%,900px)}

  .pic3,
  .left-image,
  .right-image{
    max-width:320px;
  }
}

/* =========================================================
   MOBILE – 767px
========================================================= */

@media (max-width:767px){
  .image-container{
    flex-direction:column;
    gap:20px;
  }

  .pic3,
  .left-image,
  .right-image{
    width:min(100%,400px);
    max-width:100%;
  }

  .content-section{
    width:calc(100% - 24px);
    margin:20px auto 40px;
    padding:20px 15px;
    text-align:left;
  }

  .button-container{
    flex-direction:column;
  }

  .cta-button,
  .cta-button-1,
  .cta-button-2,
  .download-btn{
    width:100%;
    max-width:400px;
  }

  .download{
    width:calc(100% - 24px);
    padding:20px 15px;
  }
}

/* =========================================================
   SMALL MOBILE – 480px
========================================================= */

@media (max-width:480px){
  hr{
    margin:15px auto;
    border-top-width:3px;
  }

  .content-section{
    width:calc(100% - 16px);
    padding:17px 12px;
    border-radius:8px;
  }

  .download{
    width:calc(100% - 16px);
    margin:25px auto;
    padding:20px 12px;
  }

  .content-section ul{padding-left:20px}

  .cta-button,
  .cta-button-1,
  .cta-button-2,
  .download-btn{
    padding:11px 15px;
    font-size:14px;
  }
}

/* =========================================================
   IPHONE 4 – 320px
========================================================= */

@media (max-width:360px){
  .image-container{
    width:calc(100% - 16px);
    gap:15px;
  }

  .pic3,
  .left-image,
  .right-image{
    max-width:280px;
  }

  .content-section{
    width:calc(100% - 12px);
    padding:15px 10px;
    margin-top:15px;
  }

  .content-section h1{font-size:1.45rem}
  .content-section h2{font-size:1.2rem}
  .content-section h3{font-size:1rem}
  .content-section p,
  .content-section li{
    font-size:13px;
    line-height:1.5;
  }

  .download{
    width:calc(100% - 12px);
    padding:18px 10px;
  }

  .download h2{font-size:1.3rem}
  .download h3{font-size:.95rem}
  .download p{font-size:13px}

  .cta-button,
  .cta-button-1,
  .cta-button-2,
  .download-btn{
    width:100%;
    min-height:42px;
    padding:10px;
    font-size:13px;
  }
}

/* =========================================================
   TOUCH
========================================================= */

@media (hover:none){
  .pic3:hover,
  .left-image:hover,
  .right-image:hover,
  .cta-button:hover,
  .cta-button-1:hover,
  .cta-button-2:hover,
  .download-btn:hover{
    transform:none;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,
  *::before,
  *::after{
    transition:none!important;
    animation:none!important;
  }
}