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


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

.lp-boxes {
  display: grid;

  gap: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.lp-boxes > div {
  border-radius: 6px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0 0 0rem;
  overflow: hidden;
}

.lp-boxes .sv-image-portlet {
  /* fix för IE11 */
  flex: 0 0 auto;
}

.lp-boxes > .sv-layout > .sv-text-portlet,
.lp-boxes > .sv-layout > .sv-layout {
  background: var(--ak-salvia-10);/*#477e62;*/
  height: 100%;
  padding: 3rem;
}

.lp-boxes .sv-text-portlet:not(:last-child) {
  margin: 0 0 1.5rem !important;
}

.lp-boxes h2.subheading,
.lp-boxes h3.heading3 {
  font-size: 2.2rem;
  margin: 0 !important;
}

.lp-boxes h2.subheading a,
.lp-boxes h3.heading3 a {
  box-sizing: border-box;
  /*color: #fff;*/
  text-decoration: none;
}

.lp-boxes h2.subheading a:before,
.lp-boxes h3.heading3 a:before {
  background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D\'0%200%2021%2019\'%20xmlns%3D\'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\'%20fill%3D\'%23ffffff\'%3E%3Cpath%20%20transform%3D%22rotate(90%20363.585%20192.293)%22%20d%3D%22M180.585%20535.415l-9%208.93%202.704%202.682%204.384-4.35v12.494h3.824v-12.494l4.385%204.35%202.703-2.683z%22%2F%3E%3C%2Fsvg%3E');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: inline-block;
  height: 0.8em;
  margin-bottom: -2px;
  margin-right: 1rem;
  width: 0.8em;
}

/*
---------------------------------------------------------
BILDPUFFAR PÅ STARTSIDOR
--------------------------------------------------------- */

.lp-startpage .lp-boxes,
.sv-template-startsida---underwebb .lp-boxes,
.sv-template-startsida-underwebb-med-kollagemeny .lp-boxes {
  display: grid;
  margin: 0;
  /* grid-auto-rows: 1fr; */

  gap: 3rem;
  grid-auto-flow: dense;
  grid-template-columns: repeat(5, 1fr);
}

.lp-startpage .lp-boxes > .sv-layout,
.sv-template-startsida---underwebb .lp-boxes > .sv-layout,
.sv-template-startsida-underwebb-med-kollagemeny .lp-boxes > .sv-layout {
  margin: 0;
  min-width: 0;
  padding: 0;
  position: relative;
  width: auto;

  grid-column: span 2;
  grid-row: span 2;
}

.sv-template-startsida---underwebb .lp-boxes > .sv-layout,
.sv-template-startsida-underwebb-med-kollagemeny .lp-boxes > .sv-layout {
  border-radius: 0;
}

.lp-startpage .lp-boxes .sv-image-portlet,
.sv-template-startsida---underwebb .lp-boxes .sv-image-portlet,
.sv-template-startsida-underwebb-med-kollagemeny .lp-boxes .sv-image-portlet {
  display: block;

  flex: 1 1 auto;
}

.sv-template-startsida---underwebb .lp-boxes > .sv-layout:not(:first-child) .sv-image-portlet,
.sv-template-startsida-underwebb-med-kollagemeny .lp-boxes > .sv-layout:not(:first-child) .sv-image-portlet {
  max-height: 34rem;
}

.lp-startpage .lp-boxes .sv-image-portlet img,
.sv-template-startsida---underwebb .lp-boxes .sv-image-portlet img,
.sv-template-startsida-underwebb-med-kollagemeny .lp-boxes .sv-image-portlet img {
  height: 100%;
  max-height: 100%;
  max-width: 100%;

  object-fit: cover;
}

.lp-startpage .lp-boxes .subheading,
.lp-startpage .lp-boxes.heading3,
.sv-template-startsida---underwebb .lp-boxes .subheading,
.sv-template-startsida---underwebb .lp-boxes.heading3,
.sv-template-startsida-underwebb-med-kollagemeny .lp-boxes .subheading,
.sv-template-startsida-underwebb-med-kollagemeny .lp-boxes.heading3 {
  font-size: 3rem;
}

.lp-startpage .lp-boxes > .sv-layout:first-child,
.sv-template-startsida---underwebb .lp-boxes > .sv-layout:first-child,
.sv-template-startsida-underwebb-med-kollagemeny .lp-boxes > .sv-layout:first-child {
  grid-column: span 3;
  grid-row: span 4;
}

.lp-startpage .lp-boxes > .sv-layout:first-child .subheading {
  font-size: 4.2rem;
}

.sv-template-startsida---underwebb:not(.sv-edit-mode) .lp-boxes > .sv-layout > .sv-text-portlet,
.sv-template-startsida---underwebb:not(.sv-edit-mode) .lp-boxes > .sv-layout > .sv-layout,
.sv-template-startsida-underwebb-med-kollagemeny:not(.sv-edit-mode) .lp-boxes > .sv-layout > .sv-text-portlet,
.sv-template-startsida-underwebb-med-kollagemeny:not(.sv-edit-mode) .lp-boxes > .sv-layout > .sv-layout {
  align-items: flex-end;
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(255,255,255,0) 99.92%);
  bottom: 0;
  box-sizing: border-box;
  display: flex;
  height: auto;
  height: 60%;
  left: 0;
  position: absolute;
  right: 0;
}

/*
---------------------------------------------------------
PUFF
--------------------------------------------------------- */

.lp-box {
  background-color: var(--ak-salvia-10);
  border-radius: 4px;
  margin-bottom: 3rem;
  padding: 3rem;
}

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

div[class*=sv-theme] > .lp-box {
  background-color: var(--env-element-primary-background-color);
}

div[class*=sv-theme] > .lp-box .subheading,
div[class*=sv-theme] > .lp-box .heading3,
div[class*=sv-theme] > .lp-box .heading4,
div[class*=sv-theme] > .lp-box .preamble,
div[class*=sv-theme] > .lp-box .normal,
div[class*=sv-theme] > .lp-box .small {
  color: var(--env-element-font-color);
}


/*
---------------------------------------------------------
GUL BAKGRUND
--------------------------------------------------------- */

.lp-yellow-bg {
  padding: 8rem 0;
  position: relative;
}

.lp-content .lp-yellow-bg:last-child,
.pagecontent > .lp-yellow-bg:last-child {
  margin-bottom: calc(-20vw - 6rem);
  padding: 8rem 0 calc(6rem + 20vw);
}

.lp-yellow-bg:after {
  /*  background: linear-gradient(0deg, #fff 0%, #faf6eb 100%); */
  background: #faf6eb;
  bottom: 0;
  content: '';
  display: block;
  left: calc(50% - var(--lp-50vw));
  position: absolute;
  top: 0;
  width: var(--lp-100vw);
  z-index: -2;
}

/*
---------------------------------------------------------
SECONDARY BAKGRUND
--------------------------------------------------------- */

.lp-secondary-bg {
  padding: 8rem 0;
  position: relative;
}

.lp-content .lp-secondary-bg:last-child,
.pagecontent > .lp-secondary-bg:last-child {
  margin-bottom: calc(-20vw - 6rem);
  padding: 8rem 0 calc(6rem + 20vw);
}

.lp-secondary-bg:after {
  background: var(--env-element-secondary-background-color);
  bottom: 0;
  content: '';
  display: block;
  left: calc(50% - var(--lp-50vw));
  position: absolute;
  top: 0;
  width: var(--lp-100vw);
  z-index: -1;
}

.lp-secondary-bg > .sv-layout > .sv-text-portlet > .sv-text-portlet-content > .subheading {
  color: var(--env-element-primary-background-color);
  font-size: 3.8rem;
}

/*
---------------------------------------------------------
BAKGRUND IKON
--------------------------------------------------------- */

.lp-icon-bg {
  align-items: center;
  background: #fff;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  margin-right: 0.6em;
  padding: 0.8rem;

  justify-content: center;
}

/*
---------------------------------------------------------
ÄK TILLÄGG
--------------------------------------------------------- */

/* Skugga cruncho lista */

.ak-box-shadow .lp-cruncho-item,
.ak-box-shadow .lp-crucho-list-message {
  box-shadow: 0 6px 9px 0 rgb(0 0 0 / 27%);
}