/*
=========================================================
EVENT PAGE CSS
=========================================================
 * Innehåller styling för evenemangssida
 *
 * Copyright (C) Limepark AB.
 * https://limepark.se/licensvillkor
=========================================================*/

/*
---------------------------------------------------------
GENERELLT
---------------------------------------------------------*/

.lp-event-page .pagecontent > .sv-text-portlet .subheading {
  margin-top: 0rem;
}

.lp-event-page .lp-expandable-content {
  margin: 3rem 0;
}

.lp-event-page .lp-expandable-content + .lp-expandable-content {
  margin-top: -1.5rem;
}

.lp-event-page .lp-box {
  margin-left: -4rem;
  margin-right: -4rem;
  padding: 4rem;
}

.lp-event-page .sv-text-portlet + .sv-layout > .lp-box {
  background-color: var(--lp-color-5);
}

/*
---------------------------------------------------------
HERO
---------------------------------------------------------*/

.lp-event-page .lp-hero {
  background-color: #fdf4da;
  margin-bottom: 6rem;
}

.lp-event-page .lp-hero > .sv-layout {
  padding: 5rem 0;
}

.lp-event-page .lp-hero a.lp-linkbutton-hero {
  margin-bottom: 0;
}

.lp-event-page .lp-hero .pagecontent {
  margin-bottom: 1.5rem;
}

/*
---------------------------------------------------------
INNEHÅLLSFÖRTECKNING
---------------------------------------------------------*/

.lp-event-page .sv-toc-portlet {
  margin: 0 0 3rem;
}

.lp-event-page .sv-toc-portlet ul {
  border-bottom: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
  display: flex;
  list-style: none;
  margin: 0 0 3rem;
  padding: 2rem 0;

  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.lp-event-page .sv-toc-portlet li {
  padding: 0 1rem;
}

.lp-event-page .sv-toc-portlet a {
  font-size: 1.7rem;
  font-weight: 600;
  text-decoration: none;
}

.lp-event-page .sv-toc-portlet a:hover {
  text-decoration: underline;
}

.lp-event-page .sv-toc-portlet a:before {
  background-image: 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%2032%2032%22%3E%3Cpath%20d%3D%22M16%203C8.832%203%203%208.832%203%2016s5.832%2013%2013%2013%2013-5.832%2013-13S23.168%203%2016%203zm0%202c6.086%200%2011%204.914%2011%2011s-4.914%2011-11%2011S5%2022.086%205%2016%209.914%205%2016%205zm-1.781%204.281L12.78%2010.72%2018.062%2016l-5.28%205.281%201.437%201.438%206-6%20.687-.719-.687-.719z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: inline-block;
  height: 1.2em;
  margin-bottom: -3px;
  margin-right: 0.3em;
  width: 1.2em;
}

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

body .lp-event-page .sv-limepark-webapp-metadata-box .lp-metadata-box {
  background-color: #f5f4f1;
  margin: 0 -4rem 4rem;
  padding: 4rem;
}

body .lp-event-page .sv-limepark-webapp-metadata-box .lp-metadata-box__list-item {
  align-items: flex-start;
  flex-direction: row;
}

body .lp-event-page .sv-limepark-webapp-metadata-box .lp-metadata-box__name {
  align-items: center;
  display: flex;
  margin-right: 0.3em;
}

.lp-event-page .sv-limepark-webapp-metadata-box .lp-metadata-box__icon {
  font-size: 1.4em;
  margin-right: 0.8em;
}

.lp-event-page .sv-limepark-webapp-metadata-box .lp-metadata-box__list-item.lp-metadata-box__list-item--lank-till-anmalan .lp-metadata-box__name {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}

.lp-event-page .sv-limepark-webapp-metadata-box a.lp-linkbutton-hero.lp-link-button-hero-white {
  margin-bottom: 0;
}

body .lp-event-page .sv-limepark-webapp-metadata-box .lp-metadata-box__list-item:last-child {
  margin-bottom: 0;
}

body .lp-event-page .sv-limepark-webapp-metadata-box .lp-metadata-box__list {
  margin-top: 0;
}

/*
---------------------------------------------------------
MEDVERKANDE
---------------------------------------------------------*/

.lp-event-page .sv-limepark-webapp-course-leaders {
  margin-left: calc(50% - 50vw);
  width: 100vw;
}

.lp-event-page .sv-limepark-webapp-course-leaders ul {
  display: flex;
  margin: 2rem auto 4rem;
  max-width: 1170px;
  width: 94%;

  flex-wrap: wrap;
  gap: 3rem;
  justify-content: center;
}

.lp-event-page .lp-course-leaders__leader__content {
  flex-direction: column;
  text-align: center;
}

.lp-event-page .lp-course-leaders__leader__image-column {
  margin: 0 0 1rem;
}

.lp-event-page .lp-course-leaders__leader__image {
  height: 13rem;
  width: 13rem;
}

.lp-event-page .lp-course-leaders__leader__name {
  font-size: 1.7rem;
}

.lp-event-page .lp-course-leaders__leader__title {
  font-size: 1.4rem;
}

.lp-event-page .lp-course-leaders-list__item {
  margin: 0;
  max-width: 22rem;
  min-width: 15rem;

  flex: 1 1 1px;
}

/*
---------------------------------------------------------
PROGRAM
---------------------------------------------------------*/

.sv-text-portlet + .sv-limepark-skr-event-program .lp-event-program {
  margin-top: 30px;
}

.lp-event-program-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin: 0 0 3rem;
  padding: 0 0 3rem;
}

.lp-event-program-item:last-child {
  border: none;
  margin: 0;
  padding: 0;
}

.lp-event-program .lp-event-program-item__title {
  font-family: 'open sans',arial,helvetica,sans-serif;
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 0.6em;
}

.lp-event-program p {
  margin: 0 0 0.8em;
}

.lp-event-program-item__participant-title {
  font-family: 'open sans',arial,helvetica,sans-serif;
  font-size: 1.7rem;
  font-weight: 600;
  margin: 0 0 0.4em;
}

.lp-event-program-item__participant-list {
  margin: 0;
  padding-left: 2rem;
}

.lp-event-program-item__participant .lp-event-program-item__participant__name:hover {
  text-decoration: none;
}

/*--- Spår ---*/

.lp-event-program-item__track {
  background-color: rgba(0,0,0,0.05);
  border-radius: var(--lp-border-radius);
  margin-top: 2rem;
  padding: 2.5rem;
}

.lp-event-program-item__track-item {
  font-size: 1.5rem;
}

.lp-event-program-item__track-item:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin: 0 0 2rem;
  padding: 0 0 2rem;
}

.lp-event-program-item__track__title {
  font-family: 'open sans',arial,helvetica,sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 0.3em;
  margin-top: 0;
}

.lp-event-program-item__track__participant-title {
  font-family: 'open sans',arial,helvetica,sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 0.4em;
  margin-top: 1.5em;
}

.lp-event-program-item__track__content p {
  margin-bottom: 0;
}

.lp-event-program-item__track__participant-list,
.lp-event-program-item__participant-list {
  list-style: none;
  margin: 0;
  padding: 0;
}


span.lp-event-program-item__participant {
  align-items: center;
  display: flex;

  flex-wrap: wrap;
}

.lp-event-program-item__track__participant-list-item:not(:last-child),
.lp-event-program-item__participant-list-item:not(:last-child) {
  margin-bottom: 0.3em;
}

span.lp-event-program-item__participant:before {
  background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D\'0%200%2032%2032\'%20xmlns%3D\'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\'%20fill%3D\'%23222\'%3E%3Cpath%20%20d%3D%22M16%204c-3.855%200-7%203.145-7%207a7.01%207.01%200%200%200%203.063%205.781A9.994%209.994%200%200%200%206%2026h2c0-4.465%203.535-8%208-8s8%203.535%208%208h2a9.994%209.994%200%200%200-6.063-9.219A7.01%207.01%200%200%200%2023%2011c0-3.855-3.145-7-7-7zm0%202c2.773%200%205%202.227%205%205s-2.227%205-5%205-5-2.227-5-5%202.227-5%205-5z%22%2F%3E%3C%2Fsvg%3E');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: inline-block;
  height: 1.2em;
  margin-right: 0.4em;
  width: 1.2em;

  flex-shrink: 0;
}

.lp-event-program-item__track__participant .lp-event-program-item__participant__name:hover {
  text-decoration: none;
}

.lp-event-program-item__participant__title {
  margin-left: 0.3em;
}

/*
---------------------------------------------------------
FLER TILLFÄLLEN
---------------------------------------------------------*/

.lp-event-page .lp-related-events.lp-expandable-content {
  max-width: 100%;
}