/* -------------------------- Map View Everything */

/* ------ Details Tag */

.all-maps summary::-webkit-details-marker {
    display: none;
}

/* details>summary::before {
    display: none;
    content: "Map";
} */

/* details[open]>summary::before {
    display: none;
    content: "Close";
    color: var(--black);
    position: absolute;
    top: 1lh;
    right: 2lh;
    z-index: 2;
    -webkit-text-stroke: 0em black;
} */



.all-maps {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: -4;
    grid-row: 1;

    top: 0lh;
    z-index: 3;
    position: sticky;
    overscroll-behavior: contain;

    scroll-snap-type: y mandatory;

    @media (width <=1068px) {
        grid-column: -3;
    }

}



.all-maps div {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: -4;
  grid-row: 1;
  padding-top: var(--px);
  position: sticky;
  top: var(--px);
  z-index: +10;
  height: fit-content;


  & :hover {
      cursor: pointer;
  }

  @media (width <=1068px) {
      grid-column: -3;
      justify-self: left;

  }
}


.home main .all-maps {
    /* top: 100dvh; */
    grid-row: 2;
}

summary {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: -4;
    grid-row: 1;
    padding-top: var(--px);
    position: sticky;
    top: var(--px);
    z-index: +10;
    height: fit-content;


    & :hover {
        cursor: pointer;
    }

    @media (width <=1068px) {
        grid-column: -3;
        justify-self: left;

    }
}

.all-maps[open] {
    position: fixed;
    top: 0;
    grid-column: 1 / -1;
    grid-row: 1;

    top: 0;
    left: 0;
    height: 100dvh;
    width: 100vw;
    overflow: scroll;
    overscroll-behavior: contain;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 0 repeat(12, 1fr) 0;
    column-gap: var(--px);

    @media (width <=1068px) {
        grid-template-columns: 0 repeat(8, 1fr) 0;
    }
}

.icon-x {
    grid-row: 1;
    grid-column: -3;

    justify-self: right;

    width: 1em;
    height: 1em;

    @media (width <=1068px) {
        justify-self: left;
    }

    & .st-white {
        fill: var(--white);
    }

    & .st2 {
        fill: none;
        stroke: var(--black);
        stroke-width: .15em;
        vector-effect: non-scaling-stroke;
    }

    & .st0,
    & .st1 {
        stroke: var(--black);
        stroke-width: .05em;
        vector-effect: non-scaling-stroke;

    }

}


.tour {
    & .st-white {
        fill: var(--white);
    }

    & .st2 {
        fill: none;
        stroke: var(--white);
        stroke-width: .15em;
        vector-effect: non-scaling-stroke;
    }

    & .st0,
    & .st1 {
        stroke: var(--white);
        stroke-width: .05em;
        vector-effect: non-scaling-stroke;

    }
}



/* ------------ Map View / Single Map */

.map-view {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 0 repeat(12, 1fr) 0;
    gap: var(--px);

    padding: 1lh 0;

    width: 100vw;
    height: calc(100dvh - 1lh);
    height: 100dvh;

    overflow-x: hidden;
    scroll-snap-align: center;

    background-color: var(--light);
    color: var(--black);

    @media (width <=1068px) {
        grid-template-columns: 0 repeat(8, 1fr) 0;
    }

    & header {
        position: relative;
        z-index: 3;
        width: fit-content;
        grid-column: 3 / 8;
        grid-row: 1;
        display: grid;
        grid-template-columns: subgrid;
        padding-top: var(--px);

        @media (width <=1068px) {
            grid-column: 2 / 8;

        }

        @media (width <=768px) {
            padding-top: 0;
        }

        & h2 {
            display: grid;
            grid-template-columns: subgrid;
            grid-column: 1 / -1;
            height: fit-content;

            & .logo-s {
                grid-column: span 1;
                white-space: nowrap;
            }

            & .linktobuilding {
                grid-column: span 3;

            }

        }

        .linktobuilding {
            grid-column: span 2;
        }



    }

    & .map-nav {
      display: flex;
      gap: 1lh;
      align-items: flex-end;
      grid-column: 3 / 9;
      grid-row: 3;

      z-index: 2;
      height: fit-content;
      align-self: end;
      padding-bottom: 1lh;
    }

    & .floorplan,
    & .full-drawing {
        height: 100%;
        width: calc(100vw - calc(var(--px) * 2));
        width: 100%;

        grid-column: 2 / -2;
        grid-row: 1 / 4;

        z-index: 1;
        object-position: center;
        object-fit: contain;
        padding: 0 1lh;

        @media (width <=768px) {
            height: 70vh;
            padding: 0;
        }
    }


    & .full-drawing {
        z-index: 3;
        pointer-events: none;
    }
}

#cottage {

    & .floorplan,
    & .full-drawing {
        /* padding-left: 4lh; */
    }
}

#apartment {

    & .map-nav {
        padding-top: var(--px);


        @media (width >=768px) {
            grid-row: 1;
            grid-column: -7 / -3;
            align-self: start;
        }
    }
}


/* ------ Next Map */



.map-nav__prev,
.map-nav__next {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;

    & svg {
        height: 0.6em;
        width: auto;
        align-self: center;
    }

    & path {
        fill: var(--color);
    }
}

/* ------ Map View / SVG Hover */

/* default rect fill */
.map-view .room {
    fill: rgba(255, 255, 255, 0);
    /* transition: fill 0.15s; */
}

/* hover rect → highlight rect */
.map-view .room:hover {
    fill: var(--cntrst);
    cursor: pointer;
}

/* hover rect → highlight matching link */
.map-view:has(.bathroom:hover) a.bathroom,
.map-view:has(.bathroom-1:hover) a.bathroom-1,
.map-view:has(.bathroom-2:hover) a.bathroom-2,

.map-view:has(.hallway:hover) a.hallway,
.map-view:has(.living-room:hover) a.living-room,
.map-view:has(.atelier:hover) a.atelier,
.map-view:has(.deck:hover) a.deck,
.map-view:has(.kitchen:hover) a.kitchen,
.map-view:has(.deck-south:hover) a.deck-south,
.map-view:has(.deck-north:hover) a.deck-north,


.map-view:has(.bedroom:hover) a.bedroom,
.map-view:has(.bedroom-1:hover) a.bedroom-1,
.map-view:has(.bedroom-2:hover) a.bedroom-2,
.map-view:has(.bedroom-3:hover) a.bedroom-3,
.map-view:has(.master-bedroom:hover) a.master-bedroom {
    color: var(--cntrst-d);
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
}

/* hover link → highlight matching rect */
.map-view:has(a.bathroom:hover) .bathroom,
.map-view:has(a.bathroom-1:hover) .bathroom-1,
.map-view:has(a.bathroom-2:hover) .bathroom-2,

.map-view:has(a.hallway:hover) .hallway,
.map-view:has(a.living-room:hover) .living-room,
.map-view:has(a.atelier:hover) .atelier,
.map-view:has(a.deck:hover) .deck,
.map-view:has(a.kitchen:hover) .kitchen,
.map-view:has(a.deck-south:hover) .deck-south,
.map-view:has(a.deck-north:hover) .deck-north,

.map-view:has(a.bedroom:hover) .bedroom,
.map-view:has(a.bedroom-1:hover) .bedroom-1,
.map-view:has(a.bedroom-2:hover) .bedroom-2,
.map-view:has(a.bedroom-3:hover) .bedroom-3,
.map-view:has(a.master-bedroom:hover) .master-bedroom {
    fill: var(--cntrst);
}

/* hover link → highlight link itself */
.map-view a:hover {
    color: var(--cntrst-d);
}