/*
    - Name: "map_image.scss"
    - Description: "Add custom styles to Map & Image component"
*/
.micon.iconXs {
  width: var(--sizeXs);
  height: var(--sizeXs);
}

.micon.iconSm {
  width: var(--sizeSm);
  height: var(--sizeSm);
}

.micon.iconMd {
  width: var(--sizeMd);
  height: var(--sizeMd);
}

.micon.iconLg {
  width: var(--sizeLg);
  height: var(--sizeLg);
}

.micon.iconXl {
  width: var(--sizeXl);
  height: var(--sizeXl);
}

.micon.icon2xl {
  width: var(--size2xl);
  height: var(--size2xl);
}

.component-map-image .group-map-image {
  position: relative;
}

.component-map-image .group-map-image .map-image--image {
  position: relative;
}

.component-map-image .group-map-image .map-image--image .img {
  display: none;
}

.component-map-image .group-map-image .map-image--image picture {
  display: flex;
  flex-wrap: wrap;
}

.component-map-image .group-map-image .map-image--image picture source {
  display: none;
}

.component-map-image .group-map-image .map-image--image picture img {
  width: 100%;
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
}

.component-map-image .group-map-image .map-image--image:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6) 100%);
}

.component-map-image .group-map-image .map-image--map .c-map .field--name-location-map .leaflet-container {
  aspect-ratio: 16/9;
  height: auto !important;
}

.component-map-image .group-map-image .map-image--title {
  position: absolute;
  bottom: 0;
  width: 50%;
  visibility: visible;
  z-index: 2;
}

@media all and (min-width: 36rem) {
  .component-map-image .group-map-image .map-image--title {
    width: 70%;
  }
}
.component-map-image .group-map-image .map-image--title .heading {
  font-family: var(--fontFamilyPrimary), sans-serif;
  font-size: var(--mobileH3BoldFontSize);
  line-height: var(--mobileH3BoldLineHeight);
  font-weight: var(--mobileH3BoldFontWeight);
  color: var(--colorWhite);
  text-align: left;
  padding: var(--spacingXs) var(--spacingMd);
}

@media all and (min-width: 36rem) {
  .component-map-image .group-map-image .map-image--title .heading {
    font-size: var(--desktopH2BoldFontSize);
    line-height: var(--desktopH2BoldLineHeight);
  }
}
.component-map-image .group-map-image .expand-map {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-direction: row;
  cursor: pointer;
  bottom: 20px;
  right: 25px;
  z-index: 150;
  border: 2px solid white;
}

@media all and (min-width: 36rem) {
  .component-map-image .group-map-image .expand-map {
    bottom: 25px;
  }
}
@media all and (min-width: 50.0625rem) {
  .component-map-image .group-map-image .expand-map {
    aspect-ratio: 4/3;
    padding-bottom: 0.1875rem;
    width: 20%;
    border: none;
  }
}
.component-map-image .group-map-image .expand-map .expand-icon,
.component-map-image .group-map-image .expand-map .reduce-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--colorBlack);
  color: var(--colorWhite);
  padding: var(--spacing2xs) var(--spacingXs);
  cursor: pointer;
  box-shadow: none;
  border: none;
  min-height: 32px;
  gap: 8px;
  font-family: var(--xsmallBoldFontFamily), sans-serif;
  font-size: var(--xsmallBoldFontSize);
  font-weight: var(--xsmallBoldFontWeight);
  line-height: var(--xsmallBoldLineHeight);
  text-align: left;
}

@media all and (min-width: 36rem) {
  .component-map-image .group-map-image .expand-map .expand-icon,
  .component-map-image .group-map-image .expand-map .reduce-icon {
    padding: var(--spacingXs);
  }
}
.component-map-image .group-map-image .expand-map .expand-icon:before,
.component-map-image .group-map-image .expand-map .reduce-icon:before {
  font-size: 1rem;
}

.component-map-image .group-map-image.full-map .map-image--image {
  display: none;
}

@media all and (min-width: 50.0625rem) {
  .component-map-image .group-map-image.full-map .map-image--image {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    margin: 0 var(--spacingMd) var(--spacingMd);
    box-sizing: border-box;
    overflow: hidden;
    transform: scale(0.2);
    transform-origin: bottom right;
    border: 12px solid white;
    z-index: 100;
  }
  .component-map-image .group-map-image.full-map .map-image--image::before {
    content: "";
    display: block;
    width: 100%;
    height: 260px;
    background: var(--colorBlack);
    position: absolute;
    z-index: 1;
    bottom: 0;
  }
  .component-map-image .group-map-image.full-map .map-image--image picture {
    display: none;
  }
  .component-map-image .group-map-image.full-map .map-image--image img {
    display: block;
    aspect-ratio: 4/3;
    width: 100%;
  }
}
.component-map-image .group-map-image.full-map .map-image--title {
  visibility: hidden;
}

.component-map-image .group-map-image.full-map .map-image--map .c-map .geofield-google-map {
  aspect-ratio: 16/9;
}

.component-map-image .group-map-image.full-image .map-image--map {
  display: none;
}

@media all and (min-width: 50.0625rem) {
  .component-map-image .group-map-image.full-image .map-image--map {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    top: 0;
    padding: 0 var(--spacingMd) var(--spacingMd);
    box-sizing: border-box;
    z-index: 2;
  }
  .component-map-image .group-map-image.full-image .map-image--map .c-map {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .component-map-image .group-map-image.full-image .map-image--map .c-map .field--name-location-map {
    overflow: hidden;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    transform: scale(0.21);
    transform-origin: bottom right;
    border: 12px solid white;
  }
  .component-map-image .group-map-image.full-image .map-image--map .c-map .field--name-location-map::before {
    content: "";
    display: block;
    width: 100%;
    height: 255px;
    background: var(--colorBlack);
    position: absolute;
    z-index: 2;
    bottom: 0;
  }
  .component-map-image .group-map-image.full-image .map-image--map .c-map .field--name-location-map .leaflet-container {
    aspect-ratio: 4/3;
  }
  .component-map-image .group-map-image.full-image .map-image--map .c-map .field--name-location-map .leaflet-container .leaflet-control-container,
  .component-map-image .group-map-image.full-image .map-image--map .c-map .field--name-location-map .leaflet-container .leaflet-marker-pane {
    display: none;
  }
  .component-map-image .group-map-image.full-image .map-image--map .c-map .field--name-location-map .geolocation-map-wrapper {
    transform: scale(3.5);
  }
  .component-map-image .group-map-image.full-image .map-image--map .c-map .field--name-location-map .geolocation-map-wrapper .geolocation-map-container {
    height: 100% !important;
    aspect-ratio: 4/3;
  }
}
.map-image--location {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing2xs);
  background: var(--colorBackgroundLightGrey);
  padding: var(--spacingXs) var(--spacingMd);
}

.map-image--location p {
  font-family: var(--smallBoldFontFamily), sans-serif;
  font-size: var(--smallBoldFontSize);
  font-weight: var(--smallBoldFontWeight);
  line-height: var(--smallBoldLineHeight);
  text-align: left;
  padding: 0;
  margin: 0;
  flex: 2;
}

@media all and (min-width: 36rem) {
  .map-image--location p {
    font-size: var(--baseBoldFontSize);
  }
}
@media all and (min-width: 50.0625rem) {
  .layout--twocol-section--25-75 .layout__region--second .component-map-image .group-map-image .expand-map {
    aspect-ratio: auto;
    width: auto;
    border: 2px solid white;
    padding-bottom: 0;
  }
}
@media all and (min-width: 78rem) {
  .layout--twocol-section--25-75 .layout__region--second .component-map-image .group-map-image .expand-map {
    width: 20%;
    border: none;
    padding-bottom: 0.1875rem;
  }
}
.layout--twocol-section--25-75 .layout__region--second .component-map-image .group-map-image.full-map .map-image--image {
  display: none;
}

@media all and (min-width: 50.0625rem) {
  .layout--twocol-section--25-75 .layout__region--second .component-map-image .group-map-image.full-map .map-image--image {
    display: none;
  }
}
@media all and (min-width: 78rem) {
  .layout--twocol-section--25-75 .layout__region--second .component-map-image .group-map-image.full-map .map-image--image {
    display: flex;
  }
}
.layout--twocol-section--25-75 .layout__region--second .component-map-image .group-map-image.full-image .map-image--map {
  display: none;
}

@media all and (min-width: 50.0625rem) {
  .layout--twocol-section--25-75 .layout__region--second .component-map-image .group-map-image.full-image .map-image--map {
    display: none;
  }
}
@media all and (min-width: 78rem) {
  .layout--twocol-section--25-75 .layout__region--second .component-map-image .group-map-image.full-image .map-image--map {
    display: flex;
  }
}