html, body {
  overflow-x: clip;
}

body {
  background: #EBE6E3;
  margin: 0;
}

main {
/*  max-width: 180ch;*/
  margin-inline: auto;
/*  padding-inline: 2em;*/
}

header {
  position: absolute;
}

.sr-only {
  display: block;
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}


/* https://www.trysmudford.com/blog/a-good-reset/ */

button {
  -webkit-appearance: none;
  border-radius: 0;
  text-align: inherit;
  background: none;
  box-shadow: none;
  padding: 0;
  cursor: pointer;
  border: none;
  color: inherit;
  font: inherit;
}


/*
╭────────────────────―╮
│ Map section         │
╰─────────────────────╯
*/

.map-section {
  padding-top: 4.75rem;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  /* flex-wrap: wrap; */
}

.map-section:before {
  content:'';
  background: #69A5C8;
  height: 4.75rem;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.map-section__map {
  flex: 1 1 25em;
  max-width: 60em;
  background: #EBE6E3;
}

.map-section__list {
  position: relative;
  flex: 0 1 30em;
  margin-bottom: calc(15rem + 0.5vw);
  margin-left: -15em;
  z-index: 1;
  background: #EBE6E3;
}

.map-section__slider {
  background: #B2CEDA;
  display: none;
  max-width: 100%;
}

@media(max-width: 960px) {
  .map-section {
    flex-direction: column;
  }
  
  .map-section__list {
    display: none;
  }

  .map-section__slider {
    display: block;
  }
}


/*
╭────────────────────―╮
│ The map             │
╰─────────────────────╯
*/
.map {
  display: grid;
}

.map img,
.map svg {
  display: block;
  max-width: 100%;
}

.map > * {
  grid-area: 1/1;
}


/* House buttons */
.map__house-btn {
  position: absolute;
  top: var(--y);
  left: var(--x);

  width: calc(var(--width)/var(--map-width) * 100%);

  z-index: 1;

  touch-action: manipulation;
}

.map__house-btn svg {
  display: block;
  width: 100%;
}

.map__house-btn path[fill="#00338F"],
.map__house-btn path[fill="#00338F"] {
  transition: fill 0.25s ease-in-out;
}

.map__house-btn[aria-expanded="true"] path[fill="#00338F"],
.map__house-btn:focus-visible path[fill="#00338F"] {
  fill: #340c08;
  transition-duration: 0.1s;
}

@media(pointer: fine) {
  .map__house-btn:hover path[fill="#00338F"] {
    fill: #340c08;
    transition-duration: 0.1s;
  }
}


.map__house-btn[data-house="k"] {
  clip-path: url("#house-btn-clip-k");
}

.map__house-btn[data-house="l"] {
  clip-path: url("#house-btn-clip-l");
}

.map__house-btn[data-house="n"] {
  clip-path: url("#house-btn-clip-n");
}



/* Popups */
.map__popups {
  --pointer-height: 2.1em;
  --pointer-width: calc(var(--pointer-height) * (65/76));

  position: relative;
  /* pointer-events: none; */
}

.map-popup {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 0;
  height: 0;
  
  color: #002e89;
  
  /* pointer-events: auto; */
  z-index: 10;

  transition: 0.3s ease-in-out;
}
@media(max-width: 960px) {
  .map-popup {
    display: none !important;
  }
}

.map-popup[aria-hidden="true"] {
  opacity: 0;
  transform: translateY(1rem);
  pointer-events: none;
}

/* Pointer triangle */
.map-popup::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--pointer-width);
  height: var(--pointer-height);
  transform: translate(-50%, -100%);

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 65 76' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M63.7549 0.5L63.46 1.19531L32.96 73.1953L32.5 74.2822L32.04 73.1953L1.54004 1.19531L1.24512 0.5H63.7549Z' fill='%23EBE6E3' stroke='%23002E89' stroke-width='2'/%3E%3C/svg%3E%0A");
  background-size: 100% 100%;

  mask-image: linear-gradient(white, white);
  mask-mode: luminance;
  mask-size: 100% calc(100% - 1px);
  mask-position: 0% 1px;
  mask-repeat: no-repeat;

  z-index: 2;
}

.map-popup__inner {
  position: absolute;
  top: calc((-1 * var(--pointer-height)) + 3.5px);
  left: calc(-1 * var(--pointer-width));
  width: max-content;
  max-width: 20rem;

  transform: translate(0, -100%);

  border: 1px solid;
  border-radius: 1em;
  background: #EBE6E3;
  overflow: clip;

  z-index: 1;
}

.map-popup__inner a:hover {
  color: inherit;
}

.map-popup__img img {
  height: auto;
}

.map-popup__content {
  padding: 0.5em 1em 1em;
}

.map-popup__heading {
  margin-block: 0 0.5em;
}

.map-popup__desc p {
  margin: 0;
}

.map-popup__desc > p + p {
  margin-block-start: 0.5em;
}

/* Flipped */
.map-popup--flipped[aria-hidden="true"] {
  transform: translateY(-1rem);
}


.map-popup--flipped::before {
  transform: translate(-50%, 0%) rotate(180deg);
}

.map-popup--flipped .map-popup__inner {
  top: auto;
  bottom: calc((-1 * var(--pointer-height)) + 3.5px);
  transform: translate(0, 100%);
}



/*
╭────────────────────―╮
│ List                │
╰─────────────────────╯
*/

.map-section__list ol {
  list-style-type: "";
  padding-inline: 0;
  color: #002e89;
  column-count: 2;
  column-gap: 50px
}

.map__list-btn {
  display: grid;
  grid-template-columns: 2em auto;
  transition: color 0.25s ease-in-out;
}

.map__list-btn[aria-expanded="true"],
.map__list-btn:hover,
.map__list-btn:focus-visible {
  color: #340c08;
  transition-duration: 0.1s;
}


/*
╭────────────────────―╮
│ Slider              │
╰─────────────────────╯
*/
.map-slider.swiper {
  background
  overflow: visible;
  height: 100%; 
  max-height: 100vw;
  min-height: 0;
  min-width: 0;
  max-width: 100vw; 
  width: 100%;
}

.map-slider .swiper-wrapper {
  max-height: 100%;
  height: 100%;
  display: flex;
}

.map-slider .swiper-slide {
  transition: opacity 0.3s ease-in-out;
  width: auto;
  flex-shrink: 0;
  display: block;
  height: 100%;
  max-height: 100%;
}

.map-slider .swiper-slide:not(.swiper-slide-active) {
  opacity: 0.5;
}

.map-slide {
  width: max-content;
  padding-bottom:2rem;
  max-width: 25rem;
  margin-inline: auto;
/*  border: 1px solid;*/
/*  border-radius: 1em;*/
  background: #B2CEDA;
  overflow: clip;
}

.map-slide .map-popup__img {
  max-height: 15rem;
  overflow: hidden;
}

.map-slide .map-popup__img img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.hide-before::before {
  display: none !important;
}