/* @group portfolio View
------------------------------------ */

.portfolio-view {
    --transition: 0.25s;
    --_b: 1px solid var(--tower-red);
    position: relative;
    z-index: var(--z-index-medium-low);
}

.portfolio-view menu {
    margin: 0;
    padding: 0;
}

.portfolio-view .views {
    transition: 0.5s;
    min-height: 50vh;
}

.portfolio-view:not([data-view="map"]) .view {
    transition: var(--transition);
}

.portfolio-view:not([data-view="map"]) .view.map,
.portfolio-view:not([data-view="list"]) .view.list {
    opacity: 0;
    position: absolute;
    pointer-events: none;
    display: none;
}

.portfolio-view[loading] .views {
    opacity: 0;
    pointer-events: none;
}

.portfolio-view[loading] .views {
    transition: var(--transition);
}

/* LEGENG */
.portfolio-view .legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2.4rem;
}

.portfolio-view[data-view="list"] .legend {
    display: none;
}

@media screen and (max-width: 961px) {
    .portfolio-view .legend {
        padding-bottom: 4.3rem;
    }
}

@media screen and (min-width: 961px) {
    .portfolio-view .legend {
        padding-bottom: 1.4rem;
    }
}

.portfolio-view .legend .pin {
    display: flex;
    gap: 1.2rem;
}

/* LEGENG */

/* FILTERS */
.portfolio-view .filters {
    display: flex;
    position: relative;
    z-index: 1;
}

.portfolio-view .filter {
    display: flex;
}

.portfolio-view .filters :is(p, i) {
    color: var(--tower-red);
}

.portfolio-view .filter.category {
    position: relative;
}

.portfolio-view .filter.category header {
    cursor: pointer;
}

.portfolio-view .filter.category .bttn-wrapper {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: 0.5s;
}

.portfolio-view .filter.category[open] .bttn-wrapper {
    opacity: 1;
    pointer-events: all;
}

.portfolio-view .filter.category .bttn-wrapper {
    inset-inline: -1px;
    padding: 1.4rem 1.9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 5.3rem;
    background: var(--white);
    border: var(--_b);
    border-top: unset;
}

.portfolio-view .filter.category button {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.portfolio-view .filter.category button * {
    pointer-events: none;
}

.portfolio-view .filter.category button::before {
    content: '';
    --_s: 1rem;
    width: var(--_s);
    height: var(--_s);
    background: transparent;
    border: var(--_b);
    transition: 0.5s;
}

.portfolio-view .filter.category button.active {
    pointer-events: none;
}

.portfolio-view .filter.category button.active::before {
    background: var(--tower-red);
}

.portfolio-view[data-view="list"] .filter.view [data-view="list"],
.portfolio-view[data-view="map"] .filter.view [data-view="map"] {
    background: #f0dedc;
}

.portfolio-view .filter.view>* {
    flex: 0 0 50%;
    justify-content: center;
    align-items: center;
    border-right: var(--_b);
}

.portfolio-view .filter.category {
    flex-direction: column;
    flex: 1 0 auto;
}

.portfolio-view .filter.category header {
    justify-content: space-between;
    align-items: center;
}

.portfolio-view .filter> :is(button, header) {
    display: flex;
}

.portfolio-view .splide__arrow svg {
    fill: transparent;
    width: 1.9rem;
    height: auto;
}

.portfolio-view .splide__arrow--prev svg{
    transform: none;
}

@media only screen and (min-width : 961px) {
    .portfolio-view .filters {
        border: var(--_b);
        background: var(--white);
    }

    .portfolio-view .filter> :is(button, header) {
        padding-block: 1.5rem;
        padding-inline: 1.8rem;
    }

    .portfolio-view .filter.view {
        flex: 0 1 60rem;
    }


}

@media only screen and (min-width : 0) and (max-width : 960px) {

    .portfolio-view .filters {
        position: fixed;
        bottom: 0;
        z-index: var(--z-index-modal);
    }

    .portfolio-view .filters {
        gap: 0;
        flex-direction: row;
        width: 100%;
        left: 50%;
        translate: -50% 0;
    }

    .portfolio-view .filter {
        border: var(--_b);
        background: var(--white);
        color: var(--tower-red);
        flex: 0 0 50%;
    }

    .portfolio-view .filter> :is(button, header, #important) {
        padding-block: 1.7rem;
        padding-inline: 3.3rem;
        justify-content: space-around;
    }


    .portfolio-view .filter.view :is([data-view], #important) {
        flex: 1;
        background: none;
        border-right: none;
    }

    .portfolio-view .filter> :is(button, header) i {
        font-size: 1.5rem;
    }

    .portfolio-view .filter.view [data-view].active {
        display: none;
    }

    .portfolio-view .filter.category {
        border-left: none;
    }

    .portfolio-view .filter.category .bttn-wrapper {
        flex-direction: column;
        gap: 3rem;
        bottom: 5.59rem;
        top: unset;
        padding: 1.3rem 2rem;
        align-items: flex-start;
        justify-content: flex-start;
        /* border-bottom: none; */
        border-top: var(--_b);
    }

    .portfolio-view .filter.view button:last-child {
        border-right: none;
    }
}

/* @end */

/* LIST VIEW */

.portfolio-view .view.list:not([error]) .error {
    display: none;
}

.portfolio-view .view.list .content header * {
    color: var(--tower-red);
}

.portfolio-view .view.list .location>h2 {
    color: var(--tower-red);
}

.portfolio-view .view.list .content header {
    gap: 1.5rem;
}

.portfolio-view .view.list .content header ul {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
}

.portfolio-view .view.list .content :is(header, footer) {
    display: flex;
    flex-direction: column;
}

.portfolio-view .view.list .has-heading-subhead-font-size {
    text-transform: uppercase;
}

.portfolio-view .view.list .content a {
    text-decoration: underline;
}

.portfolio-view .view.list .content footer h4 {
    color: var(--tower-red);
    margin: 0 0 1.5rem;
}

.portfolio-view .view :is(.location, .item, #important):not(.active) {
    display: none;
}

.portfolio-view .view.list .splide {
    overflow: hidden;
    position: relative;
}

.portfolio-view .view.list .splide__arrows {
    display: flex;
    justify-content: space-between;
    inset-inline: 0;
    top: 50%;
    translate: 0 -50%;
    position: absolute;
    left: 0;
    padding-inline: 2rem;
    pointer-events: none;

}

.portfolio-view .view.list .splide__arrow {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: all;
}

.portfolio-view .view.list .splide__arrow[disabled] {
    opacity: 0;
    pointer-events: none;
}

.portfolio-view .view.list .splide__arrow i {
    color: var(--white);
    font-size: 4.6rem;
}

.portfolio-view .view.list .splide__slide {
    width: 100%;
}

.portfolio-view .view.list .splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portfolio-view .view.list .content :is(footer) p,
.portfolio-view .view.list .content :is(header) ul p {
    line-height: 1em;
}

.portfolio-view .view.list .content :is(header) ul p {
    position: relative;
    top: -.1rem;
}

@media only screen and (min-width : 961px) {

    .portfolio-view .view.list {
        padding-top: 2.4rem;
    }

    .portfolio-view .view.list,
    .portfolio-view .view.list .location {
        display: flex;
        flex-direction: column;
        gap: 2.4rem;
    }

    .portfolio-view .view.list .item {
        display: flex;
        gap: 2rem;
    }

    .portfolio-view .view.list .splide {
        flex: 0 0 49.8rem;
        height: 49.8rem;
    }

    .portfolio-view .view.list .splide__slide {
        height: 49.8rem;
    }

    .portfolio-view .view.list .content {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        gap: 3.7rem;
    }

    .portfolio-view .view.list .content p {
        --fs: 1.7rem;
        --lh: 1.47em;
    }

}

@media only screen and (min-width : 0) and (max-width : 960px) {

    .portfolio-view {
        margin-bottom: -4rem;
    }

    .portfolio-view .view.list h2 {
        padding-bottom: 2rem;
        margin-bottom: 2rem;
        position: relative;
    }

    .portfolio-view .view.list h2::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        translate: -50% 0;
        height: 1px;
        width: 100vw;
        background: var(--tower-red);
    }

    .portfolio-view .view.list .item {
        margin-bottom: 4rem;
        display: block;
    }

    .portfolio-view .view.list .splide {
        height: 79.5vw;
        margin-bottom: 1rem;
    }

    .portfolio-view .view.list .splide__slide {
        height: 79.5vw;
    }

    .portfolio-view .view.list .content {
        gap: 3rem;
        display: flex;
        flex-direction: column;
    }
}

/* MAP VIEW */

.portfolio-view .view.map .maped-wrapper {
    width: 100%;
    border: var(--_b);
}

.portfolio-view .view.map :is(.cluster, #important) {
    display: grid;

}

.portfolio-view .view.map .cluster,
.portfolio-view .view.map .cluster>* {
    --_s: 4rem;
    width: var(--_s) !important;
    height: var(--_s) !important;
    grid-area: 1 / 1;
}


.portfolio-view .view.map .cluster div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.portfolio-view .view.map .cluster :is(span, #important) {

    font-family: var(--ff);
    font-weight: var(--fw);
    font-size: var(--fs);
    line-height: var(--lh);
    letter-spacing: var(--ls);

    --ff: var(--textFont);
    --fw: 400;
    --fs: 1.7rem;
    --ls: auto;
    --lh: 1.47em;

    color: var(--white);
}

.portfolio-view .view.map .bubble {
    height: fit-content !important;
    width: fit-content !important;
    border: var(--_b) !important;
    border-radius: 0 !important;
    padding: 3rem 2rem;
    max-width: 30rem;
    color: var(--tower-red);
}

.portfolio-view .view.map .bubble .description {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.portfolio-view .view.map .bubble #content {
    display: flex;
    gap: 1.5rem;
    text-transform: uppercase;
}

.portfolio-view .view.map .bubble {}

.portfolio-view .view.map .arrow div:first-child {
    border-color: var(--tower-red) transparent transparent !important;
}

.portfolio-view .view.map h2 {
    --fw: 500;
}

.portfolio-view .view.map .aside-list .item {
    color: var(--tower-red);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);
    cursor: pointer;
}

.portfolio-view .view.map .aside-list .item>* {
    pointer-events: none;
}

.portfolio-view .view.map .aside-list .item .img-box {
    height: 20rem;
}

.portfolio-view .view.map .aside-list .item header {
    padding: 2rem 1.2rem;
}

.portfolio-view .view.map .aside-list .item header :is(.has-heading-h-3-font-size, .has-paragraph-small-font-size) {
    margin: 0 0 1.2rem;
}

.portfolio-view .view.map .aside-list .item header ul {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.portfolio-view .view.map .aside-list .item header ul li {
    text-transform: uppercase;
}

.portfolio-view .view.map .aside-list .item footer {
    padding: .6rem 1.2rem;
    border-top: var(--_b);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.portfolio-view .view.map .aside-list .item footer i {
    font-size: 2.5rem;
}

@media only screen and (min-width : 961px) {
    .portfolio-view .view.map {
        display: flex;
        justify-content: space-between;
        position: relative;
    }

    .portfolio-view .view.map .aside-list {
        flex: 0 1 60rem;
        padding: 1rem;
        border-inline: var(--_b);
        border-bottom: var(--_b);
        border-right: none;
        gap: 1rem;
        background: rgba(192, 35, 54, .1);
    }

    .portfolio-view .view.map .aside-list .location {
        display: flex;
        flex-wrap: wrap;
        gap: 1.2rem 1rem;
        margin-bottom: 2.4rem;
    }

    .portfolio-view .view.map .aside-list .item {
        flex: 0 1 calc(50% - .5rem);
        border: var(--_b);
        display: flex;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.55);
        transition: 0.5s;
    }

    .portfolio-view .view.map .aside-list .item.selected,
    .portfolio-view .view.map .aside-list .item:hover {
        background: white;
    }

    .portfolio-view .view.map .maped-wrapper {
        flex: 0 1 calc(100% - 60rem);
        border-top: none;
        border-bottom: var(--_b);
        position: sticky;
        top: var(--heightNav);
    }

    .portfolio-view .view.map :is(.maped-wrapper, .maped) {
        height: calc(100vh - var(--heightNav));
    }

    .portfolio-view .view.map .maped-wrapper .maped {
        border-bottom: 1px solid transparent;
    }

}

@media only screen and (min-width : 0) and (max-width : 960px) {
    .portfolio-view .view:is(.map, #important) {
        width: 100vw;
        max-width: none;
        left: 50%;
        translate: -50% 0;
        padding: 0;
    }

    .portfolio-view .view.map .maped-wrapper {
        border-inline: none;
    }

    .portfolio-view .view.map .maped {
        height: 87.43vh;
    }

    .portfolio-view .view.map .aside-list {
        display: none;
    }
}


/* OVERLAY */
#overlay-lightbox .content-static p {
    text-align: center;
    color: var(--tower-grey);
}

#overlay-lightbox .content-static a {
    text-decoration: underline;
}

#overlay-lightbox::backdrop {
    background-color: var(--white);
}

#overlay-lightbox :where(.splide, header, footer) {
    width: 100%;
    padding: 0;
    margin: 0;
}

#overlay-lightbox .row {
    gap: 1rem !important;
}

#overlay-lightbox .splide__arrow {
    opacity: 1;
}

#overlay-lightbox .splide__arrow svg {
    fill: transparent;
    width: 1.2rem;
    height: auto;
}

#overlay-lightbox .splide__arrow[disabled] {
    opacity: 0;
    pointer-events: none;
}

#overlay-lightbox #close-dialog {
    padding: 0;
    margin-bottom: -1rem;
}

#overlay-lightbox #close-dialog i {
    font-size: 3.5rem;
}

#overlay-lightbox .splide__arrow i {
    font-size: 3rem;
}

#overlay-lightbox footer {
    padding-block: 1rem;
    padding-inline: 4rem;
    height: 4rem;
}

@media only screen and (min-width : 961px) {

    #overlay-lightbox {
        --h-header: 4vh;
        --h-slide: 80vh;
    }

    #overlay-lightbox .container {
        padding-inline: 3rem;
        padding-block: 1.5rem 2.5rem;
    }


    #overlay-lightbox .row>header {
        height: var(--h-header);
    }

    #overlay-lightbox .row>footer {
        height: var(--h-footer);
    }


    #overlay-lightbox .splide .splide__slide {
        height: var(--h-slide);
    }

    #overlay-lightbox .splide__arrows {
        top: 80vh;
        bottom: 0;
        translate: -50% 0;
        padding-inline: 0;
    }




}

@media only screen and (min-width : 0) and (max-width : 960px) {
    #overlay-lightbox::backdrop {
        background-color: rgba(255, 255, 255, 0.65);
    }

    #overlay-lightbox .splide .splide__slide {
        height: 30.07vh;
    }

    #overlay-lightbox .container {
        background: var(--white);
        padding-block: 1.8rem;
        padding-inline: 3rem;
        height: 100%;
    }

    #overlay-lightbox .splide__arrows {
        position: absolute;
        width: 100%;
        bottom: -0.5rem;
    }
}

/* Animations
------------------------------------ */
:where(#wrapper) .portfolio-view {
    opacity: 0;
    --duration: 1s;
}

:where(#wrapper) .portfolio-view.animateActive {
    animation: fade var(--duration) forwards;
    animation-delay: var(--delay, 0);
}


/* OVERLAY */


#overlay[data-slug="aside-list"] {
    overflow: visible;
}

#overlay[data-slug="aside-list"] .overlay-slider>.splide__arrows {
    display: none;
}

#overlay[data-slug="aside-list"] .overlay-slider {
    background: var(--white);
    padding: var(--p-splide);
}

#overlay[data-slug="aside-list"] .overlay-slider>.splide__track>.splide__list>.splide__slide {
    display: flex;
    padding: var(--p-slide);
    border: 1px solid var(--tower-red);
}

#overlay[data-slug="aside-list"] .splide__slide::-webkit-scrollbar {
    width: .7rem;
    background-color: transparent;
    border-left: 1px solid var(--tower-red);
}

#overlay[data-slug="aside-list"] .splide__slide::-webkit-scrollbar-thumb {
    background-color: var(--tower-red);
    border-radius: 2.5rem;
}

#overlay[data-slug="aside-list"] .splide__slide .img-box {
    width: 100%;

}

#overlay[data-slug="aside-list"] .splide__slide .img-box picture {
    width: 100%;
    height: 100%;
    display: block;
}

#overlay[data-slug="aside-list"] .splide__slide .img-box :is(img, #important) {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

#overlay[data-slug="aside-list"] .row {
    position: relative
}

#overlay[data-slug="aside-list"] .row>header {
    position: absolute;
    top: 0;
    z-index: 1;
    --_p: var(--p-splide) + var(--p-slide);
    padding: calc(var(--_p) * 0.5);
    pointer-events: none;
}

#overlay[data-slug="aside-list"] .row>header #close-dialog {
    pointer-events: all;
}

#overlay[data-slug="aside-list"] .splide__slide article {
    display: flex;
    flex-direction: column;
}

#overlay[data-slug="aside-list"] .splide__slide header {
    color: var(--tower-red);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

#overlay[data-slug="aside-list"] .splide__slide header ul {
    display: flex;
    align-items: center;
    gap: 1.3rem;
}

#overlay[data-slug="aside-list"] .splide__slide :is(.description, .description *) {
    color: var(--black);
}

#overlay[data-slug="aside-list"] .has-heading-subhead-font-size {
    text-transform: uppercase;
}

#overlay[data-slug="aside-list"] .inner-splide .splide__arrow {
    font-size: 4.6rem;
}

#overlay[data-slug="aside-list"] .inner-splide .splide__arrow svg {
    fill: none;
    opacity: 1;
}

#overlay[data-slug="aside-list"] .splide__slide footer {
    margin-top: 2.4rem;
}

#overlay[data-slug="aside-list"] footer h4 {
    color: var(--tower-red);
}

#overlay[data-slug="aside-list"] h2 {
    line-height: 1.2em;
}

#overlay[data-slug="aside-list"] .content-static {
    display: none;
}

#overlay[data-slug="aside-list"] footer p *,
#overlay[data-slug="aside-list"] footer p {
    color: var(--black);

}

#overlay[data-slug="aside-list"] footer p a {
    text-decoration: underline;
}



@media only screen and (min-width : 0) and (max-width : 960px) {
    #overlay[data-slug="aside-list"] {
        --p-splide: 1rem;
        --p-slide: 2rem;


        padding: 0;
        margin: 0;
        max-height: none;
        top: 0;
        height: 100vh;
    }

    #overlay[data-slug="aside-list"] .row {
        padding: 0 !important;
    }

    #overlay[data-slug="aside-list"] .overlay-slider>.splide__track>.splide__list>.splide__slide {
        gap: 3rem;
        --_p: var(--p-splide) + var(--p-slide);
        height: calc(100vh - var(--_p) - 6rem);
        overflow: auto;
    }

    #overlay[data-slug="aside-list"] .splide__slide article {
        gap: 2.5rem;
    }

    #overlay[data-slug="aside-list"] .splide__slide .img-box {
        height: 42rem;
    }

    #overlay[data-slug="aside-list"] #close-dialog {
        padding: 1.2rem;
        background: var(--white);
        transition: 0;
    }

    #overlay[data-slug="aside-list"]:has(.scrolled) #close-dialog {
        opacity: 0;
        pointer-events: none;
    }

    #overlay[data-slug="aside-list"] #close-dialog i {
        font-size: 3rem;
    }
}

@media only screen and (min-width : 961px) {

    #overlay[data-slug="aside-list"] {
        --nav-h: 7rem;
        --_h: calc(92vh - (var(--nav-h) * 1));
        transform: translate(0, calc(var(--nav-h) * 0.5));
        top: 50%;
        translate: 0 -50%;
        bottom: unset;
    }

    #overlay[data-slug="aside-list"] {
        --p-splide: 1.7rem;
        --p-slide: 1.8rem;
    }


    #overlay[data-slug="aside-list"] .overlay-slider {
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    }

    #overlay[data-slug="aside-list"] .overlay-slider>.splide__track>.splide__list>.splide__slide {
        height: calc(var(--_h) - var(--p-splide) - var(--p-slide));
        gap: 2.8rem;
        align-items: center;
        overflow: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    #overlay[data-slug="aside-list"] .overlay-slider>.splide__track>.splide__list>.splide__slide>aside {
        flex: 0 1 48%;
    }

    #overlay[data-slug="aside-list"] .overlay-slider>.splide__track>.splide__list>.splide__slide>article {
        flex: 0 1 42%;
    }

    #overlay[data-slug="aside-list"] .overlay-slider .splide__slide.img-box {
        height: calc(var(--_h) - var(--p-slide) - var(--p-slide) - 3.7rem);
    }

    #overlay[data-slug="aside-list"] #close-dialog {
        right: 1rem;
    }

    #overlay[data-slug="aside-list"] #close-dialog i {
        font-size: 4rem;
    }

    #overlay[data-slug="aside-list"] .splide__slide header ul {
        margin: 0 0 2.4rem;
    }
}