/**
Theme Name: Suma Arquitectura
Author: Moio
Author URI: https://moio.io/
Description: Suma Arquitectura
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: suma-arquitectura
Template: astra
*/

@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/Inter-Regular.woff') format('woff'),
         url('assets/fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/Inter-Italic.woff') format('woff'),
         url('assets/fonts/Inter-Italic-VariableFont_opsz,wght.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

:root {
    --font-size: 16px;
    --font-weight: 600;
}

html, body {
    font-family: 'Inter', sans-serif;
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    line-height: 1.4;
    letter-spacing: 0.03em;

    /*scrollbar-color: var(--ast-global-color-6) #fff;
    scrollbar-width: 2px;*/
    /* scrollbar-width: thin; */
}



address {
    margin: 0;
}


.site-content .elementor > .elementor-element:not(.section__hero) {
    content-visibility: auto;
}


/*  Elementor + Astra fixes  */
@media (max-width: 544px) {
    .ast-separate-container #content .ast-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
body.elementor-template-full-width.ast-separate-container .site-content .ast-container {
    padding: 0;
    max-width: 100% !important;
}
body.elementor-template-full-width .site-content .ast-container {
    padding: 0;
    max-width: 100% !important;
}
body.elementor-template-full-width.ast-separate-container .site-content .ast-container .ast-article-single {
    padding: 0;
}
body #ast-scroll-top {
}

body #ast-scroll-top {
    background: transparent;
    color: var(--ast-global-color-0);

    right: 1rem;

    font-size: 3rem;
    width: 1em;
    height: 1em;
    line-height: 1em;
    .ast-icon.icon-arrow {
        display: inline-block;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 48.2 27.5'%3E%3Cpolygon fill='%23000' points='48.2 24 24.5 .2 24.5 .2 24.2 0 .2 24 3.7 27.5 24.3 7 44.7 27.4 48.2 24'/%3E%3C/svg%3E");background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 48.2 27.5'%3E%3Cpolygon fill='%23000' points='48.2 24 24.5 .2 24.5 .2 24.2 0 .2 24 3.7 27.5 24.3 7 44.7 27.4 48.2 24'/%3E%3C/svg%3E");
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        /* font-size: 3rem; */
        line-height: 1em;
        svg {
            opacity: 0;
            width: 1em;
            height: auto;
        }
    }
    @media screen and (min-width: 768px) {
        font-size: 4rem;
        right: 2rem;
    }
    @media screen and (min-width: 992px) {
        font-size: 4.5rem;
        right: 3rem;
    }
}


/* Helpers */
.text--clear {
    color: var(--ast-global-color-1);
}
.text--large {
    font-size: 2rem;
    line-height: 1.1;
}

.text--right {
    text-align: right;
}

@media screen and (min-width: 768px) {
    .text--large {
        font-size: 3rem;
    }
    
}


/************************************/
/*              HEADER              */
/************************************/

/*  */
/* header .header__toggle a {
    position: relative;
}
header .header__toggle a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 100%;
    background: var(--ast-global-color-0);
} */
/* header .header__toggle svg {
    opacity: 0 !important;
    display: none !important;
} */


/* options to make the header work with mix-blend mode */

header {mix-blend-mode: exclusion;}
header .main--logo svg {
    width: 5rem;height:auto;
    @media screen and (min-width: 768px) {
        width: 6.25rem;
    }
    @media screen and (min-width: 992px) {
        width: 7.5rem;
    }
}

header .main--logo svg *,
header .header__toggle svg * {
    /* fill: var(--ast-global-color-0); */
    fill: #fff;
}

.offcanvas--wrapper {
    z-index: 99 !important;
    + header {
        z-index: 999 !important;
    }
}

header .header__off-canvas-wrapper {
    .header__toggle {
        z-index: 101 !important;
    }
    .elementor-element.elementor-widget.elementor-widget-off-canvas {
        z-index: 100 !important;
    }
    .elementor-element.elementor-widget.elementor-widget-off-canvas .e-off-canvas {
        height: 100vh !important;
    }
}

body.e-off-canvas__no-scroll header .header__toggle .elementor-icon {
    transition: transform 0.3s ease-in-out;
}
body.e-off-canvas__no-scroll header .header__toggle .elementor-icon,
header .header__toggle .elementor-icon[aria-expanded="true"] {
    transform: rotate(45deg);
}
body.header-sticky--visible header {
    transform: translateY(0);

    transition: transform 0.2s ease-in-out;
}
body.header-sticky--hidden:not(.e-off-canvas__no-scroll-animation) header {
    transform: translateY(-110%);
}

.offcanvas--wrapper {
    .elementor-widget-off-canvas {
        .e-off-canvas__content {
            > div {
                padding-inline: 1rem;
            }
        }
    }

    .elementor-widget-wpml-language-switcher {
        .wpml-ls-legacy-list-horizontal {
            padding: 0;
            ul {
                display: flex;
                gap: 40px;
                li {
                    a {
                        padding: 0;
                        font-size: 2rem;
                        /* font-size: 2.625rem; */
                    }
                    &.wpml-ls-current-language {
                        a {
                           color: var(--ast-global-color-1);
                           pointer-events: none;
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width: 599px) {
        .elementor-widget-off-canvas {
            .e-off-canvas__content {
                > div {
                    flex-flow: column-reverse !important;
                    padding-top: 120px;
                    gap: 48px;
                }
            }
        }
    }
    @media screen and (min-width: 600px) {
        .elementor-widget-off-canvas {
            .e-off-canvas__content {
                > div {
                    padding: 0 4rem 4rem 4rem;
                }
            }
        }
    }
}

/* Fix with admin bar */
/* body.admin-bar .offcanvas--wrapper {
    @media screen and (max-width: 599px) {
        & .elementor-widget-off-canvas {
            & .e-off-canvas__content {
                > div {
                    padding-top: calc(46px + 1rem);
                }
            }
        }
    }
} */



/* header {z-index: 1 !important;} */

.e-off-canvas__overlay {
    backdrop-filter: blur(5px);    
}

html, body {
    scrollbar-gutter: stable;
}
/* Fix shifting issue with fixed elements */
#page {
    overflow: hidden;
}


/* Remove default p margins */
p, .entry-content p {
    margin: 0;
}

/************************************/
/*              FOOTER              */
/************************************/

footer {
    line-height: 1.5em;
    p {margin: 0;}
    address {
        font-style: normal;
        margin: 0;
        a {
            color: var(--ast-global-color-1);
            &:hover {
                color: var(--ast-global-color-0);
            }
        }
    }
    > .elementor-element > .elementor-element > .e-con-inner > .elementor-element {
        display: grid;
        gap: 2.5em;
    }
    .copyinfo-col {
        gap: 2.5em;
    }
    .footer__logo img {
        width: 83.333% !important;
    }
    .elementor-nav-menu--main {
        ul {
            li {
                a {
                    padding: 0 !important;
                    margin: 0 !important;
                    line-height: 1.5em;
                }
            }
        }
    }
    
    .menus-col {}

    .menus-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    @media screen and (min-width: 768px) {
        > .elementor-element > .elementor-element > .e-con-inner > .elementor-element {
            grid-template-columns: 1fr;
        }
        .copyinfo-col,
        .menus-col {
            > div {
                flex: 1 1 auto;
            }
        }
        /* .menus-col {
            display: flex;
            > div {
                flex: 0 0 min(197px, 50%);
            }
        } */
    }
    @media screen and (min-width: 1200px) {
        > .elementor-element > .elementor-element > .e-con-inner > .elementor-element {
            grid-template-columns: 58.333% 1fr;
        }
        .copyinfo-col {
            justify-content: space-between;
            > div {
                width: auto;
            }
        }
        .menus-col {
            display: grid;
            /*display: flex;
            > div {
                flex: 0 0 min(197px, 50%);
            }*/
            grid-template-columns: 20% 1fr 1fr;
            > div:first-child {
                grid-column: 2 !important;
            }
        }
    }
}


/************************************/
/*        CLASSES SISTEM            */
/************************************/


/* Item width */
.item--full,
.item--half {
    width: 100%;
}

/* Aspect ratios */
.ratio--1-1  .item {aspect-ratio: 1 / 1;}
.ratio--16-9 .item {aspect-ratio: 16 / 9;}
.ratio--9-16 .item {aspect-ratio: 9 / 16;}
.ratio--4-3  .item {aspect-ratio: 4 / 3;}
.ratio--3-4  .item {aspect-ratio: 3 / 4;}

.p-l--0 {padding-left: 0;}
.p-l--1 {padding-left: 8.33333%;}
.p-l--2 {padding-left: 16.66667%;}
.p-l--3 {padding-left: 25%;}
.p-l--4 {padding-left: 33.33333%;}
.p-r--0 {padding-right: 0;}
.p-r--1 {padding-right: 8.33333%;}
.p-r--2 {padding-right: 16.66667%;}
.p-r--3 {padding-right: 25%;}
.p-r--4 {padding-right: 33.33333%;}

.text--right {text-align: right;}

/* Disable paddings for item full in responsive */
@media screen and (max-width: 767px) {
    .xs-text--right {text-align: right;}
    .xs-text--left {text-align: left;}
    
    /* Why? */
    /*.item--full[class*="p-l"] {padding-left: 0}
    .item--full[class*="p-r"] {padding-right: 0;}*/
    
    .p-l--0 {padding-left: 0;}
    .p-r--0 {padding-right: 0;}
    .p-l--1 {padding-left:  calc(8.33333% * 2);}
    .p-l--2 {padding-left:  calc(16.66667% * 2);}
    .p-l--3 {padding-left:  calc(25% * 2);}
    .p-l--4 {padding-left:  calc(33.33333% * 2);}
    .p-r--1 {padding-right: calc(8.33333% * 2);}
    .p-r--2 {padding-right: calc(16.66667% * 2);}
    .p-r--3 {padding-right: calc(25% * 2);}
    .p-r--4 {padding-right: calc(33.33333% * 2);}

    /* The design has Base 6 in mobile soo... multiply */
    .xs-p-l--0 {padding-left:  0 !important;}
    .xs-p-r--0 {padding-right: 0 !important;}
    .xs-p-l--1 {padding-left:  calc(8.33333% * 2);}
    .xs-p-l--2 {padding-left:  calc(16.66667% * 2);}
    .xs-p-l--3 {padding-left:  calc(25% * 2);}
    .xs-p-l--4 {padding-left:  calc(33.33333% * 2);}
    .xs-p-r--1 {padding-right: calc(8.33333% * 2);}
    .xs-p-r--2 {padding-right: calc(16.66667% * 2);}
    .xs-p-r--3 {padding-right: calc(25% * 2);}
    .xs-p-r--4 {padding-right: calc(33.33333% * 2);}
}
@media screen and (min-width: 768px) {
    .item--half {
        width: calc(50% - (1rem / 2));
        flex: 0 0 calc(50% - (1rem / 2));
    }
    .item--one-third {
        width: calc(33.333% - ((1rem * 2) / 3));
        flex: 0 0 calc(33.333% - ((1rem * 2) / 3));
    }
}
/* Vertical spacing for static pages as About */

/* Do not use percentages, We have to translate to calculations based on the viewport width probably */
@media screen and (min-width: 768px) {
    :root {
        --vertical-spacer: calc( (100svw - calc(3rem * 2) - (1rem * 11) - 30px) / 12);
    }

    .p-t--1 {padding-top: 8.33333%;}
    .p-t--2 {padding-top: 16.66667%;}
    .p-t--3 {padding-top: 25%;}
    .p-t--4 {padding-top: 33.33333%;}

    .p-b--1 {padding-bottom: 8.33333%;}
    .p-b--2 {padding-bottom: 16.66667%;}
    .p-b--3 {padding-bottom: 25%;}
    .p-b--4 {padding-bottom: 33.33333%;}
}


/* Reset aspect-ratios if not given */
[class*="item--"]:not([class*="ratio--"]) .item .elementor-widget-image {
    position: relative !important;
    img {
        width: auto;
        height: auto;
    }
}

.item .elementor-widget-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    img {
        width: 100%;
        height: 100%;
        /* object-fit: cover; */
        object-fit: contain;
    }
}

/************************************/
/*             CONTACT              */
/************************************/

.contact-menus {
    ul.elementor-nav-menu {
        margin: 0;
        padding: 0;
    }
    @media screen and (min-width: 992px) {
        ul.elementor-nav-menu {
            display: flex;
            gap: 1rem;
        }
    }
}

.custom-collapsible__wrapper {
    > .elementor-element.elementor-widget-text-editor {
        > .elementor-widget-container {
            display: grid;
            gap: 2.5em;
        }
    }
    .custom-collapsible__content {
        display: grid !important;
        grid-template-rows: 0fr;
        overflow: hidden;
        transition: grid-template-rows 0.3s;
        > div {
            min-height: 0;
            transition: visibility 0.3s;
            visibility: hidden;
        }

        details > div > .e-con-inner {max-width: none;}
    }
    &.custom-collapsible--active {
        .custom-collapsible__content {
            grid-template-rows: 1fr;
            > div {
                visibility: visible;
            }
        }
    }
    .custom-collapsible__button {
        a {
            opacity: 1;
            transition: opacity 0.3s ease-in-out;
            .elementor-button-content-wrapper {
                position: relative;
                gap: 0.5em;
                padding-bottom: 0.3em;
                &::after {
                    content: "";
                    position: absolute;
                    top: auto;
                    bottom: 0;
                    left: 0;
                    width: calc(100% - (1em + 0.5em));
                    height: 1px;
                    background-color: var(--ast-global-color-0);
                    border-radius: 0;

                    transition: width 0.3s ease-in-out;
                }
                .elementor-button-icon {
                    opacity: 0;
                    transition: opacity 0.3s ease-in-out;
                    svg {
                        width: 1em !important;
                        height: 0.8em !important;
                    }
                }
            }
            &:hover {
                opacity: 0.6;
                .elementor-button-content-wrapper {
                    &::after {
                        width: 100%;
                    }
                    .elementor-button-icon {
                        opacity: 1;
                    }
                }
            }
        }
    }

    .text--inner-title {
        display: inline-block;
        padding-bottom: 0.5em;
    }
}

.projects__list--wrapper {

    /* Aspect ratios */
    .ratio--1-1  .list--item__image {aspect-ratio: 1 / 1;}
    .ratio--16-9 .list--item__image {aspect-ratio: 16 / 9;}
    .ratio--9-16 .list--item__image {aspect-ratio: 9 / 16;}
    .ratio--4-3  .list--item__image {aspect-ratio: 4 / 3;}
    .ratio--3-4  .list--item__image {aspect-ratio: 3 / 4;}

    .list--item__image {
        position: relative;
        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    }

    .projects__list {
        display: flex;
        /* flex-flow: column; */
        flex-flow: wrap;
        /* align-items: center; */
        column-gap: 1rem;
        row-gap: 7.5rem;
    }
    .project__list--item {
        .list--item__image {
            position: relative;
            img {
                width: 100%;
            }
            .awarded-badge {
                position: absolute;
                top: auto;
                left: 0;
                bottom: 0;
                background: #BC9B6E;
                padding: 0.75rem 1rem;
            }
        }
        a {
            text-decoration: none;
            display: grid;
            gap: 0.5rem;
            &:hover {
                color: var(--ast-global-color-0);
            }
        }
        h2 {
            font-size: 1rem;
            margin: 0;
        }
    }
}


/************************************/
/*              GRIDS               */
/************************************/
/* Grid template 1 */
.grid-template__1 {
    @media screen and (max-width: 767px) {
        grid-template-columns: 1fr !important;
        gap: 6rem !important;
        grid-template-rows: auto !important;
        &:not(.elementor-element-edit-mode) {
            > div:nth-child(1) {
                padding-right: calc(8.33333% * 2);
                & .item {
                    aspect-ratio: 4 / 3;
            
                }
            }
            > div:nth-child(2) {
                padding-left: calc(25% * 2);
                & .item {
                    aspect-ratio: 3 / 4;
                }
            }
            > div:nth-child(3) {
                padding-right: calc(16.667% * 2);
                & .item {
                    aspect-ratio: 3 / 4;
                }
            }
            > div:nth-child(4) {
                & .item {
                    aspect-ratio: 16 / 9;
                }
            }
            > div:nth-child(5) {
                padding-left: calc(8.333% * 2);
                & .item {
                    aspect-ratio: 4 / 3;
                }
            }
        }
        &.elementor-element-edit-mode {
            > div[data-element_type="container"] {
                padding-right: calc(8.33333% * 2);
                & .item {
                    aspect-ratio: 4 / 3;
                }
            }
            > div[data-element_type="container"] +
            div[data-element_type="container"]  {
                padding-left: calc(25% * 2);
                padding-right: 0;
                & .item {
                    aspect-ratio: 3 / 4;
                }
            }
            > div[data-element_type="container"] +
            div[data-element_type="container"] +
            div[data-element_type="container"] {
                padding-right: calc(16.667% * 2);
                padding-left: 0;
                & .item {
                    aspect-ratio: 3 / 4;
                }
            }
            > div[data-element_type="container"] +
            div[data-element_type="container"] +
            div[data-element_type="container"] +
            div[data-element_type="container"] {
                padding-left: 0;
                padding-right: 0;
                & .item {
                    aspect-ratio: 16 / 9;
                }
            }
            > div[data-element_type="container"] +
            div[data-element_type="container"] +
            div[data-element_type="container"] +
            div[data-element_type="container"] +
            div[data-element_type="container"] {
                padding-left: calc(8.33333% * 2);
                padding-right: 0;
                & .item {
                    aspect-ratio: 4 / 3;
                }
            }
        }
    }
    @media screen and (min-width: 768px) {
        &:not(.elementor-element-edit-mode) {
            gap: 1rem;
            /* total width - padding - gap * n of gaps - hack for the scrollbar space (3px idkw) / number of items */
            grid-template-rows: repeat(10, calc( (100svw - calc(3rem * 2) - (1rem * 11) - 30px) / 12)) !important;
            > div .item {
                position: absolute;
                width: 100%;
                height: 100%;
            } 
            > div:nth-child(1) {
                grid-column: 1 / span 4;
                grid-row: 1 / span 3;
            }
            > div:nth-child(2) {
                grid-column: 6 / span 2;
                grid-row: 3 / span 3;
            }
            > div:nth-child(3) {
                grid-column: 9 / span 4;
                grid-row: 1 / span 6;
            }
            > div:nth-child(4) {
                grid-column: 2 / span 6;
                grid-row: 8 / span 3;
            }
            > div:nth-child(5) {
                grid-column: 9 / span 4;
                grid-row: 8 / span 3;
            }
        }
        &.elementor-element-edit-mode {
            gap: 1rem;
            /* total width - padding - gap * n of gaps - hack for the scrollbar space / number of items */
            grid-template-rows: repeat(10, calc( (100dvw - calc(3rem * 2) - (1rem * 11) - 15px) / 12)) !important;
            .item {
                position: absolute;
                width: 100%;
                height: 100%;
            } 
            > div[data-element_type="container"] {
                grid-column: 1 / span 4;
                grid-row: 1 / span 3;
            }
            > div[data-element_type="container"] +
            div[data-element_type="container"]  {
                grid-column: 6 / span 2;
                grid-row: 3 / span 3;
            }
            > div[data-element_type="container"] +
            div[data-element_type="container"] +
            div[data-element_type="container"] {
                grid-column: 9 / span 4;
                grid-row: 1 / span 6;
            }
            > div[data-element_type="container"] +
            div[data-element_type="container"] +
            div[data-element_type="container"] +
            div[data-element_type="container"] {
                grid-column: 2 / span 6;
                grid-row: 8 / span 5;
            }
            > div[data-element_type="container"] +
            div[data-element_type="container"] +
            div[data-element_type="container"] +
            div[data-element_type="container"] +
            div[data-element_type="container"] {
                grid-column: 9 / span 4;
                grid-row: 8 / span 3;
            }
        }
    }
}

/* Grid template 2 */
.grid-template__2 {
    @media screen and (max-width: 767px) {
        grid-template-columns: 1fr !important;
        gap: 6rem !important;
        grid-template-rows: auto !important;
        > div:nth-child(1) {
            padding-right: calc(16.667% * 2);
            & .item {
                aspect-ratio: 3 / 4;
            }
        }
        > div:nth-child(2) {
            padding-left: calc(25% * 2);
            & .item {
                aspect-ratio: 3 / 4;
            }
        }
        > div:nth-child(3) {
            padding-right: calc(16.667% * 2);
            & .item {
                aspect-ratio: 3 / 4;
            }
        }
        > div:nth-child(4) {
            padding-left: calc(8.333% * 2);
            & .item {
                aspect-ratio: 4 / 3;
            }
        }
        > div:nth-child(5) {
            padding-right: calc(16.667% * 2);
            & .item {
                aspect-ratio: 3 / 4;
            }
        }
    }
    @media screen and (min-width: 768px) {
        &:not(.elementor-element-edit-mode) {
            gap: 1rem;
            /* total width - padding - gap * n of gaps - hack for the scrollbar space / number of items */
            grid-template-rows: repeat(11, calc( (100dvw - calc(3rem * 2) - (1rem * 11) - 15px) / 12)) !important;
    
            > div .item {
                position: absolute;
                width: 100%;
                height: 100%;
            } 
            > div:nth-child(1) {
                grid-column: 1 / span 4;
                grid-row: 2 / span 6;
            }
            > div:nth-child(2) {
                grid-column: 6 / span 2;
                grid-row: 4 / span 3;
            }
            > div:nth-child(3) {
                grid-column: 9 / span 4;
                grid-row: 1 / span 6;
            }
            > div:nth-child(4) {
                grid-column: 2 / span 4;
                grid-row: 9 / span 3;
            }
            > div:nth-child(5) {
                grid-column: 8 / span 3;
                grid-row: 8 / span 4;
            }
        }
        &.elementor-element-edit-mode {
            gap: 1rem;
            /* total width - padding - gap * n of gaps - hack for the scrollbar space / number of items */
            grid-template-rows: repeat(10, calc( (100dvw - calc(3rem * 2) - (1rem * 11) - 15px) / 12)) !important;
            .item {
                position: absolute;
                width: 100%;
                height: 100%;
            } 
    
            > div[data-element_type="container"] {
                grid-column: 1 / span 4;
                grid-row: 2 / span 6;
            }
            > div[data-element_type="container"] +
            div[data-element_type="container"]  {
                grid-column: 6 / span 2;
                grid-row: 4 / span 3;
            }
            > div[data-element_type="container"] +
            div[data-element_type="container"] +
            div[data-element_type="container"] {
                grid-column: 9 / span 4;
                grid-row: 1 / span 6;
            }
            > div[data-element_type="container"] +
            div[data-element_type="container"] +
            div[data-element_type="container"] +
            div[data-element_type="container"] {
                grid-column: 2 / span 4;
                grid-row: 9 / span 3;
            }
            > div[data-element_type="container"] +
            div[data-element_type="container"] +
            div[data-element_type="container"] +
            div[data-element_type="container"] +
            div[data-element_type="container"] {
                grid-column: 8 / span 3;
                grid-row: 8 / span 4;
            }
        }
    }
}

/* Simple scrollable gallery */
.gallery-squared--overflow {
    > div {
        overflow-x: auto;
        display: flex !important;
        flex-flow: row !important;
        gap: 1rem !important;


        scroll-snap-type: x  mandatory;
        > div {
            flex-flow: column !important;
            min-width: 166px;
            gap: 1rem !important;

            scroll-snap-align: start;
        }
    }
    .item {
        aspect-ratio: 1 / 1;   
    }

    scrollbar-width: 1px;


}

.custom-gallery__drawings,
.custom-gallery__press {
    .gallery {
        overflow-x: auto;
        display: flex !important;
        flex-flow: row !important;
        gap: 1rem !important;

        scroll-snap-type: x  mandatory;

        > * {
            scroll-snap-align: start;
        }
        
        figure {
            padding: 0;
            max-width: none !important;
            width: auto;
            img {
                height: 160px;
                width: auto;
                max-width: unset;
            }
            figcaption {
                border: 0;
                text-align: center;
                padding: 0.5em 0 0 0;
                font-size: 1rem;
                
            }
        }
    }
}
.custom-gallery__press {
    a {
        .thumb-link__wrapper {
            position: relative;
            display: inline-block;
            .external-link {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.35);
                opacity: 0;

                transition: all 0.2s ease-in;
                svg {
                    width: 2rem;
                    height: auto;
                    position: absolute;
                    right: 1em;
                    top: 1em;

                    transform: translateY(-150%);

                    transition: transform 0.3s ease-in-out;

                    * {fill: #fff;}
                }
            }
        }
        &:hover {
            .external-link {
                opacity: 1;
                svg {
                    transform: translateY(0);
                }
            }
        }
    }
}

/* Template 1 as imgs gallery */
.grid-template__1--gallery {

    .elementor-gallery__container.e-gallery-grid {
        > .e-gallery-item {
            position: relative;
            .elementor-gallery-item__image {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                padding: 0 !important;
            }
        }
        > .e-gallery-item:nth-child(n+5) {
            display: none;
        }
    }
    @media screen and (max-width: 767px) {
        .elementor-gallery__container.e-gallery-grid {
            grid-template-columns: 1fr !important;
            gap: 6rem !important;
            grid-template-rows: auto !important;
            > .e-gallery-item:nth-child(1) {
                aspect-ratio: 3 / 4;
                margin-right: calc(16.667% * 2);
                /* .e-gallery-image {
                    aspect-ratio: 3 / 4;
                } */
            }
            > .e-gallery-item:nth-child(2) {
                /* margin-left: calc(25% * 2); */
                aspect-ratio: 4 / 3;
                margin-left: calc(8.333% * 2);
                /* .e-gallery-image {
                    aspect-ratio: 3 / 4;
                } */
            }
            > .e-gallery-item:nth-child(3) {
                /* margin-right: calc(16.667% * 2); */
                margin-right: calc(8.333% * 2);
                aspect-ratio: 4 / 3;
                /* .e-gallery-image {
                    aspect-ratio: 3 / 4;
                } */
            }
            > .e-gallery-item:nth-child(4) {
                /* margin-left: calc(8.333% * 2); */
                margin-left: 0;
                aspect-ratio: 16 / 9;
                /* .e-gallery-image {
                    aspect-ratio: 16 / 9;
                } */
            }
            > .e-gallery-item:nth-child(n+5) {
                display: none;
            }
        }
    }
    @media screen and (min-width: 768px) {
        .elementor-gallery__container.e-gallery-grid {
            /* total width - padding - gap * n of gaps - hack for the scrollbar space (30px idkw) / number of items */
            gap: 1rem;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: repeat(11, calc( (100svw - calc(3rem * 2) - (1rem * 11) - 30px) / 12)) !important;

            > .e-gallery-item:nth-child(1) {
                grid-column: 2 / span 4;
                grid-row: 1 / span 5;
            }
            > .e-gallery-item:nth-child(2) {
                grid-column: 7 / span 5;
                grid-row: 2 / span 3;
            }
            > .e-gallery-item:nth-child(3) {
                grid-column: 1 / span 5;
                grid-row: 8 / span 5;
            }
            > .e-gallery-item:nth-child(4) {
                grid-column: 7 / span 6;
                grid-row: 7 / span 4;
            }
            /*> .e-gallery-item:nth-child(5) {
                grid-column: 9 / span 4;
                grid-row: 8 / span 3;
            }*/
        }
    }
}

.grid-template__2--gallery {
    .elementor-gallery__container.e-gallery-grid {
        > .e-gallery-item {
            position: relative;
            .elementor-gallery-item__image {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                padding: 0 !important;
            }
        }
        > .e-gallery-item:nth-child(n+6) {
            display: none;
        }
    }
    @media screen and (max-width: 767px) {
        .elementor-gallery__container.e-gallery-grid {
            grid-template-columns: 1fr !important;
            gap: 6rem !important;
            grid-template-rows: auto !important;
            > .e-gallery-item:nth-child(1) {
                margin-right: calc(8.33333% * 2);
                aspect-ratio: 4 / 3;
                /* .e-gallery-image {
                    aspect-ratio: 4 / 3;
                } */
            }
            > .e-gallery-item:nth-child(2) {
                margin-left: calc(25% * 2);
                aspect-ratio: 3 / 4;
                /* .e-gallery-image {
                    aspect-ratio: 3 / 4;
                } */
            }
            > .e-gallery-item:nth-child(3) {
                margin-right: calc(16.667% * 2);
                aspect-ratio: 3 / 4;
                /* .e-gallery-image {
                    aspect-ratio: 3 / 4;
                } */
            }
            > .e-gallery-item:nth-child(4) {
                margin-left: calc(8.333% * 2);
                aspect-ratio: 16 / 9;
                /* .e-gallery-image {
                    aspect-ratio: 16 / 9;
                } */
            }
            > .e-gallery-item:nth-child(5) {
                margin-left: calc(8.333% * 2);
                aspect-ratio: 4 / 3;
                /* .e-gallery-image {
                    aspect-ratio: 4 / 3;
                } */
            }
            > .e-gallery-item:nth-child(n+6) {
                display: none;
            }
        }
    }
    @media screen and (min-width: 768px) {
        .elementor-gallery__container.e-gallery-grid {
            /* total width - padding - gap * n of gaps - hack for the scrollbar space (30px idkw) / number of items */
            gap: 1rem;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: repeat(10, calc( (100svw - calc(3rem * 2) - (1rem * 11) - 30px) / 12)) !important;

            > .e-gallery-item:nth-child(1) {
                grid-column: 1 / span 4;
                grid-row: 1 / span 3;
            }
            > .e-gallery-item:nth-child(2) {
                grid-column: 6 / span 2;
                grid-row: 3 / span 3;
            }
            > .e-gallery-item:nth-child(3) {
                grid-column: 9 / span 4;
                grid-row: 1 / span 6;
            }
            > .e-gallery-item:nth-child(4) {
                grid-column: 2 / span 6;
                grid-row: 8 / span 3;
            }
            > .e-gallery-item:nth-child(5) {
                grid-column: 9 / span 4;
                grid-row: 8 / span 3;
            }
        }
    }
}

.grid-template__3--gallery {
    .elementor-gallery__container.e-gallery-grid {
        > .e-gallery-item {
            position: relative;
            .elementor-gallery-item__image {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                padding: 0 !important;
            }
        }
        > .e-gallery-item:nth-child(n+6) {
            display: none;
        }
    }
    @media screen and (max-width: 767px) {
        .elementor-gallery__container.e-gallery-grid {
            grid-template-columns: 1fr !important;
            gap: 6rem !important;
            grid-template-rows: auto !important;
            > .e-gallery-item:nth-child(1) {
                margin-right: calc(16.667% * 2);
                aspect-ratio: 3 / 4;
                /* .e-gallery-image {
                    aspect-ratio: 3 / 4;
                } */
            }
            > .e-gallery-item:nth-child(2) {
                margin-left: calc(25% * 2);
                aspect-ratio: 3 / 4;
                /* .e-gallery-image {
                    aspect-ratio: 3 / 4;
                } */
            }
            > .e-gallery-item:nth-child(3) {
                margin-right: calc(16.667% * 2);
                aspect-ratio: 3 / 4;
                /* .e-gallery-image {
                    aspect-ratio: 3 / 4;
                } */
            }
            > .e-gallery-item:nth-child(4) {
                margin-left: calc(8.333% * 2);
                aspect-ratio: 4 / 3;
                /* .e-gallery-image {
                    aspect-ratio: 4 / 3;
                } */
            }
            > .e-gallery-item:nth-child(5) {
                margin-left: calc(16.667% * 2);
                aspect-ratio: 3 / 4;
                /* .e-gallery-image {
                    aspect-ratio: 3 / 4;
                } */
            }
            > .e-gallery-item:nth-child(n+6) {
                display: none;
            }
        }
    }
    @media screen and (min-width: 768px) {
        .elementor-gallery__container.e-gallery-grid {
            /* total width - padding - gap * n of gaps - hack for the scrollbar space (30px idkw) / number of items */
            gap: 1rem;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: repeat(10, calc( (100svw - calc(3rem * 2) - (1rem * 11) - 30px) / 12)) !important;

            > .e-gallery-item:nth-child(1) {
                grid-column: 1 / span 4;
                grid-row: 2 / span 6;
            }
            > .e-gallery-item:nth-child(2) {
                grid-column: 6 / span 2;
                grid-row: 4 / span 3;
            }
            > .e-gallery-item:nth-child(3) {
                grid-column: 9 / span 4;
                grid-row: 1 / span 6;
            }
            > .e-gallery-item:nth-child(4) {
                grid-column: 2 / span 4;
                grid-row: 9 / span 3;
            }
            > .e-gallery-item:nth-child(5) {
                grid-column: 8 / span 3;
                grid-row: 8 / span 4;
            }
        }
    }
}

.grid-template__4--gallery {
    .elementor-gallery__container.e-gallery-grid {
        > .e-gallery-item {
            position: relative;
            .elementor-gallery-item__image {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                padding: 0 !important;
            }
        }
        > .e-gallery-item:nth-child(n+5) {
            display: none;
        }
    }
    @media screen and (max-width: 767px) {
        .elementor-gallery__container.e-gallery-grid {
            grid-template-columns: 1fr !important;
            gap: 6rem !important;
            grid-template-rows: auto !important;
            > .e-gallery-item:nth-child(1) {
                margin-left: calc(8.333% * 2);
                aspect-ratio: 16 / 9;
            }
            > .e-gallery-item:nth-child(2) {
                margin-right: calc(16.667% * 2);
                aspect-ratio: 1 / 1;
            }
            > .e-gallery-item:nth-child(3) {
                margin-left: calc(16.667% * 2);
                /* margin-left: calc(8.333% * 2); */
                aspect-ratio: 9 / 16;
            }
            > .e-gallery-item:nth-child(4) {
                margin-right: calc(16.667% * 2);
                aspect-ratio: 1 / 1;
            }
            /*> .e-gallery-item:nth-child(5) {
                margin-left: calc(16.667% * 2);
                aspect-ratio: 3 / 4;
            }*/
            > .e-gallery-item:nth-child(n+5) {
                display: none;
            }
        }
    }
    @media screen and (min-width: 768px) {
        .elementor-gallery__container.e-gallery-grid {
            gap: 1rem;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: repeat(13, calc( (100svw - calc(3rem * 2) - (1rem * 11) - 30px) / 12)) !important;

            > .e-gallery-item:nth-child(1) {
                grid-column: 1 / span 4;
                grid-row: 2 / span 2;
            }
            > .e-gallery-item:nth-child(2) {
                grid-column: 9 / span 4;
                grid-row: 1 / span 4;
            }
            > .e-gallery-item:nth-child(3) {
                grid-column: 2 / span 4;
                grid-row: 7 / span 7;
            }
            > .e-gallery-item:nth-child(4) {
                grid-column: 8 / span 4;
                grid-row: 8 / span 4;
            }
            /*> .e-gallery-item:nth-child(5) {
                grid-column: 8 / span 3;
                grid-row: 8 / span 4;
            }*/
        }
    }
}


.grid-template__5--gallery {
    .elementor-gallery__container.e-gallery-grid {
        > .e-gallery-item {
            position: relative;
            .elementor-gallery-item__image {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                padding: 0 !important;
            }
        }
        > .e-gallery-item:nth-child(n+4) {
            display: none;
        }
    }
    @media screen and (max-width: 767px) {
        .elementor-gallery__container.e-gallery-grid {
            grid-template-columns: 1fr !important;
            gap: 6rem !important;
            grid-template-rows: auto !important;
            > .e-gallery-item:nth-child(1) {
                /* margin-left: calc(8.333% * 2); */
                aspect-ratio: 16 / 9;
            }
            > .e-gallery-item:nth-child(2) {
                /* margin-right: calc(16.667% * 2); */
                margin-right: calc(8.333% * 2);
                aspect-ratio: 4 / 3;
            }
            > .e-gallery-item:nth-child(3) {
                margin-left: calc(16.667% * 2);
                aspect-ratio: 1 / 1;
                /* margin-left: calc(8.333% * 2); */
                /* aspect-ratio: 9 / 16; */
            }
            /* > .e-gallery-item:nth-child(n+5) {
                display: none;
            } */
        }
    }
    @media screen and (min-width: 768px) {
        .elementor-gallery__container.e-gallery-grid {
            gap: 1rem;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: repeat(12, calc( (100svw - calc(3rem * 2) - (1rem * 11) - 30px) / 12)) !important;

            > .e-gallery-item:nth-child(1) {
                grid-column: 3 / span 8;
                grid-row: 1 / span 5;
            }
            > .e-gallery-item:nth-child(2) {
                grid-column: 2 / span 4;
                grid-row: 8 / span 3;
                transform: translateY(10%);
            }
            > .e-gallery-item:nth-child(3) {
                grid-column: 8 / span 4;
                grid-row: 8 / span 4;
            }
        }
    }
}


.project-collapsible__wrapper {
    > div {
        padding-bottom: 0 !important;
        &.elementor-widget-n-accordion {
            > .elementor-widget-container {
                padding-top: 0 !important;
                border: 0 none !important;
            }
            details {
                border-top: 1px solid var(--ast-global-color-6);
                > summary {
                    padding-block: 20px;    
                }
            }
        }
    }
}

.project__related {
    article.elementor-post {
        flex-flow: column-reverse;
        .elementor-post__text {
            padding: 3rem 1rem;
            &::before {
                content: 'Next project';
                color: var(--ast-global-color-1);
            }
            .elementor-post__title {
                font-size: 2rem;
            }
        }
        .elementor-post__thumbnail__link {margin: 0 !important;}
    }
    @media screen and (min-width: 768px) {
        article.elementor-post {
            .elementor-post__text {
                padding: 4rem 2rem;
                .elementor-post__title {
                    font-size: 3rem;
                }
            }
        }
    }
    @media screen and (min-width: 992px) {
        article.elementor-post {
            .elementor-post__text {
                padding: 5rem 3rem;
                .elementor-post__title {
                    font-size: 4rem;
                }
            }
        }
    }
}

.awarded-projects__list--wrapper {
    .awarded-projects__list {
        text-align: center;
    }
    .award__item a {
        color: var(--ast-global-color-1);
        text-decoration: none;
        &:hover {
            color: var(--ast-global-color-0);
        }
    }
}

.custom-collapsible__content {
    .awarded-projects__list--wrapper {
        .awarded-projects__list {
            text-align: left;
        }
    }
}

/* View transition test */
@view-transition {
    navigation: auto;
}
/* View transition test */

/* single footer legals filters */

.project__footer-legals {
    /* position: relative; */
    background: transparent;
    mix-blend-mode: exclusion;
    .elementor-nav-menu > li > a {
        color: #fff;
    }
}


.fn-projects-counter {
    display: flex !important;
    column-gap: 0 !important;
    > span {
        color: var(--ast-global-color-1);
    }
}

.elementor-widget-off-canvas .e-off-canvas {transition: all 0.2s ease-in-out;}
.elementor-widget-off-canvas .e-off-canvas__overlay {

}


.single-proyecto .section__hero  {
    .elementor-background-video-container {
        transition: opacity 1s ease-in-out;
        /* opacity: 0; */
        &:has(iframe[src*="vimeo"]) {
            opacity: 0;
            &[data-vimeo-initialized="true"] {
                opacity: 1;
            }
        }
    }
}

.single_hero--img {
    z-index: -1;
}

/* @keyframes offcanvasOverlay {
    0% {

    }
}*/


/* Not working for any reason....  */
::-webkit-scrollbar {
    height: 2px;
    width: 2px;
}
::-webkit-scrollbar-track {
    width: 4px;
    height: 4px;
    /* border-radius: 0;
    background: #eeeeee; */
}
::-webkit-scrollbar-thumb {
    background-color: var(--ast-global-color-6);
    border-radius: 2px;
    /* border: 1px solid var(--ast-global-color-0); */
}

/* Fix items containers */

.elementor-element.e-parent:has( > div[class*="item"]) {
    padding-inline: 3rem;
    @media (max-width: 767px) {
        padding-inline: 1rem;
    }
}