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


.lp-footer {
  background-color: var(--lp-block-primary--background);
  box-sizing: border-box;
  margin: var(--lp-spacing) 0 0;
  padding: 0;
}

@supports (container-type: inline-size) {
  .lp-footer {
    container-type: inline-size;
  }
}

.lp-footer:not(:has(.lp-sponsors)) {
  margin-top: 0;
  padding-top: var(--lp-spacing-xx-large);
}

.lp-footer .main-grid {
  padding-bottom: 0;
  padding-top: 0;
}

.lp-footer h2.subheading,
.lp-footer h2.subheading:last-child {
  color: var(--lp-color-brand-contrast);
  font-size: var(--lp-font-size-medium);
  margin-bottom: var(--lp-spacing-small);
}

.lp-footer p.normal {
  color: var(--lp-color-brand-contrast);
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  margin: 0 !important;
}

.lp-footer p.normal a,
.lp-footer .sv-jcrmenu-portlet a.normal {
  color: var(--lp-color-brand-contrast);
  margin-bottom: var(--lp-spacing-x-small);
  text-decoration: none;
}

/* Grid */

.lp-footer-grid {
  display: grid;

  gap: var(--lp-spacing);
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}

.lp-footer .main-grid .sv-column-12 > .sv-layout:last-child > .sv-layout {
  display: flex;
  margin-bottom: var(--lp-spacing-x-large);

  flex-wrap: wrap;
  gap: var(--lp-spacing);
  justify-content: space-between;
}

.lp-footer .main-grid .sv-column-12 > .sv-layout:last-child > .sv-layout > .sv-layout:last-child > .sv-layout:first-child {
  margin-bottom: var(--lp-spacing-x-large);
}

/*
---------------------------------------------------------
SIDFOTSMENY
---------------------------------------------------------*/

.lp-footer-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.lp-footer-menu li {
  margin-bottom: 1rem;
}

.lp-footer-menu li > a {
  display: block;
  font-size: clamp(1.4rem, 1.5vw, 1.6rem);
  text-decoration: underline;
  transition: var(--lp-transition-default);

  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.lp-footer-menu li > a.normal:hover {
  text-decoration: underline;
}

.lp-footer-menu .lp-icon {
  color: var(--lp-font-color--light-blue);
  height: 1.2em;
  margin-bottom: -3px;
  margin-left: 0.2em;
  transition: var(--lp-transition-default);
  width: 1.2em;
}

.lp-footer-menu li > a.normal:hover .lp-icon {
  transform: translateX(0.25em);
}

/* Tar bort bilden som visas för externa länkar */
.lp-footer-menu img {
  display: none;
}

.lp-footer .lp-logo img {
  display: block;
  height: 120px !important;
  max-height: 100% !important;
  max-width: 100% !important;
  width: auto !important;

  object-fit: contain;
}

/*
---------------------------------------------------------
SPONSORER
---------------------------------------------------------*/

.lp-footer .lp-sponsors {
  align-items: center;
  background-color: var(--lp-body--background);
  display: grid;
  margin-bottom: var(--lp-spacing-xx-large);
  padding: var(--lp-spacing-xx-large) 0;
  position: relative;

  gap: var(--lp-spacing-x-large);
  grid-template-columns: 1fr 2fr;
  isolation: isolate;
}

.lp-footer .lp-sponsors > .sv-layout:first-child {
  margin-bottom: var(--lp-spacing-xx-large);
  max-width: 36rem;
}

/* stylelint-disable */

.lp-footer .lp-sponsors:after {
  background-color: inherit;
  bottom: 0;
  content: '';
  left: calc(50% - 50vw);
  position: absolute;
  top: 0;
  width: 100vw;
  z-index: -1;
}

/* Fix för horisontell scroll */
@supports (container-type: inline-size) {
  .lp-footer .lp-sponsors:after {
    left: calc(50% - 50cqw);
    width: 100cqw;
  }
}

/* stylelint-enable */

/* Svenska spel + Uniqlo */
.lp-footer .lp-sponsors > .sv-layout:nth-child(2) > .sv-layout:first-child {
  align-items: center;
  display: flex;
  margin-bottom: var(--lp-spacing-large);

  gap: var(--lp-spacing-x-large);
  justify-content: flex-start;
}

/* Stora gridet med partners */
.lp-footer .lp-sponsors .lp-partners {
  align-items: center;
  display: grid;

  gap: var(--lp-spacing-x-large);
  grid-template-columns: repeat(auto-fill,minmax(min(clamp(10rem, 12vw,12rem), 100%), 1fr));
}

.lp-footer .lp-sponsors h2.subheading,
.lp-footer .lp-sponsors p.normal,
.lp-footer .lp-sponsors p.normal a {
  color: var(--lp-font-color);
}

.lp-footer .lp-sponsors p.normal {
  font-family: var(--lp-font-family--heading);
  font-weight: 300;
}

.lp-footer .lp-sponsors p.normal a {
  font-family: var(--lp-font-family);
  font-weight: 400;
}

.lp-footer .lp-sponsors h2.subheading {
  font-size: clamp(3.2rem, 5vw, 6.4rem);
  line-height: 1;
  margin-bottom: var(--lp-spacing-large);
  margin-top: 0 !important;
  max-width: 9ch;
}

.lp-footer .lp-sponsors p.normal a {
  display: block;
  margin-top: var(--lp-spacing-large);
}

.lp-footer .lp-sponsors p.normal a,
.lp-footer .lp-sponsors .sv-text-portlet .sv-text-portlet-content p.normal a {
  text-decoration: underline;
  transition: var(--lp-transition-default);

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

.lp-footer .lp-sponsors p.normal a:hover,
.lp-footer .lp-sponsors .sv-text-portlet .sv-text-portlet-content p.normal a:hover {
  text-underline-offset: 0.6em;
}

.lp-footer .lp-sponsors .sv-image-portlet {
  display: flex;
}

.lp-footer .lp-sponsors .sv-image-portlet img {
  filter: grayscale(1);
  height: auto;
  max-height: clamp(40px, 10vw, 60px) !important;
  max-width: clamp(100px,20vw,160px)!important;
  transition: var(--lp-transition-default);
  width: 100%;

  object-fit: contain;
  object-position: left bottom;
}

.lp-footer .lp-sponsors .sv-image-portlet img:hover,
.lp-footer .lp-sponsors .sv-image-portlet img:focus {
  filter: initial;
}

.lp-footer .lp-sponsors > .sv-layout:nth-child(2) > .sv-layout:first-child .sv-image-portlet img {
  max-height: clamp(60px, 40vw, 120px) !important;
  max-width: clamp(60px, 50vw, 120px) !important;
}

.lp-footer .lp-sponsors > .sv-layout:nth-child(2) > .sv-layout:first-child .sv-image-portlet:first-child img {
  max-height: clamp(60px, 40vw, 120px) !important;
  max-width: clamp(200px, 50vw, 410px) !important;
}

/* Ocean Outdoor och XL Bygg */
.lp-footer .lp-sponsors > .sv-layout:nth-child(2) > .sv-layout:nth-child(2) {
  align-items: center;
  display: flex;
  margin-bottom: var(--lp-spacing-large);

  gap: var(--lp-spacing-x-large);
  justify-content: flex-start;
}

.lp-footer .lp-sponsors > .sv-layout:nth-child(2) > .sv-layout:nth-child(2) .sv-image-portlet img {
  max-height: clamp(40px, 20vw, 90px) !important;
  max-width: clamp(100px, 30vw, 140px) !important;
}

/* Mindre grid med logotyper */

.lp-footer .lp-footer-logotypes {
  align-items: center;
  display: grid;

  gap: var(--lp-spacing);
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
}

.lp-footer .lp-footer-logotypes .sv-image-portlet img {
  max-height: clamp(20px, 10vw, 30px) !important;
  max-width: clamp(60px, 20vw, 90px) !important;
}

/* Postkod */

.lp-footer .lp-sponsors .lp-footer-logotypes + .sv-layout {
  border-top: 1px solid #c6c6c6;
  margin-top: var(--lp-spacing-x-large);
  padding-top: var(--lp-spacing-small);
}

.lp-footer .lp-sponsors .lp-footer-logotypes + .sv-layout .sv-text-portlet p.normal {
  margin-bottom: var(--lp-spacing-small) !important;
}

.lp-footer .lp-sponsors .lp-footer-logotypes + .sv-layout .sv-image-portlet img {
  max-height: clamp(40px, 10vw, 80px) !important;
}

/* Marginal mellan layouter */

.lp-footer .lp-sponsors > .sv-layout:nth-child(2) > .sv-layout:first-child,
.lp-footer .lp-sponsors > .sv-layout:nth-child(2) > .sv-layout:nth-child(2),
.lp-footer .lp-sponsors .lp-partners {
  margin-bottom: var(--lp-spacing-x-large);
}

/*
---------------------------------------------------------
BAND
---------------------------------------------------------*/

.lp-footer .main-grid + .sv-layout .sv-image-portlet {
  display: flex;

  justify-content: flex-end;
}

.lp-footer .main-grid + .sv-layout .sv-image-portlet img {
  max-height: 400px !important;
  max-width: 100% !important;

  object-fit: contain;
  object-position: right;
}