@import "_vars.css";
@import "_colors.css";
@import "_typo.css";
@import "_details.css";

.msp-oa {

    .location {
   
            display: flex;
            gap: .3rem;
            align-items: center;
            margin: 0;
        
    }

    .stateopen,
    .stateclosed,
    .statedetails {
        span.state {
            display: flex;
            gap: .3rem;
            align-items: center;
            margin: 0;
        }
        span.times {
            display: block;
            margin-top: -.3rem;
            padding-left: 1.6rem;
        }
        
    }

    .category {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .2rem .5rem;

        img {
            height: 24px;
        }
    }

    .difficulty {
        span[class] {
            padding: 2px 4px;
            border-radius: 5px;
        }
    }

    p,
    ul,
    ol,
    table {
        margin-bottom: 1em;
    }

    .icon {
        display: inline-flex;
        gap: .5rem;
        align-items: center;
    }


}

.msp-oa-items {
    container-type: inline-size;

    * {
        position: relative;
    }

    img {
        width: 100%;
        height: auto;
    }

    .switch-view {
        list-style: none;
        margin: 0 0 2rem;
        padding: 0;
        display: flex;
        justify-content: flex-end;

        button {
            border-radius: 0;
            padding: .5rem;
            line-height: 1;
        }

        li:nth-child(1) button,
        li:nth-child(2) button {
            border-right: none;
        }

        li:nth-child(1) button {
            border-top-left-radius: 1rem;
            border-bottom-left-radius: 1rem;
        }

        li:last-child button {
            border-top-right-radius: 1rem;
            border-bottom-right-radius: 1rem;
        }
    }

    p.no-result {
        padding: 1rem;
    }
    

    .items[data-view="list"] {
        overflow-x: auto;

        table {

            th,
            td {
                text-align: left;
                border: none;
                border-bottom: 1px solid black;
                vertical-align: middle;
                padding: .5rem;

                button {
                    padding: 0;
                    border: none;
                    white-space: unset;
                    text-align: left;

                }

                span[class]:not([class^="t"]) {
                    display: inline-flex;
                    align-items: center;
                    gap: .5rem;
                    white-space: normal;
                }
                span[class*="state"] {
                    white-space: normal!important;
                }

            }

            tr:hover button {
                text-decoration: underline;
                background-color: transparent!important;
                color: black!important;
            }

            td.title img {
                display: none;
            }

            td[class^="state"] {
                span {
                    display: inline-flex;
                }
            }

            td.difficulty {
                text-align: center;
            }

           

            th {
                border-width: 2px;
            }

            img {
                width: 3rem;
                padding: .2rem;
                border-radius: 10px;
                display: block;
            }

            @container (width < 840px) {

                img {
                    width: 2rem;
                    padding: 0;
                    border-radius: 10px;
                }

                
                td.title {
                    display: flex;
                    gap: .5rem;
                    align-items: center;
                    padding-left: 0;
                    img {
                        display: block;
                    }
                }
                
                thead {
                    display: none;
                }

                &.tour tbody tr {
                    grid-template-columns: repeat(4, 1fr);
                    grid-template-areas: "a a a a a" "c d e f g";
                }

                &.poi tbody tr {
                    grid-template-columns: repeat(5, 1fr);
                    grid-template-areas: "a a a a a" "c c d d d";
                }

                tbody tr {
                    display: grid;
                    border-bottom: 1px solid black;
                    align-items: center;
                    td {
                        border: none;
                    }

                    td:nth-child(1) {
                        grid-area: a;
                        display: none;
                    }

                    td:nth-child(2) {
                        grid-area: a;
                    }

                    td:nth-child(3) {
                        grid-area: c;
                    }

                    td:nth-child(4) {
                        grid-area: d;
                    }

                    td:nth-child(5) {
                        grid-area: e;
                    }

                    td:nth-child(6) {
                        grid-area: f;
                    }

                    td:nth-child(7) {
                        grid-area: g;
                    }

                    td:nth-child(8) {
                        grid-area: h;
                    }


                }
            }

        }
    }

    .items[data-view="grid"] {
        display: grid;
        grid-template-rows: auto auto;
        gap: 1.5rem;

        grid-template-columns: 1fr;

        @container (width > 500px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @container (width > 840px) {
            grid-template-columns: repeat(3, 1fr);
        }

        article {
            grid-row: span 2;
            display: grid;
            grid-template-rows: subgrid;

            header {
                grid-row: 1;
                display: grid;
                grid-template-rows: auto 1fr;
            }

            &>div {
                grid-row: 2;
            }

            div.category {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 10;

                gap: .3rem;
                padding: .2rem .5rem;

                img {
                    height: 24px;
                }
                span {
                    white-space: nowrap;
                }
            }
            &:hover h4 {
                text-decoration: underline;
            }
        }
    }

    .items[data-view="map"] {
        display: grid;
        gap: 0;

        border-radius: 2rem;
        overflow: hidden;
        border: 1.5px solid black;

        grid-template-columns: 1fr;

        .list {
            order: 2;
        }

        .map {
            order: 1;
            height: 50dvh;
        }


        @container (width > 840px) {
            aspect-ratio: 3 / 2;
            grid-template-columns: 21rem auto;

            .list {
                order: 1;
                overflow: auto;
            }

            .map {
                order: 2;
                height: auto;
            }
        }

        .list {

            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            scrollbar-color: white black;

            article {
                border-radius: 0;

                header {
                    margin-bottom: .5rem;

                    h4 {
                        aspect-ratio: unset;
                    }
                }

                &:hover {
                    h4 {
                        text-decoration: underline;
                    }
                }

                &>div {
                    display: grid;
                    grid-template-columns: 30% auto;

                    gap: .5rem;

                    picture {
                        border-radius: 8px;
                        overflow: hidden;

                        div.category {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 1.6rem;
                        }

                        img {
                            aspect-ratio: 1;
                            border-radius: 8px;
                            object-fit: cover;
                            object-position: center;

                        }
                    }

                    div {
                        padding: 0;
                    }

                }


            }
        }
    }

    article {
        overflow: hidden;
        border-radius: 15px 15px 10px 10px;

        &[role="button"] {
            cursor: pointer;
        }

        header {
            display: flex;
            flex-wrap: wrap;

            &>img {
                order: 1;
                aspect-ratio: 4 / 2;

            }

            h4 {
                order: 2;
                margin: 1.2rem 1.2rem 0;

            }
        }

        div {
            padding: 0 1.2rem 1.2rem;

            p.desc {
                margin-top: 1.2rem;
            }
        }
    }

   
    div.filter {
        margin-bottom: 1rem;
        button.reset::after  {
            display: none;
        }
        @media screen and (max-width: 64em) {
            
            .form-actions {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 1rem;
            }
        }
        @media screen and (min-width: 37.5em) {
            .form-actions {
                display: block;
            }
            button.apply {
                display: none;
            }
            button.reset {
                /*
                border: none;
                border-bottom: 1.5px solid black;
                border-radius: 0;
                */
                border: none;
                padding: .3rem .5rem .3rem 2.2rem;
                &::after {
                    display: block;
                    position: absolute;
                    bottom: .2rem;
                    left: .5rem;
                }
            }
        }
    }

    div.filter>button {
        padding: 4px 16px;
        border: 2px solid black;

        border-radius: 5px;
        display: flex;
        gap: .5rem;
        transform: translateY(3px);
        z-index: 10;

        

        &[aria-expanded]+form {
            display: block;
        }

        &[aria-expanded] {
            border-bottom-color: white;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        @media screen and (min-width: 37.5em) {
            display: none;
            &[aria-expanded]+form {
                display: flex;
            }
        }
    }

    div.filter>form {
        display: none;
        border: 2px solid black;
        border-radius: 5px;
        border-top-left-radius: 0;
        padding: 2rem;

        label {
            width: 100%;
            margin-bottom: 1rem;

            &::before {
                position: absolute;
                bottom: .5rem;
                right: 0;
            }

            span {
                display: block;
                margin-bottom: .5rem;
            }

            select {
                appearance: none;
                background: none;
                border: none;
                border-radius: 0;
                border-bottom: 1.5px solid black;
                padding: .3rem 2rem .3rem .2rem;
                cursor: pointer;
            }
        }

        @media screen and (min-width: 37.5em) {
            display: flex;
            flex-wrap: wrap;
            gap: 3rem;
            border: none;
            padding: 0;
            align-items: flex-end;

            label {
                width: auto;
                margin: 0;
            }
        }
    }

    p.difficulty {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        align-items: center;
    }

    .msp-oa-showmore {
        padding: 2rem;
        text-align: center;

        button {
            border-width: 2px;
            border-radius: 5px;
        }
    }
}

.msp-oa .vh,
.msp-oa ul.rating span,
.msp-oa ul.season span.value,
.msp-oa .splide__arrow span,
.msp-oa-items .switch-view button span,
.msp-oa-items table caption,
.msp-oa-items .items[data-view="map"] div.category span {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute!important;
    white-space: nowrap;
    width: 1px;
}

.msp-oa-items ul.facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem 1rem;
    margin: 1.2rem 0;
    padding: 0;

    li {
        list-style-type: none;
        display: flex;
        gap: .5rem;
        align-items: center;
    }
    
}

#msp-oa-detail ul.facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .3rem;
    margin: 0 auto;
    padding: .5rem 1rem;
    max-width: 700px;
    li {
        list-style-type: none;
        display: flex;
        gap: .5rem;
        align-items: center;
    }

    @media screen and (max-width: 37.5em) {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-template-areas: "a b c" "d e f";
       li {
        justify-content: center;
       }
       li.distance {
        grid-area: a;
       }
       li.duration {
        grid-area: d;
       }
       li.up {
        grid-area: b;
       }
       li.down {
        grid-area: e;
       }
       li.high {
        grid-area: c;
       }
       li.low {
        grid-area: f;
       }
    }
}

.msp-oa-items .hidden {
    display: none !important;
}

.msp-oa a.show-location {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.msp-oa button {
    border-width: 1.5px;
}

.msp-oa a[href] {
    span {
        text-decoration: underline;
    }
    display: inline-flex;
    gap: .5rem;
    align-items: center;

    &.sep {
        margin-bottom: 1.5rem;
    }

}

.msp-oa,
#msp-oa-detail {
    .leaflet-popup-content button {
        padding: 0;
        border: none;
        font-weight: 700;
        width: 260px;
        max-width: 80vw;
        white-space: normal;
    }
}