/*
-------------------------------------------
wf-sis-hero.css
-------------------------------------------

  Beskrivning: Stilregler för Hero på Sommar i Skeppsbron
  Skapad av: Webbfröken AB
  Webbadress: https://webbfroken.se

------------------------------------------- */


/*
-------------------------------------------
Hero på Sommar i Skeppsbron - TODO GÅ IGENOM FÄRGER OCH BAKGRUNDSBILDER SAMT KOMMENTAR
------------------------------------------- */

.wf-sis-hero {
  /* Bakgrundsfoto */
  height: 100vh;
  margin: calc(var(--wf-spacing-120) * -2) calc(var(--wf-page-edge-spacing) * -1) var(--wf-spacing-120);
  min-height: 960px;
}

.wf-sis-hero > .sv-layout {
  background-size: clamp(200px, 50vw, 657px);
  /* Bakgrundsfoto med blad */
  display: flex;
  flex-direction: column;
  height: 100%;

  justify-content: space-between;
}

.wf-sis-hero > .sv-layout > .sv-image-portlet {
  /* Logotyp */
  margin: 20rem auto 0;
  width: clamp(220px, 28vw, 330px);
}

.wf-sis-hero > .sv-layout > .sv-layout {
  /* Bakgrundsfade */
  background: rgba(9,42,53,0.6);
  padding-bottom: clamp(3rem, 6vw, 16rem);/* TODO*/
  padding-left: 2rem;/* TODO*/
  padding-right: 2rem;/* TODO*/
  padding-top: clamp(3rem, 6vw, 6rem); /* TODO*/
  position: relative;
}

.wf-sis-hero > .sv-layout > .sv-layout:before {
  background: linear-gradient(0deg,rgba(9,42,53,0.6) 0,rgba(9,42,53,0.6) 2%,rgba(9,42,53,0.2) 50%, rgba(9,42,53,0) 100%);
  content: '';
  display: block;
  height: 100px;
  left: -2rem;/* TODO*/
  padding: 0 2rem 0 0;/* TODO*/
  position: absolute;
  top: 0;
  transform: translateY(-100%);
  width: 100%;
}

.wf-sis-hero > .sv-layout > .sv-layout > .sv-layout {
  margin: 0 auto;
  /* Innehåll */
  max-width: var(--wf-grid-size);
}


.wf-sis-hero .env-text-summary-01 {
  color: #fff;
  font-size: clamp(2.6rem, 5vw, 4rem);/* TODO*/
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 0.6em !important;/* TODO*/
  max-width: 940px;/* TODO*/
}

.wf-sis-hero .env-button {
  background-color: rgba(9,42,53,0);
  border-color: var(--env-background-color);
  border-width: 4px;
  color: #fff;
  transition: background-color 0.3s ease;/* TODO*/
}

.wf-sis-hero .env-button:hover {
  background-color: rgba(9,42,53,0.6);
}


.wf-sis-hero .env-button:after {
  background-image: url('/images/18.4408d4b618e9de649b159f42/1713449173630/icon-scroll.svg');
  background-image: var(--wf-icon-scroll-fff);
  background-repeat: no-repeat;
  content: '';
  display: block;
  height: 36px;/* TODO*/
  margin-left: 1.5rem;/* TODO*/
  width: 18px;/* TODO*/
}


/* Specialare i desktop */
@media (max-width: 1440px) {
  /*.wf-content .wf-content-page { TODO mellanslag så den har aldrig använt, kolla om den behövs och ersätt med wf-sis-hero isåfall
    min-height: 850px;
  }*/
}


/* Mobil & Läsplatta */
@media (max-width: 1024px) {
  .wf-sis-hero {
    min-height: initial;
  }
}


/* Mobil */
@media (max-width: 800px) {
  .wf-sis-hero {
    height: 85vh;
  }

  .wf-sis-hero > .sv-layout {
    background-image: none;
  }

  .wf-sis-hero > .sv-layout > .sv-image-portlet {
    margin-top: 9rem;/* TODO*/
  }

  .wf-sis-hero .env-button:after {
    height: 28px;/* TODO*/
    width: 14px;/* TODO*/
  }
}


/*
-------------------------------------------
Läsplatta
------------------------------------------- */

@media screen and (max-width: 1024px) {
}



/*
-------------------------------------------
Mobil
------------------------------------------- */

@media screen and (max-width: 767px) {
}