/*
=========================================================
FILTERABLE LIST CSS
=========================================================
 * Innehåller styling för Filtrerbar listning
 * 
 * Copyright (C) Limepark AB.
 * https://limepark.se/licensvillkor
=========================================================*/

/*
---------------------------------------------------------
METADATABOX
--------------------------------------------------------- */

div.limepark-webapp-metadata-box__app {
  padding: clamp(1.4rem, 3vw, 1.8rem) clamp(1.8rem, 3vw, 2.6rem);
  border-radius: 0;
  background-color: var(--env-block-primary-background-color);
  margin-top: 1.25rem;
}

.limepark-webapp-metadata-box__app .limepark-webapp-metadata-box__app__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.limepark-webapp-metadata-box__app .limepark-webapp-metadata-box__item__list-item {
  padding: 0;
  flex-wrap: wrap;
  gap: 0 0.4em;
  width: 100%;
  box-sizing: border-box;
}

.limepark-webapp-metadata-box__app .limepark-webapp-metadata-box__item__name {
  flex: 0 1 clamp(6rem, 10vw, 8rem);
}

.limepark-webapp-metadata-box__app .limepark-webapp-metadata-box__item__value {
  margin-left: 0;
  min-width: 10rem;
  flex: 1 1 1px;
  overflow-wrap: break-word;
}

.lp-metadatabox--icons {
  --lp-metadatabox__icon--clock: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20aria-hidden%3D%22true%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M24%204C12.972%204%204%2012.972%204%2024s8.972%2020%2020%2020%2020-8.972%2020-20S35.028%204%2024%204zm0%203c9.407%200%2017%207.593%2017%2017s-7.593%2017-17%2017S7%2033.407%207%2024%2014.593%207%2024%207zm-.523%204.979A1.5%201.5%200%200%200%2022%2013.5v12a1.5%201.5%200%200%200%201.5%201.5h8a1.5%201.5%200%201%200%200-3H25V13.5a1.5%201.5%200%200%200-1.523-1.521z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --lp-metadatabox__icon--pin: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20aria-hidden%3D%22true%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M24%204C14.63%204%207%2011.63%207%2021a16.94%2016.94%200%200%200%204.078%2011.031l.008.008.006.008s7.232%208.252%209.806%2010.709c1.725%201.644%204.477%201.644%206.202%200%202.934-2.8%209.81-10.713%209.81-10.713l.004-.006.006-.006A16.933%2016.933%200%200%200%2041%2021c0-9.37-7.63-17-17-17zm0%203c7.75%200%2014%206.25%2014%2014a13.9%2013.9%200%200%201-3.361%209.082c-.014.016-7.049%208.062-9.61%2010.504a1.462%201.462%200%200%201-2.06%200c-2.14-2.042-9.588-10.48-9.61-10.504l-.002-.002A13.91%2013.91%200%200%201%2010%2021c0-7.75%206.25-14%2014-14zm0%208c-1.875%200-3.471.757-4.496%201.91C18.479%2018.063%2018%2019.542%2018%2021c0%201.458.479%202.937%201.504%204.09S22.125%2027%2024%2027c1.875%200%203.471-.757%204.496-1.91C29.521%2023.937%2030%2022.458%2030%2021c0-1.458-.479-2.937-1.504-4.09S25.875%2015%2024%2015zm0%203c1.125%200%201.779.368%202.254.902.475.535.746%201.306.746%202.098%200%20.792-.271%201.563-.746%202.098-.475.534-1.129.902-2.254.902s-1.779-.368-2.254-.902C21.271%2022.563%2021%2021.792%2021%2021c0-.792.271-1.563.746-2.098C22.221%2018.368%2022.875%2018%2024%2018z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --lp-metadatabox__icon--calendar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20aria-hidden%3D%22true%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M12.5%206C8.928%206%206%208.928%206%2012.5v23c0%203.572%202.928%206.5%206.5%206.5h23c3.572%200%206.5-2.928%206.5-6.5v-23C42%208.928%2039.072%206%2035.5%206h-23zm0%203h23c1.95%200%203.5%201.55%203.5%203.5V14H9v-1.5C9%2010.55%2010.55%209%2012.5%209zM9%2017h30v18.5c0%201.95-1.55%203.5-3.5%203.5h-23C10.55%2039%209%2037.45%209%2035.5V17zm6.5%204a2.5%202.5%200%200%200%200%205%202.5%202.5%200%200%200%200-5zm8.5%200a2.5%202.5%200%200%200%200%205%202.5%202.5%200%200%200%200-5zm8.5%200a2.5%202.5%200%200%200%200%205%202.5%202.5%200%200%200%200-5zm-17%209a2.5%202.5%200%200%200%200%205%202.5%202.5%200%200%200%200-5zm8.5%200a2.5%202.5%200%200%200%200%205%202.5%202.5%200%200%200%200-5z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

.lp-metadatabox--icons .limepark-webapp-metadata-box__app {
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: -0.8rem;
  font-size: clamp(1rem, 3vw, 1.25rem);
}

a.limepark-webapp-metadata-box__item__value--mail {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.lp-metadatabox--icons .limepark-webapp-metadata-box__object {
  padding: 0;
}

.lp-metadatabox--icons .limepark-webapp-metadata-box__object__value {
  margin: 0;
}

.lp-metadatabox--icons .limepark-webapp-metadata-box__object__name {
  flex: initial;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-metadatabox--icons .limepark-webapp-metadata-box__object__name span {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}

.lp-metadatabox--icons .limepark-webapp-metadata-box__object__name:before {
  content: '';
  background-color: var(--env-font-color);
  mask-image: var(--lp-metadatabox__icon--calendar);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--lp-metadatabox__icon--calendar);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  width: 1em;
  height: 1em;
  margin-right: 0.2em;
  display: inline-block;
  flex-shrink: 0;
}

.lp-metadatabox--icons .limepark-webapp-metadata-box__object--tid .limepark-webapp-metadata-box__object__name:before {
  mask-image: var(--lp-metadatabox__icon--clock);
  -webkit-mask-image: var(--lp-metadatabox__icon--clock);
}

.lp-metadatabox--icons .limepark-webapp-metadata-box__object--plats .limepark-webapp-metadata-box__object__name:before {
  mask-image: var(--lp-metadatabox__icon--pin);
  -webkit-mask-image: var(--lp-metadatabox__icon--pin);
}

/*
---------------------------------------------------------
FILTRERBAR LISTNING
--------------------------------------------------------- */

.sv-template-landningssida:has(.lp-filterable-list) .kga-puff-wrapper {
  background-color: transparent !important;
}

.sv-template-landningssida:has(.lp-filterable-list) .kga-puff-wrapper .sv-column-12 {
  margin-bottom: 0 !important;
}

.sv-template-landningssida .lp-filterable-list {
  margin-bottom: 0;
}

.sv-template-landningssida .lp-filterable-list .lp-filterable-list-list {
  position: relative;
  isolation: isolate;
  padding: clamp(3rem, 5vw, 5rem) 0 clamp(6rem, 8vw, 8rem);
}

.sv-template-landningssida .lp-filterable-list-list:after {
  background-color: var(--env-block-primary-background-color);
  opacity: 0.5;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  left: calc(50% - 50vw);
  width: 100vw;
}

.sv-template-landningssida .lp-filterable-list {
  --lp-filterable-list__border-color: transparent;
}

div .lp-filterable-list--include-list-css .lp-filterable-list-item {
  background-color: var(--env-background-color);
}

div .lp-filterable-list--include-filter-css .lp-filterable-list-filter-info {
  border-radius: 0;
  margin-bottom: calc(var(--lp-filterable-list__filter--margin) - 1rem);
  margin-top: -1rem;
}

div.lp-filterable-list {
  --lp-filterable-list__control--border-radius: 4px;
  --lp-filterable-list__control--font-size: 1rem;
  --lp-filterable-list__label--font-size: 1.15rem;
  --lp-filterable-list__control--gap: 0.8rem;
  --lp-filterable-list__reset--font-size: 1.25rem;
  --lp-filterable-list__filter--margin: clamp(3rem, 5vw, 5rem);
  --lp-filterable-list__reset-button--font-size: 1rem;
  --lp-filterable-list__box-grid: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
  --lp-filterable-list__heading--font-size: 1.4rem;
  --lp-filterable-list__preamble--font-size: 1.15rem;
  --lp-filterable-list__date--font-size: 1.15rem;
  --lp-filterable-list__grid-gap: 1.8rem;
  --lp-filterable-list__icon--clock: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20aria-hidden%3D%22true%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M24%204C12.972%204%204%2012.972%204%2024s8.972%2020%2020%2020%2020-8.972%2020-20S35.028%204%2024%204zm0%203c9.407%200%2017%207.593%2017%2017s-7.593%2017-17%2017S7%2033.407%207%2024%2014.593%207%2024%207zm-.523%204.979A1.5%201.5%200%200%200%2022%2013.5v12a1.5%201.5%200%200%200%201.5%201.5h8a1.5%201.5%200%201%200%200-3H25V13.5a1.5%201.5%200%200%200-1.523-1.521z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --lp-filterable-list__icon--pin: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20aria-hidden%3D%22true%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M24%204C14.63%204%207%2011.63%207%2021a16.94%2016.94%200%200%200%204.078%2011.031l.008.008.006.008s7.232%208.252%209.806%2010.709c1.725%201.644%204.477%201.644%206.202%200%202.934-2.8%209.81-10.713%209.81-10.713l.004-.006.006-.006A16.933%2016.933%200%200%200%2041%2021c0-9.37-7.63-17-17-17zm0%203c7.75%200%2014%206.25%2014%2014a13.9%2013.9%200%200%201-3.361%209.082c-.014.016-7.049%208.062-9.61%2010.504a1.462%201.462%200%200%201-2.06%200c-2.14-2.042-9.588-10.48-9.61-10.504l-.002-.002A13.91%2013.91%200%200%201%2010%2021c0-7.75%206.25-14%2014-14zm0%208c-1.875%200-3.471.757-4.496%201.91C18.479%2018.063%2018%2019.542%2018%2021c0%201.458.479%202.937%201.504%204.09S22.125%2027%2024%2027c1.875%200%203.471-.757%204.496-1.91C29.521%2023.937%2030%2022.458%2030%2021c0-1.458-.479-2.937-1.504-4.09S25.875%2015%2024%2015zm0%203c1.125%200%201.779.368%202.254.902.475.535.746%201.306.746%202.098%200%20.792-.271%201.563-.746%202.098-.475.534-1.129.902-2.254.902s-1.779-.368-2.254-.902C21.271%2022.563%2021%2021.792%2021%2021c0-.792.271-1.563.746-2.098C22.221%2018.368%2022.875%2018%2024%2018z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --lp-filterable-list__icon--calendar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20aria-hidden%3D%22true%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M12.5%206C8.928%206%206%208.928%206%2012.5v23c0%203.572%202.928%206.5%206.5%206.5h23c3.572%200%206.5-2.928%206.5-6.5v-23C42%208.928%2039.072%206%2035.5%206h-23zm0%203h23c1.95%200%203.5%201.55%203.5%203.5V14H9v-1.5C9%2010.55%2010.55%209%2012.5%209zM9%2017h30v18.5c0%201.95-1.55%203.5-3.5%203.5h-23C10.55%2039%209%2037.45%209%2035.5V17zm6.5%204a2.5%202.5%200%200%200%200%205%202.5%202.5%200%200%200%200-5zm8.5%200a2.5%202.5%200%200%200%200%205%202.5%202.5%200%200%200%200-5zm8.5%200a2.5%202.5%200%200%200%200%205%202.5%202.5%200%200%200%200-5zm-17%209a2.5%202.5%200%200%200%200%205%202.5%202.5%200%200%200%200-5zm8.5%200a2.5%202.5%200%200%200%200%205%202.5%202.5%200%200%200%200-5z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  margin-bottom: 3rem;
}

div .lp-filterable-list--include-filter-css .lp-filterable-list-dates {
  gap: 0 var(--lp-filterable-list__control--gap);
}

div .lp-filterable-list--include-filter-css .lp-filterable-list-control input[type='checkbox'] + label, 
div .lp-filterable-list--include-filter-css .lp-filterable-list-control input[type='radio'] + label {
  padding: 0.5em 0.8em 0.6em 2.5em;
}

div .lp-filterable-list--include-filter-css .lp-filterable-list-date input {
  padding: 0.55em 1em 0.55em;
}

div .lp-filterable-list--include-list-css .lp-filterable-list-image__wrapper {
  padding-bottom: 0;
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto;
}

.lp-filterable-list--include-list-css .lp-filterable-list-image {
  transition: var(--lp-filterable-list__transition);
}

.lp-filterable-list--include-list-css .lp-filterable-list--clickable-area:hover .lp-filterable-list-image {
  transform: scale(1.05);
}

div .lp-filterable-list--include-list-css .lp-filterable-list-item-content__heading {
  font-weight: 700;
}

div .lp-filterable-list--include-list-css .lp-filterable-list-item-date {
  margin-top: 0.8em;
}

div .lp-filterable-list--include-list-css .lp-filterable-list-item-category {
  padding: 0.45em 0.8em 0.4em;
}

div .lp-filterable-list--include-list-css span.lp-filterable-list-item-category {
  background-color: var(--env-background-color);
  color: var(--env-element-primary-background-color);
  border: 1px solid var(--env-element-primary-background-color);
}

div .lp-filterable-list--include-list-css .lp-filterable-list-item-content__details {
  margin-top: 1rem;
}

div .lp-filterable-list .lp-filterable-list-item-content__details p,
div .lp-filterable-list .lp-filterable-list-item-content__details time {
  color: #4A4A4A;
  font-size: var(--lp-filterable-list__date--font-size);
}

div .lp-filterable-list--include-list-css .lp-filterable-list-item-date {
  margin-top: 1rem;
}

div .lp-filterable-list--include-list-css .lp-filterable-list-item-categories {
  margin-top: 0.5rem;
}

div .lp-filterable-list--include-list-css .lp-filterable-list-item-content__description {
  margin-top: 1rem;
}

/* Anpassning för evenemang */

div .lp-filterable-list--template-events .lp-filterable-list-item-content__details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--lp-filterable-list__date--font-size);
}

div .lp-filterable-list--template-events .lp-filterable-list-item-content__details p {
  margin: 0;
}

div .lp-filterable-list--template-events .lp-filterable-list-item-date,
div .lp-filterable-list--template-events .lp-filterable-list-item-time,
div .lp-filterable-list--template-events .lp-filterable-list-item-location {
  display: flex;
  align-items: center;
}

div .lp-filterable-list--template-events .lp-filterable-list-item-date:before,
div .lp-filterable-list--template-events .lp-filterable-list-item-time:before,
div .lp-filterable-list--template-events .lp-filterable-list-item-location:before {
  content: '';
  background-color: var(--env-font-color);
  mask-image: var(--lp-filterable-list__icon--calendar);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--lp-filterable-list__icon--calendar);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  width: 1em;
  height: 1em;
  margin-right: 0.2em;
  margin-bottom: -1px;
  display: inline-block;
  flex-shrink: 0;
}

div .lp-filterable-list--template-events .lp-filterable-list-item-time:before {
  mask-image: var(--lp-filterable-list__icon--clock);
  -webkit-mask-image: var(--lp-filterable-list__icon--clock);
}

div .lp-filterable-list--template-events .lp-filterable-list-item-location:before {
  mask-image: var(--lp-filterable-list__icon--pin);
  -webkit-mask-image: var(--lp-filterable-list__icon--pin);
}