/* -------------------------- 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;
}

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

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

    & :hover {
        cursor: pointer;
    }

    /* ------------ x Icon Color */

    & #icon-x {
        grid-row: 1;
        grid-column: -3;

        width: 1em;
        height: 1em;
        grid-column: -3;
        justify-self: right;
    }
}

.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);

    & #icon-x {
        grid-row: 1;
        grid-column: -3;

        width: 1em;
        height: 1em;
        grid-column: -3;
        justify-self: right;
    }

    & .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 {
    overflow-x: hidden;


    scroll-snap-align: center;

    background-color: var(--light);
    color: var(--black);
    padding: 1lh 0;

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

    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 0 repeat(12, 1fr) 0;
    gap: 1lh;

    & header {
        position: relative;
        z-index: 3;
        width: fit-content;
        grid-column: 3 / 6;
        grid-row: 1;
        display: grid;
        grid-template-columns: subgrid;
        padding-top: 1lh;

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

        }

        .linktobuilding {
            grid-column: span 2;
        }

    }

    & .room-list {
        grid-column: 3 / 7;
        grid-row: 3;

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

    & .floorplan,
    & .full-drawing {
        height: 100%;
        width: calc(100vw - 4lh);

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

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

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

#cottage {

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

#apartment {

    & .room-list {
        padding-top: 1lh;
        grid-row: 1;
        grid-column: -6 / -4;
        align-self: start;
    }
}


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

.map-nav__prev,
.map-nav__next {
    grid-row: 1 / 4;
    align-self: center;
    z-index: +1;


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

.map-nav__prev {
    grid-column: 1;
    padding-left: 1lh;
}

.map-nav__next {
    grid-column-end: -1;
    padding-right: 1lh;
    justify-self: end;
}

/* ------ 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.09em;
}

/* 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);
}