/*
=========================================================
DECORATIONS CSS
=========================================================
 * Innehåller styling av dekorationer
 *
 * Copyright (C) Limepark AB.
 * https://limepark.se/licensvillkor
=========================================================*/


/*
---------------------------------------------------------
BILDPUFFAR
--------------------------------------------------------- */


[class*='lp-boxes'] {
  display: grid;
  margin: 3rem 0 2rem;

  gap: 3rem;
  grid-template-columns: var(--lp-grid-default);
}

body.sv-theme-cirkulart [class*='lp-boxes'] {
  grid-template-columns: repeat(auto-fill,minmax(25rem, 1fr));
}

[class*='lp-boxes'] > div {
  background-color: var(--lp-box-background-color);
  border-radius: var(--lp-boxes-border-radius);
  box-shadow: 0 3px 6px rgb(0 0 0 / 10%);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0;
  transition: box-shadow 0.5s ease;
}

.lp-js [class*='lp-boxes'] > div:hover {
  box-shadow: 0 2px 3px rgb(0 0 0 / 20%);
}

[class*='lp-boxes'] > .sv-layout > .sv-text-portlet,
[class*='lp-boxes'] > .sv-layout > .sv-layout {
  border-radius: 0 0 var(--lp-boxes-border-radius) var(--lp-boxes-border-radius);
  height: 100%;
  padding: var(--lp-boxes-padding);
}

[class*='lp-boxes'] .sv-image-portlet img {
  border-radius: var(--lp-boxes-border-radius) var(--lp-boxes-border-radius) 0 0;
  height: 200px;

  -o-object-fit: cover;
  object-fit: cover;
}

[class*='lp-boxes'] .sv-text-portlet:not(:last-child) {
  margin: 0 0 1.5rem !important;
}

[class*='lp-boxes'] .sv-use-margins .normal:last-child,
[class*='lp-boxes'] .sv-old-text-portlet .normal:last-child {
  margin: 0;
}

[class*='lp-boxes'] h2.subheading {
  font-size: 2.2rem;
  line-height: 1.5;
  margin: 0 !important;
}

[class*='lp-boxes'] h2.subheading a {
  box-sizing: border-box;
  color: var(--env-link-font-color);
  display: inline;
  text-decoration: underline;
  transition: all ease 0.4s;

  text-decoration-color: var(--lp-link-font-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

[class*='lp-boxes'] h2.subheading a:hover,
[class*='lp-boxes'] > div.lp-clickable-area:hover .subheading a {
  text-decoration-thickness: 3px;
}

/*
.lp-boxes h2.subheading a:after {
  background-image: var(--lp-icon-arrow-link-color);
  background-position: 0 4px;
  background-repeat: no-repeat;
  content: '';
  display: inline-block;
  height: 1em;
  margin-left: 0.5rem;
  margin-right: -3.4rem;
  width: 2.9rem;
}*/

[class*='lp-boxes'] p.normal {
  line-height: 1.5;
  margin-top: 0.7em !important;
}

/*
---------------------------------------------------------
RUNDA BILDPUFFAR
--------------------------------------------------------- */

body .lp-boxes--round {
  --lp-half-img-size: calc(var(--lp-grid-column-min-width-default) / 2);
}

body .lp-boxes--round .sv-image-portlet img {
  border-radius: 50%;
  box-shadow: 10px 10px 0 var(--lp-color-3);
  display: block;
  height: var(--lp-grid-column-min-width-default);
  margin: calc(var(--lp-half-img-size) * -1) auto 0.5rem;
  transition: box-shadow 0.5s ease;
  width: var(--lp-grid-column-min-width-default);
}

.lp-js body .lp-boxes--round > div:hover .sv-image-portlet img {
  box-shadow: 3px 2px 0 var(--lp-color-1);
}

body .lp-boxes--round > div {
  margin-top: var(--lp-half-img-size);
}

body .lp-boxes--round p.normal,
body .lp-boxes--round h2.subheading {
  text-align: center;
}

/*
---------------------------------------------------------
"RUTA"-DEKORATIONER
Generellt:
--------------------------------------------------------- */

div[class^='lp-box-decoration-'],
div[class*=' lp-box-decoration-'] {
  border-radius: var(--lp-border-radius);
  margin-bottom: var(--lp-spacing);
  padding: var(--lp-spacing);
}

div[class^='lp-box-decoration-']  h2.subheading,
div[class*=' lp-box-decoration-'] h2.subheading,
div[class^='lp-box-decoration-']  h3.heading3,
div[class*=' lp-box-decoration-'] h3.heading3 {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: var(--lp-spacing-x-small);
}

div[class*=' lp-box-decoration-'].sv-use-margins .normal:last-child,
div[class*=' lp-box-decoration-'] > div:last-child,
/* Sista textmodulens sista text-element */
div[class*=' lp-box-decoration-'] .sv-text-portlet:last-child .sv-text-portlet-content *:last-child {
  margin-bottom: 0;
}


/* Ruta: Fakta
--------------------------------------------------------- */

.lp-box-decoration-facts {
  background-color: var(--lp-box-decoration-facts-background-color);
  color: var(--lp-box-decoration-facts-font-color);
}

/* Ruta: Kontakta kundtjänst
--------------------------------------------------------- */

.lp-box-decoration-customer-service {
  background-color: var(--lp-box-decoration-customer-service-background-color);
  color: var(--lp-box-decoration-customer-service-font-color);
}

/* Ruta: Adress
--------------------------------------------------------- */

.lp-box-decoration-address {
  border: 2px dashed var(--lp-box-decoration-address-theme-color);
  color: var(--lp-box-decoration-address-font-color);
  margin-bottom: calc(var(--lp-spacing) + var(--lp-address-box-negative-padding)) !important;
  margin-top: var(--lp-address-box-negative-padding-double);
  position: relative;

  --lp-address-box-negative-padding: 1rem;
  --lp-address-box-negative-padding-double: calc(var(--lp-address-box-negative-padding) * 2);
}

.lp-box-decoration-address:after {
  background-color: var(--lp-box-decoration-address-theme-color);
  border-radius: calc(var(--lp-border-radius) * 1.2);
  content: '';
  display: block;
  height: calc(100% + var(--lp-address-box-negative-padding-double));
  left: calc(var(--lp-address-box-negative-padding) * -1);
  opacity: 0.1;
  position: absolute;
  top: calc(var(--lp-address-box-negative-padding) * -1);
  width: calc(100% + var(--lp-address-box-negative-padding-double));
  z-index: -1;
}


/* Ruta: Knappar
--------------------------------------------------------- */
.lp-box-decoration-buttons {
  border: 1px solid  var(--lp-color-1);
}

/* Ruta: Instruktioner
--------------------------------------------------------- */
.lp-box-decoration-instructions {
  border: 1px solid var(--lp-box-decoration-instruction-theme-color);
  border-radius: var(--lp-border-radius);
  color: var(--lp-box-decoration-instruction-font-color);
  position: relative;
}

.lp-box-decoration-instructions:after {
  background-color: var(--lp-box-decoration-instruction-theme-color);
  border-radius: inherit;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  opacity: 0.1;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

/*
---------------------------------------------------------
KONTAKTLISTA
--------------------------------------------------------- */

.lp-contact-list {
  display: grid;
  margin: 3rem 0 4rem;

  gap: clamp(2rem, 6vw, 4rem);
  grid-template-columns: repeat(auto-fill,minmax(12rem,1fr));
}

.lp-contact-list .sv-image-portlet {
  margin-bottom: 1rem;
}

.lp-contact-list .heading3,
.lp-contact-list .subheading {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 0.4em;
}

.lp-contact-list .heading3 a,
.lp-contact-list .subheading a {
  color: var(--env-link-font-color);
  text-decoration: underline;
  transition: all ease 0.4s;

  text-decoration-color: var(--lp-link-font-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.lp-contact-list .heading3 a:hover,
.lp-contact-list .subheading a:hover {
  text-decoration-thickness: 3px;
}

.lp-contact-list .normal {
  font-size: 1.6rem;
  margin-bottom: 0.3em;
}

.lp-contact-list .normal a {
  color: var(--env-link-font-color);
  overflow-wrap: break-word;
}

.lp-contact-list > .sv-layout > .sv-text-portlet:last-child .normal:last-child {
  margin-bottom: 0;
}

/*
---------------------------------------------------------
STOR BILDPUFF
--------------------------------------------------------- */

.sv-layout.lp-large-boxes {
  display: flex;
  flex-direction: column;
  gap: var(--lp-spacing);
  margin-bottom: clamp(3rem, 5vw, 5rem);
}

.sv-layout.lp-large-boxes .sv-text-portlet,
.sv-layout.lp-large-boxes .sv-text-portlet .normal {
  max-width: 100%;
}

.lp-large-boxes h2.subheading {
  font-size: clamp(2.8rem, 4.2vw, 4.2rem);
  font-weight: 700;
}

.lp-large-boxes h2.subheading a {
  color: var(--env-font-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: all ease .4s;
}

.lp-large-boxes h2.subheading a:hover,
.lp-large-boxes.lp-clickable-area:hover h2.subheading a {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 3px;
}

.lp-large-boxes .normal {
  font-size: clamp(1.8rem, 2vw, 2rem);
}

.lp-large-boxes > .sv-text-portlet .normal:last-child {
  margin-bottom: 0;
}

.lp-large-boxes .sv-image-portlet {
  border-radius: var(--lp-boxes-border-radius);
  overflow: hidden;
}

.lp-large-boxes .sv-image-portlet img {
  transition: all 0.4s ease;
}

.lp-large-boxes.lp-clickable-area:hover .sv-image-portlet img {
  transform: scale(1.02);
}

/*
---------------------------------------------------------
BILDPUFF - BILD HÖGER/VÄNSTER
--------------------------------------------------------- */

.sv-layout.lp-image-right-boxes,
.sv-layout.lp-image-left-boxes {
  display: grid;
  grid-template-columns: 50% 50%;
  margin-bottom: clamp(3rem, 5vw, 5rem);
}

.sv-layout.lp-image-right-boxes .sv-text-portlet {
  padding-right: clamp(2rem, 3vw, 3rem);
  order: -1;
}

.sv-layout.lp-image-left-boxes .sv-text-portlet {
  padding-left: clamp(2rem, 3vw, 3rem);
  order: 1;
}

.lp-image-right-boxes h2.subheading,
.lp-image-left-boxes  h2.subheading {
  font-size: clamp(2.2rem, 3.5vw, 3.5rem);
  font-weight: 700;
}

.lp-image-right-boxes h2.subheading a,
.lp-image-left-boxes  h2.subheading a {
  color: var(--env-font-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: all ease .4s;
}

.lp-image-right-boxes h2.subheading a:hover,
.lp-image-left-boxes  h2.subheading a:hover,
.lp-image-right-boxes.lp-clickable-area:hover h2.subheading a,
.lp-image-left-boxes.lp-clickable-area:hover h2.subheading a {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 3px;
}

.lp-image-right-boxes > .sv-text-portlet .normal:last-child,
.lp-image-left-boxes > .sv-text-portlet .normal:last-child {
  margin-bottom: 0;
}

.lp-image-right-boxes .sv-image-portlet,
.lp-image-left-boxes .sv-image-portlet {
  border-radius: var(--lp-boxes-border-radius);
  overflow: hidden;
}

.lp-image-right-boxes .sv-image-portlet img,
.lp-image-left-boxes .sv-image-portlet img {
  transition: all ease .4s;
}

.lp-image-right-boxes.lp-clickable-area:hover .sv-image-portlet img,
.lp-image-left-boxes.lp-clickable-area:hover .sv-image-portlet img {
  transform: scale(1.03);
}

/*
---------------------------------------------------------
TEXT MED GRAFIK
--------------------------------------------------------- */

.lp-graphic-text {
  background-color: rgba(255, 222, 191, 0.25);
  margin-top: clamp(3rem, 6vw, 6rem);
  margin-bottom: clamp(3rem, 6vw, 6rem);
  position: relative;
  isolation: isolate;
  padding: clamp(5rem, 10vw, 10rem);
}

.lp-graphic-text .sv-text-portlet-content .normal {
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  line-height: 1.6;
  text-align: center;
}

.lp-graphic-text > .sv-text-portlet-content .normal:last-child,
.lp-graphic-text .sv-text-portlet:last-child > .sv-text-portlet-content .normal:last-child {
  margin-bottom: 0;
}

.lp-graphic-text:before {
  background-image: url('/images/18.19874adc1991403e62ea2f/1757064455439/grafik-text-1.webp');

  background-size: 100%;
  aspect-ratio: 589/463;
  content: '';
  width: clamp(10rem, 20vw, 20rem);
  position: absolute;
  top: 0;
  left: 0;
}

.lp-graphic-text:after {
  content: '';
  background-image: url('/images/18.19874adc1991403e62ea33/1757064694816/grafik-text-2.webp');
  aspect-ratio: 488/463;
  background-size: 100%;
  width: clamp(10rem, 20vw, 20rem);
  position: absolute;
  bottom: 0;
  right: 0;
}